/* ===================================================================
   AtlantaTCG — One-Year Anniversary standalone page (/1yearanniversary)
   Rebuilt from the "Event - One-year anniversary.svg" handoff in the
   site's own design system (Bungee/Ranchers display, Blue-Coin tokens).
   Loaded ONLY on this page — keeps the global sheet clean.
   CSP-safe: no inline <style>; inline style="" attrs (delays/positions) OK.
   =================================================================== */

:root{
  --an-bg:#E9E4D6;        /* flyer paper — a touch greiger than --cream */
  --an-card:#FBF5E9;      /* card / panel interior (=--cream) */
  --an-gold:var(--orange);          /* #E0A526 */
  --an-gold-deep:var(--gold-deep);  /* #B9831A */
  --an-purple:var(--magenta);       /* #6E3FA3 */
  --an-purple-deep:var(--brand-purple-deep); /* #4A2A73 */
  --an-blue:var(--blue);            /* #3A6BB0 */
  --an-blue-deep:var(--brand-blue-deep);     /* #27518C */
  --an-green:var(--vib-green);      /* #57A347 */
  --an-red:var(--vib-red);          /* #CE3B2B */
}

/* the page rides the flyer paper end-to-end, carrying the same faint ray-fan
   + soft brand glows as /events (the global body texture that this page's
   flat-greige override otherwise drops). Lives on the <body> so the
   max-width:700px fixed->scroll perf fallback in styles.css is inherited. */
body:has(.an-page){
  background-color:var(--an-bg);
  background-image:
    radial-gradient(circle at 8% 12%, rgba(110,63,163,.11), rgba(110,63,163,0) 22%),
    radial-gradient(circle at 92% 7%, rgba(58,107,176,.11), rgba(58,107,176,0) 22%),
    radial-gradient(circle at 90% 62%, rgba(224,165,38,.13), rgba(224,165,38,0) 22%),
    radial-gradient(circle at 6% 82%, rgba(90,62,34,.10), rgba(90,62,34,0) 22%),
    repeating-conic-gradient(from 0deg at 50% 40%, rgba(58,40,23,.016) 0deg 1deg, rgba(255,255,255,.016) 1deg 2deg);
  background-attachment:fixed;
}
.an-page{background:transparent;color:var(--ink);overflow:hidden}
/* phones: drop fixed-attachment (a fixed bg repaints the full viewport every
   scroll frame) — mirrors the global body fallback the :has() override shadows */
@media(max-width:700px){body:has(.an-page){background-attachment:scroll}}
.an-wrap{width:min(1180px,92vw);margin:0 auto}
.an-section{position:relative;padding:52px 0}
.an-rule{border:0;border-top:2px solid rgba(20,17,12,.16);margin:0;width:min(1180px,92vw);margin-inline:auto}

/* faint watermark swooshes (Group.svg) flank the discounts band */
.an-watermark{position:absolute;width:560px;height:560px;opacity:.09;pointer-events:none;z-index:0}
.an-watermark.wm-l{top:60px;left:-300px}
.an-watermark.wm-r{top:-120px;right:-260px}

/* keep real content above decoration */
.an-section > .an-wrap{position:relative;z-index:2}

/* ============================================================ CONFETTI */
/* one shared <svg> frame (1440×1024, authored art from the opener SVGs)
   drawn by anniversary.js — the page hero and the opener each hold an
   identical copy, which is what makes the opener's handoff seamless */
.an-confetti{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible}
.an-cf-frame{display:block;width:100%;height:auto;overflow:visible}
/* Once the field settles it sinks into the background: a small static blur +
   warm glow so it reads as decoration behind the copy, not sharp foreground.
   Sharp through the opener glide; eases to soft when JS adds .an-settled after
   the opener hands off. Static filter (composited once) on pointer-events:none
   decoration — within the perf rules; blur kept tiny. */
.an-hero .an-confetti .an-cf-frame{transition:filter .5s ease}
.an-hero.an-settled .an-confetti .an-cf-frame{
  filter:blur(2.4px) drop-shadow(0 0 9px rgba(224,165,38,.5))}

/* ── idle life (only once the field settles, i.e. after the opener) ──────
   The whole field gently drifts + breathes by animating the ALREADY-BLURRED
   frame element — its blur is cached as a compositor layer, so only the
   layer's transform/opacity move (no per-frame re-blur). Individual pieces
   add a faint bob; the stars twinkle like foil catching light. All of this
   is pointer-events:none decoration and is disabled under reduced-motion. */
.an-hero.an-settled .an-confetti .an-cf-frame{
  animation:an-cf-drift 11s ease-in-out infinite}
@keyframes an-cf-drift{
  0%,100%{transform:translateY(0) rotate(0deg);opacity:1}
  50%{transform:translateY(-8px) rotate(.6deg);opacity:.92}}
.an-confetti .cf{transform-box:fill-box;transform-origin:center}
/* ── off-screen = still ────────────────────────────────────────────────
   Every decorative loop on this page idles out once it scrolls away, and
   restarts when it comes back (anniversary.js, IntersectionObserver — never
   a scroll handler). A running compositor animation pins its own layer AND
   forces everything painted over it onto layers too; left running, this
   page held ~38 composited layers / ~38 MB of GPU memory (75 MB at desktop
   widths) for the whole 7800px scroll, nearly all of it for motion nobody
   could see. The class lands on the animated element itself (.an-cf-frame,
   .an-cardart, .an-wheel-hint); .cf and the shine pseudo ride along. */
.an-still,.an-still .cf,.an-still .an-cardart-shine::before{animation:none!important}
.an-hero.an-settled .an-confetti .cf-dt,
.an-hero.an-settled .an-confetti .cf-sq{animation:an-cf-bob 7.5s ease-in-out infinite}
.an-hero.an-settled .an-confetti .cf-st{animation:an-cf-twinkle 4.5s ease-in-out infinite}
/* desync so pieces never move in lock-step */
.an-confetti .cf:nth-child(4n)  {animation-delay:-3.2s}
.an-confetti .cf:nth-child(4n+1){animation-delay:-1.1s}
.an-confetti .cf:nth-child(4n+2){animation-delay:-5.4s}
.an-confetti .cf:nth-child(4n+3){animation-delay:-2.3s}
@keyframes an-cf-bob{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-5px) rotate(2.5deg)}}
@keyframes an-cf-twinkle{
  0%,100%{opacity:.55;transform:scale(.86)}
  50%{opacity:1;transform:scale(1.14)}}

/* ================================================================ HERO */
.an-hero{padding:44px 0 40px}
.an-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start}

.an-title{font-family:'Bungee','Bungee Fallback',sans-serif;line-height:.9;margin:0 0 16px;
  font-size:clamp(40px,6.6vw,84px);letter-spacing:-1px;-webkit-text-stroke:3px var(--ink)}
/* display:table = block that shrink-wraps to its text, so the lines'
   boxes measure to the glyphs — the opener's headline glide needs that */
.an-title .t-gold{display:table;color:var(--an-gold);
  text-shadow:3px 3px 0 var(--an-gold-deep),6px 6px 0 var(--ink)}
.an-title .t-purple{display:table;color:var(--an-purple);
  text-shadow:3px 3px 0 var(--an-purple-deep),6px 6px 0 var(--ink)}

.an-intro{font-size:1.06rem;font-weight:500;line-height:1.55;max-width:52ch;margin:0 0 26px;color:#231C12}
.an-intro b{font-weight:800}

.an-info{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.an-info-card{background:var(--an-card);border:3px solid var(--ink);border-radius:14px;
  padding:16px 18px;box-shadow:5px 5px 0 var(--ink)}
.an-info-card h3{font-family:'Rubik','Rubik Fallback',sans-serif;font-weight:800;font-size:1rem;
  margin:0 0 6px;color:var(--ink)}
.an-info-card p{font-size:.92rem;line-height:1.5;margin:0;color:#3A2F20}
.an-info-card p b{font-weight:800;color:var(--ink)}

/* Free Food — a compact closing card at the foot of the page: text on the
   left (on-the-house pill · FREE FOOD! · line), snack stickers on the right,
   all in one row. Narrower than the content width, centered; extra bottom
   room so it isn't crowded against the footer. */
.an-food-sec{padding-bottom:clamp(64px,7vw,92px)}
.an-food{display:flex;align-items:center;justify-content:space-between;
  gap:16px 34px;flex-wrap:wrap;
  background:var(--an-card);border:3px solid var(--ink);border-radius:16px;
  box-shadow:6px 6px 0 var(--ink);padding:22px clamp(24px,3.5vw,44px)}
.an-food-head{flex:1 1 220px;min-width:190px;display:flex;flex-direction:column;
  align-items:flex-start;gap:8px}
.an-food-eyebrow{font-family:'Rubik','Rubik Fallback',sans-serif;font-weight:800;font-size:.68rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--an-card);background:var(--an-red);
  border:2px solid var(--ink);border-radius:999px;padding:2px 11px;box-shadow:2px 2px 0 var(--ink)}
.an-food-title{font-family:'Bungee','Bungee Fallback',sans-serif;color:var(--ink);margin:0;
  font-size:clamp(26px,3vw,38px);line-height:.95;letter-spacing:.4px;
  text-shadow:2px 2px 0 var(--an-gold)}
.an-food-title .ff-free{color:var(--an-red)}
.an-food-sub{margin:0;font-weight:600;font-size:.92rem;line-height:1.4;color:#3A2F20}
.an-food-spread{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  gap:clamp(6px,1.4vw,14px)}
.an-food-item{width:clamp(48px,5.6vw,62px);filter:drop-shadow(3px 3px 0 var(--ink))}
.an-food-item svg{display:block;width:100%;height:auto}
.an-food-item.i1{transform:rotate(-8deg);margin-bottom:2px}
.an-food-item.i2{transform:rotate(6deg)}
.an-food-item.i3{transform:rotate(-4deg);margin-bottom:2px}
.an-food-item.i4{transform:rotate(8deg)}
@media(prefers-reduced-motion:no-preference){
  .an-food-item{transition:transform .18s cubic-bezier(.2,.7,.3,1)}
  .an-food-item:hover{transform:translateY(-4px) rotate(0)}
}

/* hero right rail — compact date tag · card art (on top) · directions */
.an-rail{display:flex;flex-direction:column;align-items:stretch;gap:16px}
/* the panel is a tidy tag that hugs the date text (no empty gold shelf) —
   height is auto so it wraps SUNDAY / JULY 26 / 2026 with a little breathing
   room below. It sits UNDER the card art (z-index:1) so the cards ride on top
   of its bottom edge. */
.an-datebox{background:var(--an-gold);border-radius:30px;
  padding:30px 26px 34px;text-align:right;position:relative;z-index:1}
.an-datebox .d-dow,.an-datebox .d-md,.an-datebox .d-yr{
  font-family:'Bungee','Bungee Fallback',sans-serif;color:#fff;line-height:1.02;display:block}
.an-datebox .d-dow{font-size:clamp(28px,3.4vw,44px)}
.an-datebox .d-md{font-size:clamp(30px,3.7vw,48px)}
.an-datebox .d-yr{font-size:clamp(26px,3.2vw,40px)}

/* the card cluster rides ON TOP of the date tag (z-index:2 > the tag's 1),
   overlapping its bottom edge. The -19.6% pull-up (of rail width) both sets
   that overlap and shortens the rail so, on the capped 1180px desktop, the
   Get Directions button bottom lines up with the left "Gift bags / Must be
   present" cards. Art is a clean full-card export (rounded corners + grading
   labels intact — no clipping). */
.an-cardart{display:block;width:100%;margin:-19.6% auto 0;
  position:relative;z-index:2}
.an-cardart-img{display:block;width:100%;height:auto}
/* holographic foil sweep — a rainbow light band (with a bright white core)
   travels diagonally across the cards, like tilting a real holo into the
   light. The overlay is masked with the SAME webp's alpha (no extra download)
   so the sheen only paints on the cards, never the transparent gaps. The
   band moves via transform:translateX only (GPU-composited — no per-frame
   layout/paint); the mask is static. Fully off for reduced-motion. */
.an-cardart-shine{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  border-radius:inherit;
  /* a soft static diagonal gloss so the cards read as shiny/laminated even
     between sweeps (and under reduced-motion) */
  background:linear-gradient(116deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.2) 47%,
    rgba(255,255,255,.05) 55%,rgba(255,255,255,0) 74%);
  -webkit-mask:url(../images/events/1yr/hero-cards-uncropped.webp) center/100% 100% no-repeat;
          mask:url(../images/events/1yr/hero-cards-uncropped.webp) center/100% 100% no-repeat}
.an-cardart-shine::before{content:"";position:absolute;top:-25%;left:0;width:100%;height:150%;
  transform:translateX(-160%);
  background:
    linear-gradient(105deg,transparent 46.5%,rgba(255,255,255,.95) 50%,transparent 53.5%),
    linear-gradient(105deg,transparent 40%,rgba(255,255,255,.32) 50%,transparent 60%),
    linear-gradient(105deg,transparent 33%,
      rgba(255,70,120,.6) 42%,rgba(255,205,55,.65) 46%,rgba(120,255,150,.65) 50%,
      rgba(80,205,255,.65) 54%,rgba(205,110,255,.6) 58%,transparent 67%);
  animation:an-holo 7s ease-in-out infinite}
@keyframes an-holo{
  0%{transform:translateX(-160%)}
  36%{transform:translateX(160%)}
  100%{transform:translateX(160%)}}

.an-directions{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Bungee','Bungee Fallback',sans-serif;font-size:19px;letter-spacing:.6px;
  text-transform:uppercase;color:#fff;background:var(--ink);text-decoration:none;
  padding:16px 22px;min-height:54px;border-radius:16px;
  transition:transform .16s cubic-bezier(.2,.7,.3,1)}
.an-directions:hover,.an-directions:focus-visible{transform:translate(-1px,-2px)}
.an-directions:active{transform:translate(1px,1px)}

/* ========================================================= ENDED NOTE */
/* first thing in main content flow (visible without JS, under
   prefers-reduced-motion, before the opener has a chance to run) — a plain
   gold-bordered note box in the page's own card family. No animation. */
.anniv-ended-note{width:min(1180px,92vw);margin:24px auto 0;
  background:var(--an-card);border:3px solid var(--an-gold-deep);border-radius:14px;
  box-shadow:5px 5px 0 var(--an-gold);padding:14px 20px;position:relative;z-index:2;
  font-size:.95rem;line-height:1.5;color:#3A2F20}
.anniv-ended-note b{font-weight:800;color:var(--ink)}
.anniv-ended-note a{color:var(--an-blue-deep);font-weight:700;text-decoration:underline}

/* =========================================================== STICKERS */
.an-sticker{display:inline-block;font-family:'Ranchers','Ranchers Fallback','Bungee','Bungee Fallback',sans-serif;
  letter-spacing:1.2px;font-size:clamp(24px,3.6vw,38px);line-height:1.05;color:var(--ink);
  background:#fff;padding:11px 20px;border-radius:12px;border:3px solid var(--ink);
  box-shadow:6px 6px 0 var(--an-red);margin:0 0 28px}

/* ========================================================== GIVEAWAYS */
/* columns stretch to equal height and photos pin to the bottom, so the
   images share one baseline no matter how long the text above runs */
.an-give-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:stretch}
/* each time slot is a cream card in the shop's family (ink border + hard
   shadow), matching the hero info cards */
.an-give-col{display:flex;flex-direction:column;min-width:0;
  background:var(--an-card);border:3px solid var(--ink);border-radius:14px;
  box-shadow:5px 5px 0 var(--ink);padding:16px 16px 18px}
.an-give-time{font-family:'Bungee','Bungee Fallback',sans-serif;font-size:clamp(22px,2.4vw,28px);
  color:var(--ink);line-height:1.05;
  background:var(--an-gold);border:3px solid var(--ink);border-radius:10px;
  text-align:center;padding:8px 8px;box-shadow:3px 3px 0 var(--ink)}
.an-give-list{list-style:none;margin:16px 0 0;padding:0}
.an-give-list li{position:relative;padding:0 0 8px 16px;font-size:.9rem;line-height:1.4;color:#2A2115}
.an-give-list li::before{content:"";position:absolute;left:2px;top:.5em;width:6px;height:6px;
  border-radius:50%;background:var(--an-purple)}
.an-give-photo{display:block;width:100%;max-width:210px;height:auto;margin:14px auto 0;
  margin-top:auto;padding-top:14px}

/* ========================================================== DISCOUNTS */
/* the SVG groups the tickets: purple pair · gold pair · blue single,
   with wide gutters between groups (spacer columns 3 and 6) */
/* grid-auto-rows:1fr equalises the two rows, and every header is a fixed
   66px (fits two lines of the largest type), so ALL tickets share one
   exact shape and the divots punch at the same spot on every ticket */
.an-disc-note{font-size:.92rem;font-weight:600;color:#3A2F20;margin:-18px 0 24px}
.an-disc-grid{display:grid;grid-template-columns:1fr 1fr 34px 1fr 1fr 34px 1fr;
  grid-auto-rows:1fr;column-gap:22px;row-gap:28px}
.an-tag:nth-child(5n+1){grid-column:1}
.an-tag:nth-child(5n+2){grid-column:2}
.an-tag:nth-child(5n+3){grid-column:4}
.an-tag:nth-child(5n+4){grid-column:5}
.an-tag:nth-child(5n){grid-column:7}
/* Ticket construction: the two halves each carry their own border and a
   mask that punches a REAL transparent quarter-hole at each seam corner
   (percentage corner positions track the seam at any header height). Ring
   pseudos draw the ink arc around each hole — the mask trims them to the
   inside. Each half wears a thick ink border instead of a drop-shadow —
   the mask trims that border cleanly at the bites, so the chunky outline
   follows the bitten silhouette all the way around. */
.an-tag{position:relative;display:flex;flex-direction:column}
.an-tag .t-amt,.an-tag .t-for{
  -webkit-mask:radial-gradient(circle at 0 var(--nY,100%),#0000 11.5px,#000 12px) left/51% 100% no-repeat,
               radial-gradient(circle at 100% var(--nY,100%),#0000 11.5px,#000 12px) right/50% 100% no-repeat;
  mask:radial-gradient(circle at 0 var(--nY,100%),#0000 11.5px,#000 12px) left/51% 100% no-repeat,
       radial-gradient(circle at 100% var(--nY,100%),#0000 11.5px,#000 12px) right/50% 100% no-repeat}
.an-tag .t-amt{position:relative;font-family:'Bungee','Bungee Fallback',sans-serif;font-size:clamp(14px,1.35vw,18px);
  color:#fff;text-align:center;line-height:1.05;
  display:flex;align-items:center;justify-content:center;
  height:66px;padding:6px 8px;
  border:4px solid var(--ink);border-bottom:0;border-radius:12px 12px 0 0;
  text-shadow:1px 1px 0 rgba(0,0,0,.35)}
.an-tag .t-for{--nY:0%;position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;
  font-size:.82rem;font-weight:700;line-height:1.35;color:#2A2115;
  text-align:center;padding:12px 10px;background:var(--an-card);
  border:4px solid var(--ink);border-top:0;border-radius:0 0 12px 12px}
/* ink arcs hugging the holes (one half-arc per half, meeting at the seam) */
.an-tag .t-amt::before,.an-tag .t-amt::after,
.an-tag .t-for::before,.an-tag .t-for::after{content:"";position:absolute;
  box-sizing:content-box;width:24px;height:24px;border:4px solid var(--ink);border-radius:50%}
/* offsets track the 4px border: ring center must sit on the mask hole
   (left/right = -12-2·bw, top/bottom = -12-bw), else the ring shifts inward
   and a crescent of the header colour leaks past the notch edge */
.an-tag .t-amt::before{left:-20px;bottom:-16px}
.an-tag .t-amt::after{right:-20px;bottom:-16px}
.an-tag .t-for::before{left:-20px;top:-16px}
.an-tag .t-for::after{right:-20px;top:-16px}
/* colorways */
.an-tag.tg-purple .t-amt{background:var(--an-purple)}
.an-tag.tg-gold   .t-amt{background:var(--an-gold);text-shadow:1px 1px 0 var(--an-gold-deep)}
.an-tag.tg-blue   .t-amt{background:var(--an-blue)}

/* ============================== WIN WHEEL (incl. kids mini wheel) */
/* header row: the sticker overlaps a flat purple note panel to its right */
.an-wheel-head{display:flex;align-items:center;margin:0 0 36px}
.an-sticker.st-wheel{margin:0;position:relative;z-index:2;flex:0 0 auto;
  box-shadow:6px 6px 0 var(--ink)}
/* NOTE: must stay display:block — a flex/grid <p> drops the whitespace
   between its inline runs ("With a$50+ total order(after…") */
.an-wheel-note{flex:1;align-self:center;
  background:var(--an-purple);color:#fff;border-radius:20px;box-shadow:6px 6px 0 var(--ink);
  margin:0 0 0 -36px;padding:26px 28px 26px 66px;
  font-size:1.05rem;font-weight:600;line-height:1.5}
.an-wheel-note b{color:#fff;font-weight:800}

.an-wheel-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center}
.an-wheel-img{display:block;width:100%;max-width:400px;height:auto;margin:0 auto}
.an-wheel-right{display:flex;flex-direction:column;gap:32px}

/* ── interactive prize wheel ─────────────────────────────────────────────
   click/Enter spins the wedge group (one GPU transform, long ease-out);
   the pointer + hub sit still. A for-fun teaser — no online prize. */
.an-wheel-play{display:flex;flex-direction:column;align-items:center;gap:12px}
.an-wheel-stage{position:relative;width:100%;max-width:400px;margin:0 auto;
  cursor:pointer;line-height:0;border-radius:50%;-webkit-tap-highlight-color:transparent}
.an-wheel-stage:focus-visible{outline:3px solid var(--an-blue);outline-offset:8px}
.an-wheel-svg{display:block;width:100%;height:auto;overflow:visible}
.an-wheel-spin{transform-box:fill-box;transform-origin:center}
.an-wheel-label{font-family:'Rubik','Rubik Fallback',sans-serif;font-weight:800;
  font-size:6.2px;letter-spacing:.1px}
/* The winning wedge lights up via a white overlay path that fades in — an
   opacity transition, which Chrome composites. (It used to be a `filter`
   transition on the wedge itself; the perf rules forbid animating filter,
   which repaints the wedge every frame instead of compositing it.) One
   reused path, sandwiched between the wedges and their labels so the
   lettering stays crisp. */
.an-wheel-flash{fill:#fff;opacity:0;pointer-events:none;
  transition:opacity .25s cubic-bezier(.16,.84,.44,1)}
.an-wheel-flash.is-on{opacity:.18}
/* fixed-height slot: hint and result are overlaid (both inset:0), so
   swapping hint→result on spin never changes the column height */
.an-wheel-msg{position:relative;width:100%;min-height:2.7em;margin-top:2px}
.an-wheel-hint,.an-wheel-result{position:absolute;inset:0;margin:0;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:'Bungee','Bungee Fallback',sans-serif}
/* nudge to advertise the affordance; hides after the first spin */
.an-wheel-hint{font-size:13px;letter-spacing:.6px;color:var(--an-purple);
  animation:an-wheel-nudge 1.5s ease-in-out infinite}
.an-wheel-hint.is-hidden{display:none}
@keyframes an-wheel-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.an-wheel-result{font-size:clamp(15px,1.7vw,20px);color:var(--an-blue);
  opacity:0;transform:translateY(5px);
  transition:opacity .3s cubic-bezier(.16,.84,.44,1),transform .3s cubic-bezier(.16,.84,.44,1)}
.an-wheel-result:not(:empty){opacity:1;transform:none}
.an-wheel-caption{margin:0;text-align:center;font-size:.82rem;color:#5A4A32}

/* prize panels: two side-by-side lists split by a vertical rule, no row rules */
.an-plist{list-style:none;margin:0;padding:0}
.an-plist li{padding:7px 0;font-weight:700;font-size:.96rem;line-height:1.3;color:#fff}
.an-prizepanel{background:var(--an-gold);border:3px solid var(--ink);border-radius:20px;
  box-shadow:6px 6px 0 var(--ink);
  padding:24px 30px;display:grid;grid-template-columns:1fr 1fr;column-gap:34px}
.an-prizepanel .an-plist + .an-plist{border-left:2px solid rgba(20,17,12,.3);padding-left:34px}

/* kids mini wheel row, right-aligned under the prize panel */
.an-kids-row{display:flex;align-items:center;gap:22px;justify-content:flex-end}
.an-kids-left{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.an-kids-img{display:block;width:74px;height:auto}
.an-kids-cap{font-family:'Bungee','Bungee Fallback',sans-serif;font-size:14px;line-height:1.2;
  text-align:right;color:#4A3820}
.an-kids-panel{background:var(--an-blue);border:3px solid var(--ink);border-radius:16px;
  box-shadow:5px 5px 0 var(--ink);padding:18px 26px;
  display:grid;grid-template-columns:auto auto;column-gap:34px}
.an-kids-panel .an-plist + .an-plist{border-left:2px solid rgba(255,255,255,.5);padding-left:34px}

/* ============================================================= OPENER */
/* full-screen intro shown before the page every visit — now a fork, not a
   curtain: navy hold + title fades in (0–1s, ease-out) → beat → confetti
   pops in with a staggered back-out burst (1.4–2.1s) → the gallery /
   time-travel choice fades up (.choice-in) and the opener holds. "Time
   travel" replays the original hand-off (.flip sweep → .out dissolve → the
   confetti copy, pixel-on-pixel over the page's identical copy, glides into
   place — the splash "becomes" the page). JS only toggles classes.
   First paint is opaque navy so the page never flashes underneath. */
html.an-lock,html.an-lock body{overflow:hidden}
/* while the opener runs, the page's own confetti copy AND headline stay
   hidden — the opener's gliding copies ARE them until the final swap */
html.an-lock .an-hero .an-cf-frame,
html.an-lock .an-hero .an-title{opacity:0}
.an-opener{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:#0E172A;cursor:pointer;
  transition:background-color .53s ease-in-out}
/* Failsafe: the panel is opaque from the first frame and only anniversary.js
   ever takes it away — so if the script 404s or throws before it runs, the
   whole page would sit unreachable behind navy. This discrete keyframe clears
   it on its own after 6s. anniversary.js stamps html.an-js the instant it
   executes, which deselects the rule entirely, so the real choreography (and
   the .flip sweep, which sets its own animation) is never cut short.
   Scripting-off is handled instantly instead, by anniversary-nojs.css. */
html:not(.an-js) .an-opener{animation:an-op-failsafe 1ms linear 6s forwards}
@keyframes an-op-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
/* four-stop colour sweep — a plain transition can't hit the gray/greige
   midpoints the mov passes through */
.an-opener.flip{background-color:var(--an-bg);animation:an-bg-sweep .84s ease-in-out forwards}
@keyframes an-bg-sweep{
  0%{background-color:#0E172A}
  40%{background-color:#7A7A78}
  70%{background-color:#B9B2A4}
  100%{background-color:var(--an-bg)}
}
/* crossfade: the backdrop, wordmark and invited line dissolve — but NOT
   the headline or confetti, which glide into their page spots at full
   opacity (rgba keeps the fade on the cream hue; `transparent` grays it) */
.an-opener.flip.out{animation:none;background-color:rgba(233,228,214,0)}
.an-opener.out .an-op-wordmark,.an-opener.out .an-op-invited,
.an-opener.out .an-skip-btn{opacity:0}
.an-op-inner{position:relative;z-index:2;text-align:center;padding:24px;
  opacity:0;transition:opacity 1s ease-out}
.an-opener.title-in .an-op-inner{opacity:1}
.an-op-wordmark{display:inline-block;font-size:clamp(30px,5.4vw,56px);line-height:1;margin:0 0 22px;
  letter-spacing:.5px;transition:opacity .53s ease-in-out}
.an-op-title{font-family:'Bungee','Bungee Fallback',sans-serif;line-height:.9;margin:0;
  font-size:clamp(34px,6vw,72px);letter-spacing:-1px;-webkit-text-stroke:3px var(--ink)}
/* lines shrink-wrap (see .an-title) and glide independently into the page
   headline's measured line boxes — transform-only, set by JS on settle */
.an-op-title .t-gold,.an-op-title .t-purple{margin-inline:auto;
  will-change:transform;transform-origin:0 0;transition:transform .53s ease-in-out}
.an-op-title .t-gold{display:table;color:var(--an-gold);text-shadow:3px 3px 0 var(--an-gold-deep),6px 6px 0 #000}
.an-op-title .t-purple{display:table;color:var(--an-purple);text-shadow:3px 3px 0 var(--an-purple-deep),6px 6px 0 #000}
.an-op-invited{font-family:'Ranchers','Ranchers Fallback','Bungee','Bungee Fallback',sans-serif;
  color:#fff;font-size:clamp(16px,2.1vw,24px);letter-spacing:1.1px;line-height:1.35;
  max-width:34ch;margin:22px auto 0;
  transition:color .84s ease-in-out,opacity .53s ease-in-out}
/* choice screen — hidden until the confetti burst lands (.choice-in), then
   the opener HOLDS here; only a click moves things forward */
.an-op-choice{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  margin:30px 0 0;opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .5s ease-out,transform .5s cubic-bezier(.2,.7,.3,1)}
.an-opener.choice-in .an-op-choice{opacity:1;transform:none;pointer-events:auto}
/* the choice fades with the wordmark/subtext during the time-travel crossfade */
.an-opener.out .an-op-choice{opacity:0;pointer-events:none}
.an-op-btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:'Bungee','Bungee Fallback',sans-serif;font-size:clamp(13px,1.4vw,16px);
  letter-spacing:.5px;text-decoration:none;cursor:pointer;
  padding:14px 22px;min-height:52px;border-radius:14px;
  transition:transform .16s cubic-bezier(.2,.7,.3,1),background .14s,color .14s}
.an-op-btn.b-gallery{color:#0E172A;background:var(--an-gold);
  border:2px solid #0E172A;box-shadow:3px 3px 0 rgba(0,0,0,.5)}
.an-op-btn.b-past{color:#fff;background:transparent;
  border:2px solid rgba(255,255,255,.85);box-shadow:3px 3px 0 rgba(0,0,0,.5)}
.an-op-btn.b-past:hover,.an-op-btn.b-past:focus-visible{background:rgba(255,255,255,.12)}
.an-op-btn:hover,.an-op-btn:focus-visible{transform:translate(-1px,-2px)}
.an-op-btn:active{transform:translate(1px,1px)}
.an-opener.flip .an-op-invited{color:var(--ink)}
.an-op-confetti{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
/* JS parks the frame on the page copy's measured box, displaced to the
   splash box via transform; clearing the transform slides it home
   (transform-only per the perf rules — no layout/paint per frame) */
.an-op-confetti .an-cf-frame{position:absolute;will-change:transform;
  transform-origin:0 0;transition:transform .53s ease-in-out}
/* pop-in burst: each piece scales 0.6→1 with a back-out overshoot; JS sets
   per-piece transition delays in a baked-random order (15ms apart) */
.an-op-confetti .cf{opacity:0;transform:scale(.6);
  transform-box:fill-box;transform-origin:center;
  transition:opacity .3s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.an-opener.confetti-in .an-op-confetti .cf{opacity:1;transform:scale(1)}
.an-skip-btn{position:fixed;top:18px;right:18px;z-index:3;
  font-family:'Bungee','Bungee Fallback',sans-serif;font-size:12px;letter-spacing:.5px;
  color:#0E172A;background:var(--an-gold);border:2px solid #0E172A;border-radius:999px;
  padding:9px 16px;cursor:pointer;box-shadow:3px 3px 0 rgba(0,0,0,.5);
  /* transform is listed so the hover lift eases in rather than snapping */
  transition:opacity .53s ease-in-out,transform .16s cubic-bezier(.2,.7,.3,1)}
.an-skip-btn:hover,.an-skip-btn:focus-visible{transform:translateY(-1px)}
/* once the choice is on screen there is nothing left to skip */
.an-opener.choice-in .an-skip-btn{opacity:0;pointer-events:none}

/* ============================================================= RESPONSIVE */
@media(max-width:980px){
  .an-give-grid{grid-template-columns:1fr 1fr}
  .an-disc-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .an-tag:nth-child(5n+1),.an-tag:nth-child(5n+2),.an-tag:nth-child(5n+3),
  .an-tag:nth-child(5n+4),.an-tag:nth-child(5n){grid-column:auto}
  /* Keep the colourways grouped. Desktop reads purple pair · gold pair · blue
     single across 7 columns; dropping to 2 columns made the authored DOM order
     (P P G G B / P P G G B) deal the colours out in a jumble from row 3 down.
     Reordering into colour runs — purple x4, gold x4, blue x2 — restores the
     grouping the design is built on. Grid auto-placement honours `order`, so
     the markup stays in its authored order and desktop is untouched. The tags
     aren't focusable, so visual order can diverge from DOM order safely. */
  .an-tag.tg-purple{order:1}
  .an-tag.tg-gold{order:2}
  .an-tag.tg-blue{order:3}
  .an-wheel-head{display:block}
  .an-sticker.st-wheel{margin:0 0 16px}
  .an-wheel-note{margin:0;padding:20px 24px;display:block}
  .an-wheel-grid{grid-template-columns:1fr;gap:28px}
  .an-wheel-img,.an-wheel-stage{max-width:300px}
  .an-kids-row{justify-content:flex-start}
}
@media(max-width:820px){
  .an-hero-grid{grid-template-columns:1fr;gap:28px}
  .an-rail{max-width:420px}
}
@media(max-width:560px){
  .an-section{padding:38px 0}
  .an-info{grid-template-columns:1fr}
  .an-give-grid{grid-template-columns:1fr}
  .an-disc-grid{grid-template-columns:1fr 1fr}
  .an-prizepanel{grid-template-columns:1fr}
  .an-prizepanel .an-plist + .an-plist{border-left:0;padding-left:0;
    border-top:2px solid rgba(20,17,12,.3);padding-top:8px;margin-top:8px}
  .an-kids-row{flex-direction:column;align-items:center}
  .an-kids-left{align-items:center}
  .an-kids-cap{text-align:center}
}

/* honor reduced motion — the opener still shows (it now carries the
   gallery / time-travel choice) but lands fully static: no fades, no
   confetti burst, no colour sweep. JS adds .reduced + the state classes
   immediately and "time travel" dismisses in one step. */
@media(prefers-reduced-motion:reduce){
  /* keep the 6s script-failure failsafe animation alive — JS adds .flip's
     sweep only outside reduced-motion, so there is nothing else to silence */
  .an-opener{transition:none}
  .an-op-inner,.an-op-confetti .cf{transition:none;opacity:1;transform:none}
  .an-op-inner{opacity:0}
  .an-opener.title-in .an-op-inner{opacity:1}
  .an-op-choice{transition:none}
  .an-hero .an-cf-frame,.an-hero .an-title{opacity:1!important}
  .an-hero .an-confetti .an-cf-frame{transition:none}
  .an-hero .an-confetti .an-cf-frame,
  .an-hero .an-confetti .cf{animation:none!important}
  .an-cardart-shine::before{animation:none;display:none}
  .an-wheel-hint{animation:none}
}
