/* THE ROOF — the hero floor (floors-top agent). Sky phases: .sky-dawn .sky-day .sky-dusk .sky-night */

.floor-roof {
  --glow: rgba(255, 150, 80, .55);
  --sky-a: #1E2150; --sky-b: #4E3474; --sky-c: #B4507A; --sky-d: #FF9A5A;
  --far: #45336E; --near: #271E4A; --edge: #0D1120; --win: #FFC66B;
  --cloud-1: #9B6FA8; --cloud-2: #6E4C8E;
  --smoke-1: #F1DDEA; --smoke-2: #B79BC6;
  --star-o: .55; --brick-shade: rgba(20, 12, 40, .32);
  --ink: var(--cream); --ink-2: #F6E7F0; --ink-shadow: 0 3px 0 rgba(13, 17, 32, .55), 0 0 30px rgba(13, 17, 32, .4);
  min-height: calc(100vh - var(--head-h));
  min-height: calc(100svh - var(--head-h));
  background: linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 40%, var(--sky-c) 64%, var(--sky-d) 86%);
  color: var(--ink);
}
.floor-roof.sky-night {
  --glow: rgba(90, 110, 210, .28);
  --sky-a: #080D22; --sky-b: #131B40; --sky-c: #22305F; --sky-d: #37407A;
  --far: #1E2754; --near: #121839; --win: #FFC66B;
  --cloud-1: #2E3874; --cloud-2: #212A5C;
  --smoke-1: #CBD0EC; --smoke-2: #8990BA;
  --star-o: 1; --brick-shade: rgba(8, 10, 30, .42);
}
.floor-roof.sky-dawn {
  --glow: rgba(255, 205, 150, .6);
  --sky-a: #1D2860; --sky-b: #56529A; --sky-c: #CF86AC; --sky-d: #FFCB9E;
  --far: #7462A4; --near: #3D3774; --win: #FFD48A;
  --cloud-1: #F4BBD2; --cloud-2: #C58DB6;
  --smoke-1: #FFF2F6; --smoke-2: #D6B4CC;
  --star-o: .35; --brick-shade: rgba(40, 20, 60, .22);
}
.floor-roof.sky-day {
  --glow: rgba(255, 255, 255, .45);
  --sky-a: #2C72CF; --sky-b: #57A3E8; --sky-c: #9ED3F4; --sky-d: #D9F1FB;
  --far: #93B8E0; --near: #6283B8; --win: #D9EBFA;
  --cloud-1: #FFFFFF; --cloud-2: #CFE0F4;
  --smoke-1: #FFFFFF; --smoke-2: #C4D0E6;
  --star-o: 0; --brick-shade: rgba(0, 0, 0, 0);
  --ink: var(--outline); --ink-2: #16254A; --ink-shadow: 0 2px 0 rgba(255, 255, 255, .35);
}

/* ── the scene ─────────────────────────────────────────────────────────── */
.roof-scene { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.roof-scene button { pointer-events: auto; }
.roof-scene button, .roof-puff, .roof-chimney, .roof-fan, .roof-orb, .roof-star {
  appearance: none; background: none; border: 0; padding: 0; margin: 0; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.roof-scene svg { overflow: visible; }

/* far: stars, orb */
.roof-far { position: absolute; inset: -12% 0 -30% 0; }
.roof-stars { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--star-o); transition: opacity .6s; }
.rs-dots circle, .rs-glints path { fill: #FFF3DF; }
.rs-glints path { fill: #FFE7A8; }
.roof-stars .tw { transform-box: fill-box; transform-origin: center; animation: rf-twinkle 4.2s ease-in-out infinite; }
@keyframes rf-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .25; transform: scale(.6); } }

.roof-orb { position: absolute; width: 150px; height: 150px; transform: translate(-50%, -50%); left: 47%; top: 16%; border-radius: 50%; }
.roof-orb svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .45s var(--spring); }
.roof-orb:hover svg { transform: scale(1.06) rotate(-6deg); }
.roof-orb .orb-sun { display: none; }
.roof-orb .orb-open { opacity: 0; }
.roof-orb.is-awake .orb-open { opacity: 1; }
.roof-orb.is-awake .orb-shut { opacity: 0; }
.roof-orb.is-poked svg { animation: rf-orb-poke .7s var(--spring); }
@keyframes rf-orb-poke { 0% { transform: scale(1); } 25% { transform: scale(1.18, .86); } 55% { transform: scale(.94, 1.08) rotate(6deg); } 100% { transform: scale(1); } }
.orb-halo { transform-box: fill-box; transform-origin: center; animation: rf-halo 5s ease-in-out infinite; }
@keyframes rf-halo { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }
.sun-1 { fill: #FFD34D; } .sun-2 { fill: #F5B431; } .sun-ray { fill: #FFB84D; }
.sun-rays { transform-origin: 85px 85px; animation: rf-spin 90s linear infinite; }
@keyframes rf-spin { to { transform: rotate(360deg); } }

.sky-day .roof-orb { width: 170px; height: 170px; }
.sky-day .roof-orb .orb-moon { display: none; }
.sky-day .roof-orb .orb-sun { display: block; }
.sky-day .orb-open { opacity: 1; } .sky-day .orb-shut { opacity: 0; }
.sky-dawn .orb-moon, .sky-dusk .orb-moon { opacity: .9; }
.sky-dawn .roof-orb { top: 18%; }

.roof-star { position: absolute; width: 48px; height: 48px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; }
.roof-star svg { width: 26px; height: 26px; animation: rf-star 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); filter: drop-shadow(0 0 6px rgba(255, 231, 168, .8)); }
.roof-star:hover svg { animation-duration: 1.2s; }
.roof-star.is-gone { visibility: hidden; }
.roof-star.is-back svg { animation: rf-star-back .6s var(--spring); }
@keyframes rf-star { 0%, 100% { transform: scale(.78) rotate(0); } 50% { transform: scale(1.12) rotate(18deg); } }
@keyframes rf-star-back { 0% { transform: scale(0); } 100% { transform: scale(1); } }
.sky-day .roof-star { display: none; }
.sky-dawn .roof-star:nth-of-type(4) { display: none; }
.top-shooting { position: fixed; left: 0; top: 0; z-index: 64; pointer-events: none; width: 26px; height: 26px; }
.top-shooting::before { content: ''; position: absolute; right: 50%; top: 50%; width: 160px; height: 4px; margin-top: -2px; border-radius: 4px; background: linear-gradient(90deg, rgba(255, 243, 223, 0), rgba(255, 243, 223, .9)); transform-origin: right center; transform: rotate(var(--ang, 0deg)); }

/* a warm band of light low on the horizon */
.roof-glow { position: absolute; left: 0; right: 0; bottom: 70px; height: 62%; background: radial-gradient(ellipse 70% 60% at 62% 100%, var(--glow), transparent 70%); }

/* clouds */
.roof-clouds { position: absolute; inset: -8% 0 0 0; }
.roof-cloud { position: absolute; height: auto; animation: rf-drift 46s ease-in-out infinite alternate; }
.roof-cloud.c2 { animation-duration: 60s; animation-delay: -20s; }
.roof-cloud.c3 { animation-duration: 38s; animation-delay: -9s; opacity: .85; }
.cl-1 { fill: var(--cloud-1); transition: fill .6s; }
.cl-2 { fill: var(--cloud-2); transition: fill .6s; }
@keyframes rf-drift { from { transform: translateX(-40px); } to { transform: translateX(40px); } }

/* the town */
.roof-town { position: absolute; left: 0; right: 0; bottom: 78px; height: 250px; }
.roof-town svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.town-far { height: 88% !important; top: auto !important; }
.tf-hill, .tf-bld rect { fill: var(--far); }
.tf-mast path { stroke: var(--far); }
.tf-blink { fill: #FF5A5A; animation: rf-blink 2.4s ease-in-out infinite; }
.sky-day .tf-blink { fill: #E04848; }
.tn-bld path, .tn-bld rect { fill: var(--near); }
.tn-bands path { stroke: color-mix(in srgb, var(--near) 70%, #fff); }
.tn-win rect { fill: var(--win); opacity: .85; }
.sky-day .tn-win rect { opacity: .45; }
.sky-dawn .tn-win rect { opacity: .55; }
.tn-win .wl { animation: rf-window 14s steps(1) infinite; }
@keyframes rf-window { 0%, 62% { opacity: .85; } 63%, 100% { opacity: .08; } }
.tn-smoke circle { fill: var(--smoke-2); opacity: 0; transform-box: fill-box; transform-origin: center; animation: rf-stack 6s linear infinite; }
.tn-smoke circle:nth-child(3n+2) { animation-delay: -2s; }
.tn-smoke circle:nth-child(3n) { animation-delay: -4s; }
@keyframes rf-stack { 0% { opacity: .55; transform: translate(0, 0) scale(.45); } 100% { opacity: 0; transform: translate(-22px, -56px) scale(1.7); } }
@keyframes rf-blink { 0%, 44% { opacity: 1; } 50%, 94% { opacity: .2; } 100% { opacity: 1; } }

/* the stage: sign, chimney, gadgets (positions are % of a 760×640 drawing) */
.roof-stage {
  position: absolute; bottom: 70px; right: max(2vw, calc((100vw - 1440px) / 2));
  width: clamp(520px, 56vw, 860px); aspect-ratio: 760 / 640;
}
.stage-back { position: absolute; inset: 0; width: 100%; height: 100%; }
.rs-antenna-light { animation: rf-blink 2.4s ease-in-out infinite; }
.rs-antenna-glow { animation: rf-blink 2.4s ease-in-out infinite; }
.rs-sb-glow { opacity: .35; animation: rf-bulb 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); }
@keyframes rf-bulb { 0%, 100% { opacity: .18; } 50% { opacity: .6; } }

.roof-sign { position: absolute; left: 17.105%; top: 6.25%; width: 52.632%; height: 93.75%; }
.roof-sign::before { content: ''; position: absolute; left: -18%; right: -18%; top: -14%; height: 90%; background: radial-gradient(circle at 50% 50%, rgba(255, 194, 61, .2), rgba(255, 194, 61, .06) 45%, transparent 66%); pointer-events: none; }
.sign-frame, .sign-light { position: absolute; inset: 0; width: 100%; height: 100%; }
.sign-light { mix-blend-mode: screen; pointer-events: none; }
.sb-glow { fill: #FFC23D; opacity: .15; animation: rf-sign-bulb 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.16s); }
.sb-bulb { fill: #FFF1C2; stroke: #0D1120; stroke-width: 2.6; }
@keyframes rf-sign-bulb { 0%, 100% { opacity: .12; } 50% { opacity: .9; } }
.roof-emblem { position: absolute; left: 12.5%; top: 6.667%; width: 75%; height: 50%; }
.roof-mark { width: 100%; height: 100%; }

.roof-pigeon { position: absolute; left: 54%; top: -7.4%; width: 15%; aspect-ratio: 64 / 56; }
.roof-pigeon svg { width: 100%; height: 100%; transform-origin: 50% 100%; }
.pg-head { transform-box: view-box; transform-origin: 44px 26px; animation: rf-peck 5.5s ease-in-out infinite; }
@keyframes rf-peck { 0%, 70%, 100% { transform: none; } 74% { transform: rotate(18deg) translate(2px, 3px); } 78% { transform: none; } 82% { transform: rotate(14deg) translate(2px, 2px); } 86% { transform: none; } }
.pg-wing { transform-box: view-box; transform-origin: 18px 32px; }
.roof-pigeon.is-flap svg { animation: rf-hop .9s var(--ease-out); }
.roof-pigeon.is-flap .pg-wing { animation: rf-flap .15s linear 6 alternate; }
@keyframes rf-hop { 0% { transform: none; } 40% { transform: translateY(-38%) rotate(-8deg); } 70% { transform: translateY(-14%); } 85% { transform: scale(1.1, .9); } 100% { transform: none; } }
@keyframes rf-flap { from { transform: none; } to { transform: rotate(-38deg) scaleY(1.2); } }

.roof-fan { position: absolute; left: 7.9%; top: 81%; width: 13.2%; aspect-ratio: 1; }
.roof-fan svg { width: 100%; height: 100%; transition: transform .35s var(--spring); }
.roof-fan:hover svg { transform: scale(1.05) rotate(-3deg); }
.fan-blades { transform-box: view-box; transform-origin: 60px 72px; animation: rf-spin 2.6s linear infinite; }
.roof-fan.is-fast .fan-blades { animation-duration: .35s; }
.roof-fan.is-poked svg { animation: rf-squash .5s var(--spring); }

.roof-chimney { position: absolute; left: 77.63%; top: 23.44%; width: 19.74%; height: 76.56%; transform-origin: 50% 100%; }
.roof-chimney svg { width: 100%; height: 100%; display: block; transform-origin: 50% 100%; }
.roof-chimney:hover svg { transform: scale(1.02, .985); transition: transform .3s var(--spring); }
.roof-chimney.is-poked svg { animation: rf-squash .55s var(--spring); }
.roof-chimney:focus-visible { outline-offset: -8px; }
.rc-ember { animation: rf-ember 2.8s ease-in-out infinite; }
@keyframes rf-ember { 0%, 100% { opacity: .35; } 50% { opacity: .75; } }
@keyframes rf-squash { 0% { transform: scale(1); } 30% { transform: scale(1.06, .92); } 60% { transform: scale(.97, 1.05); } 100% { transform: scale(1); } }

/* the puffs: a zero-size anchor at the chimney's mouth; roof.js moves each puff */
.roof-puffs { position: absolute; left: 87.5%; top: 26.9%; width: 0; height: 0; }
.roof-puff { position: absolute; left: -34px; top: -62px; width: 68px; height: 61px; border-radius: 50%; will-change: transform, opacity; }
.roof-puff svg { width: 100%; height: 100%; transition: transform .25s var(--spring), opacity .18s; }
.roof-puff:hover svg { transform: scale(1.1); }
.roof-puff.is-popped svg { transform: scale(1.5); opacity: 0; }
.roof-puff.is-popped { pointer-events: none; }
.pf-o circle { fill: #0D1120; }
.pf-2 circle { fill: var(--smoke-2); }
.pf-1 circle { fill: var(--smoke-1); }
/* without JS (and before it runs) the puffs stand in a still column */
.roof-puff { transform: translate(calc(var(--k) * -14px), calc(var(--k) * -58px)) scale(calc(.55 + var(--k) * .16)); opacity: calc(1 - var(--k) * .16); }
.roof-puffs.is-live .roof-puff { transform: none; opacity: 0; }

.roof-ring { position: absolute; left: -90px; top: -150px; width: 180px; height: 180px; pointer-events: none; }
.roof-ring svg { width: 100%; height: 100%; }

/* the parapet */
.roof-parapet { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; z-index: 3; }
.rp-cap { position: relative; height: 20px; background: linear-gradient(180deg, #7C87AE 0 5px, #505A80 5px 100%); border-block: 4px solid var(--outline); box-shadow: 0 5px 0 rgba(0, 0, 0, .3); z-index: 1; }
.rp-bricks {
  position: absolute; left: 0; right: 0; top: 20px; bottom: 0; display: grid; place-items: center; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .28), transparent 40%),
    linear-gradient(var(--brick-shade), var(--brick-shade)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='28'%3E%3Crect width='64' height='28' fill='%23351C25'/%3E%3Crect x='2' y='2' width='28' height='11' rx='2' fill='%23874536'/%3E%3Crect x='34' y='2' width='28' height='11' rx='2' fill='%237B3D31'/%3E%3Crect x='-16' y='16' width='30' height='11' rx='2' fill='%23803F33'/%3E%3Crect x='18' y='16' width='28' height='11' rx='2' fill='%238E4A3A'/%3E%3Crect x='50' y='16' width='30' height='11' rx='2' fill='%23803F33'/%3E%3C/svg%3E") 0 0 / 64px 28px;
}
.rp-paint { font: 700 clamp(1.3rem, 1rem + 1.4vw, 2.4rem)/1 var(--font-display); letter-spacing: .32em; color: rgba(255, 236, 205, .2); white-space: nowrap; transform: translateY(4px); user-select: none; }

.roof-front { position: absolute; left: 0; right: 0; bottom: 0; height: 0; z-index: 4; }
.rf-pipe { position: absolute; left: 0; bottom: -70px; width: 92px; transform: scaleX(-1); }

/* ── the words ─────────────────────────────────────────────────────────── */
.roof-inner {
  position: relative; z-index: 2; pointer-events: none;
  min-height: calc(100vh - var(--head-h)); min-height: calc(100svh - var(--head-h));
  display: flex; align-items: center; padding-block: 48px 150px;
  padding-left: max(0px, calc(78px - max(var(--gutter), (100vw - var(--maxw)) / 2)));
}
.roof-copy { pointer-events: none; max-width: min(640px, 43vw); }
.roof-copy > * { pointer-events: auto; }
.floor-roof .floor-label { color: var(--molten); }
.sky-day .floor-roof .floor-label, .floor-roof.sky-day .floor-label { color: var(--outline); background: rgba(255, 255, 255, .55); padding: 5px 12px 5px 5px; border-radius: 99px; }
.roof-title {
  /* two lines, always: "We make games." / "Mostly on purpose." (8.55em wide; the first line plus "Mostly" is 10.7em) */
  font-size: clamp(2.5rem, min(1.25rem + 3.5vw, 4.9vw), 4.6rem); font-weight: 700; line-height: 1.02; letter-spacing: -.005em;
  color: var(--ink); text-shadow: var(--ink-shadow); margin: .1em 0 .35em; max-width: 9.6em;
}
.roof-sub { font-size: var(--step-1); line-height: 1.45; color: var(--ink-2); max-width: 31ch; margin-bottom: 1.4em; font-weight: 700; text-shadow: 0 2px 10px rgba(13, 17, 32, .35); }
.sky-day .roof-sub { text-shadow: none; }
.roof-copy > .roof-cta { display: flex; flex-wrap: wrap; gap: 14px 16px; pointer-events: none; }
.roof-cta > * { pointer-events: auto; }
.roof-copy > .floor-label { width: fit-content; }
.roof-play svg { transform: rotate(90deg); }
.roof-play:hover svg { animation: rf-nudge .8s ease-in-out infinite; }
@keyframes rf-nudge { 0%, 100% { transform: rotate(90deg) translateX(0); } 50% { transform: rotate(90deg) translateX(4px); } }
.roof-all { --btn-fg: var(--cream); border-color: rgba(255, 243, 223, .55); background: rgba(13, 17, 32, .35); }
.roof-all:hover { border-color: var(--cream); background: rgba(13, 17, 32, .55); }
.sky-day .roof-all { --btn-fg: var(--outline); border-color: var(--outline); background: rgba(255, 255, 255, .6); }

@media (max-width: 1200px) {
  .roof-cta .btn-big { min-height: 52px; padding: .75em 1.35em; font-size: var(--step-0); }
  .roof-copy { max-width: min(640px, 46vw); }
}
/* ── smaller screens: words on top, the roof below ─────────────────────── */
@media (max-width: 900px) {
  .roof-inner { align-items: flex-start; padding-top: 36px; padding-bottom: calc(min(112vw, 760px) * .842 + 44px); }
  .roof-copy { max-width: 100%; }
  .roof-stage { width: min(112vw, 760px); right: max(-8vw, calc(50vw - 380px)); }
  .roof-sub { max-width: 36ch; }
  .roof-town { height: 200px; }
  .roof-orb, .sky-day .roof-orb { left: 80%; top: 15%; width: 110px; height: 110px; }
  .roof-cloud { display: none; }
  .roof-star:nth-of-type(4) { display: none; }
}
@media (max-width: 760px) {
  .roof-inner { padding-left: 0; }
  .roof-parapet { height: 80px; }
  .rp-paint { letter-spacing: .22em; }
  .roof-stage { bottom: 56px; }
  .roof-town { bottom: 62px; height: 170px; }
}

/* ── off screen: rest; calm: still ─────────────────────────────────────── */
.floor-roof.is-offscreen *, .floor-roof.is-offscreen *::before, .floor-roof.is-offscreen *::after { animation-play-state: paused !important; }
html.calm .roof-puffs.is-live .roof-puff { transition: opacity .2s; }