@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Oswald:wght@600;700&display=swap');

:root { color-scheme:dark; --black:#050505; --white:#f0f0ed; --red:#ff253c; --quiet:#8d8d8d; }
* { box-sizing:border-box; }
html { background:var(--black); }
body { margin:0; background:var(--black); color:var(--white); font-family:Inter,Arial,sans-serif; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; color:inherit; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible { outline:2px solid var(--red); outline-offset:7px; }
[hidden] { display:none!important; }
.experience { position:relative; isolation:isolate; width:100%; min-height:660px; height:100svh; overflow:hidden; background:#050505; }
.header { position:absolute; z-index:8; inset:0 0 auto; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:clamp(24px,4vh,42px) clamp(22px,5vw,80px); }
.header .brand { font-size:16px; font-weight:500; line-height:1.5; letter-spacing:.25em; white-space:nowrap; }
.header .brand span { display:block; color:var(--quiet); margin-top:4px; font-size:12px; letter-spacing:.12em; }
.skip,.replay { padding:12px 0; display:flex; align-items:center; gap:12px; border:0; border-bottom:1px solid #454545; background:none; font-size:14px; line-height:1.4; white-space:nowrap; cursor:pointer; }
.skip:hover,.replay:hover { border-color:var(--red); }
.skip span,.replay span { font-size:20px; }
.portrait { position:absolute; z-index:0; left:50%; top:8%; height:88%; width:50%; transform:translateX(-50%); overflow:hidden; pointer-events:none; }
.portrait img { position:absolute; width:100%; height:100%; object-fit:contain; filter:grayscale(1) contrast(1.13) brightness(.96); }
.photo-shade { position:absolute; z-index:1; inset:0; background:linear-gradient(0deg,#050505 0%,rgba(5,5,5,.94) 5%,rgba(5,5,5,.74) 15%,transparent 46%); pointer-events:none; }
.particle-field { position:absolute; z-index:2; inset:0; width:100%; height:100%; pointer-events:none; opacity:0; }
.ingredients { position:absolute; z-index:3; inset:0; visibility:hidden; pointer-events:none; }
.ingredient { position:absolute; display:flex; flex-direction:column; gap:9px; min-width:126px; font-size:14px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; opacity:0; }
.ingredient-left { left:clamp(24px,14vw,260px); text-align:left; align-items:flex-start; }
.ingredient-right { right:clamp(24px,14vw,260px); text-align:right; align-items:flex-end; }
.ingredient-number { font:12px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; color:#969696; letter-spacing:.15em; }
.ingredient-copy { display:flex; flex-direction:column; gap:5px; }
.ingredient-en { font:400 .75rem/1.25 ui-monospace,SFMono-Regular,Consolas,monospace; color:#aaa; letter-spacing:.13em; }
.ingredient i { width:24px; height:1px; background:var(--red); transform:scaleX(0); transition:transform .45s ease; }
.ingredient.is-active i,.ingredient.is-complete i { transform:scaleX(1); }
.sequence { position:absolute; z-index:4; bottom:max(40px,env(safe-area-inset-bottom)); left:50%; width:min(340px,82%); transform:translateX(-50%); text-align:center; visibility:hidden; }
.sequence p { margin:0 0 19px; font-size:14px; color:#bcbcbc; letter-spacing:.02em; }
.sequence-track { display:flex; gap:7px; justify-content:center; }
.sequence-track span { width:25px; height:2px; background:#292929; transition:background .4s; }
.sequence-track span.is-active { background:var(--white); }
.sequence-track span.is-complete { background:var(--red); }
.arrival { position:absolute; z-index:5; bottom:max(42px,env(safe-area-inset-bottom)); left:50%; width:min(860px,calc(100% - 48px)); transform:translateX(-50%); text-align:center; }
.arrival-eyebrow { font-size:12px; letter-spacing:.23em; margin:0 0 15px; color:#b5b5b5; }
.experience h1 { margin:0; font-family:Oswald,'Arial Narrow',Impact,sans-serif; font-weight:600; font-size:clamp(66px,10.5vw,152px); line-height:1; letter-spacing:-.035em; }
.arrival-copy { margin:18px auto 24px; max-width:505px; color:#bcbcbc; font-size:16px; line-height:1.55; }
.small-break { display:none; }
.enter { display:flex; align-items:center; justify-content:space-between; gap:22px; width:min(420px,100%); min-height:60px; padding:16px 22px; margin:0 auto; border:1px solid var(--red); font-size:14px; letter-spacing:.1em; text-transform:uppercase; background:rgba(5,5,5,.8); transition:background .2s; }
.enter span { font-size:23px; color:var(--red); }
.enter:hover { background:#23090e; }
.accessible-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.is-playing .portrait,.is-playing .photo-shade { opacity:0; }
.is-playing .particle-field { opacity:1; }
.is-playing .ingredients,.is-playing .sequence { visibility:visible; }
.is-playing .arrival { opacity:0; visibility:hidden; transform:translate(-50%,14px); }
.is-revealing .portrait,.is-revealing .photo-shade { opacity:1; transition:opacity .85s ease; }
.is-revealing .particle-field { opacity:0; transition:opacity .85s ease; }
.is-revealing .ingredients,.is-revealing .sequence { opacity:0; transition:opacity .38s ease; }
.is-revealing .arrival { opacity:1; visibility:visible; transform:translate(-50%,0); transition:opacity .85s .16s ease,transform .85s .16s ease; }
.is-finished .ingredients,.is-finished .sequence,.is-finished .particle-field { display:none; }

@media (min-width:1600px) {
  .ingredient-left { left:calc(50% - 510px); }
  .ingredient-right { right:calc(50% - 510px); }
}
@media (max-width:700px) {
  .experience { min-height:610px; }
  .header { padding:24px 20px; gap:15px; align-items:flex-start; }
  .header .brand { font-size:14px; letter-spacing:.19em; }
  .header .brand span { font-size:12px; max-width:195px; letter-spacing:.055em; }
  .skip,.replay { padding:2px 0 9px; font-size:14px; gap:7px; }
  .skip span,.replay span { font-size:18px; }
  .ingredient { font-size:14px; letter-spacing:.015em; gap:8px; min-width:0; text-shadow:0 1px 14px #000,0 1px 5px #000; }
  .ingredient-left { left:20px; }
  .ingredient-right { right:20px; }
  .ingredient-number { font-size:12px; }
  .ingredient-en { letter-spacing:.07em; }
  .ingredient i { width:19px; }
  .sequence { bottom:30px; }
  .sequence p { font-size:14px; }
  .arrival { bottom:max(28px,env(safe-area-inset-bottom)); width:calc(100% - 40px); }
  .arrival-eyebrow { font-size:12px; letter-spacing:.15em; margin-bottom:12px; }
  .experience h1 { font-size:clamp(54px,15.2vw,100px); letter-spacing:-.035em; white-space:nowrap; }
  .arrival-copy { max-width:335px; font-size:16px; margin:16px auto 22px; line-height:1.5; }
  .enter { min-height:58px; font-size:14px; letter-spacing:.07em; padding:15px 18px; }
  .photo-shade { background:linear-gradient(0deg,#050505 0%,rgba(5,5,5,.97) 10%,rgba(5,5,5,.74) 24%,transparent 56%); }
}
@media (max-width:370px) {
  .header { padding-inline:16px; }
  .header .brand { font-size:13px; letter-spacing:.16em; }
  .header .brand span { max-width:170px; font-size:12px; letter-spacing:0; }
  .arrival { width:calc(100% - 32px); }
  .experience h1 { font-size:14.8vw; }
  .ingredient-left { left:16px; }
  .ingredient-right { right:16px; }
  .arrival-copy { font-size:16px; }
  .enter { font-size:14px; letter-spacing:0; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none!important; animation:none!important; }
  /* Keep the requested opening sequence's crossfade, without moving its text.
     Other UI transitions still respect reduced motion; Skip is always available. */
  .experience.is-revealing .portrait,
  .experience.is-revealing .photo-shade,
  .experience.is-revealing .particle-field { transition:opacity .85s ease!important; }
  .experience.is-revealing .ingredients,
  .experience.is-revealing .sequence { transition:opacity .38s ease!important; }
  .experience.is-revealing .arrival { transition:opacity .85s .16s ease!important; }
}

.action-arrow { width:28px; height:28px; flex:none; fill:none; stroke:var(--red); stroke-width:1.5; stroke-linecap:square; stroke-linejoin:miter; }
.experience h1 { white-space:nowrap; }
.experience h1:focus { outline:none; }