/* Alkyon · hero "Alcyoneus". Componente isolado: todas as classes usam o prefixo .akh-
   Integra com: <section class="hero" id="inicio"><div id="hero-mount"></div></section>
   Fonte: Archivo (OFL), arquivos locais em assets/fonts. */

@font-face{font-family:'Archivo AKH';src:url('fonts/Archivo-var.ttf') format('truetype');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'Archivo AKH X';src:url('fonts/ArchivoExpanded-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}

#hero-mount{position:relative;min-height:100vh;min-height:100svh;background:#050607}

.akh{
  --akh-linho:#EFECE6;--akh-pedra:#9A9893;--akh-gelo:#A9C1D9;--akh-grafite:#1B1C1E;
  --akh-pad:clamp(16px,4.4vw,64px);
  --akh-font:'Archivo AKH','Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --akh-font-x:'Archivo AKH X','Archivo AKH','Archivo',system-ui,sans-serif;
  position:relative;width:100%;height:100vh;height:100svh;min-height:580px;overflow:hidden;
  background:#050607;color:var(--akh-linho);isolation:isolate;
  font-family:var(--akh-font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent
}
.akh *,.akh *::before,.akh *::after{box-sizing:border-box}

/* palco WebGL */
.akh-stage{position:absolute;inset:0;z-index:0;transform-origin:50% 35%;will-change:transform}
.akh-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}
.akh-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,6,7,0) 52%,rgba(5,6,7,.34) 78%,rgba(5,6,7,.62) 100%)}
/* sem WebGL nem canvas: um céu estático feito só de CSS */
.akh--plain .akh-canvas{visibility:hidden}
.akh--plain .akh-stage{background:
  radial-gradient(2px 2px at 50% 30%,#fff 0,rgba(255,255,255,.9) 40%,transparent 100%),
  radial-gradient(160px 60px at 50% 30%,rgba(169,193,217,.22),transparent 70%),
  radial-gradient(60% 40% at 50% 0%,rgba(239,236,230,.06),transparent 70%),#050607}

/* bloco de texto */
.akh-content{position:absolute;z-index:2;left:0;right:0;bottom:0;
  padding:0 var(--akh-pad) clamp(78px,11vh,118px);
  display:flex;flex-direction:column;align-items:center;text-align:center;will-change:transform,opacity}

.akh-label{margin:0 0 clamp(14px,2.3vh,24px);font-family:var(--akh-font-x);font-weight:600;font-stretch:125%;
  font-size:12px;line-height:1.3;letter-spacing:.24em;text-transform:uppercase;color:rgba(239,236,230,.7)}

.akh-title{position:relative;margin:0;font-family:var(--akh-font);font-weight:600;font-stretch:75%;
  font-variation-settings:'wdth' 75;font-size:clamp(54px,9vw,150px);line-height:.9;letter-spacing:-.02em;
  color:var(--akh-linho);font-kerning:normal;text-rendering:optimizeLegibility}
.akh-line{position:relative;display:block;white-space:nowrap}
.akh-l2{color:var(--akh-gelo);font-weight:700}
.akh-line::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;color:transparent;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 43%,rgba(255,255,255,.62) 50%,rgba(255,255,255,0) 57%,rgba(255,255,255,0) 100%);
  background-size:300% 100%;background-repeat:no-repeat;background-position:calc((1 - var(--akh-shine,0)) * 100%) 0;
  -webkit-background-clip:text;background-clip:text}
.akh-c{transition:none}
.akh-c.is-off{color:transparent}
.akh-scr{position:absolute;inset:0;pointer-events:none;white-space:nowrap}
.akh-g{position:absolute;top:0;transform:translateX(-50%);color:rgba(169,193,217,.5);text-shadow:0 0 18px rgba(169,193,217,.45)}
.akh-l2 .akh-g{color:rgba(239,236,230,.42)}

.akh-sub{margin:clamp(16px,2.6vh,28px) 0 0;max-width:58ch;font-family:var(--akh-font);font-weight:400;font-stretch:100%;
  font-variation-settings:'wdth' 100;font-size:clamp(17px,1.32vw,21px);line-height:1.5;color:rgba(239,236,230,.8);
  text-wrap:pretty}

.akh-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(20px,3.4vh,34px)}

/* pills de vidro */
.akh-pill{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;
  border-radius:999px;overflow:hidden;isolation:isolate;font-family:var(--akh-font);font-size:15px;font-weight:560;
  font-stretch:100%;font-variation-settings:'wdth' 100;letter-spacing:.005em;line-height:1;white-space:nowrap;text-decoration:none;
  border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.04),0 20px 40px -22px rgba(0,0,0,.9);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),background-color .35s,border-color .35s,box-shadow .35s}
.akh-pill::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.03) 48%,rgba(255,255,255,0) 60%)}
.akh-pill::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-45%;width:38%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.38),rgba(255,255,255,0));
  transform:translateX(calc(var(--akh-sw,0) * 420%)) skewX(-18deg);opacity:calc(var(--akh-sw,0) * (1 - var(--akh-sw,0)) * 4)}
.akh-pill--light{background:rgba(239,236,230,.93);color:#111214;border-color:rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.08),0 18px 44px -18px rgba(169,193,217,.38),0 2px 10px rgba(0,0,0,.35)}
.akh-pill--glass{background:rgba(255,255,255,.055);color:var(--akh-linho)}
.akh-pill:hover{transform:translateY(-2px)}
.akh-pill--light:hover{background:#F6F4EF}
.akh-pill--glass:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.32)}
.akh-pill:active{transform:translateY(0) scale(.985)}
.akh-pill:focus-visible{outline:2px solid var(--akh-gelo);outline-offset:4px}

/* HUD e indicador de rolagem */
.akh-hud{position:absolute;z-index:2;left:var(--akh-pad);bottom:clamp(20px,3.6vh,34px);margin:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;max-width:calc(100% - 2 * var(--akh-pad) - 90px);
  font-family:var(--akh-font-x);font-weight:600;font-stretch:125%;font-size:9.5px;line-height:1.5;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(154,152,147,.92);pointer-events:none}
.akh-hud-dot{position:relative;width:5px;height:5px;border-radius:50%;background:#EFECE6;
  box-shadow:0 0 0 3px rgba(169,193,217,.12),0 0 10px rgba(169,193,217,.9);animation:akh-beat 2.6s ease-in-out infinite}
.akh-hud-sep{color:rgba(154,152,147,.5)}
.akh-scroll{position:absolute;z-index:2;right:var(--akh-pad);bottom:clamp(20px,3.6vh,34px);display:flex;align-items:center;gap:12px;
  font-family:var(--akh-font-x);font-weight:600;font-stretch:125%;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(239,236,230,.62);text-decoration:none;padding:6px 0}
.akh-scroll:hover{color:var(--akh-linho)}
.akh-scroll:focus-visible{outline:2px solid var(--akh-gelo);outline-offset:6px;border-radius:4px}
.akh-scroll-line{position:relative;width:1px;height:46px;overflow:hidden;background:rgba(239,236,230,.16)}
.akh-scroll-line i{position:absolute;left:0;top:-45%;width:1px;height:45%;
  background:linear-gradient(180deg,rgba(239,236,230,0),#EFECE6);animation:akh-drip 2.4s cubic-bezier(.65,0,.25,1) infinite}

@keyframes akh-drip{0%{transform:translateY(0)}70%,100%{transform:translateY(330%)}}
@keyframes akh-beat{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}

/* revelação controlada pelo script (--akh-p de 0 a 1) */
.akh[data-akh="intro"] .akh-rv{opacity:var(--akh-p,0);
  transform:translate3d(0,calc((1 - var(--akh-p,0)) * 16px),0);
  filter:blur(calc((1 - var(--akh-p,0)) * 10px))}
.akh[data-akh="intro"] .akh-sub{clip-path:inset(0 0 calc((1 - var(--akh-p,0)) * 100%) 0)}
.akh[data-akh="intro"] .akh-label{letter-spacing:calc(.24em + (1 - var(--akh-p,0)) * .3em)}
.akh[data-akh="intro"] .akh-pill{transform:translate3d(0,calc((1 - var(--akh-p,0)) * 14px),0) scale(calc(.94 + var(--akh-p,0) * .06))}
.akh[data-akh="intro"] .akh-line{visibility:hidden}
.akh[data-akh="intro"] .akh-line.is-on{visibility:visible}

/* acessibilidade */
.akh-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* celular */
@media (max-width:719px){
  .akh-content{padding-bottom:104px}
  .akh-label{font-size:clamp(9px,2.75vw,10.5px);letter-spacing:.18em;white-space:nowrap}
  .akh-title{letter-spacing:-.025em}
  .akh-sub{font-size:16.5px;max-width:34ch}
  .akh-actions{flex-direction:column;align-items:stretch;width:min(100%,340px);gap:10px}
  .akh-pill{min-height:50px;padding:0 22px}
  .akh-hud{max-width:calc(100% - 2 * var(--akh-pad) - 64px);font-size:8.5px;letter-spacing:.18em;gap:2px 8px}
  .akh-scroll-txt{display:none}
}
@media (max-height:640px) and (min-width:720px){
  .akh-content{padding-bottom:72px}
  .akh-title{font-size:clamp(54px,8vw,110px)}
}

@media (prefers-reduced-motion:reduce){
  .akh-scroll-line i,.akh-hud-dot{animation:none}
  .akh-pill{transition:none}
}