:root{
  --bg:#0d0f12; --fg:#eceae5; --muted:#8d9099; --line:#22262d; --accent:#e8e6e1;
  --rise:cubic-bezier(.2,.9,.25,1);
  --spring:cubic-bezier(.3,1.5,.45,1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:ui-sans-serif,-apple-system,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
#sky{position:fixed; top:0; left:0; z-index:0; display:block; pointer-events:none}
/* the sun and moon discs: sharp, at device resolution, over the sky and under the type */
/* explicit stacking, so no browser can promote a composited layer above its neighbour */
.sun,.moon{position:fixed; top:0; left:0; pointer-events:none; will-change:transform,opacity}
.sun{z-index:1} .moon{z-index:2}
.sun{border-radius:50%; background:radial-gradient(circle at 42% 40%, #fffdf8, #f3f0e9 55%, #e6e2d8)}
.city{position:fixed; top:0; left:0; z-index:3; pointer-events:none; shape-rendering:crispEdges; transform:translateZ(0)}
.no-gl .sun,.no-gl .moon,.no-gl .city{display:none}
/* no WebGL: a still version of the same mood */
.no-gl #sky{display:none}
.no-gl body{background:linear-gradient(#141619, #2a2d33 45%, #0b0d10 45%)}

/* the type sits on the ground, centred in the band below the horizon (--h is set by sky.js) */
:root{--h:0.55}
main{position:fixed; left:50%; top:calc((1 - var(--h) / 2) * 100%); translate:-50% -50%; z-index:10; text-align:center; width:min(34rem, calc(100% - 64px)); user-select:none; -webkit-user-select:none}

/* ── the mark: four solid tiles floating on the surface ── */
.stage{perspective:700px; width:72px; height:72px; margin:0 auto 30px}
.mark{
  width:100%; height:100%; display:grid;
  grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:6px;
  transform-style:preserve-3d; will-change:transform;
}
.mark i{
  position:relative; display:block; border-radius:5px;
  transform-style:preserve-3d; will-change:transform;
  background:var(--accent);
  /* a glossy top edge and a dark underside, so they read as objects, not swatches */
  background-image:linear-gradient(160deg, rgba(255,255,255,.35), rgba(255,255,255,0) 45%, rgba(0,0,0,.18));
  box-shadow:0 14px 28px -10px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.25) inset;
  animation:tile-in .9s var(--spring) both;
}
.mark i:nth-child(1){animation-delay:.08s}
.mark i:nth-child(2){background-color:#727271; animation-delay:.18s}
.mark i:nth-child(3){background-color:#727271; animation-delay:.26s}
.mark i:nth-child(4){background-color:#3a3c40; animation-delay:.36s}
@keyframes tile-in{from{scale:.4; filter:brightness(2.2)} to{scale:1; filter:brightness(1)}}
.mark.bump i{animation:bump .55s var(--spring) both}
.mark.bump i:nth-child(2){animation-delay:.04s}
.mark.bump i:nth-child(3){animation-delay:.06s}
.mark.bump i:nth-child(4){animation-delay:.1s}
@keyframes bump{0%{scale:1} 30%{scale:1.22; filter:brightness(1.6)} 100%{scale:1; filter:brightness(1)}}

/* ── type ── */
h1{margin:0; font-size:clamp(2.4rem,9vw,4rem); font-weight:600; letter-spacing:-.035em; line-height:1; text-shadow:0 1px 2px rgba(0,0,0,.45); animation:rise .8s var(--rise) .25s both}
h1 span{color:var(--muted); display:inline-block; animation:drop .7s var(--spring) .55s both}
p.tag{margin:20px auto 0; text-wrap:balance; text-shadow:0 1px 2px rgba(0,0,0,.4); color:var(--muted); font-size:1.05rem; line-height:1.6; max-width:26rem; animation:rise .8s var(--rise) .5s both}
.rule{width:44px; height:1px; background:var(--line); margin:34px auto; animation:rise .8s var(--rise) .65s both}
footer{position:relative; margin-top:6px; color:var(--muted); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; animation:rise .8s var(--rise) .8s both}
footer a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line); transition:color .25s, border-color .25s}
footer a:hover{color:var(--fg); border-color:var(--muted)}
.now{margin:14px 0 0; color:var(--muted); opacity:.7; font-size:.72rem; letter-spacing:.06em; animation:rise .8s var(--rise) 1s both; min-height:1em}

@keyframes rise{from{opacity:0; translate:0 14px} to{opacity:1; translate:0 0}}
@keyframes drop{from{opacity:0; translate:0 -.35em} to{opacity:1; translate:0 0}}

@media (prefers-reduced-motion:reduce){
  .mark i, .mark.bump i, h1, h1 span, p.tag, .rule, footer, .now{animation:none}
  }

/* for the OG image: no clock in a picture */
.og .now{visibility:hidden}

/* ── holidays ── */
.stage{position:relative}
.mark i.festive{background:none; box-shadow:none}
.mark i.festive svg{position:absolute; inset:-8%; width:116%; height:116%; filter:drop-shadow(0 8px 10px rgba(0,0,0,.6))}
.holly{position:absolute; width:40px; height:30px; right:-15px; top:-14px; z-index:2; rotate:16deg; filter:drop-shadow(0 6px 8px rgba(0,0,0,.6)); animation:rise .8s var(--rise) .9s both}
.sleigh{position:fixed; left:0; top:22%; width:clamp(150px,18vw,260px); z-index:2; pointer-events:none; opacity:0; transform:translateX(-30vw)}
.sleigh-art{display:block; width:100%; height:auto; rotate:-9deg}
.sleigh.fly{animation:sleigh-x 5.5s linear both}
.sleigh.fly .sleigh-art{animation:sleigh-y 5.5s cubic-bezier(.15,.65,.35,1) both}
/* across at a constant speed while the climb eases off: an arc */
@keyframes sleigh-x{
  0%{opacity:0; transform:translateX(-30vw)} 5%{opacity:.9} 95%{opacity:.9} 100%{opacity:0; transform:translateX(130vw)}
}
@keyframes sleigh-y{from{transform:translateY(12vh)} to{transform:translateY(-18vh)}}
@media (prefers-reduced-motion:reduce){.sleigh{display:none} .holly{animation:none}}

/* ── phones ── */
@media (max-width:520px){
  footer{display:flex; flex-direction:column; gap:6px; align-items:center; font-size:.72rem}
  footer .sep{display:none}
  .now{font-size:.68rem}
  .stage{width:64px; height:64px; margin-bottom:26px}
}

/* ── short screens: a small laptop or a landscape phone ── */
@media (max-height:720px){
  .stage{width:60px; height:60px; margin-bottom:18px}
  h1{font-size:clamp(2rem,6vh,3rem)}
  p.tag{margin-top:12px; font-size:.95rem}
  .rule{margin:20px auto}
  .now{margin-top:10px}
}