/* Gator Strong : concept site v3 ("depth and story")
   The pinned season scene, the coast map, hero haze and the chapter rail. */

/* ── one house, one season ── */
.season{position:relative;height:640vh;background:#0b1114;color:var(--on-d)}
.season .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;--night:0}
.season canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.season .pin::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,12,10,.78) 0%,rgba(8,12,10,.42) 30%,rgba(8,12,10,0) 52%),
             radial-gradient(120% 90% at 60% 55%,transparent 55%,rgba(0,0,0,.45))}
.season .pin::after{content:"";position:absolute;inset:auto 0 0 0;height:120px;z-index:1;pointer-events:none;background:linear-gradient(transparent,rgba(8,12,10,.55))}
.season .s-top,.season .hud,.season .caps,.season .s-prog{position:absolute;z-index:2}
.season .s-top{left:max(32px,calc((100vw - 1240px) / 2 + 32px));top:112px;display:flex;align-items:center;gap:14px}
.season .s-top .kick{color:var(--brass-hi)}
.s-tag{font-family:var(--display);font-size:10px;letter-spacing:.01em;color:var(--on-d-3);border:1px solid rgba(244,241,230,.2);padding:4px 8px;border-radius:999px;font-weight:600;font-variant-numeric:tabular-nums}
.hud{right:max(32px,calc((100vw - 1240px) / 2 + 32px));top:104px;display:grid;grid-template-columns:repeat(4,auto);gap:0;
  background:rgba(10,16,11,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:4px}
.hud div{padding:10px 16px;border-left:1px solid rgba(255,255,255,.08);min-width:96px}
.hud div:first-child{border-left:0;min-width:128px}
.hud span{display:block;font-family:var(--display);font-size:9.5px;letter-spacing:.01em;color:var(--brass-lit);font-weight:600;font-variant-numeric:tabular-nums}
.hud b{display:block;font-family:var(--display);font-weight:600;font-size:14px;color:#fff;margin-top:3px;font-variant-numeric:tabular-nums;white-space:nowrap;font-variant-numeric:tabular-nums}
.caps{left:max(32px,calc((100vw - 1240px) / 2 + 32px));bottom:15vh;width:min(470px,40vw);height:300px}
.cap{position:absolute;inset:auto 0 0 0;opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .9s var(--ease);pointer-events:none}
.cap.on{opacity:1;transform:none;pointer-events:auto;transition-delay:.12s}
.cap .when{font-family:var(--display);font-size:11.5px;letter-spacing:.01em;color:var(--brass-hi);font-weight:600;font-variant-numeric:tabular-nums}
.cap h2{font-size:clamp(38px,4.6vw,72px);color:#fff;margin-top:14px;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.cap p:not(.when){margin-top:18px;color:#e6e6da;font-size:clamp(16px,1.25vw,19px);max-width:40ch;text-shadow:0 1px 18px rgba(0,0,0,.6)}
.cap .btn{margin-top:26px;background:var(--brass-lit);color:var(--deep)}
.cap .btn::before{background:#fff}
.s-prog{left:max(32px,calc((100vw - 1240px) / 2 + 32px));right:max(32px,calc((100vw - 1240px) / 2 + 32px));bottom:7vh;height:1px;background:rgba(244,241,230,.18)}
.s-prog i{position:absolute;inset:0;background:linear-gradient(90deg,var(--brass),var(--brass-hi));transform-origin:0 50%;transform:scaleX(0)}
.s-prog b{position:absolute;top:-4px;width:9px;height:9px;margin-left:-4px;border-radius:50%;background:#0b1114;border:1px solid rgba(244,241,230,.4);transition:background .4s,border-color .4s}
.s-prog b.on{background:var(--brass-hi);border-color:var(--brass-hi)}
.s-prog b span{position:absolute;top:16px;left:50%;transform:translateX(-50%);font-family:var(--display);font-size:9.5px;font-weight:600;letter-spacing:.01em;color:var(--on-d-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.s-prog b.on span{color:var(--on-d-2)}
.s-prog b:last-of-type span{left:auto;right:-4px;transform:none}
.s-prog b:first-of-type span{left:-4px;transform:none}
@media(max-width:1000px){.hud{grid-template-columns:repeat(2,auto)}.hud div:nth-child(3){border-left:0}.hud div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08)}}
@media(max-width:760px),(max-aspect-ratio:105/100){
  .season .pin::before{background:linear-gradient(180deg,rgba(8,12,10,.55) 0%,rgba(8,12,10,0) 22%,rgba(8,12,10,0) 52%,rgba(8,12,10,.86) 70%,rgba(8,12,10,.96) 100%)}
  .season .s-top{left:18px;top:86px}
  .hud{left:18px;right:18px;top:118px;grid-template-columns:1.45fr 1fr 1fr 1fr}
  .season .s-top .kick::before{display:none}
  .season .s-top{gap:10px}
  .hud div{min-width:0!important;padding:8px 10px}
  .hud div:nth-child(3){border-left:1px solid rgba(255,255,255,.08)}
  .hud div:nth-child(n+3){border-top:0}
  .hud b{font-size:11px}
  .hud span{font-size:8.5px;letter-spacing:.12em}
  .caps{left:18px;right:18px;width:auto;bottom:calc(7vh + 34px);height:auto;min-height:230px}
  .cap h2{font-size:clamp(32px,9vw,44px)}
  .cap p:not(.when){font-size:15.5px;margin-top:12px}
  .s-prog{left:18px;right:18px;bottom:calc(5vh + 4px)}
  .s-prog b span{display:none}
}
@media(max-width:760px){.season .s-prog{bottom:96px}.caps{bottom:136px}}

/* ── the coast map ── */
.map{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:5/4;background:#0b150c;box-shadow:0 40px 80px -40px rgba(13,23,14,.6)}
.map svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.map .grat{stroke:rgba(214,178,94,.08);stroke-width:.4;fill:none}
.map .gl{font:400 5px var(--display);fill:rgba(214,178,94,.35);letter-spacing:.01em;font-weight:600;font-variant-numeric:tabular-nums}
.map .ctr{fill:none;stroke:#4f8a4a;stroke-linejoin:round}
.map .land{fill:#233d25;stroke:none}
.map .state{fill:none;stroke:rgba(244,241,230,.28);stroke-width:.6;stroke-dasharray:2 2}
.map .st{font:500 5.5px var(--display);letter-spacing:.01em;fill:rgba(244,241,230,.26);font-weight:600;font-variant-numeric:tabular-nums}
.map .coast{fill:none;stroke:var(--brass-lit);stroke-width:1.1;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.8s var(--ease-io)}
.map.on .coast{stroke-dashoffset:0}
.map .track{fill:none;stroke:#e9eee6;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;opacity:.75;stroke-linecap:round}
.map .town{opacity:0;transition:opacity .8s ease calc(1.2s + var(--i) * .14s)}
.map.on .town{opacity:1}
.map .dot{fill:#f4f1e6}
.map .hq .dot{fill:var(--brass-hi)}
.map .pulse{fill:none;stroke:var(--brass-hi);stroke-width:.8;animation:mpulse 2.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes mpulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(4.2);opacity:0}}
.map .tn{font:600 7px var(--sans);fill:#f4f1e6}
.map .tc{font:500 4.6px var(--display);letter-spacing:.01em;fill:var(--brass-lit);font-weight:600;font-variant-numeric:tabular-nums}
.map .landfall{opacity:0;transition:opacity .6s}
.map.hit .landfall{opacity:1}
.map .landfall circle{fill:none;stroke:#ff9a5a;stroke-width:.8}
.map .landfall path{stroke:#ff9a5a;stroke-width:.8}
.map .landfall text{font:500 4.8px var(--display);letter-spacing:.01em;fill:#ffb98a;font-weight:600;font-variant-numeric:tabular-nums}
.map .eye{opacity:0;transition:opacity .4s}
.map .eye path{fill:none;stroke:#f4f1e6;stroke-width:2.2;stroke-linecap:round}
.map .eye circle{fill:#f4f1e6}
.map .eye .spin{animation:espin 1.6s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes espin{to{transform:rotate(-360deg)}}
.map figcaption{position:absolute;left:16px;right:16px;bottom:14px;display:flex;justify-content:space-between;gap:12px;font-family:var(--display);font-size:10px;letter-spacing:.01em;color:rgba(244,241,230,.62);font-weight:600;font-variant-numeric:tabular-nums}
.map .legend{position:absolute;left:16px;top:14px;font-family:var(--display);font-size:10px;letter-spacing:.01em;color:var(--brass-lit);display:flex;flex-direction:column;gap:6px;font-weight:600;font-variant-numeric:tabular-nums}
.map .legend span{display:flex;align-items:center;gap:8px}
.map .legend i{width:16px;height:1px;background:var(--brass-lit)}
.map .legend .f i{background:#e9eee6}
@media(max-width:600px){.map .landfall text{transform:translate(-4px,16px)}.map{aspect-ratio:4/4.2}.map .tn{font-size:9px}.map .tc{font-size:6px}.map .landfall text{font-size:6.4px}.map .st{font-size:7px}}
.florence{margin-top:22px;font-size:15px;color:var(--ink-2);max-width:52ch}
.florence b{color:var(--ink);font-weight:600}

/* ── salt haze over the hero ── */
.hero .motes{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity 2.4s ease .6s}
.ready .hero .motes{opacity:1}
.hero .sweep{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero .sweep::before{content:"";position:absolute;top:-20%;bottom:-20%;width:38%;left:-50%;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,232,180,.13),transparent)}
.ready .hero .sweep::before{animation:sweep 3.6s var(--ease-io) .5s 1 forwards}
@keyframes sweep{to{left:130%}}

/* ── chapter rail ── */
.rail{position:fixed;right:22px;top:50%;z-index:40;transform:translate(16px,-50%);opacity:0;pointer-events:none;transition:opacity .5s,transform .6s var(--ease)}
.rail.show{opacity:1;transform:translate(0,-50%);pointer-events:auto}
.rail .cur{display:none}
.rail ol{list-style:none;display:flex;flex-direction:column;gap:4px;padding:10px 8px;border-radius:999px;background:rgba(13,23,14,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08)}
.rail a{position:relative;display:flex;align-items:center;justify-content:center;width:26px;height:26px;text-decoration:none;color:var(--on-d-3);font-family:var(--display);font-size:9px;letter-spacing:.01em;font-weight:600;font-variant-numeric:tabular-nums}
.rail a i{font-style:normal;transition:color .3s}
.rail a::before{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid transparent;transition:border-color .3s,background .3s}
.rail a.past i{color:var(--on-d-2)}
.rail a.on i{color:var(--deep)}
.rail a.on::before{background:var(--brass-hi);border-color:var(--brass-hi)}
.rail a i{position:relative}
.rail a span{position:absolute;right:38px;top:50%;transform:translate(8px,-50%);white-space:nowrap;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-d);
  background:rgba(13,23,14,.86);padding:6px 10px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}
.rail a:hover span,.rail a:focus-visible span,.rail a.on span{opacity:1;transform:translate(0,-50%)}
.rail:hover a.on:not(:hover) span{opacity:0}
@media(max-width:1180px){.rail{display:none}}

@media (prefers-reduced-motion:reduce){
  .cap{transition:none}
  .map .coast,.map .town{transition:none}
  .map .pulse,.map .eye .spin{animation:none}
}