/* RESONA motion edition.
   Chapter score: curtain intro / hero char reveal, headphone resolves from blur and floats / pinned generative
   listening film that ends with the object inside its rings / sound lab aperture / material seal drawing itself /
   product iris / quiet pause filled word by word / accordion / arrival. Static and reduced-motion states are complete. */
:root{--mk-curtain:#08131e;--mk-curtain-ink:#e5eef0;--mk-curtain-font:Anybody,Arial,sans-serif;--mk-cursor:#fff;--mk-cursor-solid:rgba(192,120,85,.94);--mk-cursor-label:#fff;--mk-grain:.07}
.mk-cursor:not(.is-label){mix-blend-mode:difference}
.mk-curtain-mark{width:60px;height:60px;justify-self:center;color:var(--blue);fill:none;stroke:currentColor;stroke-width:1.3;overflow:visible}
.mk-curtain-word{font-weight:550;letter-spacing:-.045em}
body{overflow-anchor:none}

/* ---------- Listening journey: base (no JS / reduced) ---------- */
.listening-journey{position:relative;background:#06101b;border-bottom:1px solid var(--line)}
.listening-pin{position:relative;min-height:780px;padding:100px var(--pad) 65px;overflow:hidden}
#listening-canvas{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.listening-object{display:none;position:absolute;max-width:none;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 31% 43% at 65.8% 44%,#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 31% 43% at 65.8% 44%,#000 52%,transparent 100%)}
.listening-top{display:flex;justify-content:space-between;position:relative;z-index:2;font-size:12px;color:var(--muted)}
.listening-beats{position:relative;z-index:2;display:grid;gap:60px;padding:65px 0}
.listening-beat>p{font-size:12px;color:var(--copper);margin-bottom:22px}
.listening-beat h3{font-size:clamp(58px,7.2vw,112px);font-weight:450;letter-spacing:-.065em;line-height:.92}
.listening-beat h3>span{display:block}
.beat-note{font-size:15px;color:var(--muted);margin-top:26px;line-height:1.6}
.listening-bottom{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:20px 12vw;align-items:end}
.listening-phases{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}
.listening-phases span{transition:opacity .5s,color .5s}
.listening-track{grid-column:1;width:100%;height:1px;background:var(--line)}
.listening-track i{display:block;height:1px;width:100%;background:var(--copper);transform-origin:left}
.listening-bottom>a{grid-column:2;grid-row:1/3;justify-self:end;font-size:12px;display:flex;align-items:center;gap:25px;line-height:1.5;max-width:25ch}
.listening-bottom svg{width:13px;height:23px;flex:0 0 13px}
.listening-still{position:absolute;width:clamp(220px,40vw,650px);aspect-ratio:1;right:7%;top:20%;transform:rotate(-20deg);opacity:.32;pointer-events:none}
.listening-still i{position:absolute;inset:0;border:1px solid var(--blue);border-radius:50%;transform:scaleY(.6)}
.listening-still i:nth-child(2){inset:7%;border-color:var(--copper)}
.listening-still i:nth-child(3){inset:14%}
.listening-still i:nth-child(4){inset:21%}
.listening-still i:nth-child(5){inset:28%;border-color:var(--copper)}
.listening-still i:nth-child(6){inset:35%}
.story{display:block;padding:0;overflow-x:clip} /* rows start offset (x:34) before they draw in; clip keeps phones free of sideways scroll */
.story-pin{display:grid;grid-template-columns:1fr 2fr;gap:8vw;padding:105px var(--pad) 125px;position:relative}
.material-seal{width:clamp(170px,19vw,275px);height:clamp(170px,19vw,275px)}
.material-seal svg{stroke:#526f7f;opacity:.6}

/* ---------- Motion mode: pinned listening film ---------- */
.mk-motion .listening-journey{height:400svh}
.mk-motion .listening-pin{height:100svh;min-height:560px;position:sticky;top:0;padding:0;isolation:isolate}
.mk-motion #listening-canvas{display:block;z-index:0}
.mk-motion .listening-object{display:block;z-index:1;opacity:0;will-change:transform,opacity}
.mk-motion .listening-still{display:none}
.mk-motion .listening-top{position:absolute;left:var(--pad);right:var(--pad);top:calc(88px + 48px)} /* sits below the ELYX demo pill (top right, 94px) */
.mk-motion .listening-beats{position:absolute;left:var(--pad);top:31%;width:48%;height:43%;display:block;padding:0}
.mk-motion .listening-beat{position:absolute;inset:0;pointer-events:none}
.mk-motion .listening-bottom{position:absolute;left:var(--pad);right:var(--pad);bottom:42px}
.mk-motion .listening-phases span{opacity:.38}
.mk-motion .listening-phases span.is-active{opacity:1;color:var(--blue)}
.mk-motion .listening-track i{transform:scaleX(0)}

/* ---------- Motion mode: material story pinned on roomy screens (class set by JS media query) ---------- */
.story-pinned .story{height:240svh}
.story-pinned .story-pin{height:100svh;min-height:680px;position:sticky;top:0;padding-top:clamp(92px,13svh,125px);padding-bottom:55px;align-items:center;overflow:clip}
.story-pinned .story-side{align-self:stretch;justify-content:center}
.story-pinned .story-side>.section-note{position:absolute;top:110px}
.story-pinned .story h2{font-size:clamp(46px,5.8vw,82px)}
.story-pinned .story-lede{font-size:18px;margin:28px 0 30px;line-height:1.45}
.story-pinned .material-list article{padding:18px 0}
.mk-motion .material-seal{margin:10px 0 45px;transform-origin:center;will-change:transform;isolation:isolate}
.mk-motion .material-seal::before{content:"";position:absolute;inset:-22%;border-radius:50%;background:radial-gradient(circle,rgba(192,120,85,.24),transparent 62%);z-index:-1}
.mk-motion .material-seal svg{stroke:#a36042;opacity:.8}

/* ---------- Hero, header, small details ---------- */
.mk-motion .hero-copy>*{animation:none}
.mk-motion .hero-media{will-change:transform}
.mk-motion .hero-media>img{will-change:transform,opacity,filter;transform-origin:66% 45%}
.mk-motion .hero-word{will-change:transform}
.mk-motion .hero-orbit span::after{content:"";position:absolute;left:50%;top:-1px;width:6px;height:14px;margin:-7px 0 0 -3px;border-radius:50%;background:var(--copper);box-shadow:0 0 14px 2px rgba(192,120,85,.55)}
.mk-motion .hero-orbit span{border-color:rgba(167,215,233,.12);animation:resona-orbit 26s linear infinite}
.mk-motion .hero-orbit span:nth-child(2){animation-duration:34s;animation-direction:reverse}
.mk-motion .hero-orbit span:nth-child(3){animation-duration:46s}
.mk-motion .hero-orbit span:nth-child(2)::after{background:var(--blue);box-shadow:0 0 14px 2px rgba(167,215,233,.45)}
@keyframes resona-orbit{from{transform:scaleY(.42) rotate(0deg)}to{transform:scaleY(.42) rotate(360deg)}}
.mk-motion .hero-foot>a svg{animation:resona-nudge 2.4s cubic-bezier(.45,0,.55,1) infinite}
@keyframes resona-nudge{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
.mk-motion .header{transition:background .3s,border .3s,transform .7s cubic-bezier(.16,1,.3,1)}
.mk-motion .header.is-hidden{transform:translateY(-101%)}
.mk-motion .product-stage{will-change:clip-path}
.mk-motion .pause-lines{will-change:transform;opacity:.26}
.mk-motion .pause-lines i:nth-child(2n){border-color:var(--copper)}
.mk-motion .stage-center{will-change:transform}

@media(max-width:1100px){.story-pin{gap:5vw}.story-pinned .story h2{font-size:5.5vw}.story-pinned .story-lede{font-size:16px}.story-pinned .material-list h3{font-size:15px}.story-pinned .material-list p{font-size:12px}.story-pinned .material-list article{gap:10px 16px;padding:14px 0}}
@media(max-width:820px){
  .listening-pin{padding:90px var(--pad) 50px;min-height:0}
  .listening-beat h3{font-size:70px}
  .story-pin{grid-template-columns:.7fr 1.3fr;gap:5vw;padding:80px var(--pad)}
  .mk-motion .listening-journey{height:340svh}
  .mk-motion .listening-top{top:calc(74px + 60px);font-size:10px}
  .mk-motion .listening-beats{width:62%;top:26%}
  .mk-motion .listening-beat h3{font-size:clamp(62px,10vw,86px)}
  .mk-motion .listening-bottom{bottom:28px;grid-template-columns:1fr 1fr;gap:14px 40px}
  .listening-bottom>a{font-size:11px;gap:16px}
  .story-pinned .story{height:210svh}
  .story-pinned .story-pin{min-height:680px;grid-template-columns:.7fr 1.3fr;gap:5vw;padding-top:110px}
  .story-pinned .story h2{font-size:clamp(37px,5vw,50px)}
  .mk-motion .material-seal{width:clamp(130px,20vw,190px);height:clamp(130px,20vw,190px)}
}
@media(max-width:560px){
  .listening-pin{padding:75px var(--pad) 40px}
  .listening-top{font-size:10px;gap:20px}
  .listening-top>span:last-child{max-width:12ch;text-align:right}
  .listening-beats{padding:45px 0;gap:40px}
  .listening-beat h3{font-size:56px}
  .beat-note{font-size:12px;margin-top:20px}
  .listening-bottom{grid-template-columns:1fr;gap:18px}
  .listening-bottom>a{grid-column:1;grid-row:auto;justify-self:start;font-size:11px;max-width:none}
  .listening-still{width:75vw;right:-10%;top:18%}
  .story-pin{display:block;padding:65px var(--pad)}
  .material-seal{width:120px;height:120px}
  .mk-motion .listening-journey{height:320svh}
  .mk-motion .listening-top{top:92px;font-size:10px;flex-direction:column;align-items:flex-start;gap:3px}
  .mk-motion .listening-top>span:last-child{max-width:none;text-align:left}
  .mk-motion .listening-beats{top:21%;width:calc(100% - var(--pad) * 2);height:37%}
  .mk-motion .listening-beat h3{font-size:clamp(54px,15vw,76px)}
  .mk-motion .listening-beat>p{font-size:11px;margin-bottom:16px}
  .mk-motion .beat-note{font-size:12px;margin-top:18px}
  .mk-motion .listening-bottom{bottom:25px;display:grid;grid-template-columns:1fr;gap:12px}
  .mk-motion .listening-bottom>a{font-size:10px;gap:16px;margin-top:5px;max-width:none}
  .mk-motion .listening-phases{font-size:9px}
  .mk-motion .listening-bottom svg{height:16px}
  .mk-motion .story-side{display:grid;grid-template-columns:1fr auto;align-items:center;margin-bottom:50px}
  .mk-motion .story-side>.section-note{position:static}
  .mk-motion .story-side>.material-seal{margin:0;width:100px;height:100px;grid-column:2;grid-row:1/3;transform-origin:70% center}
  .mk-motion .material-seal b{font-size:25px}
  .mk-motion .story-side>p:last-child{margin-top:0}
}
@media(max-height:620px) and (min-width:561px){
  .mk-motion .listening-top{top:calc(74px + 12px);flex-direction:column;align-items:flex-start;gap:3px} /* short screens: both labels on the left keep the first beat clear and leave the top right to the ELYX demo pill */
  .mk-motion .listening-beats{top:27%}
  .mk-motion .listening-beat h3{font-size:clamp(45px,6.5vw,66px)}
  .mk-motion .listening-beat>p{margin-bottom:12px}
  .mk-motion .beat-note{margin-top:14px;font-size:11px}
  .mk-motion .listening-bottom{bottom:23px}
}
@media(prefers-reduced-motion:reduce){
  .listening-journey{height:auto!important}
  .listening-pin{position:relative!important;height:auto!important}
  .hero-orbit span,.hero-foot>a svg{animation:none!important}
}