@font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

/* Registered so the background gradient can fade between themes */
@property --bg-inner { syntax: "<color>"; inherits: true; initial-value: #2c5a3a; }
@property --bg-outer { syntax: "<color>"; inherits: true; initial-value: #0b1f12; }

:root {
    --bg-inner: #2c5a3a;
    --bg-outer: #0b1f12;
    --accent: #f4c873;
    --ink: #fff8ef;
    --muted: rgb(255 248 239 / 0.62);
    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    color-scheme: dark;
    scrollbar-width: none;
    transition: --bg-inner 1.2s ease, --bg-outer 1.2s ease;
}

:root[data-theme="red"] {
    --bg-inner: #a3141f;
    --bg-outer: #3a0307;
}

:root[data-theme="gold"] {
    --bg-inner: #bea58a;
    --bg-outer: #90775f;
    --accent: #fff8ef;
}

::-webkit-scrollbar { display: none; }

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

body {
    margin: 0;
    background: var(--bg-outer);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 6px;
    border-radius: 6px;
}

/* ---------- Stage ---------- */

.stage {
    position: relative;
    display: grid;
    place-items: center;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background: radial-gradient(120% 90% at 50% 45%, var(--bg-inner), var(--bg-outer));
}

/* Evening: the sky darkens after 16:00 and the stars come out (see sky.js) */
.stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 45%, rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.5));
    opacity: 0;
    transition: opacity 4s ease;
    pointer-events: none;
}

.is-evening .stage::before { opacity: 1; }

.is-idle,
.is-idle * { cursor: none !important; }

/* Northern lights, only in the green theme */
.aurora {
    position: absolute;
    inset: -10% -10% 45%;
    opacity: 0;
    transition: opacity 3s ease;
    pointer-events: none;
}

[data-theme="green"] .aurora { opacity: 0.55; }
[data-theme="green"].is-evening .aurora { opacity: 0.9; }

.aurora span {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    mix-blend-mode: screen;
    will-change: transform;
}

.aurora span:first-child {
    left: 5%;
    top: 12%;
    width: 70%;
    height: 26%;
    background: linear-gradient(90deg, transparent, rgb(80 255 170 / 0.55), rgb(60 220 200 / 0.35), transparent);
    animation: aurora 16s ease-in-out infinite alternate;
}

.aurora span:last-child {
    left: 35%;
    top: 24%;
    width: 62%;
    height: 20%;
    background: linear-gradient(90deg, transparent, rgb(120 255 180 / 0.45), rgb(160 120 255 / 0.28), transparent);
    animation: aurora 22s ease-in-out -7s infinite alternate-reverse;
}

@keyframes aurora {
    from { transform: translateX(-6%) rotate(-8deg) scaleY(0.8) skewX(-10deg); }
    to { transform: translateX(6%) rotate(-3deg) scaleY(1.25) skewX(8deg); }
}

.snow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ground {
    position: absolute;
    inset: auto 0 0;
    width: 100%;
    height: 14vh;
    pointer-events: none;
}

.ground-back { fill: rgb(255 255 255 / 0.07); }
.ground-front { fill: rgb(255 255 255 / 0.12); }

/* ---------- Countdown ---------- */

.hero {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12vh 1rem 6vh;
    text-align: center;
}

.eyebrow {
    margin: 0 0 3vh;
    font: 500 clamp(0.7rem, 1vw, 1.2rem) / 1 var(--sans);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--muted);
}

.clock {
    display: flex;
    gap: clamp(1rem, 4.5vw, 6rem);
}

.unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6em;
}

.num {
    font: 600 min(10.5vw, 21vh) / 0.9 var(--serif);
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.02em;
    text-shadow: 0 0.04em 0.4em rgb(0 0 0 / 0.25);
}

/* Fraunces has proportional digits, so give every digit the width of the widest one ("0") */
.digit {
    display: inline-block;
    width: 0.68em;
    text-align: center;
}

.label {
    font: 500 clamp(0.7rem, 1.1vw, 1.35rem) / 1 var(--sans);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color 0.2s;
}

.label-btn { padding: 0.3em 0.4em; margin: -0.3em -0.4em; }
.label-btn:hover { color: var(--ink); }

.tagline {
    margin: 6vh 0 0;
    font: 600 clamp(1.25rem, 2.6vw, 3.2rem) / 1 var(--serif);
    color: var(--muted);
}

.jul-btn {
    color: var(--ink);
    transition: opacity 0.2s;
}

.jul-btn:hover { opacity: 0.8; }

.greeting,
.tagline-christmas,
.is-christmas .clock,
.is-christmas .tagline-countdown { display: none; }

.is-christmas .greeting { display: block; }
.is-christmas .tagline-christmas { display: inline; }

:lang(en) .greeting { font-size: min(8.5vw, 20vh); }

.greeting {
    margin: 0;
    font: 600 min(14vw, 28vh) / 1 var(--serif);
    white-space: nowrap;
    text-shadow: 0 0.04em 0.4em rgb(0 0 0 / 0.25);
}

/* ---------- Corner buttons ---------- */

.corner {
    position: absolute;
    z-index: 3;
    bottom: 3vh;
    transition: opacity 0.8s ease, transform 0.3s ease;
}

.corner-left { left: 2vw; width: clamp(150px, 24vw, 540px); }
.corner-right { right: 3vw; width: clamp(90px, 13vw, 300px); }
.corner:hover { transform: translateY(-4px) scale(1.04); }
.corner svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Snow lantern: once the last ball is on, a candle flickers inside, brighter when it gets dark */
.lantern-light,
.lantern-core,
.ball .glow { opacity: 0; transition: opacity 2s ease; }
.is-lit .lantern-light,
.is-lit .lantern-core,
.is-lit .lantern .glow { opacity: 0.75; }
.is-evening .is-lit .lantern-light,
.is-evening .is-lit .lantern-core,
.is-evening .is-lit .lantern .glow { opacity: 1; }
.lantern-light .flicker { animation: flicker 3.2s ease-in-out infinite; }
.ball.is-melting { opacity: 0; transition: opacity 2s ease; }

@keyframes flicker {
    0%, 100% { opacity: 0.8; }
    25% { opacity: 1; }
    45% { opacity: 0.7; }
    70% { opacity: 0.95; }
}

/* At Christmas the snowman hops and waves */
.snowman { transform-box: fill-box; transform-origin: 50% 100%; }
.snowman-arm { transform-box: view-box; transform-origin: 42px 56.5px; }
.is-celebrating .snowman { animation: snowman-hop 1.6s ease-in-out infinite; }
.is-celebrating .snowman-arm { animation: snowman-wave 0.45s ease-in-out infinite alternate; }

@keyframes snowman-hop {
    0%, 55%, 100% { transform: none; }
    20% { transform: translateY(-3px); }
    40% { transform: scale(1.03, 0.96); }
}

@keyframes snowman-wave {
    from { transform: rotate(8deg); }
    to { transform: rotate(-28deg); }
}

/* The children blink now and then */
.kid .eyes { transform-box: fill-box; transform-origin: center; animation: blink 5.5s infinite; }
.kid + .kid .eyes { animation-duration: 7s; }

@keyframes blink {
    0%, 95%, 100% { transform: none; }
    97% { transform: scaleY(0.1); }
}

/* Tree: one bauble per day of December, star lights up on the day */
.ornament {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.ornament.is-hung { opacity: 1; }
.ornament.is-new { animation: hang 1.2s cubic-bezier(0.3, 1.6, 0.5, 1) 1s both; }

@keyframes hang {
    from { opacity: 0; transform: translateY(-6px) scale(0.2); }
    to { opacity: 1; transform: none; }
}

.tree-star { opacity: 0.4; transition: opacity 2s ease; }
.star-glow { opacity: 0; }
.is-lit .tree-star { opacity: 1; }
.is-lit .star-glow { animation: glow 2.4s ease-in-out infinite; }

/* Gold theme draws the decorations as fine white line art, like a pen sketch */
[data-theme="gold"] .deco * {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.4px;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* Each decoration has a detailed .art version and a simple rounded .sketch for the line-art theme */
.deco .sketch,
[data-theme="gold"] .deco .art,
[data-theme="gold"] .deco .star-glow,
[data-theme="gold"] .deco .detail { display: none; }
[data-theme="gold"] .deco .sketch { display: inline; }

/* Faces are filled with (almost) the background so lines further back stay hidden without looking like blocks */
[data-theme="gold"] .deco .tier,
[data-theme="gold"] .deco .face,
[data-theme="gold"] .deco .tree-star,
[data-theme="gold"] .deco rect,
[data-theme="gold"] .deco polygon { fill: color-mix(in srgb, var(--bg-inner) 55%, var(--bg-outer)); }

/* ---------- Toast ---------- */

.toast {
    position: fixed;
    z-index: 10;
    left: 50%;
    bottom: 4vh;
    max-width: calc(100% - 2rem);
    margin: 0;
    padding: 0.8em 1.4em;
    border-radius: 999px;
    background: rgb(0 0 0 / 0.45);
    backdrop-filter: blur(8px);
    font: 500 clamp(0.85rem, 1.1vw, 1.25rem) / 1.3 var(--sans);
    text-align: center;
    opacity: 0;
    transform: translate(-50%, 1.5rem);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ---------- Sleigh ---------- */

.sky {
    position: absolute;
    inset: 0;
    z-index: 3; /* the sleigh flies in front of the text */
    pointer-events: none;
    transition: opacity 1.2s ease;
}

.no-sleigh .sky { opacity: 0; }
.no-sleigh .sky * { animation-play-state: paused; }

.flight {
    position: absolute;
    top: 4vh;
    left: 0;
    width: clamp(260px, 38vw, 880px);
    animation: fly 30s linear -11s infinite;
    will-change: transform;
}

.flight-wave { animation: drift 7s ease-in-out infinite alternate; }

.sleigh {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.sleigh.trick-blink .nose-glow { animation-duration: 0.35s; }

/* Christmas: sleigh.js takes over the flight, delivers the presents and parks */
.flight.is-delivering { left: 0; animation: none; transform-origin: 0 0; }
.flight-wave.is-still { animation: none; }
.sleigh.is-parked .deer,
.sleigh.is-parked .hip,
.sleigh.is-parked .knee,
.sleigh.is-parked .sleigh-body,
.sleigh.is-parked .presents { animation: none; }

.tree-gift {
    position: absolute;
    pointer-events: none;
}

.tree-gift svg { display: block; width: 100%; height: auto; }

.dropped-gift {
    position: absolute;
    width: clamp(22px, 2.4vw, 52px);
}

.dropped-gift svg { display: block; width: 100%; height: auto; }

@keyframes fly {
    from { transform: translateX(-100%); }
    to { transform: translateX(100vw); }
}

@keyframes drift {
    0% { transform: translateY(0) rotate(-1.5deg); }
    50% { transform: translateY(4vh) rotate(1.5deg); }
    100% { transform: translateY(1vh) rotate(-3deg); }
}

/* Gallop cycle: front legs reach forward while back legs push off, then swap */
.sleigh .deer { animation: bob 1.25s ease-in-out infinite; }
.sleigh .head { animation: nod 1.25s ease-in-out infinite; transform-origin: 136px 40px; }
.sleigh .hip-front { animation: hip-front 1.25s ease-in-out infinite; }
.sleigh .knee-front { animation: knee-front 1.25s ease-in-out infinite; }
.sleigh .hip-back { animation: hip-back 1.25s ease-in-out infinite; }
.sleigh .knee-back { animation: knee-back 1.25s ease-in-out infinite; }
.sleigh .bell { animation: swing 1.25s ease-in-out infinite; transform-origin: 128px 63px; }

/* Offset each reindeer so they do not gallop in lockstep (after the shorthands above) */
.sleigh .deer,
.sleigh .deer * { animation-delay: var(--d); }

@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes nod {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(5deg); }
}

@keyframes hip-front {
    0%, 100% { transform: rotate(-58deg); }
    50% { transform: rotate(22deg); }
}

@keyframes knee-front {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(75deg); }
}

@keyframes hip-back {
    0%, 100% { transform: rotate(-20deg); }
    50% { transform: rotate(55deg); }
}

@keyframes knee-back {
    0%, 100% { transform: rotate(-60deg); }
    50% { transform: rotate(10deg); }
}

@keyframes swing {
    0%, 100% { transform: rotate(-18deg); }
    50% { transform: rotate(18deg); }
}

.sleigh .sleigh-body { animation: sleigh-bob 1.4s ease-in-out infinite; transform-origin: 190px 210px; }
.sleigh .presents { animation: jiggle 0.7s ease-in-out infinite; transform-origin: 110px 192px; }
.sleigh .santa-head { animation: nod 1.4s ease-in-out infinite; transform-origin: 200px 150px; }
.sleigh .hat { animation: flop 1.4s ease-in-out infinite; transform-origin: 206px 104px; }
.sleigh .wave-arm { animation: wave 1.2s ease-in-out infinite; }
.sleigh .nose-glow { animation: glow 1.6s ease-in-out infinite; }

@keyframes sleigh-bob {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(5px) rotate(-1.5deg); }
}

@keyframes jiggle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px) rotate(-1deg); }
}

@keyframes flop {
    0%, 100% { transform: rotate(0); }
    50% { transform: rotate(9deg); }
}

@keyframes wave {
    0%, 100% { transform: rotate(-18deg); }
    50% { transform: rotate(22deg); }
}

@keyframes glow {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

/* ---------- Below the fold (for search engines and the curious) ---------- */

.about {
    max-width: 62ch;
    margin: 0 auto;
    padding: 14vh 1.5rem 10vh;
    color: var(--muted);
    line-height: 1.65;
}

.about h2 {
    margin: 2.4em 0 0.4em;
    font: 600 1.6rem / 1.2 var(--serif);
    color: var(--ink);
}

.about h2:first-child { margin-top: 0; }
.about strong { color: var(--ink); }

.about footer {
    margin-top: 4em;
    font-size: 0.9rem;
}

.about a { color: var(--accent); }

.about code {
    padding: 0.1em 0.35em;
    border-radius: 4px;
    background: rgb(255 255 255 / 0.08);
    color: var(--ink);
    font-size: 0.9em;
}

.about nav { margin-top: 1em; }

.features {
    margin: 0.6em 0 0;
    padding: 0;
    list-style: none;
}

.features li {
    position: relative;
    padding: 0.35em 0 0.35em 1.5em;
}

.features li::before {
    content: "✦";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-size: 0.8em;
    line-height: 2.1;
}

.about kbd {
    padding: 0.05em 0.4em;
    border: 1px solid rgb(255 255 255 / 0.25);
    border-radius: 4px;
    color: var(--ink);
    font: inherit;
    font-size: 0.9em;
}

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
    .clock { gap: 0.9rem; }
    .num { font-size: min(13vw, 18vh); }
    .label { font-size: 0.65rem; letter-spacing: 0.15em; }
}

@media (prefers-reduced-motion: reduce) {
    .sky *,
    .aurora span,
    .ornament,
    .flicker,
    .kid .eyes,
    .snowman,
    .snowman-arm { animation: none !important; }
    .flight { left: 4vw; }
}