@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/bricolage-grotesque.woff2") format("woff2");
  font-weight: 700 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --mint: #e4f4e9;
  --ink: #163d34;
  --cream: #fff9e9;
  --red: #f06855;
  --yellow: #ffce63;
  --pink: #ffd0ce;
  --type: "Bricolage Grotesque", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body, h1, h2, p { margin: 0; }

body {
  background-color: var(--mint);
  background-image: radial-gradient(#2c5d4930 0.65px, transparent 0.8px);
  background-size: 19px 19px;
  color: var(--ink);
  font-family: var(--type);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.layout {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  align-content: center;
  justify-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  text-align: center;
  overflow: hidden;
}

.stage {
  position: relative;
  isolation: isolate;
  width: min(100%, 35rem);
  max-width: calc((100vh - 100px) / 1.08);
  max-width: calc((100svh - 100px) / 1.08);
  aspect-ratio: 1 / 1.08;
  container-type: inline-size;
}

.halo {
  position: absolute;
  inset: 6% 1% 7%;
  border: 1px solid #6dae8d54;
  border-radius: 50%;
  background: #d6efdf;
  transform: rotate(-12deg);
}

.halo::before, .halo::after {
  position: absolute;
  border: 1px solid #6dae8d54;
  border-radius: inherit;
  content: "";
}

.halo::before { inset: -5%; }
.halo::after { inset: -10%; border-style: dashed; border-color: #6dae8d36; }

.sparkles { position: absolute; inset: 0; }
.sparkles i {
  position: absolute;
  width: 7%;
  aspect-ratio: 1;
  background: currentColor;
  color: #559476;
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
}
.sparkles i:nth-child(1) { top: 19%; left: 9%; color: #2c805d; }
.sparkles i:nth-child(2) { top: 12%; left: 21%; width: 3.1%; color: #2c805d; }
.sparkles i:nth-child(3) { top: 20%; right: 5%; width: 9%; color: var(--red); }
.sparkles i:nth-child(4) { top: 12%; right: 4%; width: 3.6%; color: #dc8e31; }
.sparkles i:nth-child(5) { bottom: 15%; left: 3%; width: 5%; color: #d65f51; }
.sparkles i:nth-child(6) { bottom: 10%; right: 7%; width: 4%; color: #2c805d; }

.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti.is-foreground { z-index: 2; }
.confetti i { position: absolute; top: 0; left: 0; width: 9px; height: 14px; border-radius: 2px; }
.confetti i.is-round { height: 9px; border-radius: 50%; }
.confetti i.is-star {
  width: 16px;
  height: 16px;
  clip-path: polygon(50% 0, 62% 37%, 100% 50%, 62% 63%, 50% 100%, 38% 63%, 0 50%, 38% 37%);
}

.parcel { position: absolute; inset: 0; z-index: 1; }

.envelope {
  position: absolute;
  inset: 30% 8% auto;
  height: 41%;
  transition: transform 720ms var(--ease-out);
}

.lining {
  border: 3px solid var(--ink);
  border-radius: 5cqw;
  background: #ae392e;
  box-shadow: 0 8px 0 #245743;
}

.hinge { z-index: 4; perspective: 850px; }

.flap {
  position: relative;
  width: 100%;
  height: 62%;
  border-radius: 5cqw 5cqw 0 0;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 10%, 55% 94%, 52% 98%, 48% 98%, 45% 94%, 0 10%);
  transform-origin: 50% 0;
  transition: transform 400ms var(--ease-in-out);
}

.flap::before {
  position: absolute;
  inset: 3px 4px;
  border-radius: inherit;
  background: #ff8874;
  clip-path: inherit;
  content: "";
}

.pocket {
  z-index: 3;
  border-radius: 5cqw;
  background: var(--ink);
  clip-path: polygon(0 0, 50% 59%, 100% 0, 100% 100%, 0 100%);
}

.fold { position: absolute; inset: 3px; border-radius: calc(5cqw - 3px); }
.fold-left { background: #f56f5c; clip-path: polygon(0 0, 56% 64%, 0 100%); }
.fold-right { background: #e85d4d; clip-path: polygon(100% 0, 100% 100%, 42% 64%); }
.fold-bottom { background: var(--red); clip-path: polygon(0 100%, 50% 45%, 100% 100%); }
.fold-bottom::before {
  position: absolute;
  inset: 0;
  background: #f87d67;
  clip-path: polygon(2.1% 100%, 50% 47%, 97.9% 100%);
  content: "";
}

.sticker-position { z-index: 5; }
.sticker {
  position: absolute;
  top: 60%;
  left: 50%;
  display: grid;
  width: 18%;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 34%;
  background: var(--yellow);
  box-shadow: 2px 3px 0 var(--ink);
  transform: translate(-50%, -50%) rotate(-11deg);
}

.tree {
  width: 61%;
  height: 56%;
  margin-top: 15%;
  background: #24674e;
  clip-path: polygon(50% 0, 77% 36%, 68% 36%, 88% 61%, 76% 61%, 100% 87%, 60% 87%, 60% 100%, 40% 100%, 40% 87%, 0 87%, 24% 61%, 12% 61%, 32% 36%, 23% 36%);
}

.tree-star {
  position: absolute;
  top: 12%;
  width: 18%;
  aspect-ratio: 1;
  background: #a82424;
  clip-path: polygon(50% 0, 62% 37%, 100% 50%, 62% 63%, 50% 100%, 38% 63%, 0 50%, 38% 37%);
}

.paper {
  position: absolute;
  inset: 9% 12% auto;
  z-index: 2;
  height: 58%;
  opacity: 0;
  perspective: 1000px;
  transform: translateY(40%) scale(0.88) rotate(-4deg);
}

.paper-turn {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 650ms var(--ease-in-out);
}

.face {
  position: absolute;
  inset: 0;
  padding: 8.5% 5%;
  border: 3px solid var(--ink);
  border-radius: 5cqw;
  background: var(--cream);
  box-shadow: 4px 6px 0 #245743;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.face-message::before, .face-message::after {
  position: absolute;
  top: 29%;
  width: 6%;
  aspect-ratio: 1;
  background: var(--red);
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
  content: "";
}
.face-message::before { left: 8%; transform: rotate(-12deg); }
.face-message::after { right: 8%; transform: rotate(12deg); }

.salutation, .signoff { font-size: clamp(0.9rem, 4.3cqw, 1.4rem); font-weight: 700; }
.day-message { display: grid; justify-items: center; line-height: 0.88; }
#day-number { font-size: clamp(3rem, 18cqw, 6.3rem); font-weight: 800; letter-spacing: -0.07em; }
#day-unit { margin-top: 0.75cqw; color: #b3332d; font-size: clamp(1.1rem, 6.4cqw, 2.2rem); font-weight: 800; }
.signoff { margin-top: 0.9cqw; }
.christmas-message { margin: 10% auto 0; max-width: 7ch; font-size: clamp(2rem, 11cqw, 4rem); font-weight: 800; line-height: 0.92; }

.face-countdown { padding-top: 12%; transform: rotateY(180deg); }
.face-countdown h2 { margin: 0 0 5%; font-size: clamp(1.5rem, 8.8cqw, 3.25rem); font-weight: 800; line-height: 1; letter-spacing: -0.045em; }
.face-countdown h2.is-greeting { margin-top: 11%; font-size: clamp(1.9rem, 11cqw, 4rem); }
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.7%; }
.unit {
  display: grid;
  gap: 4px;
  padding: 13% 0 15%;
  border: 1.5px solid var(--ink);
  border-radius: 2.5cqw;
  background: #e0f1e6;
  box-shadow: 0 2px 0 var(--ink);
}
.unit:first-child { background: var(--yellow); }
.unit:last-child { background: var(--pink); }
.unit span:first-child { font-size: clamp(1.18rem, 6.9cqw, 2.4rem); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.unit span:last-child { font-size: clamp(0.52rem, 2.7cqw, 0.9rem); font-weight: 700; line-height: 1; }

.controls { min-height: 48px; margin-top: 10px; }

.replay {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
  transition: transform 120ms var(--ease-out), background-color 150ms ease;
  animation: appear 220ms var(--ease-out) both;
}
.replay span { position: relative; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; transform: rotate(-24deg); }
.replay span::before { position: absolute; top: -2px; right: -2px; width: 6px; height: 6px; border-right: 2px solid; border-bottom: 2px solid; content: ""; }
.replay:active { transform: translateY(2px); }
.replay:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .replay:hover { background-color: var(--yellow); } }
.no-script { max-width: 32ch; }

[data-phase="rattle"] .parcel { animation: rattle 920ms var(--ease-in-out) both; }
[data-phase="rattle"] .sparkles { animation: sparkle 920ms var(--ease-out) both; }
.layout:not([data-phase="sealed"], [data-phase="rattle"]) .envelope { transform: translateY(49%); }
.layout:not([data-phase="sealed"], [data-phase="rattle"]) .hinge { z-index: 1; }
.layout:not([data-phase="sealed"], [data-phase="rattle"]) .flap { transform: rotateX(165deg) scaleX(0.89); }

[data-phase="opening"] .paper { animation: lift-letter 680ms var(--ease-out) 75ms both; }
[data-phase="opening"] .sticker { animation: sticker-hop 610ms var(--ease-out) both; }
[data-phase="opening"] .halo, [data-phase="countdown"] .halo { animation: ring 720ms var(--ease-out) both; }

:is([data-phase="message"], [data-phase="turning"], [data-phase="countdown"], [data-phase="reduced"]) .paper {
  opacity: 1;
  transform: translateY(0);
}
:is([data-phase="turning"], [data-phase="countdown"], [data-phase="reduced"]) .paper-turn { transform: rotateY(180deg); }
[data-phase="reduced"] .paper { animation: appear 180ms var(--ease-out) both; }

@keyframes rattle {
  0%, 10% { transform: translateY(0) rotate(0); }
  22% { transform: translateY(1%) rotate(-3deg); }
  35% { transform: translateY(-2%) rotate(5deg); }
  47% { transform: translateY(1%) rotate(-6deg); }
  59% { transform: translateY(-2%) rotate(7deg); }
  70% { transform: translateY(1%) rotate(-5deg); }
  82% { transform: translateY(-1%) rotate(3deg); }
  100% { transform: translateY(0) rotate(0); }
}

@keyframes lift-letter {
  0% { opacity: 0; transform: translateY(40%) scale(0.88) rotate(-4deg); }
  12% { opacity: 1; }
  66% { opacity: 1; transform: translateY(-5%) scale(1.025) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes sticker-hop {
  0%, 100% { transform: translate(-50%, -50%) rotate(-11deg); }
  46% { transform: translate(-50%, -35%) rotate(15deg) scale(1.12); }
}

@keyframes ring {
  0%, 100% { transform: rotate(-12deg) scale(1); }
  42% { transform: rotate(-12deg) scale(1.055); }
}

@keyframes sparkle { 0%, 100% { opacity: 1; } 48% { opacity: 0.35; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }

@media (orientation: landscape) and (max-height: 499px) {
  .layout { grid-template-columns: auto 46px; align-items: center; justify-content: center; gap: 10px; }
  .stage { width: min(74vw, 78svh); max-width: none; }
  .controls { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .envelope, .paper-turn, .flap, .replay { transition: none; }
  [data-phase="rattle"] :is(.parcel, .sparkles), [data-phase="opening"] :is(.sticker, .halo), [data-phase="countdown"] .halo { animation: none; }
  [data-phase="opening"] .paper { animation: appear 180ms var(--ease-out) both; transform: translateY(0); }
  .replay:active { transform: none; }
}