:root {
  --thanks-paper: oklch(1 0 0);
  --thanks-ink: oklch(0.19 0.018 242);
  --thanks-cyan: oklch(0.68 0.13 205);
  --thanks-token-lift: -96px;
  --thanks-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --thanks-ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --thanks-ease-smooth: cubic-bezier(.65, 0, .35, 1);
}

.deck-header,
.deck-brand,
.header-tag,
.progress {
  transition:
    opacity .36s var(--thanks-ease-out),
    transform .42s var(--thanks-ease-out),
    background .36s ease,
    color .36s ease,
    border-color .36s ease;
}

body.thanks-mode .deck-brand,
body.thanks-mode .progress,
body.thanks-mode .particle-field,
body.thanks-mode .ambient-grid,
body.thanks-mode .transition-flash {
  opacity: 0;
  pointer-events: none;
}

body.thanks-mode .deck-brand { transform: translateY(-10px); }
body.thanks-mode .progress { transform: scaleX(.92); }

#deliveryScene {
  transition: opacity .29s ease;
}

#deliveryScene.handoff-page-switch {
  opacity: 0;
}

/* Explicit wrappers keep the original five icons intact while letting each icon
   and its English label become one transformable object. */
#deliveryScene .delivery-node::before {
  content: none;
  display: none;
}

#deliveryScene .delivery-node {
  transition:
    background-color .18s linear,
    border-color .18s linear;
}

#deliveryScene .delivery-token {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  color: oklch(.76 .018 242);
  font: 22px/1 "Bahnschrift", sans-serif;
  font-style: normal;
  transform-origin: center;
  transition:
    transform .64s var(--thanks-ease-smooth),
    opacity .31s ease,
    filter .31s ease;
  will-change: transform, opacity;
}

#deliveryScene .delivery-token em {
  color: inherit;
  font: inherit;
  font-style: normal;
  white-space: nowrap;
}

#deliveryScene .delivery-icon {
  display: block;
  flex: 0 0 auto;
  width: 112px;
  height: 112px;
  transform: scale(1.18);
}

#deliveryScene .delivery-node:nth-of-type(1) .delivery-icon {
  background:
    linear-gradient(135deg, transparent 41%, var(--blue) 42% 49%, transparent 50%) 0 0 / 34px 34px,
    linear-gradient(45deg, transparent 41%, var(--blue) 42% 49%, transparent 50%) 17px 17px / 34px 34px;
}

#deliveryScene .delivery-node:nth-of-type(2) .delivery-token { gap: 48px; }

#deliveryScene .delivery-node:nth-of-type(2) .delivery-icon {
  width: 82px;
  height: 64px;
  border: 3px solid var(--blue);
  box-shadow:
    18px 18px 0 -3px white,
    18px 18px 0 0 var(--cyan),
    36px 36px 0 -3px white,
    36px 36px 0 0 var(--blue);
}

#deliveryScene .delivery-node:nth-of-type(3) .delivery-icon {
  background: conic-gradient(var(--blue) 0 25%, transparent 0 50%, var(--cyan) 0 75%, transparent 0) 0 0 / 26px 26px;
}

#deliveryScene .delivery-node:nth-of-type(4) .delivery-icon {
  background:
    linear-gradient(var(--blue) 0 0) 0 0 / 100% 4px,
    linear-gradient(var(--blue) 0 0) 0 54px / 100% 4px,
    linear-gradient(var(--blue) 0 0) 0 108px / 100% 4px,
    linear-gradient(90deg, var(--cyan) 0 0) 20px 0 / 4px 100%,
    linear-gradient(90deg, var(--red) 0 0) 84px 0 / 4px 100%;
  background-repeat: no-repeat;
}

#deliveryScene .delivery-node:nth-of-type(5) .delivery-icon {
  background: conic-gradient(var(--cyan) 0 25%, transparent 0 50%, var(--cyan) 0 75%, transparent 0) 0 0 / 52px 52px;
}

#deliveryScene .delivery-node > strong {
  transition:
    opacity .24s ease,
    transform .29s var(--thanks-ease-out),
    filter .24s ease;
  will-change: transform, opacity;
}

#deliveryScene.handoff-source .delivery-line > i {
  animation: none !important;
  opacity: 0 !important;
}

#deliveryScene.handoff-source .delivery-token {
  transform: translateY(var(--thanks-token-lift));
}

#deliveryScene.handoff-source .delivery-node > strong {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(4px);
}

#deliveryScene.handoff-source .delivery-node:last-child {
  background-color: transparent !important;
}

#deliveryScene.handoff-abstracting .delivery-token {
  opacity: 0;
  transform: translateY(var(--token-to-signal, 0px)) scale(.055);
  filter: saturate(.7);
  transition:
    transform .52s var(--thanks-ease-smooth),
    opacity .34s ease,
    filter .34s ease;
}

.thanks-scene {
  z-index: 10;
  overflow: hidden;
  color: var(--thanks-ink);
  background: transparent;
  pointer-events: none;
  transition: none;
}

.thanks-scene.handoff-running,
.thanks-scene.thanks-final,
.thanks-scene.active {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.thanks-paper {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: 0;
  background: var(--thanks-paper);
}

.thanks-light-field {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 45.5%;
  width: 1180px;
  aspect-ratio: 1.8;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.08);
  background:
    radial-gradient(ellipse at 43% 52%, oklch(0.84 0.08 247 / .23), transparent 52%),
    radial-gradient(ellipse at 58% 48%, oklch(0.88 0.09 195 / .21), transparent 52%),
    radial-gradient(ellipse at 51% 51%, oklch(0.88 0.08 31 / .09), transparent 42%);
  filter: blur(34px);
}

.thanks-signal-canvas {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
}

.thanks-closing-copy {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 43%;
  width: 1080px;
  display: grid;
  justify-items: center;
  color: var(--thanks-ink);
  text-align: center;
  transform: translate(-50%, -50%);
}

.thanks-closing-copy h1 {
  margin: 0;
  color: var(--thanks-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Microsoft YaHei UI", sans-serif;
  font-size: 96px;
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: -.03em;
  opacity: 0;
}

.thanks-scene.handoff-running .thanks-paper {
  animation: thanks-paper-lock-in .4s .82s ease both;
}

.thanks-scene.handoff-running .thanks-light-field {
  animation: thanks-light-evolve 2.5s .98s var(--thanks-ease-expo) both;
}

.thanks-scene.handoff-running .thanks-signal-canvas,
.thanks-scene.thanks-final .thanks-signal-canvas {
  opacity: 1;
}

.thanks-scene.active .thanks-closing-copy h1 {
  animation: none;
}

.thanks-scene.handoff-running .thanks-closing-copy h1 {
  animation: thanks-headline-arrive .78s 2.55s var(--thanks-ease-expo) both;
}

.thanks-scene.thanks-final {
  background: var(--thanks-paper);
}

.thanks-scene.thanks-final .thanks-paper { opacity: 1; }

.thanks-scene.thanks-final .thanks-light-field {
  opacity: .055;
  transform: translate(-50%, -50%) scale(.72);
  filter: blur(46px);
}

.thanks-scene.thanks-final .thanks-closing-copy h1 {
  opacity: 1;
}

@keyframes thanks-paper-lock-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes thanks-light-evolve {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.12); filter: blur(44px); }
  34% { opacity: .23; transform: translate(-50%, -50%) scale(.92); filter: blur(30px); }
  70% { opacity: .31; transform: translate(-50%, -50%) scale(.64); filter: blur(26px); }
  100% { opacity: .055; transform: translate(-50%, -50%) scale(.72); filter: blur(46px); }
}

@keyframes thanks-headline-arrive {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(.987);
    filter: blur(14px);
    clip-path: inset(52% 0 48%);
  }
  58%, 100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    clip-path: inset(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .thanks-scene *,
  .thanks-scene *::before,
  .thanks-scene *::after,
  #deliveryScene .delivery-token,
  #deliveryScene .delivery-node > strong {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
}