/* ───────────────────────────────────────────────
   10312027.com — Turtle & Panda
   Halloween night, 2027.
   ─────────────────────────────────────────────── */

:root{
  --ink:      #17111F;   /* deep plum-black — the sky */
  --dusk:     #241A31;   /* raised surface */
  --dusk-2:   #2E2140;   /* card face */
  --moon:     #F6ECDA;   /* moonlight cream — primary text */
  --moon-dim: #C9BCC9;   /* secondary text */
  --pumpkin:  #FF8A3D;   /* candle-light orange */
  --lilac:    #C6A8FF;   /* ghost glow */
  --sage:     #7FD1A8;   /* turtle green */
  --blush:    #F6A8C0;   /* panda bow */

  --display: "Bagel Fat One", "Trebuchet MS", cursive;
  --body:    "Quicksand", system-ui, -apple-system, sans-serif;
  --util:    "Special Elite", "Courier New", monospace;

  --measure: 62ch;
  --wrap: 1080px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--moon);
  font-family:var(--body);
  font-weight:500;
  font-size:clamp(16px,1.05vw + 13px,19px);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

main{ position:relative; z-index:2; }

img{ max-width:100%; height:auto; display:block; }

::selection{ background:var(--pumpkin); color:var(--ink); }

:focus-visible{
  outline:3px solid var(--lilac);
  outline-offset:4px;
  border-radius:6px;
}

/* ── the sky ─────────────────────────────────── */
.sky{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, #3A2952 0%, rgba(58,41,82,0) 62%),
    radial-gradient(80% 60% at 82% 8%, rgba(255,138,61,.13) 0%, rgba(255,138,61,0) 60%),
    var(--ink);
}

.moon{
  position:absolute; top:5vh; right:8vw;
  width:min(30vw,190px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 36% 32%, #FFF7E6 0%, #F4E3BE 55%, #E4CE9F 100%);
  box-shadow:
    0 0 40px 10px rgba(246,236,218,.22),
    0 0 140px 50px rgba(198,168,255,.16);
}
.moon::before,.moon::after{
  content:""; position:absolute; border-radius:50%;
  background:rgba(120,100,80,.10);
}
.moon::before{ width:26%; height:26%; top:22%; left:24%; }
.moon::after { width:16%; height:16%; bottom:24%; right:26%;
  box-shadow:-2.2em 0.6em 0 -0.35em rgba(120,100,80,.09); }

.stars{
  position:absolute; inset:0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #FFF 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 28% 42%, #E9D9FF 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 46% 12%, #FFF 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 63% 34%, #FFE9C9 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 22%, #FFF 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 91% 48%, #E9D9FF 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 18% 68%, #FFF 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 55% 78%, #FFE9C9 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 84% 88%, #FFF 50%, transparent 51%);
  opacity:.55;
  animation:twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{ from{opacity:.35} to{opacity:.7} }

.drifters{ position:absolute; inset:0; overflow:hidden; }
.drift{
  position:absolute; left:var(--x); bottom:-12vh;
  font-size:calc(2.6rem * var(--s));
  opacity:.30;
  filter:drop-shadow(0 0 12px rgba(198,168,255,.5));
  animation:float-up var(--d) linear infinite;
  animation-delay:var(--delay);
}
.drift.leaf{ filter:drop-shadow(0 0 10px rgba(255,138,61,.45)); opacity:.34; }
@keyframes float-up{
  0%  { transform:translate3d(0,0,0) rotate(0deg); }
  50% { transform:translate3d(3.5vw,-62vh,0) rotate(14deg); }
  100%{ transform:translate3d(-2vw,-124vh,0) rotate(-10deg); }
}

/* ── shared type ─────────────────────────────── */
.eyebrow,.card-kicker,.lantern-label,.closer-fine{
  font-family:var(--util);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:.72rem;
  color:var(--lilac);
}

h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2rem,5vw,3.2rem);
  line-height:1.1;
  margin:0 0 2.5rem;
  text-align:center;
  color:var(--moon);
  text-shadow:0 0 34px rgba(198,168,255,.30);
}

/* ── hero ────────────────────────────────────── */
.hero{
  max-width:var(--wrap);
  margin:0 auto;
  padding:clamp(4rem,11vh,8rem) 1.25rem 4rem;
  text-align:center;
}

.hero .eyebrow{ margin:0 0 1.4rem; }

.lockup{
  font-family:var(--display);
  font-weight:400;
  margin:0;
  line-height:.94;
  font-size:clamp(3.6rem,15vw,10rem);
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:.06em;
  flex-wrap:wrap;
  color:var(--pumpkin);
  /* carved-lantern glow on the date itself */
  text-shadow:
    0 0 .06em rgba(255,235,190,.85),
    0 0 .30em rgba(255,138,61,.75),
    0 0 .85em rgba(255,110,30,.45),
    0 .06em 0 #8A3B12;
  animation:candle 5.5s ease-in-out infinite;
}
.lockup .dot{ color:var(--lilac); text-shadow:0 0 .4em rgba(198,168,255,.8); font-size:.66em; }
.lockup .num.wide{ letter-spacing:-.01em; }

@keyframes candle{
  0%,100%{ filter:brightness(1); }
  42%    { filter:brightness(1.09); }
  58%    { filter:brightness(.95); }
  72%    { filter:brightness(1.05); }
}

.names{
  font-family:var(--display);
  font-size:clamp(1.5rem,4.6vw,2.6rem);
  margin:1.4rem 0 .3rem;
  color:var(--moon);
}
.names .amp{ color:var(--blush); }

.subline{
  margin:0 auto;
  max-width:34ch;
  color:var(--moon-dim);
  font-size:1.02rem;
}

.portrait{
  margin:2.75rem auto 0;
  max-width:760px;
  border-radius:28px;
  overflow:hidden;
  border:2px solid rgba(198,168,255,.22);
  box-shadow:
    0 0 0 8px rgba(36,26,49,.6),
    0 34px 80px -28px rgba(0,0,0,.85),
    0 0 70px -10px rgba(198,168,255,.25);
}

/* ── signature: carved-lantern countdown ─────── */
.countdown{
  margin:3.5rem auto 0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.5rem,2vw,1.1rem);
  max-width:720px;
}

.lantern{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.35rem;
  padding:clamp(.9rem,2.4vw,1.5rem) .4rem clamp(.7rem,2vw,1.1rem);
  border-radius:20px 20px 26px 26px;
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(255,138,61,.42) 0%, rgba(255,138,61,0) 62%),
    linear-gradient(180deg,var(--dusk-2) 0%, var(--dusk) 100%);
  border:2px solid rgba(255,138,61,.30);
  box-shadow:
    inset 0 -18px 34px -18px rgba(255,150,60,.6),
    0 16px 34px -22px rgba(0,0,0,.9);
  animation:flicker 4.2s ease-in-out infinite;
}
.lantern:nth-child(2){ animation-delay:-1.1s; }
.lantern:nth-child(3){ animation-delay:-2.3s; }
.lantern:nth-child(4){ animation-delay:-3.4s; }

/* the little stem on top of each lantern */
.lantern::before{
  content:"";
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:14px; height:12px; border-radius:4px 4px 2px 2px;
  background:var(--sage);
  box-shadow:0 0 10px rgba(127,209,168,.5);
}

@keyframes flicker{
  0%,100%{ box-shadow:inset 0 -18px 34px -18px rgba(255,150,60,.60), 0 16px 34px -22px rgba(0,0,0,.9); }
  38%    { box-shadow:inset 0 -22px 40px -18px rgba(255,170,80,.85), 0 16px 34px -22px rgba(0,0,0,.9); }
  61%    { box-shadow:inset 0 -14px 30px -18px rgba(255,140,50,.45), 0 16px 34px -22px rgba(0,0,0,.9); }
}

.lantern-num{
  font-family:var(--display);
  font-size:clamp(1.7rem,6.2vw,3.3rem);
  line-height:1;
  color:#FFD9A8;
  text-shadow:0 0 .28em rgba(255,150,60,.9), 0 0 .8em rgba(255,110,30,.55);
  font-variant-numeric:tabular-nums;
}
.lantern-label{ font-size:.6rem; color:#E7C6A0; letter-spacing:.18em; }

.cd-foot{
  margin:1.1rem 0 0;
  font-family:var(--util);
  font-size:.78rem;
  letter-spacing:.1em;
  color:var(--moon-dim);
}

/* ── bands ───────────────────────────────────── */
.band{
  max-width:var(--wrap);
  margin:0 auto;
  padding:clamp(4rem,10vh,7rem) 1.25rem;
}

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.25rem;
  max-width:760px;
  margin:0 auto;
}

.card{
  background:linear-gradient(170deg, #2E2140 0%, #241A31 100%);
  border:1px solid rgba(198,168,255,.20);
  border-radius:22px;
  padding:1.9rem 1.6rem;
  box-shadow:0 24px 50px -34px rgba(0,0,0,.95);
  transition:transform .35s cubic-bezier(.2,.8,.3,1), border-color .35s, box-shadow .35s;
}
.card:hover{
  transform:translateY(-6px) rotate(-.5deg);
  border-color:rgba(255,138,61,.5);
  box-shadow:0 30px 60px -34px rgba(0,0,0,1), 0 0 44px -14px rgba(255,138,61,.35);
}
.card-kicker{ margin:0 0 .8rem; }
.card-big{
  font-family:var(--display);
  font-size:1.42rem;
  line-height:1.25;
  margin:0 0 .8rem;
  color:var(--moon);
}
.card-note{ margin:0; color:var(--moon-dim); font-size:.94rem; }

.card-link{ margin:1rem 0 0; }
.card-link a{
  font-family:var(--util);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pumpkin);
  text-decoration:none;
  border-bottom:1px solid rgba(255,138,61,.4);
  padding-bottom:2px;
  transition:color .25s, border-color .25s;
}
.card-link a:hover{ color:#FFD9A8; border-color:rgba(255,217,168,.8); }

.card-link{ margin:1rem 0 0; }
.card-link a{
  font-family:var(--util);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pumpkin);
  text-decoration:none;
  border-bottom:1px solid rgba(255,138,61,.4);
  padding-bottom:2px;
  transition:color .25s, border-color .25s;
}
.card-link a:hover{ color:#FFD9A8; border-color:rgba(255,217,168,.8); }

/* ── story ───────────────────────────────────── */
.story-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.75rem;
  max-width:820px;
  margin:0 auto;
}
.critter{ text-align:center; padding:.5rem; }
.critter-face{
  font-size:3.4rem;
  display:block;
  filter:drop-shadow(0 0 22px rgba(198,168,255,.45));
}
.critter h3{
  font-family:var(--display);
  font-weight:400;
  font-size:1.35rem;
  margin:.6rem 0 .5rem;
  color:var(--sage);
}
.story-grid .critter:last-child h3{ color:var(--blush); }
.critter p{ margin:0; color:var(--moon-dim); font-size:.97rem; }

.story-line{
  max-width:44ch;
  margin:2.75rem auto 0;
  text-align:center;
  font-family:var(--util);
  font-size:1rem;
  line-height:1.8;
  color:var(--moon);
}

/* ── expectations ────────────────────────────── */
.expect{
  list-style:none;
  padding:0;
  margin:0 auto;
  max-width:var(--measure);
  display:grid;
  gap:.9rem;
}
.expect li{
  position:relative;
  padding:.85rem 1rem .85rem 3rem;
  border-radius:16px;
  background:#2A1E3A;
  border:1px solid rgba(198,168,255,.14);
  color:var(--moon-dim);
  font-size:.97rem;
}
.expect li::before{
  content:"🎃";
  position:absolute; left:.95rem; top:.8rem;
  font-size:1.15rem;
  filter:drop-shadow(0 0 8px rgba(255,138,61,.6));
}
.expect strong{ color:var(--moon); font-weight:700; }

.sticker-sheet{
  margin:2.75rem auto 0;
  max-width:820px;
  border-radius:24px;
  overflow:hidden;
  border:2px solid rgba(255,138,61,.20);
  box-shadow:0 26px 60px -32px rgba(0,0,0,.9);
}

/* ── closer ──────────────────────────────────── */
.closer{
  text-align:center;
  padding:clamp(4rem,10vh,7rem) 1.25rem clamp(3rem,8vh,5rem);
  border-top:1px solid rgba(198,168,255,.14);
  margin-top:2rem;
}
.crest{
  width:min(46vw,200px);
  margin:0 auto 1.5rem;
  border-radius:50%;
  filter:drop-shadow(0 0 34px rgba(198,168,255,.35));
}
.closer-line{
  font-family:var(--display);
  font-size:clamp(1.35rem,4.4vw,2.1rem);
  margin:0 0 .9rem;
  color:var(--moon);
}
.closer-date{
  font-family:var(--display);
  font-size:clamp(1.1rem,3.4vw,1.6rem);
  color:var(--pumpkin);
  margin:0 0 1.6rem;
  text-shadow:0 0 .4em rgba(255,138,61,.6);
}
.closer-fine{ margin:0; opacity:.6; }

/* ── reveal on scroll ────────────────────────── */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.8,.3,1), transform .8s cubic-bezier(.2,.8,.3,1);
}
.reveal.in{ opacity:1; transform:none; }

/* ── small screens ───────────────────────────── */
@media (max-width:560px){
  .countdown{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:340px; }
  .lockup{ gap:.02em; }
  .drift{ display:none; }
}

/* ── quiet mode ──────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation:none !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .drifters{ display:none; }
}