/* Approved homepage sky: one backdrop behind navigation and hero. */
.homepage-classic { position: relative; }
.homepage-classic .site-header { z-index: 20; }
.homepage-classic .site-header-inner { position: static; }
.homepage-classic .site-header .brand, .homepage-classic .header-right { position: relative; z-index: 1; }
.homepage-classic .header-right { position: static; }

:root .homepage-classic .site-header {
  position: absolute; inset: 0 0 auto; background: transparent; border: 0;
}
:root .homepage-classic .site-header::before,
:root .homepage-classic .site-header::after,
:root .homepage-classic .header-sky { display: none; }
:root .homepage-classic .hero-world {
  --hero-ground-height: 64px;
  padding: 172px 40px 116px;
  background: linear-gradient(180deg, #14243f 0%, #203a5b 46%, #365b75 78%, #49717c 100%);
  border-bottom-color: #537947;
}
:root .homepage-classic .hero-world .lw-in { min-height: 335px; }
:root .homepage-classic .hero-world :is(.lw-s, .lw-s2, .lw-moon, .lw-scrim) { display: none; }
:root .unified-sky-art { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sky-stars {
  position: absolute; left: 0; top: 0; width: 2px; height: 2px; color: #d8e9ff; opacity: .4;
  --twinkle-duration: 7.2s; --twinkle-delay: -1.8s;
  box-shadow: 4vw 27px, 34vw 92px, 65vw 31px, 96vw 176px, 88vw 335px, 60vw 380px;
}
.sky-stars-mid {
  --twinkle-duration: 9.1s; --twinkle-delay: -4.7s;
  box-shadow: 13vw 118px, 48vw 29px, 74vw 116px, 6vw 284px, 97vw 429px;
}
.sky-stars-far {
  --twinkle-duration: 11.3s; --twinkle-delay: -8.2s;
  box-shadow: 23vw 15px, 57vw 106px, 91vw 23px, 52vw 222px, 42vw 465px;
}
.sky-clouds { position: absolute; inset: 0; background: #9bb8d5; mask-repeat: repeat-x; mask-position: center top; }
.sky-clouds-far { opacity: .1; mask-image: url('/static/header-clouds-far.svg'); mask-size: 1800px 154px; }
.sky-clouds-near { opacity: .12; mask-image: url('/static/header-clouds-near.svg'); mask-size: 1920px 195px; transform: translateY(12px); }
.sky-celestial {
  position: absolute; top: 115px; left: 61%; width: 34px; height: 34px;
  border: 2px solid #c2cbe2; border-radius: 2px;
  background: linear-gradient(#9cadd3, #9cadd3) 17px 5px / 7px 7px no-repeat,
    linear-gradient(#b0c0df, #b0c0df) 5px 19px / 6px 6px no-repeat, #dce7f6;
  box-shadow: 0 0 0 7px #c8d4f00b, 0 0 38px #c8d4f018;
}
.sky-flight { position: absolute; inset: 0; }
.sky-balloon { position: absolute; left: 91%; top: 107px; width: 35px; height: 55px; background: url('/static/header-balloon.svg') center / contain no-repeat; opacity: .8; }
.sky-plane { position: absolute; top: 89px; left: 40%; width: 40px; height: 20px; background: #b0c5dc; mask: url('/static/header-plane.svg') center / contain no-repeat; opacity: .42; }
.sky-bird { position: absolute; top: 445px; left: 51%; width: 30px; height: 11px; background: #b0c5dc; mask: url('/static/header-bird.svg') center / contain no-repeat; opacity: .55; }
:root .homepage-classic .lw-hill-1 { height: 175px; }
:root .homepage-classic .lw-hill-2 { height: 120px; }
:root .homepage-classic .lw-hill-3 { height: var(--hero-ground-height); opacity: 1; }
/* Match each grass step in the 480 x 36 foreground SVG, with the stakes
   planted two pixels into the ground instead of suspended above it. */
:root .homepage-classic .lw-t1 { bottom: calc(var(--hero-ground-height) * 20 / 36 - 2px); }
:root .homepage-classic .lw-t2 { bottom: calc(var(--hero-ground-height) * 24 / 36 - 2px); }
:root .homepage-classic .lw-card { box-shadow: 7px 8px 0 #0c1b2d60, 0 20px 48px #0b1d2b30; }
:root .homepage-classic .hero-world .lead { color: #d3deed; }
:root .homepage-classic .hero-world :is(.demo-sub, .hero-trust li) { color: #cbd9e8; }

:root[data-theme="light"] .homepage-classic .hero-world {
  background: linear-gradient(180deg, #79bff0 0%, #a2d6f5 44%, #c0e6f7 78%, #d1e7d4 100%);
}
:root[data-theme="light"] .sky-stars { display: none; }
:root[data-theme="light"] .sky-clouds { background: #fff; opacity: .48; }
:root[data-theme="light"] .sky-clouds-far { opacity: .3; }
:root[data-theme="light"] .sky-celestial { background: #ffe36b; border-color: #ffd23f; box-shadow: 0 0 0 7px #ffe16e28, 0 0 40px #ffe16e25; }
:root[data-theme="light"] :is(.sky-bird, .sky-plane) { background: #476b89; }
:root[data-theme="light"] .homepage-classic .hero-world :is(.lead, .demo-sub, .hero-trust li) { color: #314c63; }

@media (max-width: 1000px) {
  :root .homepage-classic .hero-world { padding-top: 146px; }
  .sky-celestial { left: 69%; top: 104px; width: 28px; height: 28px; }
  .sky-balloon { left: 92%; top: 101px; width: 26px; height: 41px; }
}
@media (max-width: 680px) {
  .homepage-classic .site-header { padding-inline: 20px; }
  .homepage-classic .header-right { gap: 8px; }
  .homepage-classic .theme-toggle-label { display: none; }
  .homepage-classic .theme-toggle { padding: 8px; }
  .homepage-classic .site-header nav { padding: 8px; border: 1px solid var(--border); margin: 0 12px; border-radius: 4px; }
  .homepage-classic .site-header nav > a { font: 600 15px/1.5 system-ui, sans-serif; padding: 13px 16px; }
  .homepage-classic .site-header nav > .btn { margin-top: 4px; }
  :root .homepage-classic .hero-world { padding: 152px 20px 91px; }
  :root .homepage-classic .hero-world .lw-in { min-height: 0; gap: 32px; }
  :root .homepage-classic .hero-world .lw-hud { display: block; width: min(100%, 410px); margin: 0 auto; }
  .sky-celestial { top: 103px; left: 77%; width: 24px; height: 24px; }
  .sky-plane { top: 88px; left: 21%; width: 32px; }
  .sky-balloon { top: 108px; left: 89%; width: 20px; height: 31px; }
  .sky-bird { top: auto; bottom: 64px; left: 40%; }
  .sky-clouds-near { mask-position: 35% top; }
}
@media (max-width: 360px) {
  .homepage-classic .site-header { padding-inline: 16px; }
  .homepage-classic .site-header .brand { font-size: 8px; gap: 8px; }
  .homepage-classic .site-header .brand-logo { width: 32px; height: 32px; }
  .homepage-classic .site-header-inner { gap: 8px; }
  :root[lang="ar"] .homepage-classic .site-header .brand { font-size: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  /* The full-width tracks make each pass follow the actual sky width.
     Both ends are offscreen, so the loop never jumps within view. */
  .sky-flight { animation: sky-crossing 80s linear infinite; }
  .sky-flight-plane { animation-delay: -33s; }
  .sky-flight-balloon { animation-duration: 180s; animation-delay: -156s; }
  .sky-flight :is(.sky-plane, .sky-balloon) { left: 0; }
  .sky-balloon { animation: sky-balloon-bob 14s ease-in-out infinite; }
  :root:not([data-theme="light"]) .sky-stars {
    animation: sky-twinkle var(--twinkle-duration) ease-in-out var(--twinkle-delay) infinite;
  }
}
@keyframes sky-crossing {
  from { transform: translateX(-64px); }
  to { transform: translateX(calc(100% + 64px)); }
}
@keyframes sky-balloon-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes sky-twinkle {
  0%, 100% { opacity: .24; }
  45% { opacity: .75; }
  65% { opacity: .36; }
  80% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .homepage-classic *, .homepage-classic *::before, .homepage-classic *::after { animation: none !important; transition: none !important; }
}