:root{
  --parchment:#F2E9D4;
  --ink:#3B2F23;
  --ink-soft:#594A38;
  --oxblood:#7A2823;
  --gold:#9E7830;
  --gold-bright:#C79A3F;
  --serif-display:'Gloock', Georgia, 'Times New Roman', serif;
  --serif-body:'Crimson Pro', Georgia, serif;
  --hand:'Nothing You Could Do', cursive;
}
*{box-sizing:border-box;}
button,a{-webkit-tap-highlight-color:transparent; touch-action:manipulation;}
html,body{margin:0;padding:0;}
body{
  background:var(--parchment);
  color:var(--ink);
  font-family:var(--serif-body), Georgia, serif;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
}

/* parchment texture, shared everywhere */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(ellipse 60% 40% at 15% 10%, rgba(122,40,35,0.05), transparent 60%),
    radial-gradient(ellipse 50% 35% at 90% 85%, rgba(158,120,48,0.07), transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(59,47,35,0.05), transparent 60%),
    radial-gradient(ellipse 40% 30% at 85% 15%, rgba(59,47,35,0.04), transparent 60%);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

.scene{
  position:relative;
  z-index:1;
  min-height:100vh;
  min-height:100dvh;
  width:100%;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:6vh 6vw;
  text-align:center;
}
.scene.active{display:flex;}
.scene.fading-out{animation:sceneOut .5s ease forwards;}
.scene.fading-in{animation:sceneIn .6s ease forwards;}
@keyframes sceneOut{to{opacity:0; transform:scale(.98);}}
@keyframes sceneIn{from{opacity:0; transform:scale(1.01);} to{opacity:1; transform:scale(1);}}

/* ---------- shared decorative frame ---------- */
.rule-frame{
  position:relative;
  border-top:1px solid var(--gold);
  border-bottom:1px solid var(--gold);
  padding:2.2em 1.2em;
}
.corner{
  position:absolute;
  width:22px;height:22px;
  border:1px solid var(--gold);
  opacity:0.8;
}
.corner.tl{top:-1px;left:-1px;border-right:none;border-bottom:none;}
.corner.tr{top:-1px;right:-1px;border-left:none;border-bottom:none;}
.corner.bl{bottom:-1px;left:-1px;border-right:none;border-top:none;}
.corner.br{bottom:-1px;right:-1px;border-left:none;border-top:none;}

/* ============ SCENE 1 — THE LETTER ============ */
#scene-envelope{cursor:default;}

.owl-wrap{
  position:absolute;
  top:10vh;
  left:50%;
  width:min(24vw,96px);
  margin-left:-48px;
  z-index:6;
  pointer-events:none;
  animation:owlFly 3.4s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes owlFly{
  0%{transform:translate(58vw,-46vh) rotate(12deg); opacity:0;}
  10%{opacity:1;}
  46%{transform:translate(0,0) rotate(0deg); opacity:1;}
  58%{transform:translate(0,0) rotate(-3deg); opacity:1;}
  86%{transform:translate(-58vw,-42vh) rotate(-16deg); opacity:1;}
  100%{transform:translate(-72vw,-52vh) rotate(-18deg); opacity:0;}
}
.owl-wing{transform-origin:70px 70px;}
.owl-wing-l{transform-origin:60px 65px;}
.owl-wing-r{transform-origin:80px 65px;}
.owl-wrap .owl-wing-l{animation:wingFlapL .38s ease-in-out infinite;}
.owl-wrap .owl-wing-r{animation:wingFlapR .38s ease-in-out infinite;}
@keyframes wingFlapL{0%,100%{transform:rotate(0deg);} 50%{transform:rotate(-22deg);}}
@keyframes wingFlapR{0%,100%{transform:rotate(0deg);} 50%{transform:rotate(22deg);}}
.owl-parcel{
  animation:parcelDrop 3.4s ease forwards;
  transform-origin:70px 113px;
}
@keyframes parcelDrop{
  0%,58%{opacity:1; transform:translateY(0);}
  70%{opacity:1; transform:translateY(0);}
  78%{opacity:0; transform:translateY(30px) rotate(20deg);}
  100%{opacity:0;}
}

.envelope-wrap{
  position:relative;
  width:min(86vw,340px);
  aspect-ratio:3/2.4;
  perspective:1200px;
  opacity:0;
  transform:translateY(-14px) scale(0.95);
  animation:envelopeSettle .8s ease forwards;
  animation-delay:1.55s;
}
@keyframes envelopeSettle{to{opacity:1; transform:translateY(0) scale(1);}}
.tap-cue,.letter-hint,.skip-link{opacity:0;}
.tap-cue{
  animation:fadeInSimple .8s ease forwards;
  animation-delay:2.3s;
}
@keyframes fadeInSimple{to{opacity:1;}}
.envelope-body{
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, #e9dcbd, #dfd0ac 60%, #d6c398);
  border:1px solid var(--gold);
  box-shadow:0 10px 30px rgba(59,47,35,0.25), inset 0 0 0 1px rgba(158,120,48,0.3);
  border-radius:2px;
}
.envelope-flap{
  position:absolute;
  top:0; left:0; right:0;
  height:55%;
  background:linear-gradient(160deg,#e3d5b1,#cdb98c);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top center;
  transition:transform 1.1s cubic-bezier(.62,.04,.32,1);
  z-index:3;
  border-bottom:1px solid rgba(158,120,48,0.4);
}
.envelope-wrap.open .envelope-flap{transform:rotateX(180deg);}
.envelope-address{
  position:absolute;
  left:0;right:0;
  top:67%;
  padding:0 10%;
  font-family:var(--hand);
  color:var(--ink);
  font-size:clamp(0.9rem,4.2vw,1.25rem);
  line-height:1.4;
  z-index:2;
  text-align:left;
}
.envelope-address .addressee{font-size:1.15em; color:var(--oxblood);}
.seal{
  position:absolute;
  left:50%; top:47%;
  transform:translate(-50%,-50%);
  width:76px; height:76px;
  border-radius:50%;
  z-index:4;
  background:radial-gradient(circle at 35% 30%, #9c3a33, var(--oxblood) 55%, #5c1c18 100%);
  box-shadow:0 4px 10px rgba(0,0,0,0.35), inset 0 0 0 2px rgba(0,0,0,0.15);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border:none;
  padding:0;
  -webkit-tap-highlight-color:transparent;
  transition:transform .25s ease;
}
.seal:active{transform:translate(-50%,-50%) scale(.93);}
.seal .monogram{
  font-family:var(--serif-display);
  color:#e9d9b8;
  font-size:1.7rem;
  text-shadow:0 1px 1px rgba(0,0,0,0.4);
}
.seal-ring{
  position:absolute;
  inset:6px;
  border-radius:50%;
  border:1px dashed rgba(233,217,184,0.5);
}
@keyframes sealPulse{
  0%,100%{box-shadow:0 4px 10px rgba(0,0,0,0.35), 0 0 0 0 rgba(122,40,35,0.5);}
  50%{box-shadow:0 4px 10px rgba(0,0,0,0.35), 0 0 0 10px rgba(122,40,35,0);}
}
.seal.pulse{animation:sealPulse 2.4s ease-in-out infinite;}
.envelope-wrap.open .seal{
  animation:sealPop .5s ease forwards;
}
@keyframes sealPop{
  0%{opacity:1; transform:translate(-50%,-50%) scale(1);}
  100%{opacity:0; transform:translate(-50%,-50%) scale(0.4);}
}
.letter-hint{
  margin-top:2.4em;
  font-family:var(--hand);
  color:var(--ink-soft);
  font-size:1.15rem;
  opacity:0;
  transition:opacity 1.2s ease;
}
.letter-hint.show{opacity:0.85;}
.tap-cue{
  margin-top:2.2em;
  font-size:0.78rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold);
  font-family:var(--serif-body);
}
.skip-link{
  position:fixed;
  bottom:max(18px, env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  font-family:var(--hand);
  font-size:1.05rem;
  color:var(--oxblood);
  text-decoration:none;
  border-bottom:1px dashed var(--oxblood);
  padding-bottom:2px;
  opacity:0;
  animation:fadeUp .8s ease forwards;
  animation-delay:.3s;
  z-index:5;
  background:none;
  cursor:pointer;
}
@keyframes fadeUp{from{opacity:0; transform:translate(-50%,10px);} to{opacity:0.9; transform:translate(-50%,0);}}

/* ============ SCENE 2 — SORTING ============ */
#scene-sorting{background:radial-gradient(ellipse at 50% 30%, rgba(122,40,35,0.06), transparent 65%);}
.hat-wrap{
  width:min(56vw,210px);
  margin-bottom:1.6rem;
  transition:transform .25s ease;
}
.hat-wrap.rock{animation:hatRock 1.6s ease-in-out;}
@keyframes hatRock{
  0%,100%{transform:rotate(0deg);}
  20%{transform:rotate(-6deg);}
  40%{transform:rotate(5deg);}
  60%{transform:rotate(-4deg);}
  80%{transform:rotate(3deg);}
}
.hat-mouth{transform-origin:50% 50%;}
.hat-wrap.talk .hat-mouth{animation:mouthTalk .5s ease-in-out infinite;}
@keyframes mouthTalk{
  0%,100%{transform:scaleY(1);}
  50%{transform:scaleY(0.4);}
}
.sorting-text{
  min-height:5.6em;
  max-width:480px;
  font-size:clamp(1.05rem,4.3vw,1.4rem);
  color:var(--ink);
  line-height:1.55;
  font-style:italic;
}
.sorting-text .cursor{
  display:inline-block;
  width:0.5em;
  color:var(--oxblood);
  animation:blink 1s step-start infinite;
}
@keyframes blink{50%{opacity:0;}}
.sorting-cue{
  margin-top:1.8rem;
  font-size:0.78rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold);
  opacity:0.85;
}
.slytherin-burst{
  position:fixed;
  inset:0;
  z-index:20;
  display:none;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 30%, rgba(58,138,92,0.22), #16281d 85%);
  text-align:center;
}
.slytherin-burst.show{display:flex;}
.slytherin-title{
  font-family:var(--serif-display);
  font-size:clamp(2.2rem,11vw,4.4rem);
  color:#d9ecdf;
  text-shadow:0 0 24px rgba(58,138,92,0.5);
  letter-spacing:0.03em;
  position:relative;
  z-index:2;
  transform:scale(0.4);
  opacity:0;
  animation:burstIn .6s cubic-bezier(.2,1.4,.4,1) forwards;
  animation-delay:.3s;
}
.slytherin-jk{
  position:absolute;
  bottom:10vh;
  left:0; right:0;
  z-index:2;
  font-family:var(--hand);
  font-size:clamp(1.3rem,6vw,2rem);
  color:#eef7f1;
  opacity:0;
  transition:opacity .5s ease;
}
.slytherin-jk.show{opacity:1;}
.snake{
  position:absolute;
  top:0;
  width:min(22vw,90px);
  z-index:1;
  opacity:0;
  animation:snakeFall 2.2s cubic-bezier(.4,0,.6,1) forwards;
}
@keyframes snakeFall{
  0%{transform:translateY(-30vh) rotate(-6deg); opacity:0;}
  10%{opacity:1;}
  30%{transform:translateY(0vh) rotate(8deg);}
  55%{transform:translateY(40vh) rotate(-8deg);}
  80%{transform:translateY(80vh) rotate(6deg);}
  100%{transform:translateY(115vh) rotate(-4deg); opacity:0.85;}
}
.gryffindor-burst{
  position:fixed;
  inset:0;
  z-index:20;
  display:none;
  align-items:center;
  justify-content:center;
  background:radial-gradient(ellipse at 50% 50%, rgba(122,40,35,0.14), var(--parchment) 75%);
  text-align:center;
}
.gryffindor-burst.show{display:flex;}
.gryffindor-title{
  font-family:var(--serif-display);
  font-size:clamp(2.6rem,13vw,5.5rem);
  color:var(--oxblood);
  text-shadow:0 0 24px rgba(158,120,48,0.5), 0 2px 0 var(--gold);
  letter-spacing:0.03em;
  transform:scale(0.4);
  opacity:0;
  animation:burstIn .7s cubic-bezier(.2,1.4,.4,1) forwards;
}
@keyframes burstIn{to{transform:scale(1); opacity:1;}}
.lion-pop{
  position:absolute;
  width:min(14vw,58px);
  top:18vh;
  transform:scale(0.3);
  opacity:0;
  animation:lionPop .6s cubic-bezier(.2,1.4,.4,1) forwards;
  animation-delay:.55s;
}
.lion-pop.left{left:8vw;}
.lion-pop.right{right:8vw;}
@keyframes lionPop{to{opacity:1; transform:scale(1);}}
.burst-continue{
  position:absolute;
  bottom:6vh;
  font-family:var(--hand);
  font-size:1.2rem;
  color:var(--ink);
  opacity:0;
  animation:fadeUp 1s ease forwards;
  animation-delay:1.4s;
  background:none;border:none;
  border-bottom:1px dashed var(--oxblood);
  padding-bottom:2px;
  cursor:pointer;
}
canvas#confetti-canvas{
  position:fixed; inset:0; z-index:21; pointer-events:none;
}

/* ============ SCENE 3 — HAPPY BIRTHDAY ============ */
.card{
  max-width:560px;
  width:100%;
}
.card h1{
  font-family:var(--serif-display);
  font-size:clamp(2rem,7.5vw,3.1rem);
  color:var(--oxblood);
  margin:0 0 0.9em;
  line-height:1.2;
}
.personal-note{
  font-family:var(--hand);
  font-size:clamp(1.1rem,4.2vw,1.4rem);
  color:var(--ink);
  line-height:1.7;
  margin:1.4em auto;
  max-width:440px;
  white-space:pre-wrap;
}
.witch-wrap{
  margin:1.6rem auto 0.4rem;
  width:min(52vw,200px);
  cursor:pointer;
  position:relative;
}
.witch-label{
  font-family:var(--hand);
  font-size:1.05rem;
  color:var(--ink-soft);
  margin-top:0.2em;
}
.sparkle{
  position:absolute;
  border-radius:50%;
  background:var(--gold-bright);
  pointer-events:none;
  box-shadow:0 0 6px 1px rgba(199,154,63,0.9);
}
.ribbon-btn{
  margin-top:2.2rem;
  display:inline-flex;
  align-items:center;
  gap:0.6em;
  background:var(--oxblood);
  color:#f2e6d0;
  font-family:var(--serif-display);
  font-size:1.05rem;
  letter-spacing:0.03em;
  padding:0.85em 1.8em;
  border:none;
  border-radius:2px;
  cursor:pointer;
  position:relative;
  box-shadow:0 6px 16px rgba(122,40,35,0.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.ribbon-btn:active{transform:translateY(2px); box-shadow:0 3px 8px rgba(122,40,35,0.35);}
.ribbon-btn::before{
  content:"";
  width:20px;height:20px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #d6a44a, var(--gold) 60%, #8a6720);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.2);
  flex:none;
}

/* ============ SCENE 4 — ITINERARY ============ */
#scene-itinerary{
  display:none;
  justify-content:flex-start;
  padding:5vh 5vw 8vh;
  min-height:100vh;
  overflow-y:visible;
}
#scene-itinerary.active{display:flex;}
.itinerary-inner{
  max-width:640px;
  width:100%;
  margin:0 auto;
}
.itin-oath{
  font-family:var(--hand);
  font-size:1.1rem;
  color:var(--ink-soft);
}
.itin-header{
  font-family:var(--serif-display);
  font-size:clamp(1.5rem,6vw,2.1rem);
  color:var(--oxblood);
  margin:0.4em 0 1.4em;
  line-height:1.3;
}
.day-block{margin-top:2.6rem;}
.day-title{
  font-variant:small-caps;
  letter-spacing:0.08em;
  color:var(--oxblood);
  font-size:1.15rem;
  font-weight:600;
  border-bottom:1px solid var(--gold);
  padding-bottom:0.4em;
  margin-bottom:0.2em;
  text-align:left;
}
.path{
  position:relative;
  text-align:left;
  padding-left:52px;
}
.path::before{
  content:"";
  position:absolute;
  left:20px; top:8px; bottom:8px;
  width:0;
  border-left:2px dotted var(--gold);
}
.stop{
  position:relative;
  padding:1.3rem 0;
  border-bottom:1px dashed rgba(122,40,35,0.15);
}
.stop:last-child{border-bottom:none;}
.medallion{
  position:absolute;
  left:-52px;
  top:1.3rem;
  width:40px;height:40px;
  border-radius:50%;
  background:var(--parchment);
  border:2px solid var(--oxblood);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--serif-display);
  color:var(--oxblood);
  font-size:0.95rem;
}
.medallion::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  border:1px solid var(--gold);
}
.stop-time{
  color:var(--gold);
  font-weight:600;
  font-size:0.95rem;
  letter-spacing:0.03em;
}
.stop-name{
  font-family:var(--serif-display);
  color:var(--ink);
  font-size:1.25rem;
  margin:0.15em 0 0.1em;
}
.stop-venue{
  font-style:italic;
  color:var(--ink-soft);
  font-size:1rem;
}
.stop-note{
  font-family:var(--hand);
  font-size:1.15rem;
  color:var(--oxblood);
  margin-top:0.4em;
}
.stop.watch-stop .stop-name::after{
  content:" ⏱";
}
.timer-link{
  display:inline-block;
  margin-top:0.5em;
  font-family:var(--hand);
  font-size:1.05rem;
  color:var(--oxblood);
  border-bottom:1px dashed var(--oxblood);
  cursor:pointer;
  background:none;border:none;padding:0;
}
.itin-footer{
  margin-top:3rem;
  text-align:center;
}
.mischief{
  font-family:var(--hand);
  font-size:1.4rem;
  color:var(--ink);
}
.pdf-link{
  display:block;
  margin-top:1.6rem;
  font-size:0.85rem;
  letter-spacing:0.05em;
  color:var(--ink-soft);
  text-decoration:none;
  border-bottom:1px solid var(--gold);
  padding-bottom:2px;
  display:inline-block;
}
.footer-seal{
  width:46px;height:46px;
  border-radius:50%;
  margin:1.2rem auto 0;
  background:radial-gradient(circle at 35% 30%, #9c3a33, var(--oxblood) 55%, #5c1c18 100%);
  display:flex;align-items:center;justify-content:center;
  color:#e9d9b8;
  font-family:var(--serif-display);
  font-size:1rem;
  box-shadow:0 3px 8px rgba(0,0,0,0.3);
  cursor:pointer;
  border:none;
}

/* ============ POCKET WATCH TIMER ============ */
.watch-overlay{
  position:fixed; inset:0; z-index:30;
  background:rgba(59,47,35,0.55);
  display:none;
  align-items:center; justify-content:center;
  padding:6vw;
}
.watch-overlay.show{display:flex;}
.watch-face{
  width:min(72vw,280px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #f7edd4, var(--parchment) 70%);
  border:6px solid var(--oxblood);
  box-shadow:0 0 0 3px var(--gold), 0 20px 40px rgba(0,0,0,0.4);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
}
.watch-time{
  font-family:var(--serif-display);
  font-size:clamp(2rem,9vw,2.8rem);
  color:var(--oxblood);
}
.watch-label{
  font-family:var(--hand);
  font-size:1.1rem;
  color:var(--ink-soft);
  margin-top:0.3em;
}
.watch-close{
  margin-top:1.6rem;
  font-family:var(--hand);
  font-size:1.1rem;
  color:#f2e6d0;
  background:none;border:none;
  border-bottom:1px dashed #f2e6d0;
  cursor:pointer;
}

.music-toggle{
  position:fixed;
  top:max(14px, env(safe-area-inset-top));
  right:max(14px, env(safe-area-inset-right));
  z-index:15;
  width:44px;height:44px;
  border-radius:50%;
  background:var(--parchment);
  border:1px solid var(--gold);
  color:var(--oxblood);
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  box-shadow:0 2px 8px rgba(59,47,35,0.2);
  opacity:0.88;
  transition:opacity .2s ease, transform .2s ease;
}
.music-toggle:active{transform:scale(.92);}
.music-toggle.muted{opacity:0.55; color:var(--ink-soft);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}