/* Key 102 Media — reusable interaction layer (scroll reveals, count-up stats, ticker, FAQ, hero
   waveform). Brand tokens come from site.css (var(--neon)/--mag/--grad/--line/…). Load AFTER site.css.
   Everything degrades gracefully with prefers-reduced-motion. Add the markup hooks + interactions.js. */

/* scroll reveal */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.rd1{transition-delay:.08s}.rd2{transition-delay:.16s}.rd3{transition-delay:.24s}.rd4{transition-delay:.32s}

/* hero waveform (canvas sits behind .wrap) */
.wavewrap{position:relative;overflow:hidden}
#wavefx{position:absolute;left:0;right:0;bottom:0;width:100%;height:280px;opacity:.5;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 42%);mask-image:linear-gradient(to bottom,transparent,#000 42%)}
.wavewrap .wrap{position:relative;z-index:1}

/* count-up stat readout */
.statline{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}
.statcell{padding:26px 22px;border-right:1px solid var(--line)}
.statcell:last-child{border-right:0}
.statnum{font-family:var(--disp);font-weight:700;font-size:clamp(34px,4.6vw,52px);letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--neon);text-shadow:0 0 18px rgba(42,243,255,.4)}
.statnum.mag{color:var(--mag);text-shadow:0 0 18px rgba(255,43,208,.4)}
.statlab{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:11px}
@media(max-width:760px){.statline{grid-template-columns:1fr 1fr}
  .statcell:nth-child(2){border-right:0}.statcell:nth-child(1),.statcell:nth-child(2){border-bottom:1px solid var(--line)}}

/* broadcast ticker */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel2);overflow:hidden;white-space:nowrap;padding:14px 0}
.ticker-row{display:inline-flex;will-change:transform;animation:k102slide 32s linear infinite}
.ticker-row span{font-family:var(--mono);font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--body);padding:0 24px}
.ticker-row span b{color:var(--neon)}
.ticker-row span i{color:var(--mag);font-style:normal}
.ticker:hover .ticker-row{animation-play-state:paused}
@keyframes k102slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* FAQ accordion */
.faqlist details{border-bottom:1px solid var(--line)}
.faqlist summary{list-style:none;cursor:pointer;padding:18px 0;display:flex;gap:16px;align-items:center;
  font-family:var(--disp);font-weight:700;font-size:18px;transition:color .2s}
.faqlist summary::-webkit-details-marker{display:none}
.faqlist summary:hover{color:var(--neon)}
.faqlist summary .qq{flex:1}
.faqlist summary .pm{font-family:var(--mono);color:var(--neon);font-size:20px;transition:transform .2s;flex:0 0 auto}
.faqlist details[open] summary .pm{transform:rotate(45deg)}
.faqlist .ans{color:var(--body);padding:0 0 20px;max-width:64ch;font-size:15px}

/* photo gallery — masonry via CSS columns (portraits + landscapes flow, no crop) */
.gallery{columns:3;column-gap:14px}
.gallery img{width:100%;display:block;border-radius:10px;border:1px solid var(--line);margin-bottom:14px;
  break-inside:avoid;transition:transform .25s,box-shadow .25s,border-color .25s;background:var(--panel)}
.gallery img:hover{transform:translateY(-3px);border-color:var(--neon);box-shadow:0 0 26px -8px rgba(42,243,255,.4)}
@media(max-width:820px){.gallery{columns:2}}
@media(max-width:520px){.gallery{columns:1}}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .ticker-row{animation:none!important}
  #wavefx{opacity:.38}
}