/* Skill Grimoire Live Sky Theme
   Original dependency-free implementation inspired by the supplied live-sky prototype.
   Uses real local time, optional browser geolocation, and Open-Meteo weather with no API key. */

:root{
  --sky-top:#6fb5e6;
  --sky-mid:#d8efff;
  --sky-bottom:#fff1d4;
  --sky-ink:#20172f;
  --sky-card:rgba(255,255,255,.58);
  --sky-card-strong:rgba(255,255,255,.72);
  --sky-dark-card:rgba(16,11,27,.74);
  --sky-border:rgba(255,255,255,.36);
  --sky-dark-border:rgba(233,217,184,.14);
  --sky-shadow:0 24px 80px rgba(13,9,22,.25);
  --sky-orb-x:78%;
  --sky-orb-y:22%;
  --sky-sun-opacity:1;
  --sky-moon-opacity:0;
  --sky-stars-opacity:0;
  --sky-cloud-opacity:.25;
  --sky-rain-opacity:0;
  --sky-fog-opacity:0;
  --sky-snow-opacity:0;
  --sky-lightning-opacity:0;
  --nav-glass:rgba(255,255,255,.56);
  --nav-text:#20172f;
}

html{background:#0b0a10;}
body{
  background:transparent!important;
  color:var(--ink);
  min-height:100svh;
}
body::before{content:none!important;}
#sky{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:linear-gradient(180deg,var(--sky-top),var(--sky-mid) 48%,var(--sky-bottom));
  transition:background 900ms ease,filter 900ms ease;
}
#sky[aria-hidden="true"]{user-select:none;}
.sky-gradient{
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(circle at var(--sky-orb-x) var(--sky-orb-y),rgba(255,244,191,.62),rgba(255,217,126,.18) 12%,transparent 25%),
    linear-gradient(180deg,var(--sky-top),var(--sky-mid) 52%,var(--sky-bottom));
  transition:background 900ms ease;
}
.sky-haze{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 24% 28%,rgba(255,255,255,.28),transparent 30%),
    radial-gradient(circle at 86% 68%,rgba(184,137,59,.13),transparent 38%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.16) 46%,rgba(255,245,225,.36));
  mix-blend-mode:screen;
  opacity:.9;
}
.sky-vignette{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center,transparent 0 56%,rgba(11,10,16,.16) 100%);
}
.sky-stars{
  position:absolute;
  inset:0;
  opacity:var(--sky-stars-opacity);
  background-image:
    radial-gradient(circle at 9% 14%,rgba(255,255,255,.9) 0 1px,transparent 2px),
    radial-gradient(circle at 24% 28%,rgba(255,255,255,.55) 0 1px,transparent 2px),
    radial-gradient(circle at 39% 9%,rgba(255,255,255,.78) 0 1px,transparent 2px),
    radial-gradient(circle at 58% 18%,rgba(255,255,255,.65) 0 1px,transparent 2px),
    radial-gradient(circle at 79% 30%,rgba(255,255,255,.74) 0 1px,transparent 2px),
    radial-gradient(circle at 91% 12%,rgba(255,255,255,.62) 0 1px,transparent 2px),
    radial-gradient(circle at 18% 62%,rgba(255,255,255,.48) 0 1px,transparent 2px),
    radial-gradient(circle at 69% 72%,rgba(255,255,255,.5) 0 1px,transparent 2px);
  animation:skyTwinkle 5s ease-in-out infinite alternate;
  transition:opacity 800ms ease;
}
.sky-orbit{
  position:absolute;
  left:var(--sky-orb-x);
  top:var(--sky-orb-y);
  transform:translate(-50%,-50%);
  transition:left 900ms ease,top 900ms ease;
}
.sky-sun,
.sky-moon{
  width:clamp(84px,12vw,156px);
  height:clamp(84px,12vw,156px);
  display:block;
  filter:drop-shadow(0 0 26px rgba(255,210,98,.56)) drop-shadow(0 0 90px rgba(255,190,73,.35));
  transition:opacity 700ms ease,transform 700ms ease,filter 700ms ease;
}
.sky-sun{opacity:var(--sky-sun-opacity);transform:scale(1);}
.sky-moon{opacity:var(--sky-moon-opacity);filter:drop-shadow(0 0 32px rgba(233,217,184,.35)) drop-shadow(0 0 90px rgba(81,76,126,.36));transform:scale(1);}
.sky-sun-rays{transform-origin:50% 50%;animation:skySunSpin 30s linear infinite;}
.sky-clouds{
  position:absolute;
  inset:0;
  opacity:var(--sky-cloud-opacity);
  transition:opacity 900ms ease;
}
.sky-cloud{
  position:absolute;
  width:clamp(220px,31vw,540px);
  height:clamp(78px,10vw,150px);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.23));
  box-shadow:inset 0 -20px 50px rgba(85,95,130,.08),0 28px 80px rgba(29,50,84,.12);
  filter:blur(.25px);
  animation:skyCloudA 70s linear infinite;
}
.sky-cloud::before,
.sky-cloud::after{
  content:"";
  position:absolute;
  border-radius:999px;
  background:inherit;
}
.sky-cloud::before{width:43%;height:118%;left:15%;top:-52%;}
.sky-cloud::after{width:39%;height:98%;right:16%;top:-38%;}
.sky-cloud.c1{top:18%;left:-24%;}
.sky-cloud.c2{top:34%;right:-28%;width:clamp(200px,26vw,430px);height:clamp(70px,8vw,124px);animation:skyCloudB 88s linear infinite;opacity:.76;}
.sky-cloud.c3{top:64%;left:-30%;width:clamp(260px,38vw,620px);animation-duration:110s;opacity:.58;}
.sky-rain,
.sky-snow,
.sky-fog,
.sky-lightning{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 700ms ease;
}
.sky-rain{
  opacity:var(--sky-rain-opacity);
  background-image:repeating-linear-gradient(112deg,transparent 0 18px,rgba(255,255,255,.58) 19px 21px,transparent 22px 54px);
  background-size:96px 132px;
  animation:skyRain .65s linear infinite;
  mask-image:linear-gradient(to bottom,transparent 0,black 9%,black 96%,transparent 100%);
}
.sky-snow{
  opacity:var(--sky-snow-opacity);
  background-image:
    radial-gradient(circle,rgba(255,255,255,.86) 0 1.5px,transparent 2.5px),
    radial-gradient(circle,rgba(255,255,255,.55) 0 1px,transparent 2px);
  background-size:78px 78px,132px 132px;
  background-position:0 0,34px 22px;
  animation:skySnow 16s linear infinite;
}
.sky-fog{
  opacity:var(--sky-fog-opacity);
  background:repeating-linear-gradient(180deg,transparent 0 36px,rgba(255,255,255,.15) 48px 78px,transparent 92px 140px);
  filter:blur(12px);
  animation:skyFog 24s ease-in-out infinite alternate;
}
.sky-lightning{
  opacity:var(--sky-lightning-opacity);
  background:radial-gradient(circle at 70% 18%,rgba(255,255,255,.9),transparent 24%);
  mix-blend-mode:screen;
  animation:skyLightning 7.5s linear infinite;
}
.sky-status{
  position:fixed;
  left:clamp(12px,3vw,26px);
  bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:30;
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:12px;
  max-width:min(94vw,690px);
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:20px;
  background:rgba(20,18,25,.66);
  backdrop-filter:blur(18px) saturate(1.1);
  box-shadow:0 22px 72px rgba(0,0,0,.22);
  color:#fbf9f4;
  font-family:"Chivo Mono",Consolas,monospace;
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.sky-status strong{font-weight:600;color:var(--gold-leaf);white-space:nowrap;}
.sky-status span{opacity:.74;white-space:nowrap;}
.sky-status input[type="range"]{
  width:min(34vw,220px);
  accent-color:#b8893b;
  cursor:pointer;
}
.sky-status button{
  pointer-events:auto;
  min-height:38px;
  border:0;
  border-radius:999px;
  background:var(--gold);
  color:#1a1726;
  padding:8px 13px;
  font:600 .72rem/1 "Switzer",system-ui,sans-serif;
  cursor:pointer;
  white-space:nowrap;
}
.sky-status button:hover{filter:brightness(1.04);}
.sky-consent{
  position:fixed;
  right:clamp(12px,3vw,26px);
  bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:31;
  pointer-events:auto;
  max-width:min(92vw,360px);
  padding:16px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:20px;
  background:rgba(251,249,244,.72);
  backdrop-filter:blur(18px) saturate(1.12);
  box-shadow:0 22px 72px rgba(0,0,0,.18);
  color:var(--ink);
  font-size:.9rem;
}
.sky-consent[hidden]{display:none!important;}
.sky-consent p{margin:0 0 12px;line-height:1.45;}
.sky-consent-actions{display:flex;gap:8px;flex-wrap:wrap;}
.sky-consent button{
  min-height:38px;
  border-radius:999px;
  border:1px solid rgba(26,23,38,.2);
  background:rgba(255,255,255,.62);
  color:var(--ink);
  padding:8px 13px;
  font-weight:700;
  cursor:pointer;
}
.sky-consent button[data-sky-allow]{background:var(--gold);border-color:var(--gold);}
main,.footer{position:relative;z-index:2;}
.site-header{z-index:40;}
.site-header,
.site-header.is-scrolled{
  height:72px;
  background:var(--nav-glass)!important;
  backdrop-filter:blur(18px) saturate(1.15);
  border-bottom:1px solid rgba(255,255,255,.32)!important;
  box-shadow:0 8px 40px rgba(21,15,35,.08);
}
.site-header.is-hidden{transform:translateY(-102%);}
.brand strong{color:var(--nav-text)!important;}
.brand small{color:#7c5f2c!important;}
.nav-links{gap:20px;}
.nav-links a,.dropdown-toggle{color:rgba(32,23,47,.84)!important;}
.nav-links a:hover,.dropdown-toggle:hover{color:#6f4e14!important;}
.nav-links .nav-cta{color:#20172f!important;background:rgba(184,137,59,.14);border-color:rgba(184,137,59,.62);}
.dropdown-menu{background:rgba(251,249,244,.86)!important;backdrop-filter:blur(16px);border-color:rgba(184,137,59,.22);box-shadow:0 24px 60px rgba(22,15,34,.18);}
.dropdown-menu a{color:var(--ink)!important;}
.menu-toggle{display:none!important;}
.mobile-overlay{display:none!important;}
.hero{
  min-height:100svh;
  background:transparent!important;
  padding:112px 0 92px;
  overflow:visible;
}
.hero::before,.hero::after{display:none!important;}
.hero-grid{grid-template-columns:minmax(0,.92fr) minmax(320px,.88fr);gap:clamp(28px,5vw,88px);}
.hero-copy{
  background:rgba(251,249,244,.54);
  color:var(--ink);
  border:1px solid rgba(255,255,255,.45);
  border-radius:34px;
  box-shadow:var(--sky-shadow);
  backdrop-filter:blur(22px) saturate(1.08);
  padding:clamp(28px,5vw,60px);
  overflow:hidden;
}
.hero-title,.hero-copy h1{color:var(--ink);}
.hero-title em{color:var(--gold);}
.hero-sub{color:rgba(26,23,38,.78);}
.hero-copy .eyebrow{color:#8c6727;}
.hero-mark-card{
  border-radius:34px;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(0,0,0,.78);
  min-height:clamp(290px,38vw,500px);
  box-shadow:0 30px 100px rgba(0,0,0,.28);
  backdrop-filter:blur(12px);
}
.hero-mark-card::after{border-color:rgba(233,217,184,.16);border-radius:26px;}
.hero-mark-card img{width:min(430px,84%);border-radius:24px;}
.hero-footnote{display:none!important;}
.btn-primary{background:var(--gold);color:#1a1726;box-shadow:0 12px 28px rgba(184,137,59,.22);}
.btn-ghost{color:var(--ink)!important;border-color:rgba(26,23,38,.28);background:rgba(255,255,255,.28);}
.section,.page-hero,.final-cta{background:transparent!important;color:var(--ink);}
.section.dark,.section.plum,.page-hero,.final-cta{color:var(--platinum);}
.section:not(.hero)>.container,
.page-hero>.container,
.final-cta>.container{
  border-radius:34px;
  backdrop-filter:blur(22px) saturate(1.08);
  box-shadow:var(--sky-shadow);
  border:1px solid var(--sky-border);
  padding:clamp(28px,5vw,62px);
}
.section.vellum>.container{
  background:rgba(251,249,244,.68);
  color:var(--ink);
}
.section.dark>.container,
.section.plum>.container,
.page-hero>.container,
.final-cta>.container{
  background:rgba(12,9,20,.74);
  color:var(--platinum);
  border-color:var(--sky-dark-border);
}
.section.dark::after,.section.plum::after,.page-hero::before{display:none!important;}
.vellum h2,.vellum h3{color:var(--ink);}
.dark h2,.dark h3,.plum h2,.plum h3,.page-hero h1,.page-hero h2,.final-cta h2{color:var(--vellum);}
.dark .muted,.plum .muted,.page-hero .muted,.final-cta .muted{color:rgba(217,217,224,.77);}
.gap-panel,.number-card,.feature-card,.form-card,.contact-card,.faq-card,.story-card,.compare-table{
  background:rgba(251,249,244,.72)!important;
  border-color:rgba(228,221,208,.72)!important;
  backdrop-filter:blur(10px);
}
.program-card,.benefit-card,.leader-card,.filter-card,.curriculum-output{
  background:rgba(25,18,41,.74)!important;
  border-color:rgba(233,217,184,.15)!important;
  backdrop-filter:blur(12px);
}
.footer{
  background:rgba(9,7,14,.82)!important;
  border-top:1px solid rgba(233,217,184,.14);
  backdrop-filter:blur(18px);
  padding-bottom:72px;
}
@keyframes skySunSpin{to{transform:rotate(360deg)}}
@keyframes skyTwinkle{from{filter:brightness(.84)}to{filter:brightness(1.35)}}
@keyframes skyCloudA{from{transform:translateX(-4vw)}to{transform:translateX(132vw)}}
@keyframes skyCloudB{from{transform:translateX(6vw)}to{transform:translateX(-132vw)}}
@keyframes skyRain{from{background-position:0 -132px}to{background-position:-60px 0}}
@keyframes skySnow{from{background-position:0 -160px,34px -120px}to{background-position:78px 160px,112px 132px}}
@keyframes skyFog{from{transform:translateX(-5%)}to{transform:translateX(5%)}}
@keyframes skyLightning{0%,92%,100%{opacity:0}93%{opacity:.92}94%{opacity:.16}95%{opacity:.68}96%{opacity:0}}

@media (max-width:900px){
  .site-header,.site-header.is-scrolled{height:78px;}
  .nav-wrap{width:100%;padding-inline:12px;gap:10px;}
  .brand{gap:10px;flex:0 0 auto;}
  .brand-mark{width:42px!important;height:42px!important;border-radius:10px;}
  .brand strong{font-size:1.16rem;line-height:1.05;}
  .brand small{display:none;}
  .nav-links{display:flex!important;overflow-x:auto;white-space:nowrap;gap:18px;padding-left:8px;scrollbar-width:none;}
  .nav-links::-webkit-scrollbar{display:none;}
  .nav-links .nav-cta{display:none;}
  .dropdown-menu{display:none;}
  .hero{padding-top:112px;}
  .hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:24px;}
  .hero-mark-card{order:-1;min-height:auto;aspect-ratio:1/1;width:min(70vw,340px);margin-inline:auto;padding:20px;border-radius:26px;}
  .hero-mark-card img{width:100%;border-radius:20px;}
  .hero-copy{border-radius:26px;padding:clamp(24px,8vw,42px);}
  .section:not(.hero)>.container,.page-hero>.container,.final-cta>.container{border-radius:26px;padding:24px;}
  .sky-status{left:0;right:0;bottom:0;max-width:none;border-radius:18px 18px 0 0;justify-content:center;padding:9px 8px;gap:8px;}
  .sky-status span{display:none;}
  .sky-status input[type="range"]{width:30vw;min-width:118px;}
  .sky-status button{min-height:36px;padding:8px 12px;font-size:.68rem;}
  .sky-consent{left:12px;right:12px;bottom:70px;max-width:none;}
  .footer{padding-bottom:96px;}
}
@media (max-width:540px){
  .container{width:min(calc(100% - 32px),var(--maxw));}
  .nav-links{gap:16px;font-size:.78rem;}
  .nav-links a,.dropdown-toggle{font-size:.78rem;}
  .brand strong{font-size:1.08rem;}
  .hero-mark-card{width:min(76vw,320px);}
  .sky-sun,.sky-moon{width:86px;height:86px;}
  .sky-status strong{font-size:.64rem;}
}
@media (prefers-reduced-motion:reduce){
  #sky *,#sky::before,#sky::after{animation:none!important;transition:none!important;}
  .sky-status{display:none;}
}