/* Camada visual (22/10/2026): cidade escura, lâmpada apagada, trevo e meio-tom.
   Só usa as cores que já existem no site: --sun #F4C21F, --ink #15130C, --night #0B0D17,
   --night-2 #141827, --night-3 #1E2338, --star #ECE6D3.
   Para desfazer: tirar o <link> e o <script> de visual no index.html. */

/* ---------- refinos gerais ---------- */
.btn{border-radius:999px}
.sticky{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.h-1{letter-spacing:-.025em}

/* ---------- topo: arte ---------- */
.hero > .art{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero > .top,.hero > .hero-body{z-index:1}
.hero-body{padding-bottom:clamp(120px,15vw,200px)}

/* modo claro: solar, meio-tom e trevos (como na capa de Fülle) */
.art-sun{position:absolute;width:70vmax;height:70vmax;left:-22vmax;top:-34vmax;border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,196,.6),rgba(255,244,196,0) 62%);
  animation:art-breathe 9s ease-in-out infinite alternate;transition:opacity 1s ease}
.art-dots{position:absolute;inset:0;background:radial-gradient(circle,rgba(21,19,12,.2) 1.2px,transparent 1.6px) 0 0/9px 9px;
  -webkit-mask-image:linear-gradient(200deg,#000 0,transparent 58%);mask-image:linear-gradient(200deg,#000 0,transparent 58%);
  transition:opacity 1s ease}
.clv{position:absolute;fill:var(--ink);opacity:.14;transition:opacity .8s ease;animation:art-spin linear infinite;
  translate:0 calc(var(--py,0) * var(--k,-.06) * 1px)}
.clv.c1{right:6%;top:13%;width:clamp(90px,13vw,190px);animation-duration:80s}
.clv.c2{right:24%;bottom:14%;width:clamp(44px,6vw,86px);animation-duration:55s;animation-direction:reverse;--k:-.12}
.clv.c3{left:56%;top:7%;width:clamp(28px,4vw,52px);animation-duration:45s;--k:-.1}
.clv.c4{left:3%;bottom:18%;width:clamp(54px,7vw,100px);animation-duration:65s;animation-direction:reverse;--k:-.04}
.hero.off .art-sun,.hero.off .art-dots,.hero.off .clv{opacity:0}
.hero.off .art-sun{animation:none}

/* modo escuro: cidade apagada e lâmpada ao lado */
.art-city{position:absolute;left:0;right:0;bottom:0;height:clamp(150px,24vw,300px);opacity:0;
  transform:translateY(36px);translate:0 calc(var(--py,0) * .08px);
  transition:opacity 1.1s ease .2s,transform 1.4s cubic-bezier(.2,.7,.2,1) .2s}
.art-city svg{display:block;width:100%;height:100%}
.hero.off .art-city{opacity:1;transform:none}
.art-city .w{fill:#F4C21F}
.art-city .flk{animation:art-flicker 3.4s ease-in-out infinite}
.art-city .beacon{fill:#F4C21F;animation:art-beacon 3.2s ease-in-out infinite}

.hero{--lamp-w:clamp(54px,8vw,120px);--lamp-r:clamp(14px,7vw,120px);--cord:clamp(118px,11vw,150px)}
.hero{--moon-w:clamp(96px,12.5vw,200px);--moon-top:clamp(74px,9vw,130px)}
.art-lamp{position:absolute;top:0;right:var(--lamp-r);width:var(--lamp-w);transform-origin:50% 0;
  opacity:0;transform:translateY(-44px);transition:opacity .9s ease .5s,transform 1.5s cubic-bezier(.34,1.56,.64,1) .5s}
.art-lamp .cord{display:block;width:2px;height:var(--cord);margin:0 auto;background:linear-gradient(#2A2F48,#6B6F8A)}
.art-lamp img{display:block;width:100%;height:auto}
.hero.off .art-lamp{opacity:1;transform:none}

/* ---------- livros ---------- */
.half{position:relative;overflow:hidden}
.half > .inner{position:relative;z-index:1}
.half-art{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.half.light .clv{opacity:.09}
.half.light .clv.b1{right:-4%;bottom:6%;width:clamp(150px,22vw,280px);animation-duration:90s}
.half.light .clv.b2{left:-3%;top:8%;width:clamp(70px,9vw,120px);animation-duration:60s;animation-direction:reverse}
.half.light .sun-disc{position:absolute;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,#F4C21F 0,rgba(244,194,31,.6) 34%,rgba(244,194,31,0) 68%);animation:art-breathe 7s ease-in-out infinite alternate}
.half.light .sun-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(21,19,12,.22) 1.1px,transparent 1.5px) 0 0/8px 8px;
  -webkit-mask-image:radial-gradient(circle,#000 18%,transparent 66%);mask-image:radial-gradient(circle,#000 18%,transparent 66%)}
.half.dark .art-city{opacity:.55;transform:none;height:clamp(110px,16vw,200px)}
.half.dark .art-lamp{opacity:.9;transform:none;width:clamp(40px,5vw,70px);right:clamp(12px,5vw,60px)}
.half.dark .art-lamp .cord{height:clamp(40px,5vw,70px)}
.cover-img{transform-style:preserve-3d;will-change:transform}

/* ---------- movimento ---------- */
@keyframes art-spin{to{transform:rotate(360deg)}}
@keyframes art-breathe{from{transform:scale(1);opacity:.85}to{transform:scale(1.08);opacity:1}}
@keyframes art-sway{from{transform:rotate(-2.4deg)}to{transform:rotate(2.4deg)}}
@keyframes art-flicker{0%,100%{opacity:.85}12%{opacity:.3}30%{opacity:.9}55%{opacity:.45}78%{opacity:.8}}
@keyframes art-beacon{0%,100%{opacity:.15}50%{opacity:.95}}

@media (prefers-reduced-motion:reduce){
  .clv,.art-sun,.sun-disc,.art-lamp,.art-city .flk,.art-city .beacon{animation:none!important}
  .art-city,.art-lamp{transition:opacity .3s ease!important;transform:none!important}
  .cover-img{transform:none!important}
}
@media (max-width:640px){
  .clv.c3{display:none}
}
@media (max-width:640px){
  .art-lamp{width:46px;right:10px}
}

/* ---------- planos: satélite e constelação ---------- */
.tier{position:relative;overflow:hidden}
.tier > *:not(.tier-art){position:relative;z-index:1}
.tier-art{position:absolute;top:14px;right:14px;width:clamp(96px,11vw,132px);height:auto;z-index:0;pointer-events:none}
.tier-art .pl{fill:#1E2338;stroke:#9A9CB2;stroke-width:1}
.tier-art .ring{fill:none;stroke:#ECE6D3;stroke-opacity:.16;stroke-width:1}
.tier-art .bd{fill:#F4C21F}
.tier-art .pn{fill:#ECE6D3;fill-opacity:.8}
.tier-art .orb{transform-origin:70px 70px}
.tier-art .o1{animation:art-spin 16s linear infinite}
.tier-art .o2{animation:art-spin 30s linear infinite reverse}
.tier-art .o3{animation:art-spin 24s linear infinite}
.tier-art .ln{fill:none;stroke:#9A9CB2;stroke-opacity:.55;stroke-width:1;stroke-dasharray:260;stroke-dashoffset:260;animation:art-draw 7s ease-in-out infinite alternate}
.tier-art .star{fill:#F4C21F;animation:art-flicker 3.6s ease-in-out infinite}
.tier-art .run{fill:#ECE6D3}
.tier:hover .tier-art .o1{animation-duration:6s}
@keyframes art-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .tier-art .orb,.tier-art .ln,.tier-art .star{animation:none!important}
  .tier-art .ln{stroke-dashoffset:0}
}

/* ---------- trevo natural, interruptor e lâmpada que acende ---------- */
.lamp-imgs{position:relative}
.lamp-imgs img.o{position:absolute;left:0;top:0;opacity:0;transition:opacity .55s ease}
.half-glow{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .9s ease;
  background:radial-gradient(circle at var(--lx,80%) var(--ly,22%),rgba(244,194,31,.34),rgba(244,194,31,.12) 28%,rgba(244,194,31,0) 62%)}
.half.dark.lit .half-glow{opacity:1}
.half.dark .cover-img{transition:filter .9s ease,transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s ease}
.half.dark.lit .cover-img{filter:brightness(1.2) saturate(1.1)}
.half-switch{position:absolute;z-index:3;width:116px;display:grid;justify-items:center;gap:8px}
.hs{display:grid;justify-items:center;gap:8px;background:none;border:0;padding:6px;color:var(--star);font:inherit;cursor:pointer;border-radius:10px}
.hs .plate{width:46px;height:62px;flex:none;border-radius:6px;background:#2A2F48;border:1px solid rgba(236,230,211,.2);box-shadow:none;display:grid;place-items:center;transition:background-color .5s ease}
.hs .rocker{width:22px;height:38px;border-radius:3px;background:linear-gradient(#3A405C 0 50%,#4A5170 50% 100%);border:1px solid rgba(236,230,211,.25);
  box-shadow:inset 0 3px 0 rgba(0,0,0,.25);transition:background .4s ease,box-shadow .4s ease}
.half.dark.lit .hs .plate{background:#FBF8EF;border-color:rgba(21,19,12,.25);box-shadow:0 2px 0 rgba(21,19,12,.18),0 6px 14px -6px rgba(0,0,0,.5)}
.half.dark.lit .hs .rocker{background:linear-gradient(#FFFFFF 0 50%,#E4DFD0 50% 100%);border-color:rgba(21,19,12,.3);box-shadow:inset 0 -3px 0 rgba(21,19,12,.12)}
.hs:active .rocker{transform:scale(.97)}
.hs-label{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;text-align:center;line-height:1.25;color:var(--star)}
@media (prefers-reduced-motion:reduce){.half-glow,.lamp-imgs img.o,.half.dark .cover-img{transition-duration:.01s!important}}


/* ---------- interruptor grande, alinhado com a lâmpada ---------- */
.switch-row .plate{width:56px;height:76px}
.switch-row .rocker{width:27px;height:46px}
.hero > .switch-big{position:absolute;z-index:2;right:var(--lamp-r);width:var(--lamp-w);
  top:calc(var(--moon-top) + var(--moon-w) + 90px);display:flex;justify-content:center}
.switch-big .switch{flex-direction:column;gap:16px;text-align:center;padding:6px}
.switch-big .plate{width:92px;height:124px;border-radius:10px}
.switch-big .rocker{width:44px;height:76px;border-radius:5px}
.switch-big .switch-label{font-size:13px;line-height:1.3;max-width:130px}
@media (max-width:899px){.hero > .switch-big{display:none}}

/* ---------- topo, luz apagada: lua, luar e cometas ---------- */
.moon,.moon-halo{position:absolute;pointer-events:none}
.moon{right:calc(var(--lamp-r) + var(--lamp-w) / 2 - var(--moon-w) / 2);top:var(--moon-top);width:var(--moon-w);
  opacity:0;transform:translateY(110px);transition:opacity 2.2s ease .3s,transform 2.8s cubic-bezier(.2,.7,.2,1) .3s;
  filter:drop-shadow(0 0 22px rgba(236,230,211,.35))}
.moon svg{display:block;width:100%;height:auto}
.moon-halo{width:calc(var(--moon-w) * 3.4);height:calc(var(--moon-w) * 3.4);border-radius:50%;
  right:calc(var(--lamp-r) + var(--lamp-w) / 2 - var(--moon-w) * 1.7);top:calc(var(--moon-top) + var(--moon-w) / 2 - var(--moon-w) * 1.7);
  background:radial-gradient(circle,rgba(236,230,211,.24),rgba(236,230,211,.08) 38%,rgba(236,230,211,0) 66%);
  opacity:0;transition:opacity 2.6s ease .5s;animation:moon-pulse 9s ease-in-out infinite alternate}
.hero.off .moon{opacity:1;transform:none}
.hero.off .moon-halo{opacity:1}
.comets{position:absolute;inset:0;overflow:hidden}
.comet{position:absolute;width:var(--len,180px);height:2px;transform-origin:0 50%;rotate:-28deg;opacity:0;border-radius:2px;
  background:linear-gradient(90deg,rgba(251,248,239,.95),rgba(236,230,211,.35) 40%,rgba(236,230,211,0));animation:comet-fly linear forwards}
.comet::before{content:"";position:absolute;left:-3px;top:-2.5px;width:7px;height:7px;border-radius:50%;background:#FBF8EF;box-shadow:0 0 12px 4px rgba(236,230,211,.65)}
@keyframes comet-fly{0%{opacity:0;translate:0 0}10%{opacity:1}80%{opacity:1}100%{opacity:0;translate:-62vw 33vw}}
@keyframes moon-pulse{from{scale:1}to{scale:1.06}}
@media (max-width:640px){.hero{--moon-w:84px;--moon-top:122px}}
@media (prefers-reduced-motion:reduce){.moon-halo,.comet{animation:none!important}.moon,.moon-halo{transition-duration:.3s!important}.moon{transform:none!important}}