/* Preview: full-page radar for the homepage. Same origin as the existing sweep (--radar-x/--radar-y). */
body.home{--radar-turn:100s;--radar-x:36%;--radar-y:18%}
@media (max-width:63.99rem){body.home{--radar-x:34%;--radar-y:14%}}
body.home .listen-sweep,body.home .listen-rings{display:none!important}
body.home .mp-radar{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
/* Range rings and bearing lines: fixed, very faint, fading with distance. */
body.home .mp-radar-grid{position:absolute;inset:0;
  background:
    repeating-radial-gradient(circle at var(--radar-x) var(--radar-y),transparent 0 calc(16vmax - 1px),rgba(139,214,204,.10) calc(16vmax - 1px) 16vmax),
    linear-gradient(rgba(139,214,204,.06),rgba(139,214,204,.06)) var(--radar-x) 0/1px 100% no-repeat,
    linear-gradient(rgba(139,214,204,.06),rgba(139,214,204,.06)) 0 var(--radar-y)/100% 1px no-repeat;
  -webkit-mask-image:radial-gradient(circle at var(--radar-x) var(--radar-y),#000 0,#000 30vmax,rgba(0,0,0,.35) 120vmax);
  mask-image:radial-gradient(circle at var(--radar-x) var(--radar-y),#000 0,#000 30vmax,rgba(0,0,0,.35) 120vmax)}
/* Rotating beam: sharp leading edge, long fading afterglow behind it. Big enough to reach every corner. */
/* Rotating beam (2026-11-14): only the visible 90deg trail quadrant is a layer. Its bottom-right corner is
   the radar origin and the rotation pivot, so the GPU texture is 110vmax square (a quarter of the old
   290vmax square) and still reaches every viewport corner. Compositor-only CSS rotation. The faint first
   20deg of the old 110deg tail (alpha under 1%) is outside this quadrant. */
body.home .mp-radar-beam{position:absolute;left:calc(var(--radar-x) - 110vmax);top:calc(var(--radar-y) - 110vmax);width:110vmax;height:110vmax;
  margin:0;transform-origin:100% 100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  background:conic-gradient(from 0deg at 100% 100%,
    transparent 0deg,transparent 250deg,
    rgba(139,214,204,.015) 290deg,rgba(139,214,204,.05) 330deg,rgba(180,226,220,.11) 352deg,
    rgba(255,214,150,.20) 359.2deg,rgba(255,231,190,.42) 359.8deg,transparent 360deg);
  will-change:transform;contain:strict;
  transform:rotate(90deg);animation:mp-sweep var(--radar-turn) linear calc(var(--radar-turn) * -.25) infinite}
@keyframes mp-sweep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes mp-sweep-back{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
body.home .mp-radar-core{position:absolute;left:var(--radar-x);top:var(--radar-y);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:rgba(255,197,106,.8);box-shadow:0 0 0 4px rgba(255,197,106,.12),0 0 18px rgba(255,197,106,.45)}
@media (prefers-reduced-motion:reduce){body.home .mp-radar-beam{animation:none;transform:rotate(60deg)}}

/* Pins light only when the beam's leading edge crosses them (assets/js/radar-sync.js), then fade.
   2026-11-14: the lit look (gold pill, dark number, glow, gold name) is a pre-painted overlay whose OPACITY
   fades (compositor), instead of transitioning background/box-shadow/colour, which repainted every frame. */
body.home .pulse-pin.is-live .ct,body.home .pulse-pin.is-live .nm{animation:none!important;transition:none}
body.home .pulse-pin .ct,body.home .pulse-pin .nm{position:relative}
body.home .pulse-pin .ct::after{content:attr(data-n);position:absolute;inset:-1px;display:flex;align-items:center;justify-content:center;
  border-radius:999px;background:var(--sun);color:var(--on-sun);
  box-shadow:0 0 0 6px rgba(255,197,106,.2),0 0 18px rgba(255,197,106,.7);
  opacity:0;transition:opacity 2.2s ease-out;will-change:opacity;pointer-events:none}
body.home .pulse-pin .nm::after{content:attr(data-nm);position:absolute;left:0;top:0;white-space:nowrap;color:var(--sun1);
  opacity:0;transition:opacity 2.2s ease-out;will-change:opacity;pointer-events:none}
body.home .pulse-pin.is-live.mp-lit .ct::after,body.home .pulse-pin.is-live.mp-lit .nm::after{opacity:1;transition-duration:.25s}
/* Staged homepage reveal, smoothed 2026-11-10. Held on navy until the map image has decoded (max 3s), then one
   continuous, gently staggered settle: opacity plus a small translate only (the independent `translate`
   property, so existing transforms are untouched), long ease-out, fill `backwards` so nothing keeps a
   transform afterwards. Order: map 0s, header .1s, label .25s, radar + lit .45s, copy lines .55-.87s,
   pins 1s, lower sections 1.2s. Reduced motion: no mp-stage class, so none of this runs. */
@keyframes mp-stage-in{from{opacity:0}to{opacity:1}}
@keyframes mp-rise-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes mp-drop-in{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}
body.home{--mp-ease:cubic-bezier(.22,1,.36,1)}
/* Map kept quiet behind text: final strength .4 (with or without the staged fade). */
body.home::before{opacity:.4;background-image:url("/assets/maps/lakes.svg?v=opt-20261114")}
@keyframes mp-map-in{from{opacity:0}to{opacity:.4}}
html.mp-stage body.home::before{animation:mp-map-in 1.2s var(--mp-ease) backwards}
html.mp-stage body.home .map-area-label{animation:mp-stage-in 1.1s var(--mp-ease) .25s backwards}
html.mp-stage body.home .mp-radar{animation:mp-stage-in 1.2s var(--mp-ease) .45s backwards}
html.mp-stage body.home .site-head{animation:mp-stage-in 1s var(--mp-ease) .1s backwards}
html.mp-stage body.home .pulse-hero-copy{animation:none}
html.mp-stage body.home .pulse-hero-copy>*{animation:mp-rise-in 1.1s var(--mp-ease) .55s backwards}
html.mp-stage body.home .pulse-hero-copy>:nth-child(2){animation-delay:.63s}
html.mp-stage body.home .pulse-hero-copy>:nth-child(3){animation-delay:.71s}
html.mp-stage body.home .pulse-hero-copy>:nth-child(4){animation-delay:.79s}
html.mp-stage body.home .pulse-hero-copy>:nth-child(n+5){animation-delay:.87s}
html.mp-stage body.home .pulse-map,html.mp-stage body.home .pulse-towns{animation:mp-stage-in 1.1s var(--mp-ease) 1s backwards}
html.mp-stage body.home main>section:not(.hero),html.mp-stage body.home footer{animation:mp-rise-in 1.2s var(--mp-ease) 1.2s backwards}
html.mp-stage:not(.mp-go) body.home::before,html.mp-stage:not(.mp-go) body.home *{animation-play-state:paused!important}
/* Homepage lower sections: lifted from #081B2B to Pulse navy #0E2846 (same overlay strengths). */
body.home main>.section{background:linear-gradient(rgba(14,40,70,.86),rgba(14,40,70,.90)),url('/assets/maps/lakes.svg?v=opt-20261114') center/cover fixed}
/* Homepage date in the wordmark's Amarante, Pulse yellow */
body.home .pulse-longdate{font-family:"Fraunces",Georgia,serif;font-weight:500;color:var(--sun1);font-size:1.35rem;letter-spacing:.02em}
/* Homepage opening: desktop may fill the first screen with stable svh.
   Mobile: no viewport min-height; content top-aligns under the header (URL-bar safe). */
body.home main>.hero{box-sizing:border-box;min-height:0;justify-content:flex-start}
@media(min-width:64rem){
  body.home{--mp-head:80px}
  body.home main>.hero{min-height:calc(100vh - var(--mp-head,80px));min-height:calc(100svh - var(--mp-head,80px))}
}
/* Hero month calendar: fine rules on the map, no panel. Amarante title, cream numbers, gold event marks. */
body.home .mp-cal{margin:1.6rem 0 0;max-width:22rem;color:var(--cream,#f5efe3)}
body.home .mp-cal-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding-bottom:.55rem;border-bottom:1px solid rgba(247,199,120,.28)}
body.home .mp-cal-title{margin:0;font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:1.3rem;letter-spacing:.01em;color:var(--sun1,#f7c778)}
body.home .mp-cal-nav{width:44px;height:44px;border-radius:50%;border:1px solid rgba(127,211,200,.35);background:transparent;color:#cfe7e2;font-size:1.5rem;line-height:1;cursor:pointer}
body.home .mp-cal-nav:hover{border-color:rgba(247,199,120,.7);color:var(--sun1,#f7c778)}
body.home .mp-cal-row{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
body.home .mp-cal-wd{padding:.5rem 0 .25rem}
body.home .mp-cal-wd span{text-align:center;font-size:.72rem;letter-spacing:.14em;color:#7fd3c8;font-weight:600}
body.home .mp-cal-day{position:relative;width:100%;min-height:44px;border:0;border-radius:50%;background:transparent;color:#f5efe3;font:inherit;font-size:1rem;font-variant-numeric:tabular-nums;cursor:pointer;aspect-ratio:1/1;max-height:48px}
body.home .mp-cal-day.is-past{color:rgba(245,239,227,.5)}
body.home .mp-cal-day.has-ev::after{content:"";position:absolute;left:50%;bottom:6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--sun1,#f7c778)}
body.home .mp-cal-day:hover{background:rgba(247,199,120,.12)}
body.home .mp-cal-day.is-today{box-shadow:inset 0 0 0 1.5px #7fd3c8;color:#fff}
body.home .mp-cal-day.is-picked{background:var(--sun1,#f7c778);color:#0E2846;font-weight:700}
body.home .mp-cal-day.is-picked::after{background:#0E2846}
body.home .mp-cal-day:focus-visible,body.home .mp-cal-nav:focus-visible{outline:2px solid #f7c778;outline-offset:2px}
body.home .mp-cal-day{min-height:40px;max-height:42px}
body.home .mp-cal{margin-top:1.25rem}
body.home .mp-cal{margin-left:auto;margin-right:auto}
@media(min-width:64rem){body.home .mp-cal{position:static;width:min(30rem,100%);max-width:none;margin:1.25rem 0 0}body.home .mp-cal-title{font-size:1.65rem}body.home .mp-cal-day{min-height:44px;max-height:44px;aspect-ratio:auto;border-radius:22px;font-size:1.15rem}body.home .mp-cal-wd span{font-size:.8rem}body.home .mp-cal-row{gap:4px}}
body.home .pulse-clock{font-size:clamp(1.3rem,2.6vw,1.9rem);font-family:"Fraunces",Georgia,serif;font-weight:500;letter-spacing:.03em;font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}
body.home .pulse-clock .dg{display:inline-block;width:.62em;text-align:center}


/* ---- Locked homepage landing (Nov 9 2026) ---- */
body.home-landing{overflow:hidden;height:100%;}
html:has(body.home-landing){overflow:hidden;height:100%;}
body.home-landing .site-foot{display:none!important}
body.home-landing main{min-height:0}
body.home-landing .pulse-landing.pulse-hero{
  min-height:calc(100vh - var(--head-h,64px));
  min-height:calc(100svh - var(--head-h,64px));
  box-sizing:border-box;
  overflow:hidden;
}
@media (min-width:64rem){
  body.home-landing .pulse-landing.pulse-hero{
    min-height:calc(100svh - var(--head-h,84px));
  }
  body.home-landing .mp-cal{
    margin:1.25rem 0 0; width:min(30rem,100%); max-width:none;
  }
  body.home-landing .mp-cal-title{font-size:1.65rem}
  body.home-landing .mp-cal-day{min-height:44px;max-height:44px;aspect-ratio:auto;border-radius:22px;font-size:1.15rem}
}
/* Mobile homepage only (<64rem): hide calendar, dock hero text bottom-left,
   show accurate area pins above the text with the same radar glow as desktop.
   Desktop rules above are untouched. */
@media (max-width:63.99rem){
  body.home-landing{overflow:hidden;height:100%}
  html:has(body.home-landing){overflow:hidden;height:100%}
  body.home-landing .pulse-landing.pulse-hero{
    min-height:calc(100svh - var(--head-h,64px));
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding-bottom:0;
    overflow:hidden;
  }
  body.home-landing .pulse-hero-copy{
    position:relative;
    z-index:4;
    margin-top:auto;
    width:100%;
    max-width:100%;
    text-align:left;
    padding-top:.75rem;
    padding-left:max(1rem, env(safe-area-inset-left, 0px));
    padding-right:1rem;
    padding-bottom:max(1.35rem, calc(env(safe-area-inset-bottom, 0px) + .85rem));
    background:linear-gradient(180deg, transparent 0%, rgba(14,40,70,.28) 35%, rgba(14,40,70,.42) 100%);
  }
  body.home-landing .pulse-hero #mp-cal,
  body.home-landing .mp-cal,
  body.home-landing #mp-mcal,
  .mp-mcal{
    display:none!important;
  }
  /* Map crop + pins: pulse-map is a fixed viewport stage; body::before
     paints the same lakes.svg crop via --mp-map-size/--mp-map-pos from v2.js. */
  body.home-landing::before{
    background-image:url("/assets/maps/lakes-full.svg?v=opt-20261114");
    background-size:var(--mp-map-size, cover);
    background-position:var(--mp-map-pos, center);
  }
  body.home-landing .pulse-map{
    display:block!important;
    position:fixed;
    inset:0;
    z-index:2;
    min-height:0;
    max-height:none;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    background:transparent;
    pointer-events:none;
    grid-area:auto;
  }
  body.home-landing .pulse-towns{
    display:block!important;
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
  }
  body.home-landing .pulse-pin{
    pointer-events:auto;
    z-index:3;
  }
  body.home-landing .pulse-pin .nm{
    font-size:.62rem;
    letter-spacing:.07em;
    text-shadow:0 1px 8px rgba(14,40,70,.75);
  }
  body.home-landing .pulse-pin .ct{
    min-width:1.45rem;
    height:1.45rem;
    font-size:.85rem;
  }
  /* Label clears nav, pins, and the bottom text block */
  body.home-landing .map-area-label{
    top:calc(var(--head-h,64px) + .35rem);
    bottom:auto;
    left:50%;
    right:auto;
    transform:translateX(-50%);
    max-width:22ch;
    text-align:center;
    z-index:3;
    color:rgba(201,210,218,.55);
  }
}
@media (max-width:63.99rem) and (max-width:400px){
  body.home-landing .pulse-pin .nm{font-size:.58rem;letter-spacing:.06em}
}

/* Map illumination: radar reveals lakes.svg detail (not a blanket tint), then retreats ~5s.
   Philosophy: the site scans this region and brings shoreline/land information into view.
   Synced to .mp-radar-beam via --mp-lit-from in radar-sync.js. Trail = 11.25deg of 100s turn (~3.1s fade).
   Strength pass: screen-blend + brighter stroke filter so lakes/lines clearly light, not a tint wedge. */
body.home{--mp-lit-trail:11.25deg}
/* Smooth sweep 2026-11-14. Former full-screen conic mask angle was changed in JS every frame, forcing
   repaint of the masked map. The mask is now STATIC on a compositor-rotated wrapper, and its map
   counter-rotates so shorelines remain fixed. No filter/blend (keeps the iOS WebKit wedge fix).
   Lit art is requested only after the base map is ready. Animation is transform only on both layers. */
body.home .mp-map-lit{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
/* The wedge layer is only the 11.25deg trail's bounding box (22vmax x 110vmax), pivoting on its bottom-right corner. */
body.home .mp-lit-spin{position:absolute;left:calc(var(--radar-x) - 22vmax);top:calc(var(--radar-y) - 110vmax);width:22vmax;height:110vmax;
  transform-origin:100% 100%;will-change:transform;transform:rotate(90deg);
  animation:mp-sweep var(--radar-turn) linear calc(var(--radar-turn) * -.25) infinite;
  -webkit-mask-image:conic-gradient(from -11.25deg at 100% 100%,transparent 0deg,rgba(0,0,0,.06) 1.91deg,rgba(0,0,0,.18) 4.16deg,rgba(0,0,0,.38) 6.41deg,rgba(0,0,0,.62) 8.66deg,rgba(0,0,0,.88) 10.35deg,#000 10.91deg,#000 11.25deg,transparent 11.31deg,transparent 360deg);
  mask-image:conic-gradient(from -11.25deg at 100% 100%,transparent 0deg,rgba(0,0,0,.06) 1.91deg,rgba(0,0,0,.18) 4.16deg,rgba(0,0,0,.38) 6.41deg,rgba(0,0,0,.62) 8.66deg,rgba(0,0,0,.88) 10.35deg,#000 10.91deg,#000 11.25deg,transparent 11.31deg,transparent 360deg);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* Viewport-sized lit map inside the wedge; --mp-rx/--mp-ry/--mp-vw/--mp-vh are px set by radar-sync.js on resize only.
   Counter-rotates about the radar origin so shorelines stay put. */
body.home .mp-lit-img{position:absolute;left:calc(22vmax - var(--mp-rx,36vw));top:calc(110vmax - var(--mp-ry,18vh));
  width:var(--mp-vw,100vw);height:var(--mp-vh,100vh);transform-origin:var(--mp-rx,36vw) var(--mp-ry,18vh);
  will-change:transform;transform:rotate(-90deg);animation:mp-sweep-back var(--radar-turn) linear calc(var(--radar-turn) * -.25) infinite;
  background:no-repeat center/cover}
html.mp-lit-on body.home .mp-lit-img{background-image:url("/assets/maps/lakes-lit.svg?v=opt-20261114")}
@media (max-width:63.99rem){html.mp-lit-on body.home-landing .mp-lit-img{
  background-image:url("/assets/maps/lakes-lit-full.svg?v=opt-20261114");
  background-size:var(--mp-map-size,cover);background-position:var(--mp-map-pos,center)}}
html.mp-stage body.home .mp-map-lit{animation:mp-stage-in 1.2s var(--mp-ease) .45s backwards}
@media (prefers-reduced-motion:reduce){
  body.home .mp-map-lit{display:none!important}
}

/* Radius 110vmax reaches every corner from the radar origin (34-36%, 14-18%): farthest corner is under 108vmax. */

/* DRAFT preview 2026-11-09: homepage calendar removed all sizes */
body.home-landing #mp-cal,
body.home-landing .mp-cal,
body.home-landing .pulse-hero #mp-cal,
body.home-landing #mp-mcal,
body.home-landing .mp-mcal{
  display:none!important;
  margin:0!important;
  padding:0!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  overflow:hidden!important;
  border:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Town labels: measured collision placement in v2.js; keep the existing face and sizing. */
body.home .pulse-pin{align-items:center;text-align:center}
/* Home only: same 1.2s wordmark glint every 10s, but the band holds still off the letters between glints,
   so the header is not repainted on every frame for the other 8.8s. */
@keyframes mp-wm-shine{0%{background-position:100% 0}12%{background-position:0 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:no-preference){body.home .site-head .wm-sh::after{animation-name:mp-wm-shine}}