/* MRE experience V3 — authoritative visual/motion layer.
   Loaded late so the site has one predictable interaction system. */

:root{
  --mre-cobalt:#ff681a;
  --mre-cobalt-soft:#e0c8b8;
  --mre-platinum:#d7dce6;
  --mre-ice:#f7f9fc;
  --mre-obsidian:#03050a;
  --mre-ease:cubic-bezier(.16,1,.3,1);
  --mre-reveal-delay:0ms;
  --mre-sweep:-42%;
  --mre-live:0;
  --track-accent:#ff681a;
  --track-soft:#e0c8b8;
  --track-deep:#1d2b69;
  --track-glow:rgba(255,104,26,.34);
  --audio-low:0;
  --audio-mid:0;
  --audio-high:0;
  --audio-energy:0;
}

.site-header{
  background:transparent!important;
  border-bottom:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  transition:background-color .36s ease,box-shadow .36s ease,border-color .36s ease!important;
}
.site-header.scrolled{
  background:rgba(3,5,10,.92)!important;
  border-bottom:1px solid rgba(215,220,230,.12)!important;
  box-shadow:0 12px 36px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
.wordmark::before{opacity:calc(.72 + var(--audio-high) * .26)!important;transition:opacity .18s linear}
.hero{
  padding-top:0!important;
  position:relative;
  overflow:hidden;
  background:radial-gradient(circle at 78% 8%,rgba(255,104,26,.10),transparent 28%),var(--mre-obsidian)!important;
}
.hero-poster{min-height:clamp(650px,100svh,860px)!important}
.hero-copy{padding-top:calc(var(--header) + clamp(48px,5vw,82px))!important}
.hero-visual{isolation:isolate}
.hero-visual::before,.hero-visual::after{content:"";position:absolute;pointer-events:none;z-index:3}
.hero-visual::before{
  inset:-18%;
  background:radial-gradient(circle at 26% 34%,rgba(255,255,255,.23),transparent 18%),radial-gradient(circle at 72% 70%,rgba(255,104,26,.42),transparent 29%);
  mix-blend-mode:screen;
  opacity:calc(.50 + var(--audio-energy) * .42);
  transform:scale(calc(1 + var(--mre-live) * .035));
  transform-origin:60% 50%;
  filter:saturate(calc(1 + var(--audio-mid) * .6));
}
.hero-visual::after{
  top:-8%;bottom:-8%;width:36%;left:var(--mre-sweep);
  background:linear-gradient(90deg,transparent,rgba(220,226,255,.22),transparent);
  filter:blur(7px);transform:skewX(-12deg);will-change:left;
  opacity:calc(.28 + var(--audio-high) * .62);
}
.hero-photo-frame,.hero-photo-frame img,.hero-eclipse,.brand-break>img,.connect-top img{will-change:transform}
.hero-eclipse{will-change:transform,opacity}

html.js .hero-copy .eyebrow,
html.js .hero h1 span,
html.js .hero-lead,
html.js .hero-actions,
html.js .hero-visual,
html.js .hero-player{opacity:0;transform:translate3d(0,44px,0)}
html.js .hero-visual{transform:translate3d(58px,0,0) scale(.965);clip-path:inset(0 0 0 18%)}
html.js.mre-ready .hero-copy .eyebrow,
html.js.mre-ready .hero h1 span,
html.js.mre-ready .hero-lead,
html.js.mre-ready .hero-actions,
html.js.mre-ready .hero-visual,
html.js.mre-ready .hero-player{
  opacity:1;transform:none;clip-path:inset(0);
  transition-property:opacity,transform,clip-path;
  transition-duration:950ms;transition-timing-function:var(--mre-ease)
}
html.js.mre-ready .hero-copy .eyebrow{transition-delay:60ms}
html.js.mre-ready .hero h1 span:nth-child(1){transition-delay:140ms}
html.js.mre-ready .hero h1 span:nth-child(2){transition-delay:260ms}
html.js.mre-ready .hero h1 span:nth-child(3){transition-delay:380ms}
html.js.mre-ready .hero-lead{transition-delay:510ms}
html.js.mre-ready .hero-actions{transition-delay:630ms}
html.js.mre-ready .hero-visual{transition-delay:160ms}
html.js.mre-ready .hero-player{transition-delay:760ms}

html.js .reveal{
  opacity:0!important;transform:translate3d(0,54px,0) scale(.98)!important;filter:blur(5px);
  transition:opacity 780ms var(--mre-ease) var(--mre-reveal-delay),transform 780ms var(--mre-ease) var(--mre-reveal-delay),filter 560ms ease var(--mre-reveal-delay)!important
}
html.js .reveal.mre-visible{opacity:1!important;transform:none!important;filter:none!important}

.catalog{position:relative;isolation:isolate;overflow:hidden}
.catalog::before{
  content:"";position:absolute;width:min(62vw,820px);aspect-ratio:1;right:-20%;top:-18%;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,var(--track-glow),transparent 66%);filter:blur(26px);opacity:.55;
  transition:background .5s ease,opacity .5s ease
}
.track-card{
  --mre-x:50%;--mre-y:50%;isolation:isolate;
  background:radial-gradient(circle at 88% 8%,var(--track-glow),transparent 44%),linear-gradient(155deg,var(--track-deep),#07090e 72%)!important;
  transition:transform .38s var(--mre-ease),border-color .28s ease,box-shadow .38s var(--mre-ease),background .45s ease!important
}
.track-card::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(circle 290px at var(--mre-x) var(--mre-y),var(--track-glow),transparent 68%);
  transition:opacity .28s ease
}
.track-card .track-number,.track-card .track-foot strong{color:var(--track-soft)!important}
.track-card:hover{transform:translate3d(0,-7px,0)!important;border-color:var(--track-accent)!important;box-shadow:0 24px 58px rgba(0,0,0,.30),0 0 0 1px var(--track-glow)!important}
.track-card:hover::after{opacity:1}
.track-card.is-active-track{border-color:var(--track-accent)!important;box-shadow:0 20px 60px rgba(0,0,0,.28),0 0 32px var(--track-glow)!important}
.track-card.is-active-track::after{opacity:.72}
.sync-row{transition:background .28s ease,border-color .28s ease,transform .28s var(--mre-ease)}
.sync-row.is-active-track{background:linear-gradient(90deg,var(--track-glow),transparent 72%);border-bottom-color:var(--track-accent)!important;transform:translateX(4px)}
.sync-row.is-active-track button{color:var(--track-accent)!important;font-weight:700}

.track-panel{
  background:radial-gradient(circle at 88% 12%,var(--track-glow),transparent 34%),linear-gradient(160deg,var(--track-deep),#07090e 58%)!important;
  border-left-color:var(--track-accent)!important;
  transition:transform .46s var(--mre-ease),box-shadow .46s ease,background .46s ease,border-color .46s ease!important
}
.track-panel .panel-number,.track-panel .panel-theme,.track-panel .panel-meta span,.track-panel .panel-actions button{color:var(--track-soft)!important}
.track-panel .panel-divider{background:linear-gradient(90deg,var(--track-accent),transparent)!important}

.brand-break{isolation:isolate;position:relative}
.brand-break::before{
  content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 72% 34%,rgba(192,192,192,.24),transparent 24%),radial-gradient(circle at 16% 84%,rgba(255,255,255,.07),transparent 30%);
  opacity:calc(.82 + var(--audio-mid) * .18)
}
.brand-break::after{
  content:"";position:absolute;top:-35%;bottom:-35%;left:var(--mre-sweep);width:34%;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(188,198,255,.32),transparent);filter:blur(11px);transform:skewX(-13deg);will-change:left;
  opacity:calc(.44 + var(--audio-high) * .48)
}
.brand-break-inner,.brand-break>img{position:relative;z-index:1}

.hero-player{position:relative;overflow:hidden;transition:background .36s ease,border-color .36s ease,box-shadow .36s ease!important}
.hero-player::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:calc(.15 + var(--audio-energy) * .42);
  background:linear-gradient(105deg,transparent 5%,var(--track-glow) 48%,transparent 80%)
}
.hero-player.is-playing{
  background:linear-gradient(105deg,#080a12,var(--track-deep) 52%,#07090e)!important;
  border-top-color:var(--track-accent)!important;
  box-shadow:inset 0 1px 0 var(--track-glow),0 -8px 56px var(--track-glow)!important
}
.player-wave{display:flex!important;align-items:center!important;gap:3px!important;height:24px!important;margin-top:8px!important;opacity:.82!important}
.player-wave span{
  width:2px!important;height:82%!important;display:block!important;border-radius:8px;
  background:linear-gradient(180deg,var(--track-soft),var(--track-accent))!important;
  transform-origin:center center;will-change:transform
}
.feature-play{position:relative}
.feature-play::after{
  content:"";position:absolute;inset:-5px;border:1px solid var(--track-accent);border-radius:50%;opacity:0;transform:scale(.92);
  transition:opacity .3s ease,transform .3s ease
}
.hero-player.is-playing .feature-play::after{opacity:1;transform:scale(calc(1.08 + var(--audio-low) * .09))}

.mini-player{
  --mini-height:68px;position:fixed;left:50%;bottom:18px;z-index:1450;
  width:min(760px,calc(100vw - 34px));min-height:var(--mini-height);
  display:grid;grid-template-columns:54px minmax(150px,.9fr) 46px minmax(180px,1.35fr) auto 34px;gap:14px;align-items:center;
  padding:10px 12px;color:#f7f9fc;
  background:radial-gradient(circle at 12% 50%,var(--track-glow),transparent 28%),linear-gradient(110deg,rgba(10,14,25,.96),rgba(4,6,11,.97));
  border:1px solid rgba(215,220,230,.16);border-top-color:var(--track-accent);
  box-shadow:0 24px 70px rgba(0,0,0,.46),0 0 calc(18px + var(--audio-energy) * 28px) var(--track-glow);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  opacity:0;pointer-events:none;transform:translate3d(-50%,calc(100% + 44px),0) scale(.97);
  transition:opacity .36s ease,transform .46s var(--mre-ease),box-shadow .18s linear
}
.mini-player.is-visible{opacity:1;pointer-events:auto;transform:translate3d(-50%,0,0) scale(1)}
body.ui-locked .mini-player{opacity:0;pointer-events:none;transform:translate3d(-50%,calc(100% + 44px),0)}
.mini-player-signal{height:30px;display:flex;align-items:center;justify-content:center;gap:3px}
.mini-player-signal span{width:2px;height:24px;border-radius:6px;background:linear-gradient(180deg,var(--track-soft),var(--track-accent));transform-origin:center;will-change:transform}
.mini-player-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.mini-player-copy span{font-size:8px;letter-spacing:.14em;color:#8f98aa}
.mini-player-copy strong{font-family:Manrope,Inter,sans-serif;font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-player-toggle,.mini-player-close,.mini-player-progress{border:0;color:inherit;cursor:pointer}
.mini-player-toggle{width:42px;height:42px;border-radius:50%;background:var(--track-accent);box-shadow:0 0 22px var(--track-glow)}
.mini-player-progress{position:relative;width:100%;height:28px;background:transparent;padding:12px 0}
.mini-player-progress::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;background:rgba(255,255,255,.16);transform:translateY(-50%)}
.mini-player-progress i{position:absolute;left:0;top:50%;height:3px;width:0;transform:translateY(-50%);background:linear-gradient(90deg,var(--track-soft),var(--track-accent));box-shadow:0 0 12px var(--track-glow)}
.mini-player-time{font-size:9px;color:#aeb5c3;white-space:nowrap}
.mini-player-close{width:32px;height:32px;background:transparent;color:#8f98aa;font-size:20px}
.mini-player-close:hover{color:#fff}
.mini-player-toggle:focus-visible,.mini-player-progress:focus-visible,.mini-player-close:focus-visible{outline:2px solid var(--track-soft);outline-offset:3px}

.button,.sync-cta,.player-link,.email-form button,.sync-row button{transition:transform .2s var(--mre-ease),color .2s ease,background-color .2s ease,border-color .2s ease!important}
.button:hover,.sync-cta:hover,.player-link:hover,.email-form button:hover{transform:translate3d(0,-2px,0)}
.button:active{transform:scale(.985)}
.panel-backdrop{transition:opacity .34s ease,visibility .34s ease!important}

@media(max-width:900px){
  .hero-poster{min-height:0!important}
  .hero-copy{padding-top:calc(var(--header) + 40px)!important}
  .mini-player{grid-template-columns:44px minmax(130px,.9fr) 42px minmax(140px,1fr) auto 32px;gap:10px}
}
@media(max-width:720px){
  html.js .hero-visual{transform:translate3d(0,34px,0) scale(.975)}
  .track-card:hover{transform:none!important;box-shadow:none!important}
  .mini-player{bottom:10px;width:calc(100vw - 20px);grid-template-columns:38px minmax(0,1fr) 40px 30px;gap:8px;padding:9px 10px}
  .mini-player-signal{display:none}
  .mini-player-progress{grid-column:1/5;grid-row:2;height:14px;padding:5px 0}
  .mini-player-time{display:none}
  .mini-player-copy strong{font-size:13px}
  .mini-player-toggle{width:38px;height:38px}
}

@media(prefers-reduced-motion:reduce){
  html:not(.force-motion).js .hero-copy .eyebrow,
  html:not(.force-motion).js .hero h1 span,
  html:not(.force-motion).js .hero-lead,
  html:not(.force-motion).js .hero-actions,
  html:not(.force-motion).js .hero-visual,
  html:not(.force-motion).js .hero-player,
  html:not(.force-motion).js .reveal{
    opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;transition:none!important
  }
  html:not(.force-motion) .track-card:hover,
  html:not(.force-motion) .button:hover,
  html:not(.force-motion) .sync-cta:hover,
  html:not(.force-motion) .player-link:hover,
  html:not(.force-motion) .email-form button:hover{transform:none!important}
}