:root{
  /* Space Grotesk** from Google Fonts in Medium or SemiBold; Inter** from Google Fonts for functional clarity.; IBM Plex Sans** for a utilitarian voice; Small marginal annotations */
  --rice:#F7F1E4;
  --kraft:#D8C7A3;
  --ink:#20211D;
  --cyan:#00E5FF;
  --pink:#FF3DAE;
  --lime:#B8FF2C;
  --orange:#FF8A00;
  --lav:#D8C8FF;
  --font-display:"Space Grotesk","Grotesk**","Space",Inter,"IBM Plex Sans",system-ui,sans-serif;
  --font-body:Inter,"Inter**","IBM Plex Sans",system-ui,sans-serif;
  --font-label:"IBM Plex Sans","Sans**",Inter,system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  background:
    radial-gradient(circle at 18% 9%, rgba(216,200,255,.55), transparent 24rem),
    radial-gradient(circle at 83% 22%, rgba(0,229,255,.18), transparent 20rem),
    radial-gradient(circle at 77% 78%, rgba(255,61,174,.14), transparent 18rem),
    linear-gradient(90deg, rgba(216,199,163,.18) 1px, transparent 1px),
    var(--rice);
  background-size:auto,auto,auto,92px 92px,auto;
  font-family:var(--font-body);
  overflow-x:hidden;
}

.paper-grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.42;
  background-image:
    repeating-linear-gradient(0deg, rgba(32,33,29,.035) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(216,199,163,.09) 0 1px, transparent 1px 7px);
  mix-blend-mode:multiply;
}

.field-arcs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.field-arcs span{
  position:absolute;
  width:34vw;
  height:34vw;
  min-width:320px;
  min-height:320px;
  border:1px solid rgba(32,33,29,.10);
  border-left-color:transparent;
  border-bottom-color:transparent;
  border-radius:50%;
  transform:rotate(-25deg);
}
.field-arcs span:nth-child(1){left:2vw;top:35vh}
.field-arcs span:nth-child(2){right:-8vw;top:8vh;border-top-color:rgba(0,229,255,.24)}
.field-arcs span:nth-child(3){left:58vw;top:69vh;border-right-color:rgba(255,61,174,.22)}
.field-arcs span:nth-child(4){left:21vw;top:145vh;border-top-color:rgba(184,255,44,.26)}

.story{position:relative;z-index:1}
.timeline{
  position:fixed;
  left:48.5%;
  top:0;
  width:32px;
  height:100vh;
  z-index:2;
  pointer-events:none;
}
.timeline-cord,.timeline-fill{
  position:absolute;
  left:15px;
  top:0;
  width:2px;
  height:100%;
  background:rgba(32,33,29,.22);
}
.timeline-cord:before{
  content:"";
  position:absolute;
  inset:0 -4px;
  background:repeating-linear-gradient(180deg, transparent 0 18px, rgba(32,33,29,.14) 18px 20px);
}
.timeline-fill{
  height:0%;
  background:linear-gradient(var(--cyan),var(--lime),var(--orange));
  box-shadow:0 0 20px rgba(0,229,255,.5),0 0 26px rgba(184,255,44,.34);
}
.magnet-dot{
  position:absolute;
  left:5px;
  top:18vh;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 0 8px rgba(184,255,44,.14),0 0 34px rgba(184,255,44,.85);
  transform:translateY(-50%) scale(.82);
  transition:background .4s ease, box-shadow .4s ease;
}

.scene{
  min-height:100vh;
  position:relative;
  display:grid;
  align-items:center;
  padding:8vh clamp(20px,6vw,88px);
}
.scene.left{grid-template-columns:minmax(260px,42vw) 1fr}
.scene.right{grid-template-columns:1fr minmax(260px,42vw)}
.scene.right .paper-slip{grid-column:2}

.hero{
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  flex-direction:column;
  padding-left:clamp(24px,10vw,150px);
}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(48px,10vw,148px);
  letter-spacing:-.075em;
  line-height:.86;
  margin:0;
  font-weight:600;
  text-transform:lowercase;
}
.hero-copy{
  max-width:420px;
  margin:26px 0 0;
  font-size:clamp(17px,1.8vw,25px);
  line-height:1.45;
}
.hero-label{margin-bottom:26px}
.stamp,.sticker,.meta{
  font-family:var(--font-label);
  font-size:12px;
  letter-spacing:.11em;
  text-transform:lowercase;
}
.stamp{
  display:inline-block;
  border:1px solid rgba(32,33,29,.3);
  border-radius:999px;
  padding:8px 13px;
  background:rgba(247,241,228,.72);
}
.hero-dot{
  position:absolute;
  left:48.5%;
  top:24vh;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 16px rgba(0,229,255,.12),0 0 42px rgba(0,229,255,.9);
}
.receipt-edge{
  position:absolute;
  right:8vw;
  bottom:9vh;
  width:190px;
  height:12px;
  background:repeating-linear-gradient(90deg,var(--kraft) 0 10px,transparent 10px 18px);
  opacity:.55;
}

.paper-slip{
  position:relative;
  min-height:430px;
  padding:34px clamp(24px,4vw,48px) 28px;
  background:linear-gradient(180deg, rgba(255,255,255,.38), rgba(247,241,228,.92));
  border:1px solid rgba(32,33,29,.22);
  border-radius:10px 10px 18px 18px;
  box-shadow:0 18px 45px rgba(32,33,29,.09),0 1px 0 rgba(255,255,255,.8) inset;
  transform:scale(.965) translateY(28px);
  opacity:.28;
  transition:transform .75s cubic-bezier(.2,.9,.15,1),opacity .75s ease,box-shadow .3s ease;
}
.scene.visible .paper-slip{transform:scale(1) translateY(0);opacity:1}
.paper-slip:hover{
  transform:scale(1.035) translateY(-5px);
  box-shadow:0 28px 70px rgba(32,33,29,.12),0 0 42px rgba(216,200,255,.34);
}
.paper-slip:before{
  content:"";
  position:absolute;
  inset:9px;
  border:1px dashed rgba(32,33,29,.13);
  border-radius:8px 8px 15px 15px;
  pointer-events:none;
}
.neon-cyan{border-top:5px solid var(--cyan)}
.neon-pink{border-top:5px solid var(--pink)}
.neon-orange{border-top:5px solid var(--orange)}
.neon-lime{border-top:5px solid var(--lime)}
.meta{display:flex;gap:14px;justify-content:space-between;color:rgba(32,33,29,.62);margin-bottom:34px}
.meta.centered{justify-content:center;gap:24px}
.paper-slip h2,.after-note h2{
  font-family:var(--font-display);
  font-size:clamp(31px,4.2vw,62px);
  line-height:.96;
  letter-spacing:-.055em;
  margin:0 0 22px;
  max-width:760px;
  font-weight:600;
  text-transform:lowercase;
}
.paper-slip p,.after-note p{
  font-size:clamp(16px,1.38vw,21px);
  line-height:1.7;
  max-width:610px;
  margin:0;
}
.ticket-slip{border-radius:22px 8px 22px 8px}
.receipt-slip{clip-path:polygon(0 0,100% 0,100% calc(100% - 15px),95% 100%,90% calc(100% - 15px),85% 100%,80% calc(100% - 15px),75% 100%,70% calc(100% - 15px),65% 100%,60% calc(100% - 15px),55% 100%,50% calc(100% - 15px),45% 100%,40% calc(100% - 15px),35% 100%,30% calc(100% - 15px),25% 100%,20% calc(100% - 15px),15% 100%,10% calc(100% - 15px),5% 100%,0 calc(100% - 15px))}

.pin{position:absolute;top:-18px;left:50%;transform:translateX(-50%);z-index:3}
.clothespin{width:42px;height:23px;background:var(--kraft);border:1px solid rgba(32,33,29,.32);border-radius:5px;box-shadow:inset 18px 0 0 rgba(247,241,228,.25)}
.magnet{width:36px;height:36px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 7px rgba(255,61,174,.15),0 0 28px rgba(255,61,174,.55)}
.sticker-pin{width:38px;height:38px;border-radius:50%;background:var(--orange);border:6px solid rgba(247,241,228,.8);box-shadow:0 0 24px rgba(255,138,0,.46)}
.paperclip{width:31px;height:47px;border:3px solid var(--ink);border-left-color:transparent;border-radius:18px;box-shadow:5px 0 0 var(--lime)}

.sticker{position:absolute;right:26px;top:74px;border-radius:999px;padding:7px 12px;border:1px solid rgba(32,33,29,.2);background:var(--rice);transform:rotate(5deg)}
.sticker.lime{background:var(--lime)}.sticker.pink{background:var(--pink);color:var(--rice)}.sticker.orange{background:var(--orange);color:var(--rice)}

.illustration{margin-top:28px;width:min(330px,86%)}
.illustration svg{width:100%;height:auto;overflow:visible}
.illustration path,.illustration circle{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:520;stroke-dashoffset:520;transition:stroke-dashoffset 1.5s ease .2s}
.scene.visible .illustration path,.scene.visible .illustration circle{stroke-dashoffset:0}
.illustration .neon{stroke-width:5;stroke:var(--cyan);opacity:.65;transform:translate(5px,5px)}
.ticket .neon{stroke:var(--pink)}.receipt .neon{stroke:var(--orange)}.window .neon{stroke:var(--lime)}

.node{
  position:absolute;
  left:48.5%;
  top:50%;
  width:24px;
  height:24px;
  transform:translate(-50%,-50%);
  z-index:4;
  border-radius:50%;
  background:var(--rice);
  border:1px solid rgba(32,33,29,.28);
}
.node span{position:absolute;inset:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 24px currentColor;color:var(--cyan)}
.node-pink span{background:var(--pink);color:var(--pink)}.node-orange span{background:var(--orange);color:var(--orange)}.node-lime span{background:var(--lime);color:var(--lime)}.node-final span{background:var(--lav);color:var(--lav)}

.bubble{
  position:absolute;
  width:118px;
  height:118px;
  border-radius:46% 54% 52% 48% / 48% 46% 54% 52%;
  display:grid;
  place-items:center;
  color:rgba(32,33,29,.66);
  font-family:var(--font-label);
  font-size:12px;
  letter-spacing:.09em;
  text-transform:lowercase;
  background:radial-gradient(circle at 30% 24%, rgba(255,255,255,.92), rgba(255,255,255,.12) 28%, rgba(0,229,255,.16) 60%, rgba(255,61,174,.12));
  border:1px solid rgba(0,229,255,.42);
  box-shadow:inset 8px 10px 24px rgba(255,255,255,.45),0 0 28px rgba(0,229,255,.16);
  animation:floatBubble 9s ease-in-out infinite;
  transition:transform .6s cubic-bezier(.2,.9,.15,1),opacity .3s ease;
}
.bubble:before{content:"";position:absolute;left:26%;top:21%;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.75)}
.b1{left:66vw;top:20vh}.b2{left:77vw;top:52vh;animation-delay:-2s;border-color:rgba(255,61,174,.45)}.b3{left:18vw;top:68vh;animation-delay:-5s;border-color:rgba(184,255,44,.42)}
.small{width:78px;height:78px;right:15vw;top:29vh}.medium{width:132px;height:132px;left:12vw;top:28vh}.large{width:168px;height:168px;right:10vw;top:58vh}.final-bubble{left:58vw;top:26vh;width:150px;height:150px;border-color:rgba(216,200,255,.7)}
.scene.visible .bubble-tug{transform:translateX(var(--tug-x,0)) translateY(-12px) scale(1.06)}

.afterglow{display:flex;justify-content:center;text-align:center;padding-bottom:18vh}
.after-note{
  width:min(820px,92vw);
  background:rgba(247,241,228,.78);
  border:1px solid rgba(32,33,29,.22);
  border-radius:38px;
  padding:clamp(32px,7vw,88px);
  box-shadow:0 30px 90px rgba(32,33,29,.12),0 0 65px rgba(216,200,255,.28);
}
.after-note h2,.after-note p{margin-left:auto;margin-right:auto}
.final-stamps{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:34px}
.final-stamps span{font-family:var(--font-label);font-size:12px;letter-spacing:.11em;text-transform:lowercase;border:1px solid rgba(32,33,29,.24);border-radius:999px;padding:8px 12px;background:rgba(216,199,163,.28)}
.final-stamps span:nth-child(2){background:var(--lime)}.final-stamps span:nth-child(3){background:var(--pink);color:var(--rice)}.final-stamps span:nth-child(5){background:var(--cyan)}

@keyframes floatBubble{
  0%,100%{translate:0 0;scale:1;rotate:0deg}
  35%{translate:14px -26px;scale:1.04;rotate:4deg}
  68%{translate:-9px -50px;scale:.98;rotate:-3deg}
}

@media (max-width:820px){
  .timeline,.node,.hero-dot{left:26px}
  .scene,.scene.left,.scene.right{display:block;padding:14vh 22px 14vh 64px}
  .scene.right .paper-slip{grid-column:auto}
  .paper-slip{min-height:0}
  .bubble{opacity:.55}
  .small,.medium,.large{right:4vw;left:auto;top:10vh}
  .hero{padding-left:64px;padding-right:22px}
}