/**
 * Experience-layer presentation foundation (Sprint 4A).
 * Opening artwork is intentionally not final — hooks only.
 */
body[data-experience]{
  --experience-bg:var(--theme-bg,#f4eee7);
  --experience-surface:var(--theme-surface,#fffdf9);
  --experience-accent:var(--theme-accent,#7b4f4f);
  --experience-gold:var(--theme-accent,#c8a968);
  --experience-ink:var(--theme-ink,#2d2926);
  --experience-text:var(--theme-ink,#2d2926);
}
body[data-experience="premium"]{--experience-motion-intensity:.55}
body[data-experience="gold"]{--experience-motion-intensity:.85}
body[data-motion="reduced"]{--experience-motion-intensity:0}

/* Music control — compact luxury UI, mobile first, RTL/LTR safe */
.music-control{
  position:relative;
  z-index:40;
  margin:0 auto 12px;
  min-height:44px;
  min-width:44px;
  border:1px solid color-mix(in srgb,var(--experience-accent,var(--accent,#7b4f4f)) 35%,var(--line,#e7ddd5));
  background:color-mix(in srgb,var(--experience-surface,var(--paper,#fffdf9)) 88%,transparent);
  color:var(--experience-ink,var(--ink,#2d2926));
  padding:10px 16px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  font:inherit;
  font-weight:700;
  font-size:.86rem;
  line-height:1.2;
  backdrop-filter:blur(10px);
  transition:background .25s ease,border-color .25s ease,color .25s ease,opacity .25s ease;
}
.music-control[hidden]{display:none!important}
.music-control svg{width:18px;height:18px;flex:0 0 auto}
.music-control:hover{
  border-color:var(--experience-accent,var(--accent,#7b4f4f));
  background:color-mix(in srgb,var(--experience-surface,var(--paper,#fffdf9)) 96%,var(--experience-accent,#7b4f4f));
}
.music-control:focus{
  outline:none;
}
.music-control:focus-visible{
  outline:2px solid var(--experience-accent,var(--accent,#7b4f4f));
  outline-offset:3px;
}
.music-control.is-playing{
  color:var(--experience-accent,var(--accent,#7b4f4f));
  border-color:color-mix(in srgb,var(--experience-accent,#7b4f4f) 55%,transparent);
}
body[data-experience="gold"] .music-control.is-playing{
  color:var(--experience-gold,#c8a968);
  border-color:color-mix(in srgb,var(--experience-gold,#c8a968) 60%,transparent);
}

/* Section reveal hooks — disabled until motion profile applies; reduced-motion safe */
[data-experience] .invite-section[data-reveal]{
  --reveal-ms:650ms;
}
[data-experience="gold"] .invite-section[data-reveal]{--reveal-ms:900ms}
[data-experience][data-motion]:not([data-motion="reduced"]) .invite-section[data-reveal].is-revealed{
  animation:experience-section-reveal var(--reveal-ms) ease both;
}
@keyframes experience-section-reveal{
  from{opacity:.01;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  [data-experience] .invite-section[data-reveal].is-revealed{animation:none}
  .music-control{transition:none}
}

/* Opening mount: failure must never block invitation access */
#experienceOpeningMount{
  pointer-events:none;
}
#experienceOpeningMount:empty{display:none}

/* Post-entrance payoff: first card settles crisply after doors */
body.invite-entered .invitation-card,
body.invite-entered #invitationCard{
  transform:none;
  opacity:1;
}
body.invite-entered[data-experience="gold"] .hero-section{
  padding-top:max(12px, env(safe-area-inset-top, 0px));
}
body.invite-entered[data-experience="gold"] .invitation-card .ornament{
  opacity:.9;
}

@media(max-width:760px){
  .music-control{
    width:auto;
    max-width:100%;
    padding:10px 14px;
  }
  .music-control span{white-space:nowrap}
}