@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--lime:#d5ed8b;--duration:14000ms}*{box-sizing:border-box}body{margin:0;background:#101211;color:#f6f5ec;font-family:Inter,Arial,sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:6px}.experience{height:100svh;min-height:560px;position:relative;overflow:hidden;background:#101211}header{position:absolute;z-index:5;inset:32px 42px auto;display:flex;align-items:center;justify-content:space-between}.edition{display:flex;gap:13px;align-items:center;color:inherit;text-decoration:none;font-size:10px;letter-spacing:2.2px;font-weight:700}.edition small{display:block;font-size:7px;color:#93958b;letter-spacing:1.8px;margin-top:6px}.edition-mark{border:1px solid #7c8071;border-radius:8px;font-style:italic;font-size:30px;letter-spacing:-3px;width:42px;height:42px;display:flex;align-items:center;justify-content:center}.edition-mark span{font-size:11px;margin-top:17px;letter-spacing:0}.top-right{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:2px;color:#c4c7b8}.live-dot{width:5px;height:5px;background:var(--lime);border-radius:50%}.stars{margin-left:24px;color:var(--lime);letter-spacing:5px;font-size:15px}.stage{position:absolute;inset:0;perspective:1400px}.scene{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease;overflow:hidden}.scene.active{opacity:1}.scene .backdrop{position:absolute;inset:11% -5% 9%;background-position:center;background-size:cover;transform:rotate(-4deg) scale(1.05);filter:saturate(.65);animation:pan var(--duration) linear both;animation-play-state:paused;box-shadow:0 0 70px #000}.scene.active .backdrop,.scene.active .character{animation-play-state:running}.scene:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,18,17,.62),transparent 70%),linear-gradient(0deg,#101211 1%,transparent 40%,transparent 76%,#101211)}.character{position:absolute;z-index:1;bottom:-9%;left:36%;width:48%;height:99%;object-fit:contain;object-position:bottom;filter:drop-shadow(-20px 15px 30px #0006);animation:slide var(--duration) ease-out both;animation-play-state:paused}.scene:nth-child(2) .character{left:40%;filter:drop-shadow(-20px 15px 30px #0006) hue-rotate(30deg)}.scene:nth-child(3) .character{left:37%;transform:scaleX(-1)}.grain{position:absolute;inset:0;z-index:2;opacity:.055;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.vignette{position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at 55% 45%,transparent 28%,#070b0980 80%,#080b09cc 100%)}.caption{position:absolute;z-index:3;left:7%;top:40%;max-width:460px}.eyebrow{font-size:9px;font-weight:600;letter-spacing:2.7px;color:var(--lime);display:flex;align-items:center;gap:12px}.eyebrow span{width:27px;height:2px;background:var(--lime)}h1{font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;font-size:clamp(48px,6.1vw,94px);line-height:.99;text-transform:uppercase;letter-spacing:-1.5px;margin:21px 0 17px;font-weight:800;text-shadow:0 2px 25px #0003}.caption p{font-size:12px;color:#c7cbc2;letter-spacing:.25px}.scene-nav{display:flex;align-items:center;gap:8px;margin-top:35px}.scene-dot{border:0;width:23px;height:20px;background:transparent;padding:0;position:relative}.scene-dot:after{content:'';position:absolute;left:0;right:0;top:9px;height:3px;background:#858b7d66;border-radius:3px}.scene-dot.active:after{background:var(--lime)}#scene-count{font-size:9px;letter-spacing:2px;color:#b0b6a9;margin-left:12px}.game-logo{position:absolute;right:5.5%;bottom:17%;z-index:3;text-align:center;transform:rotate(-4deg);filter:drop-shadow(3px 5px 0 #000)}.game-logo>span{display:block;font-family:Impact,'Arial Black',sans-serif;font-size:clamp(40px,5.7vw,84px);font-weight:900;letter-spacing:-4px;line-height:.76;-webkit-text-stroke:1.5px #111;paint-order:stroke fill;text-shadow:3px 0 #111,-3px 0 #111,0 3px #111,0 -3px #111}.logo-ribbon{background:var(--lime);color:#1c2d1f;font-size:8px;letter-spacing:2px;font-weight:800;padding:7px 13px;margin-top:14px;border:2px solid #152318;transform:rotate(4deg)}footer{position:absolute;z-index:5;bottom:30px;left:42px;right:42px;display:flex;justify-content:space-between;gap:20px;align-items:center}.audio-controls,.footer-right{display:flex;align-items:center;gap:16px}footer button{background:none;border:1px solid #757b6555;border-radius:50%;width:34px;height:34px;font-size:13px}footer button:hover{background:#d5ed8b20;border-color:var(--lime)}.track-label{font-size:7px;letter-spacing:1.6px;color:var(--lime);display:block}.track-name{display:block;font-size:10px;color:#b2b7a9;margin-top:6px}.track-name span{margin:0 5px;color:#646c5a}#volume{width:65px;height:3px;accent-color:var(--lime);margin-left:12px}.loading-label{font-size:10px;color:#cbd0c2;margin-left:12px}.spinner{width:15px;height:15px;border:2px solid #d5ed8b30;border-top-color:var(--lime);border-radius:50%;animation:spin 1.2s linear infinite}.timeline{position:absolute;z-index:6;bottom:0;left:0;right:0;height:2px;background:#ffffff0a}#progress{height:100%;background:var(--lime);width:0}.paused *{animation-play-state:paused!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@keyframes pan{from{transform:rotate(-4deg) scale(1.1) translateX(-1%)}to{transform:rotate(-2deg) scale(1.18) translateX(1%)}}@keyframes slide{from{translate:12% 0;scale:1.04}to{translate:-3% 0;scale:1.1}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:700px){header{inset:24px 22px auto}.stars{display:none}.top-right{font-size:8px;letter-spacing:1px}.caption{left:7%;top:46%;max-width:75%}h1{font-size:57px}.eyebrow{font-size:7px;letter-spacing:1.8px}.character{left:12%;width:100%;height:88%;bottom:0;opacity:.85}.scene:nth-child(2) .character,.scene:nth-child(3) .character{left:15%}.scene:after{background:linear-gradient(0deg,#101211 0%,#10121166 55%,transparent)}.game-logo{right:7%;bottom:18%}.game-logo>span{font-size:42px;letter-spacing:-2px}.logo-ribbon{font-size:5px;letter-spacing:1px;padding:5px}.caption p{font-size:10px}.scene-nav{margin-top:24px}footer{left:22px;right:22px;bottom:23px}.track-label{font-size:6px;letter-spacing:1px}.track-name{font-size:9px;max-width:170px;line-height:1.5}#volume,.loading-label{display:none}.footer-right{gap:8px}.audio-controls{gap:10px}.spinner{display:none}}@media(prefers-reduced-motion:reduce){.scene .backdrop,.scene .character,.spinner{animation:none!important}.scene{transition:none}}
@media(min-width:701px){.caption{width:52%;max-width:680px}h1{font-size:clamp(48px,5.6vw,86px)}}

/* Keep the entire tilted cinema frame inside the viewport. */
.scene .backdrop {
  inset: 16% 8% 18%;
  transform: rotate(var(--rotation-start, -3deg));
  box-shadow: 0 18px 65px #0008;
}
@keyframes pan {
  from { transform: translateX(-.6%) rotate(var(--rotation-start, -3deg)) scale(.97); background-position: 47% 50%; }
  to { transform: translateX(.6%) rotate(var(--rotation-end, -1.5deg)) scale(1); background-position: 53% 50%; }
}
.scene:after { display: none; }
.scene .backdrop:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, #09121185, transparent 65%);
  pointer-events: none;
}
.character, .scene:nth-child(2) .character, .scene:nth-child(3) .character {
  left: 17%; bottom: 0; width: 43%; height: 91%;
  transform-origin: center bottom;
}
.caption { left: auto; right: 8%; top: 39%; width: 40%; max-width: 570px; }
h1 { font-size: clamp(44px, 4.5vw, 70px); }
.game-logo { left: 4%; right: auto; bottom: 13%; width: clamp(135px, 17vw, 245px); transform: none; }
.game-logo img { display: block; width: 100%; height: auto; }
@media(max-width:700px) {
  .scene .backdrop, .scene:after { inset: 17% 9% 23%; }
  .character, .scene:nth-child(2) .character, .scene:nth-child(3) .character {
    left: -3%; width: 83%; height: 88%; bottom: 0;
  }
  .caption { top: 44%; right: 7%; width: 57%; max-width: none; }
  h1 { font-size: clamp(30px, 8.4vw, 52px); letter-spacing: -.7px; }
  .eyebrow { font-size: 6px; letter-spacing: 1px; line-height: 1.6; gap: 6px; }
  .eyebrow span { width: 14px; flex-shrink: 0; }
  .caption p { line-height: 1.6; }
  .game-logo { left: 5%; bottom: 15%; width: 27%; }
  .scene-nav { margin-top: 18px; }
}

/* Size the second image at 160% of the base; keep its center and bottom anchor. */
.scene:nth-child(2) .character {
  width: 68.8%;
  height: 145.6%;
  left: 4.1%;
  bottom: 0;
  transform: none;
}
@media(max-width:700px) {
  .scene:nth-child(2) .character {
    width: 132.8%;
    height: 140.8%;
    left: -27.9%;
  }
}

/* Keep the third character on the right throughout its entrance and drift. */
.scene:nth-child(3) .character {
  left: 62%;
  width: 30%;
  height: 72%;
  bottom: 0;
  animation-name: slide-right;
}
@keyframes slide-right {
  from { translate: 4% 0; scale: 1; }
  to { translate: 0 0; scale: 1.03; }
}
@media(max-width:700px) {
  .scene:nth-child(3) .character {
    left: 55%;
    width: 40%;
    height: 65%;
  }
}

@font-face {
  font-family: Pricedown;
  src: url('pricedown/Pricedown%20Bl.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
[hidden] { display: none !important; }
#story { position: absolute; inset: 0; transition: opacity 1.2s ease, visibility 1.2s; }
.caption { top: 34%; width: 43%; }
h1, .gift h2 {
  font-family: Pricedown, Impact, sans-serif;
  font-weight: 900;
  text-transform: none;
  letter-spacing: .3px;
  line-height: 1.12;
  font-size: clamp(35px, 4.1vw, 66px);
  text-shadow: 2px 3px 0 #000, 0 3px 20px #000b;
}
.third-scene .caption { left: 10%; right: auto; width: 44%; top: 30%; }
#next { border: 1px solid #ffffff40; border-radius: 50%; background: #10121166; width: 32px; height: 32px; margin-left: 8px; }
.gift-open #story { opacity: 0; visibility: hidden; pointer-events: none; }
.gift-open .scene * { animation-play-state: paused !important; }
.gift { position: absolute; inset: 0; overflow-y: auto; background: #110f1b; z-index: 4; padding: 60px 8% 105px; }
.gift-halo { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 25% 40%, #8c3d7955, transparent 55%), radial-gradient(ellipse at 85% 80%, #21657933, transparent 60%); }
.gift-layout { position: relative; min-height: 100%; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 8%; align-items: center; max-width: 1180px; margin: auto; }
.gift-cover { width: 100%; max-width: 390px; justify-self: center; perspective: 1000px; }
.gift-cover img { display: block; width: 100%; height: auto; max-height: 70svh; object-fit: contain; filter: drop-shadow(0 25px 35px #000a); animation: cover-in 1.6s .5s both cubic-bezier(.2,.8,.2,1); }
.gift h2 { font-size: clamp(64px, 7.5vw, 112px); margin: 0 0 25px; color: #ffcfde; outline: none; animation: gift-in 1s 1.2s both; }
.gift p { font-family: 'Chalet', 'Helvetica Neue', Arial, sans-serif; font-size: clamp(16px, 1.45vw, 21px); line-height: 1.6; color: #e4dfe9; }
.gift-lead { animation: gift-in 1s 2s both; }
.gift-lead strong { color: #ffcfde; }
.gift-message span { display: block; margin-top: 12px; animation: gift-in .9s both; }
.gift-message span:nth-child(1) { animation-delay: 3s; }
.gift-message span:nth-child(2) { animation-delay: 4.3s; }
.gift-message span:nth-child(3) { animation-delay: 5.6s; }
.gift-wishes { animation: gift-in 1s 6.8s both; }
#replay { border: 1px solid #ffcfde55; background: transparent; border-radius: 30px; padding: 12px 20px; margin-top: 12px; font-size: 12px; animation: gift-in 1s 7.5s both; }
#replay:hover { background: #ffcfde18; }
.gift-open footer { background: linear-gradient(transparent, #110f1b); }
@keyframes cover-in { from { opacity: 0; transform: translateY(90px) rotateY(-25deg) rotate(-8deg) scale(.8); } to { opacity: 1; transform: translateY(0) rotateY(0) rotate(-3deg) scale(1); } }
@keyframes gift-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@media(max-width:700px) {
  .caption { top: 34%; width: 57%; }
  h1 { font-size: clamp(27px, 7.5vw, 44px); }
  .third-scene .caption { left: 7%; top: 27%; width: 60%; }
  .gift { padding: 45px 8% 105px; }
  .gift-layout { grid-template-columns: 1fr; gap: 35px; text-align: center; }
  .gift-cover { max-width: 215px; }
  .gift h2 { font-size: 64px; margin-bottom: 18px; }
  .gift p { font-size: 16px; }
  .gift-copy { padding-bottom: 15px; }
}
@media(prefers-reduced-motion:reduce) {
  #story { transition: none; }
  .gift * { animation: none !important; }
}

/* A compact lower caption leaves the scene's main artwork and logo clear. */
.caption, .third-scene .caption {
  top: auto;
  bottom: 88px;
  left: auto;
  right: 6%;
  width: 55%;
  max-width: 760px;
  z-index: 7;
  text-align: right;
}
.caption h1 {
  font-size: clamp(25px, 2.8vw, 43px);
  line-height: 1.12;
  margin: 0;
}
.caption .scene-nav { justify-content: flex-end; margin-top: 14px; }
.gift-cover img { border-radius: 3.5% / 2.7%; }
@media(max-width:700px) {
  .caption, .third-scene .caption {
    bottom: 90px;
    right: 6%;
    width: 59%;
  }
  .caption h1 { font-size: clamp(21px, 5.7vw, 32px); }
  .caption .scene-nav { margin-top: 10px; }
}

/* A neutral invitation keeps the theme hidden until the first click. */
.intro { min-height: 100svh; display: grid; place-items: center; padding: 40px 24px; background: radial-gradient(ellipse at 50% 35%, #29302c, #111513 70%); text-align: center; }
.intro-card { max-width: 550px; }
.intro-dedication { font-size: 10px; letter-spacing: 3px; color: #b3bdaf; }
.intro h1 { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: clamp(42px, 6vw, 76px); font-weight: 600; letter-spacing: -2px; line-height: 1.08; text-shadow: none; margin: 28px 0 22px; }
.intro-note { font-size: 15px; line-height: 1.6; color: #bfc6bc; }
#start { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: 50px; background: #f1ede1; color: #20251f; font-size: 16px; font-weight: 600; padding: 18px 38px; margin-top: 26px; transition: background .2s, transform .2s; }
#start:hover { background: #fff; transform: translateY(-2px); }
#start:disabled { opacity: .6; cursor: wait; }
#intro-status { min-height: 24px; font-size: 13px; color: #e5c5b9; }
#next { display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; flex-shrink: 0; }
#next svg { display: block; }

/* The bottom fade belongs to the viewport, not to the inset controls. */
.gift-open footer { background: none; }
.experience.gift-open::after {
  content: ''; position: absolute; z-index: 4; pointer-events: none;
  inset: auto 0 0; height: 110px;
  background: linear-gradient(transparent, #110f1b);
}
.final-button { border: 1px solid #ffcfde55; background: transparent; border-radius: 30px; padding: 12px 20px; font-size: 12px; }
.final-button:hover { background: #ffcfde18; }
#show-signatures { margin-top: 12px; animation: gift-in 1s 7.5s both; }
.signatures {
  position: absolute; inset: 0; z-index: 4; overflow-y: auto;
  padding: 70px 8% 135px; text-align: center;
  background: radial-gradient(ellipse at 50% 30%, #48213e, transparent 65%), #110f1b;
}
.signatures-content { max-width: 1000px; min-height: 100%; margin: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.signatures-intro { font-size: 10px; letter-spacing: 3px; color: #dbb9d3; }
.signatures h2 {
  font-family: 'Brush Script MT', 'Segoe Script', cursive; font-weight: 400;
  font-size: clamp(58px, 8vw, 105px); line-height: 1.08; margin: 26px 0;
  color: white; transform: rotate(-5deg); outline: none;
  -webkit-text-stroke: 3px #f17bf6; paint-order: stroke fill;
  text-shadow: 0 0 22px #ee74fa55;
  animation: signature-write 2s .2s both linear;
}
#signature-list { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 35px; margin: 20px 0; }
#signature-list:empty { display: none; }
.signature { padding: 10px; animation: signature-write 1.6s var(--signature-delay) both linear; }
.signature img { width: 100%; height: 130px; object-fit: contain; filter: brightness(0) invert(1) drop-shadow(2px 0 #ef7bf5) drop-shadow(-2px 0 #ef7bf5) drop-shadow(0 2px #ef7bf5) drop-shadow(0 -2px #ef7bf5); }
.signature-flourish { width: min(400px, 80%); margin-bottom: 35px; }
.signature-flourish svg { display: block; width: 100%; overflow: visible; }
.signature-flourish path { fill: none; stroke: #faeafa; stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 3px #f17bf6); stroke-dasharray: 1; animation: flourish-write 1.2s 1.6s both ease-out; }
.signatures-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }
.signatures #replay { margin: 0; animation: none; }
@keyframes signature-write { from { clip-path: inset(-15% 110% -15% -10%); } to { clip-path: inset(-15% -10% -15% -10%); } }
@keyframes flourish-write { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media(max-width:700px) { .signatures { padding: 55px 7% 120px; } #signature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; } .signature img { height: 100px; } }
@media(prefers-reduced-motion:reduce) { .signatures *, #show-signatures { animation: none !important; } }
.signature-vector { animation: none; padding: 8px; }
.signature-vector svg { display: block; width: 100%; height: 145px; overflow: visible; }
.signature-pen { stroke-dasharray: 1; stroke-dashoffset: 1; animation: signature-trace var(--pen-duration) var(--pen-delay) linear forwards; }
@keyframes signature-trace { to { stroke-dashoffset: 0; } }
.signatures h2 { font-size: clamp(48px, 6vw, 76px); }
@media(max-width:700px) { .signature-vector svg { height: 110px; } }
@media(prefers-reduced-motion:reduce) { .signature-pen { stroke-dashoffset: 0; } }

#gift-countdown { display: inline-block; min-width: 38px; margin-left: 12px; padding-left: 12px; border-left: 1px solid #ffcfde55; font-variant-numeric: tabular-nums; }
#show-signatures { animation-delay: 0s; }
#signature-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 30px; }
.signature-vector { grid-column: span 2; }
.signature-vector:nth-child(4) { grid-column: 2 / span 2; }
.signature-vector:nth-child(5) { grid-column: 4 / span 2; }
@media(max-width:700px) {
  #signature-list { gap: 18px 8px; }
  .signature-vector { padding: 2px; }
  .signature-vector svg { height: 95px; }
}

/* Hide each whole signature until its first pen stroke begins. */
.signature-vector { opacity: 0; animation: signature-appear .12s var(--signature-start) linear forwards; }
.signature-vector:nth-child(1) { --signature-start: .455s; }
.signature-vector:nth-child(2) { --signature-start: 2.818s; }
.signature-vector:nth-child(3) { --signature-start: 5.182s; }
.signature-vector:nth-child(4) { --signature-start: 7.545s; }
.signature-vector:nth-child(5) { --signature-start: 9.909s; }
@keyframes signature-appear { to { opacity: 1; } }