/* Winter: an add-on layer over golden.css, used on every page (with landscape.css + winter.js + landscape.js).
   Frosted cards, icy-blue accents, the moon. */
:root { --paper:#f6f9fc; --ink:#16243a; --muted:#5a6d84; --plum:#1d3354; --line:#dbe5ef; --accent:#2f7fb8; --frost:#eaf2fa; }
body { background:radial-gradient(120% 70% at 80% 0%, rgba(70,90,170,.35), transparent 60%), linear-gradient(180deg, #030713 0%, #071230 26%, #0e2150 50%, #1d3a70 72%, #36568c 100%) fixed; background-color:#071230; }
code { background:var(--frost); }

/* The sun becomes a low, pale winter moon */
.sun { left:82%; top:12%; width:clamp(64px, 7.5vw, 104px);
  background:
    radial-gradient(circle at 34% 30%, rgba(150,166,196,.42) 0 8%, transparent 9.5%),
    radial-gradient(circle at 62% 60%, rgba(150,166,196,.34) 0 12%, transparent 13.5%),
    radial-gradient(circle at 38% 70%, rgba(150,166,196,.3) 0 6%, transparent 7.5%),
    radial-gradient(circle at 72% 30%, rgba(150,166,196,.28) 0 5%, transparent 6.5%),
    radial-gradient(circle at 50% 45%, rgba(150,166,196,.2) 0 18%, transparent 30%),
    radial-gradient(circle at 36% 34%, #ffffff, #eef3fa 50%, #cdd8e8 100%);
  box-shadow:inset -9px -7px 18px rgba(80,100,145,.35), 0 0 26px 4px rgba(235,243,255,.6), 0 0 80px 26px rgba(160,200,255,.25), 0 0 220px 90px rgba(100,140,230,.13); }
.sun::after { content:""; position:absolute; inset:-120%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, transparent 38%, rgba(200,225,255,.07) 41%, transparent 46%); }

/* Stars and falling snow (drawn by winter.js) */
.snow { position:absolute; inset:0; width:100%; height:100%; display:block; }

/* Frosted cards: cool paper, a bright rim of ice along the top */
.paper { box-shadow:0 30px 80px rgba(8,20,48,.38), inset 0 1px 0 #fff; }
.paper::before { opacity:.08; }
.paper::after { content:""; position:absolute; left:0; right:0; top:0; height:3px; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), #cfe3f5 20%, #ffffff 50%, #cfe3f5 80%, rgba(255,255,255,0)); }
.pill { background:rgba(246,249,252,.72); }
input, textarea { background:#fbfdff; }
.btn:hover { box-shadow:0 8px 0 -2px rgba(29,51,84,.25); }

/* Logo sits on the dark sky, so it goes snow-white */
.mark { color:#f6f9fc; text-shadow:0 2px 14px rgba(8,20,48,.5); }

/* A snowflake on the greeting badge */
.badge::before { content:""; display:inline-block; width:1.1em; height:1.1em; margin:-.2em .5em 0 0; vertical-align:middle; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7M9 3.5l3 2.5 3-2.5M9 20.5l3-2.5 3 2.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7M9 3.5l3 2.5 3-2.5M9 20.5l3-2.5 3 2.5'/%3E%3C/svg%3E") center/contain no-repeat; }

/* /home/ details that were tuned for the warm palette */
.tile:hover { box-shadow:0 36px 80px rgba(8,20,48,.45); }
.tile .ic.term { background:linear-gradient(150deg, #1d3354, #0d1a2e); box-shadow:inset 0 0 0 1px rgba(207,227,245,.25), 0 6px 16px rgba(8,20,48,.4); }
.tile:hover .ic.term { box-shadow:inset 0 0 0 1px rgba(207,227,245,.5), 0 0 22px rgba(170,210,245,.5); }
.soon { color:var(--plum); text-shadow:0 0 10px rgba(255,255,255,.9), 0 0 2px #fff; }
.ask input:focus { box-shadow:0 0 0 3px rgba(47,127,184,.2); }
.state { background:rgba(47,127,184,.14); }
.copy, .vote, .film select, .ask input { background:#fbfdff; }

/* Tiles tilt toward the pointer with a frosty glare (winter.js sets --rx/--ry/--gx/--gy) */
.tile { transform:perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.tile:hover { transform:perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); }
.tile .glare { position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(150,195,240,.3), rgba(150,195,240,0) 55%); }
.tile:hover .glare { opacity:1; }


/* Golden hour switches these off for reduced motion; winter keeps them on (by request) */
@media (prefers-reduced-motion:reduce) {
  .sun { animation:breathe 9s ease-in-out infinite; } .pop { animation:pop .8s cubic-bezier(.2,.8,.2,1) both; }
  .tile { transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s; }
}