/* Story intro: plays over the map on load, then hands over to it. Remove by setting INTRO_ON=false in index.html. */
#intro{position:fixed;inset:0;z-index:1000;background:#05080d;overflow:hidden;container-type:inline-size;font:15px/1.45 var(--sans);color:#E2E8F0;transition:opacity 1.1s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}
#intro.out{opacity:0;transform:scale(1.08);pointer-events:none}
#intro *{box-sizing:border-box}
#intro button{font:inherit;color:inherit}
#intro button:focus-visible,#intro input:focus-visible{outline:2px solid #FBC900;outline-offset:2px}
/* a 16:10 box that covers the screen, so map pins keep their place at any window shape */
.ix-cover{position:absolute;left:50%;top:50%;width:max(100vw,160vh);height:max(62.5vw,100vh);transform:translate(-50%,-50%)}
.ix-bg{position:absolute;inset:0;background-size:100% 100%;transition:transform 4.5s ease}
.ix-film{position:absolute;inset:0;background:#1B2626;display:grid;place-items:center}
.ix-film img{width:min(100vw,177.78vh);height:auto;display:block}
.ix-film.dim img{filter:brightness(.55) saturate(.8)}
.ix-shade{position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(5,8,14,.85));pointer-events:none}
.ix-rain{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(104deg,transparent 49.4%,rgba(220,235,255,.35) 50%,transparent 50.6%);background-size:max(28px,3cqw) max(56px,6cqw);animation:ixrain .8s linear infinite;opacity:.8}
.ix-chrome{position:absolute;left:0;right:0;top:0;height:max(56px,5cqw);display:flex;align-items:center;gap:16px;padding:0 max(16px,2cqw);background:linear-gradient(rgba(5,8,14,.8),transparent);z-index:6}
.ix-brand{font:700 max(15px,1.15cqw) var(--sans);color:#fff;white-space:nowrap}
.ix-prog{margin:0 auto;display:flex;align-items:center;gap:6px;font:500 max(10px,.72cqw) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.ix-prog i{width:max(18px,2cqw);height:4px;border-radius:2px;background:rgba(255,255,255,.22)}
.ix-prog i.on{background:#F5A524}
.ix-skip{margin-left:auto;font:500 max(12px,.85cqw) var(--sans);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:6px 14px;background:rgba(5,8,14,.45);cursor:pointer;white-space:nowrap}
.ix-prog+.ix-skip{margin-left:0}
.ix-card{position:absolute;background:rgba(10,15,24,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);border-radius:max(10px,1cqw);padding:max(14px,1.4cqw) max(16px,1.6cqw);z-index:5;animation:ixrise .6s ease both;width:min(var(--w),calc(100vw - 32px))}
.ix-card .ix-k{font:600 max(10px,.72cqw) var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#F5A524}
.ix-card .ix-t{font:500 max(20px,2cqw)/1.12 var(--serif);color:#fff;margin:8px 0 6px}
.ix-card .ix-d{font-size:max(13px,1cqw);color:#9AA6B8;line-height:1.4}
.ix-card .ix-big{font:800 max(40px,4.2cqw)/1 var(--sans);color:#fff;letter-spacing:-.03em;margin:8px 0 2px}
.ix-card.loss{border-color:rgba(229,72,77,.55)}.ix-card.loss .ix-k{color:#ff7b75}
.ix-cta{position:absolute;left:16px;right:16px;bottom:max(56px,7cqw);text-align:center;z-index:7;animation:ixrise .5s ease both}
.ix-cta .ix-line{font:italic 500 max(24px,2.5cqw)/1.15 var(--serif);color:#fff;margin-bottom:max(18px,2cqw);text-shadow:0 2px 12px rgba(0,0,0,.6)}
.ix-red{display:inline-flex;align-items:center;gap:12px;background:#E5484D;color:#fff!important;font:700 max(17px,1.4cqw) var(--sans);padding:max(14px,1.25cqw) max(24px,2.2cqw);border-radius:999px;border:0;cursor:pointer;box-shadow:0 0 0 8px rgba(229,72,77,.2),0 0 0 18px rgba(229,72,77,.08);animation:ixpulse 1.8s ease-in-out infinite}
.ix-white{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#0B0F19!important;font:600 max(15px,1.15cqw) var(--sans);padding:max(12px,1cqw) max(20px,1.8cqw);border-radius:10px;border:0;cursor:pointer}
.ix-quiet{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);color:#fff;font:500 max(14px,1cqw) var(--sans);padding:10px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.3);cursor:pointer}
.ix-cta .ix-sub{color:rgba(255,255,255,.65);font-size:max(12px,.9cqw);margin-top:16px}
.ix-credit{position:absolute;left:max(16px,2.2cqw);bottom:12px;font:max(9px,.66cqw) var(--mono);color:rgba(255,255,255,.6);z-index:6;max-width:70%}
.ix-counter{position:absolute;left:max(20px,3.4cqw);top:max(70px,7cqw);z-index:6;animation:ixrise .5s ease both}
.ix-counter b{font:800 max(64px,7.5cqw)/0.9 var(--sans);color:#fff;letter-spacing:-.05em}.ix-counter b span{color:rgba(255,255,255,.3)}
.ix-counter div{font:600 max(10px,.75cqw) var(--mono);letter-spacing:.2em;color:#F5A524;text-transform:uppercase;margin-top:8px}
.ix-route{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.ix-pin{position:absolute;width:max(36px,3.5cqw);aspect-ratio:56/70;transform:translate(-50%,-100%);z-index:4;filter:drop-shadow(0 4px 4px rgba(0,0,0,.45))}
.ix-pin svg{display:block;width:100%;height:100%}
.ix-place{position:absolute;transform:translate(-50%,10px);font:600 max(11px,.8cqw) var(--sans);color:#0B0F19;background:#FBC900;padding:2px 8px;border-radius:4px;white-space:nowrap;z-index:4;transition:opacity .4s}
.ix-place.g{background:rgba(10,15,24,.85);color:#fff;border:1px solid rgba(255,255,255,.14)}
.ix-dot{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:rgba(255,255,255,.25);transform:translate(-50%,-50%);z-index:3}
.ix-ring{position:absolute;border:2px solid #FBC900;border-radius:50%;transform:translate(-50%,-50%);z-index:3;animation:ixring 1.6s ease-out infinite}
/* opening screen */
.ix-open{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,8,14,.94) 0%,rgba(5,8,14,.62) 45%,rgba(5,8,14,.15) 75%)}
.ix-hero{position:absolute;left:max(20px,6cqw);top:50%;transform:translateY(-52%);width:min(640px,calc(100vw - 40px));z-index:5}
.ix-hero h1{font:800 clamp(40px,4.8cqw,80px)/0.98 var(--sans);letter-spacing:-.035em;color:#fff;margin:16px 0 18px;text-wrap:balance}
.ix-hero p{font:clamp(17px,1.4cqw,23px)/1.45 var(--serif);color:#dbe3ee;margin:0 0 28px;max-width:540px}
.ix-search{display:flex;align-items:center;gap:12px;background:rgba(10,15,24,.78);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:7px 7px 7px 18px;max-width:560px}
.ix-search input{flex:1;min-width:0;background:none;border:0;color:#fff;font:18px var(--sans);outline:none}
.ix-search input::placeholder{color:#7c889a}
.ix-sugg{max-width:560px;margin-top:8px;background:rgba(10,15,24,.85);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:6px;display:grid}
.ix-sugg[hidden]{display:none}
.ix-sugg button{display:flex;justify-content:space-between;gap:10px;background:none;border:0;text-align:left;padding:10px 14px;border-radius:9px;cursor:pointer;color:#e2e8f0}
.ix-sugg button:hover,.ix-sugg button:focus{background:rgba(255,255,255,.08)}
.ix-sugg small{color:#F5A524;font:500 11px var(--mono)}
.ix-dragcard{position:absolute;right:max(20px,3.5cqw);top:50%;transform:translateY(-50%);width:200px;padding:22px 18px;text-align:center;background:rgba(10,15,24,.75);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.14);border-radius:14px;z-index:5}
.ix-dragpin{width:56px;height:70px;margin:0 auto;cursor:grab;touch-action:none;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
.ix-dragpin.dragging{position:fixed;z-index:1001;cursor:grabbing;margin:0}
.ix-disc{position:absolute;left:max(20px,6cqw);bottom:22px;font-size:12.5px;color:rgba(255,255,255,.6);max-width:720px;z-index:5}
.ix-stats{display:flex;justify-content:center;gap:48px;margin-bottom:36px;font:600 13px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.ix-stats b{display:block;font:800 max(40px,3cqw) var(--sans);color:#fff;letter-spacing:-.02em}
.ix-stats b.ix-r{color:#E5484D}
@keyframes ixrise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ixpulse{50%{box-shadow:0 0 0 12px rgba(229,72,77,.25),0 0 0 26px rgba(229,72,77,.06)}}
@keyframes ixring{from{width:10px;height:10px;opacity:1}to{width:120px;height:120px;opacity:0}}
@keyframes ixrain{to{background-position:-14px 56px}}
@keyframes ixdrop{0%{transform:translate(-50%,-260%) scale(1.25);opacity:0}15%{opacity:1}70%{transform:translate(-50%,-100%) scale(1)}82%{transform:translate(-50%,-112%)}100%{transform:translate(-50%,-100%)}}
@media (max-width:820px){.ix-dragcard{display:none}.ix-prog span{display:none}.ix-counter{top:70px}.ix-chrome .ix-brand{display:none}.ix-chrome{gap:10px}.ix-prog{margin:0}.ix-skip{margin-left:auto}}
@media (prefers-reduced-motion:reduce){.ix-red,.ix-ring,.ix-rain{animation:none}#intro{transition:opacity .4s}}
/* yellow points on the flood-plain trace */
.ix-yd{position:absolute;width:max(14px,1.1cqw);height:max(14px,1.1cqw);border-radius:50%;background:#FBC900;box-shadow:0 0 0 4px rgba(251,201,0,.25),0 0 18px rgba(251,201,0,.6);transform:translate(-50%,-50%) scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1);z-index:4}
.ix-yd.on{transform:translate(-50%,-50%) scale(1)}
/* "moved 4 times" over the ocean on the last move map */
.ix-tally{position:absolute;right:max(20px,5cqw);top:42%;z-index:5;text-align:right;display:grid;gap:6px;animation:ixrise .8s ease 1.2s both}
.ix-tally span{font:500 max(11px,.85cqw) var(--mono);letter-spacing:.2em;color:rgba(255,255,255,.7)}
.ix-tally b{font:800 clamp(30px,3.4cqw,58px)/1 var(--sans);letter-spacing:-.01em;text-transform:uppercase;color:#F4F6FA}
.ix-tally b.ix-r{color:#ff6b5e}
/* the question: over the flood-plain map, in the landing page's own type */
.ix-qmap .ix-bg{animation:ixdrift 18s ease-out both}
@keyframes ixdrift{from{transform:scale(1.04)}to{transform:scale(1.12) translate(-1.5%,1%)}}
.ix-qscrim{position:absolute;inset:0;z-index:3;background:linear-gradient(90deg,rgba(5,8,14,.94) 0%,rgba(5,8,14,.78) 38%,rgba(5,8,14,.2) 70%,rgba(5,8,14,.05))}
.ix-q{position:absolute;left:max(20px,6cqw);top:max(64px,6vh);bottom:max(48px,6vh);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:min(680px,calc(100vw - 40px));z-index:5;animation:ixrise .9s ease .2s both}
.ix-qk{font:600 max(11px,.75cqw) var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#F5A524}
.ix-q h2{font:800 clamp(34px,min(4.4cqw,8.5vh),76px)/1 var(--sans);letter-spacing:-.035em;color:#fff;margin:16px 0 22px;text-wrap:balance}
.ix-qline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 18px;font:500 max(12px,.85cqw) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#E2E8F0}
.ix-qline i{width:5px;height:5px;border-radius:50%;background:#FBC900}
.ix-qline .ix-r{color:#ff6b5e}
.ix-qsub{font:clamp(16px,1.3cqw,21px)/1.45 var(--serif);color:#cbd5e1;margin:0 0 28px;max-width:520px}
@media (prefers-reduced-motion:reduce){.ix-qmap .ix-bg{animation:none}}
.ix-qsub b{color:#fff;font-weight:600}
/* presenter control */
.ix-nextb{position:absolute;right:max(16px,3cqw);bottom:max(40px,4.5cqw);z-index:8;display:inline-flex;align-items:center;gap:10px;background:#fff;color:#0B0F19!important;border:0;border-radius:999px;padding:12px 22px;font:600 max(15px,1.05cqw) var(--sans);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.4);animation:ixrise .5s ease both}
.ix-nextb:hover{background:#FBC900}