/* ═══════════════════════════════════════════════════════════
   Media capa — index.html
   São Martinho as an azulejo panel: cobalt line on white glazed
   tile, ochre for the borders and the suns, and one red, which
   belongs to Martín — his cloak, his plume — and to the stamp.

   Every interaction is a real input with everything it moves as a
   sibling after it, so all of it works with scripting off and in
   engines without :has(): #capa cuts the cloak, three radios
   light the summers, #gansos finds Martín, six checkboxes roast
   the chestnuts, #acepto closes the pact. Two radios carry the
   language, through :has(); an engine without it stays in
   Spanish. azulejo.js adds the swipe, the lottery, the countdown,
   the tile reveals and a few leaves — nothing load-bearing.

   Shares nothing with style.css or any other page's stylesheet —
   and shouldn't.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Measured on --cal: --ink 14.2, --cobalt 8.8, --dim 6.8, --capa
     5.9. On the white tiles 15.8, 9.7, 7.5 and 6.5 — so the stamp's
     small capitals pass. White on the cobalt buttons 9.7; --ink on
     --ocre-l 12.4. --sol, --ocre, --bead, --castana and the panel's
     storm and warm grounds are for shapes, never text.

     The font request is trimmed to what is used: Cormorant
     Garamond 600/700 and italic 500, Lora 400/600 and italic 400.
     Both carry Cyrillic at those weights, checked against the
     css2 endpoint's cyrillic blocks. */
  --cal:      #F6F3EA;   /* glazed white */
  --tile:     #FFFFFF;
  --ink:      #1A2238;
  --dim:      #4A5470;
  --cobalt:   #1D3F8F;
  --cobalt-l: #DCE3F1;
  --grout:    rgba(29, 63, 143, .14);
  --capa:     #B3261E;
  --capa-d:   #7D1712;
  --ocre:     #C98A1B;
  --ocre-l:   #F6E2B3;
  --bead:     #E2A93B;
  --sol:      #E9A730;
  --castana:  #7A4424;
  --storm:    #D3DBEA;
  --warm:     #FBEFCF;

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --text:    "Lora", Georgia, "Times New Roman", serif;

  color-scheme: light;
}

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

html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body{
  margin: 0;
  background-color: var(--cal);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--text);
}

/* The façade: a classic four-petal azulejo repeat, fixed behind the
   page. A fixed pseudo-element rather than a body background, which
   would propagate to the canvas. Faint enough that on its darkest
   lines --dim still holds 5.3, --cobalt 6.9 and --capa 4.6 (large). */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='none' stroke='%231D3F8F' stroke-opacity='.1' stroke-width='1.5'%3E%3Ccircle r='24'/%3E%3Ccircle cx='96' r='24'/%3E%3Ccircle cy='96' r='24'/%3E%3Ccircle cx='96' cy='96' r='24'/%3E%3Cpath d='M48 12 84 48 48 84 12 48Z'/%3E%3C/g%3E%3Cg fill='%231D3F8F' fill-opacity='.05'%3E%3Ccircle r='13'/%3E%3Ccircle cx='96' r='13'/%3E%3Ccircle cy='96' r='13'/%3E%3Ccircle cx='96' cy='96' r='13'/%3E%3Cpath d='M48 28c7 7 7 13 0 20-7-7-7-13 0-20ZM48 68c-7-7-7-13 0-20 7 7 7 13 0 20ZM28 48c7-7 13-7 20 0-7 7-13 7-20 0ZM68 48c-7 7-13 7-20 0 7-7 13-7 20 0Z'/%3E%3C/g%3E%3Ccircle cx='48' cy='48' r='3.5' fill='%23C98A1B' fill-opacity='.4'/%3E%3C/svg%3E") 0 0 / 96px 96px;
}

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

.defs{ position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── language ─────────────────────────────────────────────
   Only .t spans swap, and only inner ones: display: revert goes
   back to the browser's own display, dropping anything this sheet
   gave the element. */
.t[lang="uk"]{ display: none; }
:root:has(#lang-uk:checked) .t[lang="uk"]{ display: revert; }
:root:has(#lang-uk:checked) .t[lang|="es"]{ display: none; }

.lang{
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 10;
  display: flex;
  margin: 0; padding: 3px;
  border: 2px solid var(--cobalt);
  background: var(--tile);
  box-shadow: 0 0 0 3px var(--tile), 0 3px 0 3px var(--ocre);
  transition: opacity .3s;
}
.js .lang[data-dim]{ opacity: .3; }
.lang-radio{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.lang-btn{
  min-width: 2.6rem;
  padding: .3rem .5rem;
  font: 600 .875rem/1 var(--text);
  letter-spacing: .06em;
  text-align: center;
  color: var(--cobalt);
  cursor: pointer;
}
.lang-radio:checked + .lang-btn{ background: var(--cobalt); color: var(--tile); }
.lang-radio:focus-visible + .lang-btn{ outline: 2px solid var(--capa); outline-offset: 2px; }

/* ── autumn ───────────────────────────────────────────────
   Behind <main>, in front of the façade. Each leaf falls on one
   clock and sways on another, both by transform. */
.leaves{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.leaves i{
  position: absolute;
  top: -40px;
  left: var(--x);
  animation: drop var(--d) linear var(--dl) infinite;
}
.leaves i::before{
  content: "";
  display: block;
  width: var(--s);
  height: calc(var(--s) * .6);
  border-radius: 0 100% 0 100%;
  background: var(--c);
  opacity: .5;
  animation: sway var(--sw) ease-in-out infinite alternate;
}
@keyframes drop{ to{ transform: translate3d(-60px, calc(100vh + 80px), 0); } }
@keyframes sway{
  from{ transform: translateX(-16px) rotate(-35deg); }
  to  { transform: translateX(16px) rotate(45deg); }
}

/* Leaves thrown by azulejo.js when the pact closes. */
.bleaf{
  position: fixed;
  z-index: 20;
  width: 14px; height: 9px;
  border-radius: 0 100% 0 100%;
  pointer-events: none;
}

/* ── layout ───────────────────────────────────────────────── */
main{
  position: relative;
  z-index: 1;
  max-width: 38rem;
  margin: 0 auto;
  padding: 0 16px 4rem;
}

h1, h2{
  font-family: var(--display);
  font-weight: 700;
  color: var(--cobalt);
  line-height: 1.05;
  margin: 0;
}
h1{ font-size: clamp(3rem, 14vw, 4.75rem); }
/* A rule cut in two: half cobalt, half cloak. */
h1::after{
  content: "";
  display: block;
  width: 5rem;
  height: 4px;
  margin: .55rem auto 0;
  background: linear-gradient(90deg, var(--cobalt) 0 46%, transparent 46% 54%, var(--capa) 54%);
}
h2{ font-size: clamp(2rem, 8vw, 2.6rem); margin-bottom: .6rem; }

i{ font-style: italic; }
strong{ font-weight: 600; }

/* ── shared drawing classes ─────────────────────────────────
   Used in the panel, the geese and the pact alike. */
.fig, .line, .cloud, .arch, .puddle{
  stroke: var(--cobalt);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.line{ fill: none; }
.fig{ fill: var(--tile); }
.cloud{ fill: var(--cobalt-l); }
.arch{ fill: #B9C4DC; }
.half{ fill: var(--capa); stroke: var(--capa-d); stroke-width: 2; stroke-linejoin: round; }
.plume{ fill: var(--capa); stroke: var(--capa-d); stroke-width: 1.5; stroke-linejoin: round; }

/* The goose and the chestnut live in one <symbol> each, so their
   clones sit in <use> shadow trees: state reaches them only through
   inherited custom properties, never through a selector. */
.g-body{ fill: var(--tile); stroke: var(--cobalt); stroke-width: 2; stroke-linejoin: round; }
.g-leg { fill: none; stroke: var(--ocre); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.g-beak{ fill: var(--bead); stroke: var(--ocre); stroke-width: 1; stroke-linejoin: round; }
.g-eye { fill: var(--cobalt); }
.g-wing{ fill: none; stroke: var(--cobalt); stroke-width: 1.8; stroke-linecap: round; }

.c-shell{ fill: var(--shell, #9A6237); stroke: #4A2612; stroke-width: 1.6; stroke-linejoin: round; }
.c-cap  { fill: #E3C69B; stroke: #4A2612; stroke-width: 1; }
.c-tip  { fill: none; stroke: #4A2612; stroke-width: 2; stroke-linecap: round; }
.c-x    { fill: none; stroke: #F2C55C; stroke-width: 3.2; stroke-linecap: round; opacity: var(--open, 0); }
.c-shine{ fill: none; stroke: #fff; stroke-opacity: .45; stroke-width: 1.6; stroke-linecap: round; }

/* ── buttons ──────────────────────────────────────────────
   Every button but the lottery's is a <label> for a checkbox; each
   says what it will do, then what undoes it. */
.btn{
  display: inline-block;
  padding: .7rem 1.4rem;
  border: 2px solid var(--cobalt);
  background: var(--cobalt);
  color: var(--tile);
  font: 600 1rem/1.2 var(--text);
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--ocre);
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s, color .2s, transform .1s, box-shadow .1s;
}
.btn:hover{ background: var(--tile); color: var(--cobalt); }
.btn:active{ transform: translateY(3px); box-shadow: 0 1px 0 var(--ocre); }
.btn:disabled{ opacity: .55; cursor: default; }
.btn .undo{ display: none; }

#capa:checked ~ .cut-btn,
#gansos:checked ~ .geese-btn,
#acepto:checked ~ .accept{ background: var(--tile); color: var(--cobalt); }
#capa:checked ~ .cut-btn .do,
#gansos:checked ~ .geese-btn .do,
#acepto:checked ~ .accept .do{ display: none; }
#capa:checked ~ .cut-btn .undo,
#gansos:checked ~ .geese-btn .undo,
#acepto:checked ~ .accept .undo{ display: inline; }
#capa:focus-visible ~ .cut-btn,
#gansos:focus-visible ~ .geese-btn,
#acepto:focus-visible ~ .accept{ outline: 3px solid var(--capa); outline-offset: 3px; }

/* ── hero ─────────────────────────────────────────────────── */
.hero{
  padding: 4.5rem 0 2rem;
  text-align: center;
}
.kicker{
  margin: 0 0 .4rem;
  font: 600 .8125rem/1.3 var(--text);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}
.lead{
  max-width: 30rem;
  margin: 1rem auto 1.6rem;
  color: var(--dim);
  font-style: italic;
}

/* The border round the panel, as on a real azulejo panel: ochre
   beads on cobalt, drawn as a 3 × 3 border-image so the edges repeat
   whole beads and the corners keep their diamonds. */
.frame{
  max-width: 32rem;
  margin: 0 auto;
  border: 14px solid var(--cobalt);
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42'%3E%3Crect width='42' height='42' fill='%231D3F8F'/%3E%3Cg fill='%23E2A93B'%3E%3Cpath d='M7 1.5 12.5 7 7 12.5 1.5 7ZM35 1.5 40.5 7 35 12.5 29.5 7ZM7 29.5 12.5 35 7 40.5 1.5 35ZM35 29.5 40.5 35 35 40.5 29.5 35Z'/%3E%3Ccircle cx='21' cy='7' r='3.6'/%3E%3Ccircle cx='7' cy='21' r='3.6'/%3E%3Ccircle cx='35' cy='21' r='3.6'/%3E%3Ccircle cx='21' cy='35' r='3.6'/%3E%3C/g%3E%3Cg fill='%23F6F3EA'%3E%3Ccircle cx='21' cy='7' r='1.4'/%3E%3Ccircle cx='7' cy='21' r='1.4'/%3E%3Ccircle cx='35' cy='21' r='1.4'/%3E%3Ccircle cx='21' cy='35' r='1.4'/%3E%3Ccircle cx='7' cy='7' r='1.4'/%3E%3Ccircle cx='35' cy='7' r='1.4'/%3E%3Ccircle cx='7' cy='35' r='1.4'/%3E%3Ccircle cx='35' cy='35' r='1.4'/%3E%3C/g%3E%3C/svg%3E") 14 round;
  outline: 1px solid var(--cobalt);
  outline-offset: 3px;
  background: var(--cobalt);
  box-shadow: 0 10px 24px -12px rgba(29, 63, 143, .45);
}

/* The panel: tile grout drawn as two repeating gradients over the
   storm. Its ground warms when the sun comes out. pan-y lets a
   vertical drag scroll the page while a sideways one is a swipe. */
.panel{
  position: relative;
  display: block;
  aspect-ratio: 400 / 360;
  overflow: hidden;
  background-color: var(--storm);
  background-image:
    linear-gradient(to right, var(--grout) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grout) 1px, transparent 1px);
  background-size: 12.5% 13.889%;
  cursor: pointer;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .6s ease;
}
.panel svg{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.panel .sword .line{ stroke-width: 3.5; }
.panel .puddle{ fill: var(--cobalt-l); stroke-width: 1.5; }

.sun circle{ fill: var(--sol); stroke: #B97A12; stroke-width: 2; }
.rays path{ stroke: #B97A12; stroke-width: 3; stroke-linecap: round; fill: none; }

/* Every moving part turns in the drawing's own units. Transitions
   take the timing of the state they go to: these rules are the way
   back, quick and all at once; the :checked block below is the
   story, in order. */
.cloud, .half-r, .sun, .sword, .birds, .man-head{ transform-box: view-box; }
.cloud{ transition: transform .6s ease; }
.half-r{
  transform-origin: 130px 166px;
  transition: transform .6s ease;
}
.sun{
  transform-origin: 300px 80px;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .4s, transform .4s;
}
.sword{ transform-origin: 146px 234px; }
.man-head{ transition: transform .5s ease; }
.cut{
  fill: none;
  stroke: var(--tile);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
}

/* The storm: lightning every seven seconds, a flash of the whole
   panel with it, and rings spreading in the puddles. */
.bolt{
  fill: none;
  stroke: var(--sol);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  animation: bolt 7s linear 1.5s infinite;
}
@keyframes bolt{
  0%, 88%, 90.5%, 92.5%, 100%{ opacity: 0; }
  89%, 90%, 93%, 94%{ opacity: 1; }
}
.flash{
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  animation: flash 7s linear 1.5s infinite;
}
@keyframes flash{
  0%, 88%, 90.5%, 92.5%, 95%, 100%{ opacity: 0; }
  89%{ opacity: .6; }
  93%{ opacity: .35; }
}
.ripple{
  fill: none;
  stroke: var(--cobalt);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  animation: ripple 1.4s ease-out infinite;
}
@keyframes ripple{
  from{ transform: scale(.2); opacity: .9; }
  to  { transform: scale(1.5); opacity: 0; }
}
.ripples{ transition: opacity .6s; }
.glint{
  fill: none;
  stroke: var(--tile);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.birds{ opacity: 0; }
.bird{
  fill: none;
  stroke: var(--cobalt);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
}

/* The swipe, drawn by azulejo.js in view-box units. */
.trail{
  fill: none;
  stroke: var(--tile);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .95;
  transition: opacity .45s;
}
.trail.fade{ opacity: 0; }

/* Rain: a pseudo-element one tile wider and taller than its box,
   translated by exactly one tile in a loop, so it moves by
   transform and never repaints. The dash leans the way it falls. */
.rain{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity .5s;
}
.rain::before{
  content: "";
  position: absolute;
  top: -48px; left: 0; right: -24px; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='48'%3E%3Cpath d='M16 4l-5 10M5 28l-5 10' stroke='%231D3F8F' stroke-opacity='.55' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 24px 48px;
  animation: fall .45s linear infinite;
}
@keyframes fall{ to{ transform: translate(-24px, 48px); } }

/* Anything scrolled out of view stops moving. */
[data-off] *, [data-off] *::before, [data-off] *::after{ animation-play-state: paused !important; }

/* ── the cut ───────────────────────────────────────────────
   In order: the sword swings and the cut runs down the cloak (0 s),
   the half crosses to the man (0.5 s), the rain and the lightning
   stop (1.2 s), the clouds part (1.6 s), the sun comes out (2.2 s),
   the man looks up, the puddle catches the light, birds. */
#capa:checked ~ .frame .panel{
  background-color: var(--warm);
  transition: background-color 1.6s ease 2s;
}
#capa:checked ~ .frame .sword{ animation: swing .7s ease-in-out; }
@keyframes swing{
  35%{ transform: rotate(-115deg); }
  65%{ transform: rotate(25deg); }
}
#capa:checked ~ .frame .cut{ animation: slash .5s ease-out .15s both; }
@keyframes slash{
  0%  { stroke-dashoffset: 1; opacity: 1; }
  70% { stroke-dashoffset: 0; opacity: 1; }
  100%{ stroke-dashoffset: 0; opacity: 0; }
}
#capa:checked ~ .frame .half-r{
  transform: translate(150px, 88px) scale(.55) rotate(-4deg);
  transition: transform 1.3s cubic-bezier(.45, 0, .25, 1) .5s;
}
#capa:checked ~ .frame .rain{
  opacity: 0;
  transition: opacity 1.2s ease 1.2s;
}
#capa:checked ~ .frame .ripples{
  opacity: 0;
  transition: opacity 1s ease 1.4s;
}
#capa:checked ~ .frame .bolt,
#capa:checked ~ .frame .flash{ animation: none; }
#capa:checked ~ .frame .cloud-l{
  transform: translate(-260px, -30px);
  transition: transform 2s ease-in-out 1.6s;
}
#capa:checked ~ .frame .cloud-r{
  transform: translate(240px, -30px);
  transition: transform 2s ease-in-out 1.6s;
}
#capa:checked ~ .frame .sun{
  opacity: 1;
  transform: none;
  transition: opacity 1.4s ease 2.2s, transform 1.8s ease 2.2s;
}
#capa:checked ~ .frame .rays{
  transform-box: view-box;
  transform-origin: 300px 80px;
  animation: turn 40s linear infinite;
}
@keyframes turn{ to{ transform: rotate(1turn); } }
#capa:checked ~ .frame .man-head{
  transform: translate(2px, -4px);
  transition: transform .8s ease 1.9s;
}
#capa:checked ~ .frame .glint{ animation: glint 2.4s ease-in-out 3s infinite; }
@keyframes glint{
  0%, 100%{ opacity: 0; transform: scale(.3) rotate(0); }
  50%     { opacity: 1; transform: scale(1) rotate(45deg); }
}
#capa:checked ~ .frame .birds{
  opacity: 1;
  animation: fly 11s linear 3s infinite backwards;
}
@keyframes fly{
  from{ transform: translate(-100px, 10px); }
  to  { transform: translate(470px, -40px); }
}
#capa:checked ~ .frame .bird{ animation: flap .35s ease-in-out infinite alternate; }
@keyframes flap{ to{ transform: scaleY(.45); } }

.cut-btn{ margin-top: 1.7rem; }
.hint{
  display: none;
  margin: .9rem auto 0;
  max-width: 22rem;
  font-size: .875rem;
  font-style: italic;
  color: var(--dim);
}
.js .hint{ display: block; }
#capa:checked ~ .hint{ visibility: hidden; }

.after{
  display: none;
  margin: 1.2rem auto 0;
  max-width: 26rem;
  font: italic 500 1.5rem/1.3 var(--display);
  color: var(--cobalt);
}
.after strong{ font-weight: 700; font-style: normal; color: var(--capa); }
#capa:checked ~ .after{
  display: block;
  animation: rise .9s ease 2.6s backwards;
}
@keyframes rise{ from{ opacity: 0; transform: translateY(8px); } }

/* ── tiles ─────────────────────────────────────────────────── */
.tile{
  position: relative;
  margin-top: 2.5rem;
  padding: 2rem 1.4rem 1.6rem;
  background: var(--tile);
  border: 1px solid var(--grout);
  box-shadow:
    inset 0 0 0 6px var(--tile),
    inset 0 0 0 7px var(--grout),
    0 8px 20px -14px rgba(29, 63, 143, .5);
}
/* Corner ornaments: the quarter-flowers a tile shares with its
   neighbours, cobalt with an ochre heart. */
.tile::before{
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  background:
    radial-gradient(circle at 0 0,       var(--bead) 0 4px, transparent 5px),
    radial-gradient(circle at 100% 0,    var(--bead) 0 4px, transparent 5px),
    radial-gradient(circle at 0 100%,    var(--bead) 0 4px, transparent 5px),
    radial-gradient(circle at 100% 100%, var(--bead) 0 4px, transparent 5px),
    radial-gradient(circle at 0 0,       var(--cobalt) 0 11px, transparent 12px),
    radial-gradient(circle at 100% 0,    var(--cobalt) 0 11px, transparent 12px),
    radial-gradient(circle at 0 100%,    var(--cobalt) 0 11px, transparent 12px),
    radial-gradient(circle at 100% 100%, var(--cobalt) 0 11px, transparent 12px);
}
.tile > *{ position: relative; }
.tile p{ margin: 0 0 1rem; }
.tile p:last-child{ margin-bottom: 0; }

.tile .num{
  margin: 0 0 .2rem;
  font: 600 1rem/1 var(--display);
  letter-spacing: .2em;
  color: var(--capa);
}
.big{
  font: 700 1.75rem/1.2 var(--display);
  color: var(--cobalt);
}
.tile .aside{
  font-style: italic;
  color: var(--dim);
  font-size: .95rem;
}

/* Tiles are laid as she scrolls: each one tips down into place.
   Hidden only under .js, and azulejo.js has a failsafe. */
.js .reveal{
  opacity: 0;
  transform: perspective(1200px) rotateX(-16deg) translateY(28px);
  transform-origin: 50% 0;
  transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}
.js .reveal.in{ opacity: 1; transform: none; }

/* ── II. three summers ─────────────────────────────────────── */
.chips{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.2rem 0 .4rem;
}
.chips label{
  padding: .4rem .9rem;
  border: 2px solid var(--cobalt);
  background: var(--tile);
  color: var(--cobalt);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s, color .2s;
}
#v-pt:checked ~ .chips [for="v-pt"],
#v-ar:checked ~ .chips [for="v-ar"],
#v-ua:checked ~ .chips [for="v-ua"]{ background: var(--cobalt); color: var(--tile); }
#v-pt:focus-visible ~ .chips [for="v-pt"],
#v-ar:focus-visible ~ .chips [for="v-ar"],
#v-ua:focus-visible ~ .chips [for="v-ua"]{ outline: 3px solid var(--capa); outline-offset: 2px; }

/* Twelve months; the chosen country's light up with a sun. */
.months{
  list-style: none;
  margin: 0 0 1rem;
  padding: 1.1rem 0 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
}
.months li{
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background: var(--cal);
  border: 1px solid var(--grout);
  font: 600 .78rem/1 var(--text);
  color: var(--dim);
  transition: background-color .3s, color .3s, border-color .3s;
}
.months li::before{
  content: "";
  position: absolute;
  left: 50%;
  top: -.8rem;
  width: .9rem; height: .9rem;
  margin-left: -.45rem;
  border-radius: 50%;
  background: var(--sol);
  box-shadow: 0 0 0 3px rgba(233, 167, 48, .3);
  transform: scale(0);
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
#v-pt:checked ~ .months .m11,
#v-ar:checked ~ .months .m6,
#v-ua:checked ~ .months .m9,
#v-ua:checked ~ .months .m10{
  background: var(--ocre-l);
  border-color: var(--ocre);
  color: var(--ink);
}
#v-pt:checked ~ .months .m11::before,
#v-ar:checked ~ .months .m6::before,
#v-ua:checked ~ .months .m9::before,
#v-ua:checked ~ .months .m10::before{ transform: scale(1); }

.ver{
  display: none;
  gap: .1rem;
  margin-bottom: 1.2rem;
  padding: .8rem 1rem;
  border-left: 4px solid var(--ocre);
  background: var(--cal);
}
#v-pt:checked ~ .ver-pt,
#v-ar:checked ~ .ver-ar,
#v-ua:checked ~ .ver-ua{ display: grid; animation: rise .4s ease; }
.ver .where{
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}
.ver .name{
  font: italic 500 1.6rem/1.15 var(--display);
  color: var(--cobalt);
}

/* ── III. the lottery ──────────────────────────────────────── */
.urn{
  margin: 1.2rem 0 1.4rem;
  padding: 1.1rem 1rem 1.3rem;
  text-align: center;
  background: var(--cal);
  border: 1px solid var(--grout);
}
.urn .reel{
  display: grid;
  place-items: center;
  height: 3.6rem;
  margin: 0 0 .9rem;
  overflow: hidden;
  border-block: 2px solid var(--cobalt);
  background: var(--tile);
  font: italic 500 clamp(1.35rem, 6vw, 1.75rem)/1.1 var(--display);
  color: var(--cobalt);
}
.reel .name{ display: block; }
.reel .name.tick{ animation: tick .09s ease-out; }
.reel .name.win{ color: var(--capa); }
.reel .name.land{ animation: land .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tick{ from{ transform: translateY(-70%); opacity: .2; } }
@keyframes land{ from{ transform: scale(.6); } }

.draws{
  list-style: none;
  display: flex;
  justify-content: center;
  gap: .8rem;
  margin: 0 0 .6rem;
  padding: 0;
}
.draws li{
  width: 2.8rem; height: 2.8rem;
  display: grid; place-items: center;
  border: 2px solid var(--cobalt);
  background: var(--tile);
  font: 700 1.4rem/1 var(--display);
  color: var(--cobalt);
  transition: background-color .3s, color .3s;
}
.draws li.done{
  background: var(--cobalt);
  color: var(--tile);
  animation: land .45s cubic-bezier(.3, 1.6, .5, 1);
}
.urn .reel-says{
  min-height: 1.6em;
  margin: 0 0 .9rem;
  font-style: italic;
  color: var(--dim);
}
.spin{ display: none; }
.js .spin{ display: inline-block; }

/* ── IV. the geese ─────────────────────────────────────────── */
.geese{ margin: 1.2rem 0 1.4rem; text-align: center; }
.pond{
  position: relative;
  display: block;
  aspect-ratio: 400 / 150;
  margin-bottom: 1rem;
  background: var(--cal);
  border: 1px solid var(--grout);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pond svg{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.goose{
  transform-box: view-box;
  transform-origin: 0 0;
  transform: translate(var(--x), 100px) scale(1.4);
  transition: transform .5s ease;
}
.waddle{
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: waddle 1.4s ease-in-out infinite alternate;
}
@keyframes waddle{
  from{ transform: rotate(-4deg); }
  to  { transform: rotate(4deg); }
}
.hid{
  transform-box: view-box;
  transition: transform .4s ease;
}
#gansos:checked ~ .pond .goose{
  transform: translate(var(--to), 100px) scale(1.4);
  transition: transform 1s cubic-bezier(.3, .7, .3, 1);
}
#gansos:checked ~ .pond .waddle{ animation-duration: .22s; }
#gansos:checked ~ .pond .hid{
  transform: translateY(-4px);
  transition: transform .4s cubic-bezier(.3, 1.6, .5, 1) .8s;
}

.bubble{
  position: absolute;
  padding: .2rem .65rem;
  border: 2px solid var(--cobalt);
  border-radius: 1rem;
  background: var(--tile);
  font: 600 .9rem/1.3 var(--text);
  color: var(--cobalt);
  white-space: nowrap;
  opacity: 0;
  transform: scale(.3);
  transition: opacity .15s, transform .15s;
}
.b1{ left: 2%; top: 6%; transform-origin: 30% 100%; }
.b2{ right: 2%; top: 2%; transform-origin: 70% 100%; }
#gansos:checked ~ .pond .bubble{
  opacity: 1;
  transform: none;
  transition: opacity .2s .55s, transform .35s cubic-bezier(.3, 1.6, .5, 1) .55s;
}
#gansos:checked ~ .pond .b2{ transition-delay: .9s; }

.geese .found{
  display: none;
  margin: 1rem 0 0;
  font: italic 500 1.35rem/1.3 var(--display);
  color: var(--cobalt);
}
#gansos:checked ~ .found{ display: block; animation: rise .6s ease 1s backwards; }

/* ── V. the brazier ────────────────────────────────────────
   A CSS counter counts the roasted chestnuts; the long sibling
   chain shows the full cone only once all six are done. */
.brasero{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .25rem .3rem;
  align-items: end;
  margin: 1.4rem 0 1.4rem;
  counter-reset: asadas;
}
.nut-box:checked{ counter-increment: asadas; }
.nut{
  position: relative;
  display: block;
  padding-top: 1rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nut svg{
  display: block;
  width: 100%;
  max-width: 3.2rem;
  margin: 0 auto;
  overflow: visible;
  transition: transform .2s;
}
.nut:hover svg{ transform: translateY(-3px); }
.nut-box:checked + .nut{ --shell: #5C2F15; --open: 1; }
.nut-box:checked + .nut svg{ animation: hop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hop{ 40%{ transform: translateY(-14px) rotate(-14deg); } }
.nut-box:focus-visible + .nut{ outline: 3px solid var(--capa); outline-offset: 2px; }

/* Steam: two wisps over each roasted chestnut. */
.nut::before,
.nut::after{
  content: "";
  position: absolute;
  bottom: 70%;
  left: 40%;
  width: 5px; height: 16px;
  border-radius: 5px;
  background: var(--cobalt-l);
  opacity: 0;
  pointer-events: none;
}
.nut::after{ left: 58%; }
.nut-box:checked + .nut::before{ animation: steam 1.8s ease-out infinite; }
.nut-box:checked + .nut::after { animation: steam 1.8s ease-out .9s infinite; }
@keyframes steam{
  0%  { opacity: 0;  transform: translateY(0) scaleY(.6); }
  30% { opacity: .9; }
  100%{ opacity: 0;  transform: translate(4px, -24px) scaleY(1.3); }
}

/* The fire: an iron pan, a grill, and five flames on their own
   clocks. Shapes only; no text ever sits on it. */
.fire{
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 3rem;
  padding: 0 6%;
  overflow: hidden;
  border-top: 5px solid #3B4152;
  border-radius: 0 0 1.6rem 1.6rem;
  background: #2B1B12;
}
.fire i{
  width: 15%;
  height: 72%;
  background: radial-gradient(ellipse at 50% 100%, #F2C55C 0 28%, #E07A1F 46%, rgba(179, 38, 30, 0) 72%);
  transform-origin: 50% 100%;
  animation: flame 1.1s ease-in-out infinite alternate;
}
.fire i:nth-child(2n){ height: 88%; animation-duration: .8s; }
.fire i:nth-child(3n){ animation-delay: -.5s; }
@keyframes flame{
  from{ transform: scale(1.05, .72); }
  to  { transform: scale(.9, 1.1); }
}

.brasero .count{
  grid-column: 1 / -1;
  margin: .7rem 0 0;
  text-align: center;
  font-weight: 600;
  color: var(--cobalt);
}
.count b::before{ content: counter(asadas); }

.done{
  grid-column: 1 / -1;
  display: none;
  text-align: center;
}
#n1:checked ~ #n2:checked ~ #n3:checked ~ #n4:checked ~ #n5:checked ~ #n6:checked ~ .done{
  display: block;
  animation: rise .6s ease backwards;
}
.cone{
  display: block;
  width: 6rem;
  margin: .6rem auto 0;
  --shell: #5C2F15;
  --open: 1;
}
.cone .paper{ fill: var(--tile); stroke: var(--cobalt); stroke-width: 2.5; stroke-linejoin: round; }
.cone .paper-line{ fill: none; stroke: var(--grout); stroke-width: 2; }
.brasero .shout{
  margin: .2rem 0 0;
  font: italic 500 2rem/1.1 var(--display);
  color: var(--capa);
}

/* ── VI. this year ─────────────────────────────────────────── */
.tile .countdown{
  display: inline-block;
  margin: .2rem 0 1rem;
  padding: .3rem .8rem;
  border: 1px solid var(--ocre);
  background: var(--ocre-l);
  font-weight: 600;
  color: var(--ink);
}
.tile .countdown[hidden]{ display: none; }
.year{
  margin: .8rem 0 1.2rem;
  display: grid;
  gap: .7rem;
}
.year div{
  display: grid;
  grid-template-columns: 5.6rem 1fr;
  align-items: baseline;
  gap: .8rem;
}
.year dt{
  font: 700 1.9rem/1 var(--display);
  color: var(--cobalt);
  font-variant-numeric: lining-nums;
  text-align: right;
  white-space: nowrap;
}
.year dd{ margin: 0; }
/* A waxing crescent, lit on the right; a sun half under the line. */
.moon, .dusk{
  display: inline-block;
  width: .55em; height: .55em;
  margin-right: .3em;
  vertical-align: .08em;
  border-radius: 50%;
}
.moon{ box-shadow: inset -.13em 0 0 0 var(--ocre); }
.dusk{
  height: .28em;
  border-radius: .55em .55em 0 0;
  background: var(--sol);
  box-shadow: 0 .07em 0 0 var(--cobalt);
}

/* ── the notice ───────────────────────────────────────────── */
.notice{
  position: relative;
  margin-top: 3.4rem;
  padding: 2.4rem 1.4rem 2rem;
  border: 3px solid var(--cobalt);
  outline: 1px solid var(--cobalt);
  outline-offset: 5px;
  background: var(--tile);
  text-align: center;
}
.notice h2{
  font-size: 1rem;
  font-family: var(--text);
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--capa);
}
.notice p{ margin: 0 0 1rem; }
.notice .close{
  margin: 1.6rem 0 1.4rem;
  font: italic 500 clamp(1.7rem, 7vw, 2.2rem)/1.2 var(--display);
  color: var(--cobalt);
}
.notice .sign{
  margin: 0;
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
}

/* The rubber stamp. It lands when the notice is revealed; without
   the script it is simply there. */
.stamp{
  position: absolute;
  top: -1.2rem;
  right: -.3rem;
  z-index: 2;
  padding: .4rem .7rem .35rem;
  border: 4px double var(--capa);
  background: var(--tile);
  color: var(--capa);
  font: 700 1.1rem/1 var(--display);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  transform: rotate(-9deg);
}
.stamp small{
  display: block;
  margin-top: .25rem;
  font: 600 .625rem/1.2 var(--text);
  letter-spacing: .14em;
}
.js .notice .stamp{ opacity: 0; transform: rotate(-9deg) scale(2.2); }
.js .notice.in .stamp{ animation: thump .45s cubic-bezier(.5, 0, .75, 0) .6s forwards; }
@keyframes thump{ to{ opacity: 1; transform: rotate(-9deg) scale(1); } }

/* The pact: two half-cloaks that close into one. */
.pact{ margin: 1.2rem 0 1.8rem; }
.halves{
  display: block;
  width: 7.5rem;
  margin: 0 auto .8rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.halves svg{ display: block; width: 100%; overflow: visible; }
.halves .hl,
.halves .hr,
.halves .clasp{ transform-box: fill-box; }
.halves .hl{ transform-origin: 100% 0; transform: translateX(-16px) rotate(-10deg); transition: transform .5s; }
.halves .hr{ transform-origin: 0 0;    transform: translateX(16px) rotate(10deg);   transition: transform .5s; }
.clasp{
  fill: var(--bead);
  stroke: var(--ocre);
  stroke-width: 1.5;
  transform-origin: center;
  transform: scale(0);
  transition: transform .3s;
}
#acepto:checked ~ .halves .hl,
#acepto:checked ~ .halves .hr{
  transform: none;
  transition: transform .8s cubic-bezier(.3, 1.4, .5, 1);
}
#acepto:checked ~ .halves .clasp{
  transform: none;
  transition: transform .4s cubic-bezier(.3, 1.6, .5, 1) .6s;
}
.pact .deal{
  display: none;
  margin: 1.1rem 0 0;
  font: italic 500 1.4rem/1.3 var(--display);
  color: var(--capa);
}
#acepto:checked ~ .deal{ display: block; animation: rise .6s ease .3s backwards; }

@media (min-width: 46rem){
  .hero{ padding-top: 5.5rem; }
  .tile{ padding: 2.4rem 2.4rem 2rem; }
}

/* Reduced motion: nothing loops and nothing performs. Every story
   still happens — the cut cuts, the geese part, the chestnuts roast
   — it just happens at once. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
    transition-delay: 0s !important;
  }
  .leaves, .ripples{ display: none; }
}