/* My Potty Train — opening film + box-cover title build (Oct 2026)
   Spacing copies the retail box front: everything is a fraction of the
   logo width (--W), measured off the 1003 box cover. */
@property --W { syntax:'<length>'; inherits:true; initial-value:600px; }

html,body{background:#1b2230}
body.opening{color:#fff;overflow-x:hidden}

.scroller{position:relative;height:100vh;height:100svh}
html:has(body.opening){overscroll-behavior:none}
body.opening{overflow:hidden}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#c9a77d}
video.film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
canvas.flip{position:absolute;inset:0;width:100%;height:100%;display:block}
canvas.flip[hidden]{display:none}
.shade{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease;
  background:linear-gradient(180deg,rgba(18,24,48,0) 0%,rgba(18,24,48,.10) 45%,rgba(18,24,48,.42) 100%)}
.stage.titled .shade{opacity:1}
.phase2 .shade{background:linear-gradient(180deg,rgba(18,24,48,0) 0%,rgba(18,24,48,.18) 40%,rgba(18,24,48,.5) 100%)}
.curtain{position:absolute;inset:0;background:#07080c;z-index:20;pointer-events:none;transition:opacity 1.4s ease}
.playing .curtain{opacity:0}

/* ---------- the title stack ---------- */
.stack{
  --W:min(620px, 86vw, calc((100svh - 84px) / 1.37));
  position:absolute;left:50%;top:0;width:var(--W);transform:translate(-50%, var(--gy, 30vh)) scale(var(--gs, 1));transform-origin:50% 0;
  display:flex;flex-direction:column;align-items:center;z-index:5}

.piece{opacity:0;will-change:transform,opacity}
.logo{margin:0;width:100%;line-height:0}
.logo img{display:block;width:calc(100% * 1260 / 1100);max-width:none;height:auto;margin:-7.2727%}   /* shadow baked into the image (Safari drew a box around the CSS shadow) */
.plaque{width:65.7%;height:auto;margin-top:calc(var(--W) * .037);filter:drop-shadow(0 8px 16px rgba(20,30,60,.35))}
.tag{width:100%;display:flex;flex-direction:column;align-items:center;margin-top:calc(var(--W) * .029)}
.fl{width:54.7%;height:auto;filter:drop-shadow(0 1px 0 rgba(255,250,235,.55)) drop-shadow(0 0 6px rgba(255,248,230,.45))}
.tagline-art{width:80%;height:auto;margin-top:calc(var(--W) * .025);filter:drop-shadow(0 1px 1px rgba(28,38,24,.9)) drop-shadow(0 0 7px rgba(22,28,18,.55))}
.fl-bot{margin-top:calc(var(--W) * .016)}

/* Dr. Naomi's seal: under the tagline; after the scroll she slides down below the ticket, same size */
.seal{width:40%;height:auto;margin-top:calc(var(--W) * .04);filter:drop-shadow(0 12px 22px rgba(25,20,40,.4))}

/* ---------- departure board: THE TRAIN IS COMING ---------- */
.board{width:min(calc(100vw - 28px), calc(var(--W) * 1.45));padding-top:calc(var(--W) * .03);
  display:flex;flex-direction:column;align-items:center;gap:calc(var(--W) * .02)}
.row{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--W) * .014) calc(var(--W) * .03)}
.word{display:flex;gap:calc(var(--W) * .007)}
.flap{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:calc(var(--W) * .062);height:calc(var(--W) * .084);border-radius:calc(var(--W) * .007);
  font-family:"Cinzel",Georgia,serif;font-weight:900;font-size:calc(var(--W) * .058);line-height:1;color:#d4b483;
  background:linear-gradient(180deg,#3e5d7e 0%,#385677 49%,#2f4b69 50%,#345273 100%);
  box-shadow:0 2px 0 rgba(15,25,40,.55),0 6px 12px rgba(20,20,40,.3),inset 0 0 0 1px rgba(20,35,55,.6),inset 0 1px 0 rgba(255,255,255,.08)}
.flap::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.35)}
.flap.tick{animation:tick .09s linear}
@keyframes tick{0%{transform:perspective(200px) rotateX(0)}50%{transform:perspective(200px) rotateX(-70deg)}100%{transform:perspective(200px) rotateX(0)}}
@media (max-width:560px){
  .flap{width:calc(var(--W) * .074);height:calc(var(--W) * .1);font-size:calc(var(--W) * .07)}
}
.arriving{margin:0;font-family:"Cinzel",Georgia,serif;font-weight:900;text-transform:uppercase;letter-spacing:.12em;
  font-size:clamp(15px, calc(var(--W) * .04), 24px);color:#ecd9ad;text-shadow:0 1px 12px rgba(20,20,40,.85),0 0 2px rgba(20,20,40,.7);
  opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease}
.arriving.on{opacity:1;transform:none}

/* ---------- folds: open smoothly from zero height ---------- */
.fold{display:grid;grid-template-rows:0fr;width:min(calc(100vw - 16px), 1000px);flex:0 0 auto;opacity:0;
  transition:grid-template-rows 1s cubic-bezier(.6,0,.2,1),opacity .7s ease}
.fold-in{min-height:0;overflow:hidden;display:flex;flex-direction:column;align-items:center}
.phase2 .fold{grid-template-rows:1fr;opacity:1;transition-delay:0s,.25s}
/* once the ticket is out the fold is fully open: let MEET THE TRAINS float below it without being clipped */
.phaseB .fold-in{overflow:visible}

/* ticket with "Watch the video" to its right (stacked on phones) */
/* the ticket strip sits above Dr. Naomi, who stays centred */
.ticket-row{display:flex;flex-direction:column-reverse;align-items:center;justify-content:center;gap:calc(var(--W) * .03);width:100%;margin-top:calc(var(--W) * .04)}
/* Dr. Naomi's spot to the left of the ticket (she flies here from under the tagline) */
.seal-spot{flex:0 0 auto;width:calc(var(--W) * .40);display:flex;justify-content:center}
.seal-spot .seal{width:100%;margin-top:0}
/* final frame: tuck the strip up under ARRIVING JUNE 2027 so the spacing matches the strip-to-Naomi gap */
.phaseB .ticket-row{margin-top:calc(var(--W) * .012)}
/* step one: only Naomi in the row (centred under the board); step two: the ticket joins on her right */
.tkt,.watch{display:none}
.phaseB .tkt{display:block;animation:tktIn .8s cubic-bezier(.2,.7,.2,1) .2s both}
.phaseB .watch{display:inline-block;animation:fadeUp .6s ease .7s both}
@keyframes tktIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:760px){
  .ticket-row{flex-direction:column-reverse;gap:6px}
  .seal-spot{width:calc(var(--W) * .40)}
}

/* ---------- the ticket: a slim cream ticket strip - e-mail on the left, tear-off stub on the right ---------- */
.tkt{flex:0 0 auto;width:max(320px, min(calc(var(--W) * .92), calc(100vw - 20px)));max-width:calc(100vw - 16px);padding:4px 0 0}
.tkt-in{position:relative}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ticket-form{display:flex;align-items:stretch;filter:drop-shadow(0 10px 18px rgba(15,20,40,.4)) drop-shadow(0 2px 3px rgba(15,20,40,.3));transition:opacity .4s ease}
/* ticket notches where the stub tears off */
.strip,.stub{--n:9px}
.strip{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:10px 18px 11px;
  background:#f7eed8;border:3px double #b33a24;border-right:0;border-radius:8px 0 0 8px;
  background-image:radial-gradient(rgba(120,90,40,.06) 1px,transparent 1px);background-size:5px 5px;
  -webkit-mask:radial-gradient(circle at 100% 0,transparent var(--n),#000 calc(var(--n) + .5px)) top/100% 51% no-repeat,radial-gradient(circle at 100% 100%,transparent var(--n),#000 calc(var(--n) + .5px)) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle at 100% 0,transparent var(--n),#000 calc(var(--n) + .5px)) top/100% 51% no-repeat,radial-gradient(circle at 100% 100%,transparent var(--n),#000 calc(var(--n) + .5px)) bottom/100% 51% no-repeat}
.strip-label{font-family:"Cinzel",Georgia,serif;font-weight:900;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:#2b4a72;line-height:1.1}
.strip input{width:100%;min-width:0;margin:0;border:0;border-bottom:2px dotted rgba(43,74,114,.55);background:transparent;padding:3px 0 2px;
  font-family:"abadi","Barlow",system-ui,sans-serif;font-size:16px;color:#1d2c44}
.strip input::placeholder{color:rgba(43,74,114,.6);font-style:italic}
.strip input:focus{outline:none;border-bottom-color:#b33a24}
.stub{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;margin:0;padding:8px 18px 9px 20px;
  background:#f7eed8;border:3px double #b33a24;border-left:0;border-radius:0 8px 8px 0;cursor:pointer;color:#b33a24;
  transition:transform .15s ease,background .15s ease;
  -webkit-mask:radial-gradient(circle at 0 0,transparent var(--n),#000 calc(var(--n) + .5px)) top/100% 51% no-repeat,radial-gradient(circle at 0 100%,transparent var(--n),#000 calc(var(--n) + .5px)) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle at 0 0,transparent var(--n),#000 calc(var(--n) + .5px)) top/100% 51% no-repeat,radial-gradient(circle at 0 100%,transparent var(--n),#000 calc(var(--n) + .5px)) bottom/100% 51% no-repeat}
.stub::before{content:"";position:absolute;left:-1px;top:12px;bottom:12px;width:2px;
  background:repeating-linear-gradient(180deg,#b33a24 0 4px,transparent 4px 9px)}
.stub .admit{font-family:"Cinzel",Georgia,serif;font-weight:700;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#2b4a72}
.stub .save{font-family:"Cinzel",Georgia,serif;font-weight:900;font-size:18px;letter-spacing:.03em;white-space:nowrap;text-transform:uppercase}
.stub:hover{background:#fff6e2;transform:translateY(-2px)}
.stub:active{transform:translateY(1px) scale(.98)}
.stub:focus-visible{outline:3px solid #f2d79a;outline-offset:3px}
.stub:disabled{cursor:progress;opacity:.8}
@media (max-width:760px){
}
@media (max-width:560px){
  .strip{padding:8px 12px 9px}
  .strip-label{font-size:13px;letter-spacing:.16em}
  .stub{padding:6px 11px 7px 13px}
  .stub .admit{font-size:9px}
  .stub .save{font-size:14px}
}
@media (max-height:500px) and (orientation:landscape){
  .strip{padding:7px 12px 8px}
  .strip-label{font-size:12px;letter-spacing:.14em;white-space:nowrap}
  .stub{padding:6px 11px 7px 13px}
  .stub .admit{font-size:9px}
  .stub .save{font-size:13px}
}
@media (max-width:400px){
  .strip{padding:8px 10px 9px}
  .strip-label{font-size:12px;letter-spacing:.12em;white-space:nowrap}
  .stub{padding:6px 9px 7px 11px}
  .stub .save{font-size:13px}
}

/* after "Save my seat": the strip lifts away and the ticket is stamped */
.stamp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg) scale(2.4);opacity:0;white-space:nowrap;pointer-events:none;
  font-family:"Cinzel",Georgia,serif;font-weight:900;font-size:clamp(15px, calc(var(--W) * .05), 28px);letter-spacing:.08em;text-transform:uppercase;color:#c0392b;
  border:3px solid #c0392b;border-radius:8px;padding:1px 12px;background:rgba(255,248,236,.9);box-shadow:0 2px 8px rgba(80,20,10,.2)}
.saved .ticket-form{opacity:0;pointer-events:none}
.saved .stamp{animation:stamp .35s cubic-bezier(.3,1.6,.5,1) .3s forwards}
@keyframes stamp{to{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}
.issued-note{margin:0;max-width:440px;min-height:0;text-align:center;font-size:15px;line-height:1.45;color:#fff;text-shadow:0 1px 10px rgba(20,20,40,.85)}
.issued-note:empty{display:none}
.stage:not(.phaseB) .issued-note{display:none}

/* ---------- watch link ---------- */
.watch{margin-top:4px;font-family:"Cinzel",Georgia,serif;font-weight:900;text-transform:uppercase;letter-spacing:.12em;
  font-size:clamp(16px, calc(var(--W) * .037), 22px);color:#d9bc8a;white-space:nowrap;text-decoration:none;
  text-shadow:0 1px 10px rgba(15,20,40,.9),0 0 2px rgba(15,20,40,.8);border-bottom:1px solid rgba(217,188,138,.6);padding-bottom:2px}
.watch:hover{color:#f0d7a6}
.watch span{display:inline-block;transition:transform .2s}
.watch:hover span{transform:translateX(4px)}
.watch:focus-visible{outline:3px solid #f2d79a;outline-offset:3px}

/* play button, only when the browser won't start the film by itself */
.play-go{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;display:inline-flex;align-items:center;gap:12px;
  padding:14px 26px 14px 20px;border-radius:999px;border:2px solid rgba(255,255,255,.85);background:rgba(20,26,48,.45);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;cursor:pointer;
  font-family:"Cinzel",Georgia,serif;font-weight:900;font-size:20px;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.play-go[hidden]{display:none}
.play-go .tri{width:0;height:0;border-left:16px solid #f2d79a;border-top:10px solid transparent;border-bottom:10px solid transparent}
.play-go:hover{background:rgba(20,26,48,.6)}
.play-go:focus-visible{outline:3px solid #f2d79a;outline-offset:4px}

/* scroll cue, shown once the title is built */
.cue{position:absolute;left:50%;bottom:22px;z-index:7;transform:translateX(-50%);opacity:0;transition:opacity .6s}
.cue i{display:block;width:22px;height:34px;border:2px solid rgba(255,255,255,.85);border-radius:12px;position:relative;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.cue i::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:#fff;animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}100%{opacity:0}}
.built .cue{opacity:1}
.phase2 .cue{opacity:0}

/* ---------- the final scroll: credit line + Two-Ply, laid over the bottom of the frame ---------- */
.credit{position:absolute;left:0;right:0;bottom:clamp(12px, 3.6vh, 40px);z-index:7;margin:0;padding:0 12px;border:0;text-align:center;
  font-family:Georgia,"Times New Roman",serif;font-size:clamp(11.5px, calc(1vw + 4px), 15px);line-height:1.3;letter-spacing:.02em;
  color:#ecd9ad;text-shadow:0 1px 6px rgba(10,14,30,.9),0 0 2px rgba(10,14,30,.6);
  opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .8s ease,transform .8s ease}
.credit a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(236,217,173,.35)}
.credit a:hover{color:#fff1cf;border-color:rgba(255,241,207,.7)}
.credit a:focus-visible{outline:2px solid #f2d79a;outline-offset:3px}
.phaseC .credit{opacity:1;transform:none;pointer-events:auto}

.peek-wrap{--tw:clamp(70px, 11vw, 215px);position:absolute;z-index:7;bottom:0;width:var(--tw);
  left:calc(50% + 23.5em);font-size:clamp(11.5px, calc(1vw + 4px), 15px)}
.peek{display:block;width:100%;margin:0;padding:0;border:0;background:none;cursor:pointer;
  transform:translateY(110%);transition:transform .9s cubic-bezier(.25,1.45,.45,1) .35s}
.peek img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.phaseC .peek{transform:translateY(40%)}
.phaseC .peek:hover,.phaseC .peek:focus-visible{transform:translateY(30%) rotate(-5deg);transition-duration:.3s;transition-delay:0s}
.peek:focus-visible{outline:none}
.peek-msg{position:absolute;right:0;bottom:calc(var(--tw) * .62 + 10px);white-space:nowrap;
  background:#fbf3e2;color:#2b4a72;font-family:"Cinzel",Georgia,serif;font-weight:900;font-size:13px;letter-spacing:.06em;
  padding:6px 11px;border-radius:10px;box-shadow:0 6px 16px rgba(0,0,0,.3);opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;pointer-events:none}
.peek-msg.on{opacity:1;transform:none}
@media (max-width:600px){
  .credit{font-size:12px;line-height:1.35;padding:0 96px 0 12px;text-align:left}
  .credit .dot{display:none}
  .credit .ln{display:block}
  .peek-wrap{--tw:76px;left:auto;right:10px}
}

@media (prefers-reduced-motion:reduce){
  .cue i::after{animation:none}
  .fold,.arriving{transition:none}
  .saved .stamp{animation-duration:.01s}
  .phaseB .tkt,.phaseB .watch{animation:none}
}