/* Island Claims — Hurricane Nolo interactive layer (v40). Shared by /nolo/ and the Nolo guide. */
/* ---- still-active banner ---- */
.nact{position:relative;margin:1.8rem 0 2.2rem;border-radius:20px;padding:1.15rem 1.2rem 1.15rem 3.2rem;background:linear-gradient(120deg,rgba(232,196,106,.12),rgba(9,188,138,.08));border:1px solid rgba(232,196,106,.45);overflow:hidden}
.nact::before{content:'';position:absolute;left:1.25rem;top:1.45rem;width:12px;height:12px;border-radius:50%;background:#e8c46a;box-shadow:0 0 0 0 rgba(232,196,106,.55);animation:nactp 1.8s ease-out infinite}
@keyframes nactp{0%{box-shadow:0 0 0 0 rgba(232,196,106,.55)}70%{box-shadow:0 0 0 14px rgba(232,196,106,0)}100%{box-shadow:0 0 0 0 rgba(232,196,106,0)}}
.nact b.k{display:block;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:#e8c46a;margin-bottom:.35rem}
.nact p{margin:0;font-size:1rem;line-height:1.65}.nact .ts{display:block;margin-top:.5rem;font-size:.8rem;opacity:.72}
[data-theme=light] .nact b.k{color:#8a6410}[data-theme=light] .nact{border-color:rgba(138,100,16,.45)}
/* ---- satellite scrubber ---- */
.scrub{margin:2.4rem 0;border-radius:22px;overflow:hidden;background:#0b1822;border:1px solid rgba(117,221,221,.24);color:#f3faf9}
.scrub .sw{position:relative;aspect-ratio:1000/971;background:#0b1822}
.scrub .sw img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.scrub .sw img.on{opacity:1}
.scrub .sd{position:absolute;left:.9rem;top:.9rem;padding:.4rem .75rem;border-radius:999px;background:rgba(11,24,34,.78);border:1px solid rgba(117,221,221,.35);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(6px)}
.scrub .sn{position:absolute;left:.9rem;right:.9rem;bottom:.9rem;padding:.6rem .85rem;border-radius:14px;background:rgba(11,24,34,.8);font-size:.92rem;line-height:1.45;backdrop-filter:blur(6px)}
.scrub .sc{display:flex;align-items:center;gap:.9rem;padding:.9rem 1rem .4rem}
.scrub .pb{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid rgba(9,188,138,.6);background:rgba(9,188,138,.15);color:#09bc8a;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.scrub .pb svg{width:18px;height:18px;fill:currentColor}.scrub .pb .pa{display:none}.scrub.playing .pb .pl{display:none}.scrub.playing .pb .pa{display:block}
.scrub input[type=range]{flex:1;accent-color:#09bc8a;height:28px;cursor:pointer}
.scrub .tk{display:flex;justify-content:space-between;padding:0 1rem .9rem 4.4rem;font-size:.72rem;letter-spacing:.08em;color:rgba(243,250,249,.6)}
.scrub .tk span.on{color:#09bc8a;font-weight:700}
.scrub figcaption{padding:.6rem 1rem .8rem;font-size:.78rem;color:rgba(243,250,249,.6);border-top:1px solid rgba(255,255,255,.07)}
/* ---- before / after ---- */
.ba{margin:2.2rem auto;max-width:760px;border-radius:22px;overflow:hidden;border:1px solid rgba(117,221,221,.24);background:#0b1822;color:#f3faf9}
.ba .bw{position:relative;aspect-ratio:1/1;overflow:hidden;touch-action:pan-y;cursor:ew-resize;--p:50%}
.ba .bw img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.ba .bw .af{clip-path:inset(0 0 0 var(--p))}
.ba .hd{position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;background:#09bc8a;box-shadow:0 0 18px rgba(9,188,138,.8)}
.ba .hd i{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#09bc8a;box-shadow:0 6px 20px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center}
.ba .hd i::before{content:'\2039\00a0\203A';font-style:normal;font-weight:800;color:#0b1822;font-size:1.25rem;letter-spacing:-.05em}
.ba .lb{position:absolute;top:.9rem;padding:.35rem .7rem;border-radius:999px;background:rgba(11,24,34,.8);font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.ba .lb.l{left:.9rem}.ba .lb.r{right:.9rem;color:#09bc8a}
.ba input[type=range]{position:absolute;left:0;bottom:0;width:100%;height:30px;opacity:0;margin:0;pointer-events:none}.ba .bw:focus-within{outline:3px solid #75dddd;outline-offset:-3px}
.ba figcaption{padding:.65rem 1rem .8rem;font-size:.78rem;color:rgba(243,250,249,.62)}
.ba figcaption b{color:#f3faf9}
/* ---- island tabs ---- */
.itabs{margin:2rem 0 2.4rem}
.itabs .tl2{display:flex;gap:.5rem;overflow-x:auto;padding:.2rem .1rem .6rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}.itabs .tl2::-webkit-scrollbar{display:none}
.itabs .tb{flex:none;min-height:44px;padding:.55rem 1rem;border-radius:999px;border:1px solid rgba(117,221,221,.32);background:transparent;color:inherit;font:inherit;font-size:.92rem;font-weight:700;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.itabs .tb .dt{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.45rem;background:rgba(117,221,221,.5);vertical-align:middle}
.itabs .tb .dt.hi{background:#09bc8a}.itabs .tb .dt.wa{background:#e8c46a}
.itabs .tb[aria-selected=true]{background:rgba(9,188,138,.16);border-color:#09bc8a;color:var(--mint)}
.itabs .tp{display:grid;grid-template-columns:1fr;border-radius:22px;overflow:hidden;border:1px solid rgba(117,221,221,.22);background:rgba(var(--fg),calc(.03*var(--bb)))}
.itabs .tp[hidden]{display:none}
.itabs .tp figure{margin:0;position:relative;aspect-ratio:16/10;overflow:hidden;background:#0b1822}
.itabs .tp figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 6s ease}
.itabs .tp.show figure img{transform:scale(1)}
.itabs .tp figure figcaption{position:absolute;left:.7rem;bottom:.7rem;right:.7rem;font-size:.72rem;color:#f3faf9;background:rgba(11,24,34,.72);padding:.35rem .6rem;border-radius:10px;width:max-content;max-width:calc(100% - 1.4rem)}
.itabs .tp .tx{padding:1.2rem 1.25rem 1.3rem}
.itabs .tp .tx .sv{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--aqua);margin-bottom:.4rem}
.itabs .tp .tx h3{font-family:'Fraunces',serif;font-variation-settings:'SOFT' 0,'WONK' 0;font-size:1.45rem;margin:0 0 .5rem}
.itabs .tp .tx p{margin:0 0 .7rem;font-size:1rem;line-height:1.65}.itabs .tp .tx ul{margin:0;padding-left:1.1rem}.itabs .tp .tx li{font-size:.98rem;line-height:1.55;margin:.25rem 0}
.itabs .tp.show{animation:tpin .45s cubic-bezier(.2,.8,.2,1)}
@keyframes tpin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(min-width:860px){.itabs .tp{grid-template-columns:1.05fr 1fr}.itabs .tp figure{aspect-ratio:auto;min-height:340px}}
/* ---- galleries ---- */
.glry{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1.6rem 0 .6rem}
@media(min-width:760px){.glry{grid-template-columns:repeat(3,1fr)}}
.glry figure{margin:0;position:relative;border-radius:16px;overflow:hidden;background:#0b1822;aspect-ratio:4/3;cursor:zoom-in}
.glry figure.w2{grid-column:span 2}
.glry img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s}
.glry figure:hover img,.glry figure:focus-visible img{transform:scale(1.06)}
.glry figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .7rem .55rem;font-size:.72rem;line-height:1.35;color:#f3faf9;background:linear-gradient(180deg,rgba(11,24,34,0),rgba(11,24,34,.88))}
.glry figcaption b{display:block;font-size:.86rem;color:#f3faf9}
.glry figcaption .tag{display:inline-block;margin-top:.25rem;padding:.08rem .45rem;border-radius:999px;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:rgba(117,221,221,.2);color:#75dddd}
.glry figcaption .tag.d{background:rgba(232,196,106,.22);color:#e8c46a}
.glnote{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;opacity:.65;margin:0 0 2.2rem;text-align:right}
/* ---- lightbox ---- */
.nlb{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(5,12,18,.92);opacity:0;pointer-events:none;transition:opacity .3s}
.nlb.on{opacity:1;pointer-events:auto}
.nlb figure{margin:0;max-width:min(1200px,100%);max-height:100%;display:flex;flex-direction:column}
.nlb img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:12px;transform:scale(.96);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.nlb.on img{transform:none}
.nlb figcaption{color:#f3faf9;font-size:.85rem;line-height:1.5;padding:.7rem .2rem 0;max-width:80ch}
.nlb button{position:absolute;top:.8rem;right:.8rem;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(11,24,34,.6);color:#fff;font-size:1.4rem;cursor:pointer}
/* ---- interactive checklist ---- */
.dock{margin:1.2rem 0 1.6rem;border-radius:20px;border:1px solid rgba(117,221,221,.22);padding:1rem 1rem 1.1rem;background:rgba(var(--fg),calc(.025*var(--bb)))}
.dock .dh{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem;flex-wrap:wrap}
.dock .dh b{font-size:.95rem}.dock .dh .ct{margin-left:auto;font-size:.85rem;font-weight:700;color:var(--mint)}
.dock .bar{flex-basis:100%;height:8px;border-radius:6px;background:rgba(var(--fg),calc(.08*var(--bb)));overflow:hidden}
.dock .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#508991,#09bc8a);border-radius:6px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.dock ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:.45rem;counter-reset:d}@media(min-width:700px){.dock ol{grid-template-columns:1fr 1fr}}
.dock li{counter-increment:d}
.dock label{display:flex;gap:.75rem;align-items:flex-start;padding:.65rem .8rem;border-radius:14px;border:1px solid rgba(var(--fg),calc(.08*var(--bb)));cursor:pointer;font-size:1rem;line-height:1.5;transition:background .25s,border-color .25s}
.dock input{position:absolute;opacity:0;pointer-events:none}
.dock .cb{flex:none;width:26px;height:26px;border-radius:8px;border:2px solid rgba(117,221,221,.55);display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;color:var(--mint);transition:background .25s,border-color .25s}
.dock .cb::before{content:counter(d)}
.dock input:checked+.cb{background:#09bc8a;border-color:#09bc8a;color:#0b1822}
.dock input:checked+.cb::before{content:'\2713';font-size:.95rem}
.dock input:checked~span.t{opacity:.62;text-decoration:line-through;text-decoration-color:rgba(9,188,138,.7)}
.dock label:hover{border-color:rgba(9,188,138,.45)}
.dock input:focus-visible+.cb{outline:2px solid #75dddd;outline-offset:2px}
.dock .rs{margin-top:.8rem;background:none;border:0;color:var(--aqua);font:inherit;font-size:.85rem;cursor:pointer;text-decoration:underline}
/* ---- house diagram interaction ---- */
.hsvg .hc{cursor:pointer;transition:opacity .25s}
.hsvg .hc circle{transition:r .25s,fill .25s}
.hdd.focus .hsvg .hc{opacity:.35}.hdd.focus .hsvg .hc.on{opacity:1}
.hsvg .hc.on circle{fill:#e8c46a}
.hl li{cursor:pointer;transition:background .25s;border-radius:10px}
.hl li.on{background:rgba(9,188,138,.12)}
.hl li.on .hn{background:#e8c46a}
@media(prefers-reduced-motion:no-preference){.hsvg .hc circle{animation:hcp 3.2s ease-in-out infinite}.hsvg .hc:nth-child(odd) circle{animation-delay:1.6s}}
@keyframes hcp{0%,100%{stroke-width:3}50%{stroke-width:7}}
/* ---- map track animation ---- */
.imap.nt .track{stroke-dasharray:14 12;animation:trk 1.6s linear infinite}
@keyframes trk{to{stroke-dashoffset:-26}}
.imap .eye{transform-box:fill-box;transform-origin:center}
.imap.nt .eye{animation:eyep 2.4s ease-in-out infinite}
@keyframes eyep{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.imap.nt .isl.sev4{animation:islp 3s ease-in-out infinite}
@keyframes islp{0%,100%{filter:none}50%{filter:drop-shadow(0 0 10px rgba(9,188,138,.8))}}
/* ---- timeline + cards motion ---- */
.tl .ti{transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
.js .tl .ti.pre{opacity:0;transform:translateX(-14px)}
.tl .ti::before{transition:background .4s,box-shadow .4s}
.tl .ti.lit::before{background:#09bc8a;box-shadow:0 0 0 6px rgba(9,188,138,.18)}
.wpc,.lc,.dp .dr,.icard{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .35s}
.wpc:hover,.lc:hover{transform:translateY(-4px);border-color:rgba(9,188,138,.5);box-shadow:0 14px 34px rgba(0,0,0,calc(.28*var(--sh)))}
.wpc:hover svg{animation:wob .9s ease}
@keyframes wob{0%,100%{transform:none}30%{transform:translateX(3px) rotate(-3deg)}60%{transform:translateX(-2px) rotate(2deg)}}
.dp .dr:hover{background:rgba(9,188,138,.06)}
@media(prefers-reduced-motion:reduce){.nact::before,.imap.nt .track,.imap.nt .eye,.imap.nt .isl.sev4,.hsvg .hc circle{animation:none!important}.scrub .sw img,.itabs .tp figure img,.glry img,.nlb img{transition:none!important}.itabs .tp.show{animation:none}.js .tl .ti.pre{opacity:1;transform:none}.wpc:hover,.lc:hover{transform:none}}
/* ---- credits + card photos ---- */
.pcred{margin:1.6rem 0 0;border-top:1px solid rgba(var(--fg),calc(.08*var(--bb)));padding-top:.8rem;font-size:.78rem;line-height:1.55;opacity:.85}
.pcred summary{cursor:pointer;font-weight:700;letter-spacing:.06em;font-size:.8rem;color:var(--aqua)}
.pcred ul{margin:.6rem 0;padding-left:1rem}.pcred li{margin:.2rem 0}.pcred p{margin:.4rem 0 0}
.icard .icp{margin:-1.5rem -1.5rem 1.1rem;position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:15px 15px 0 0;background:#0b1822}
.icard .icp img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.icard:hover .icp img{transform:scale(1.05)}
.icard .icp figcaption{position:absolute;left:.6rem;bottom:.6rem;font-size:.66rem;line-height:1.3;padding:.25rem .5rem;border-radius:8px;background:rgba(11,24,34,.72);color:#f3faf9;max-width:calc(100% - 1.2rem)}
.icard .icp figcaption a{color:#75dddd}
.icard.watch{border-color:rgba(232,196,106,.55)!important}.icard.watch .sv{color:#e8c46a}
.ifil{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.4rem 0 1rem}
.ifil button{min-height:40px;padding:.4rem .9rem;border-radius:999px;border:1px solid rgba(117,221,221,.32);background:transparent;color:inherit;font:inherit;font-size:.88rem;font-weight:700;cursor:pointer}
.ifil button[aria-pressed=true]{background:rgba(9,188,138,.16);border-color:#09bc8a;color:var(--mint)}
.igrid .icard[hidden]{display:none}
.igrid .icard.pop{animation:tpin .45s cubic-bezier(.2,.8,.2,1)}
@media(prefers-reduced-motion:reduce){.igrid .icard.pop{animation:none}}
.glry figcaption small{display:block;font-size:.66rem;opacity:.85;margin-top:.15rem}.glry figcaption small a{color:#75dddd}
.glry figcaption b{margin-bottom:.1rem}
@media(max-width:560px){.glry{grid-template-columns:1fr}.glry figure,.glry figure.w2{grid-column:auto;aspect-ratio:16/10}}
.itabs .tp figure figcaption a{color:#75dddd}