/* =========================================================
   SwellCoast Technologies — site institucional
   Tokens da marca (kit Pixel E1 v2.0) + layout responsivo
   ========================================================= */

/* ---------- Fontes (hospedadas no próprio site) ---------- */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/sg-400.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/sg-500.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/sg-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plex-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/plex-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/plex-700.woff2) format("woff2")}

/* ---------- Tokens ---------- */
:root{
  --trench:#07161F;      /* fundo principal */
  --abyss:#0B2233;       /* seções sólidas */
  --deep:#12405A;
  --swell:#1C8C93;
  --swell-light:#3FB8B5; /* destaques, botão principal */
  --swell-soft:#7FD1CD;  /* rótulos de seção */
  --foam:#E8F1F0;        /* texto principal */
  --sand:#EBC79E;        /* detalhe quente */

  --line:#2A5266;
  --line-soft:#1B3A4C;
  --muted:#9FBEC2;
  --muted-2:#B9D2D6;
  --muted-3:#CFE1E3;
  --dim:#5E8794;
  --dots:#3A6577;

  --panel:rgba(7,22,31,.86);
  --panel-strong:rgba(7,22,31,.92);

  --sans:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --max:1280px;
  --gutter:clamp(16px,4vw,32px);
  --section-y:clamp(88px,11vw,140px);
  --header-h:76px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%;background:var(--trench)}
body{margin:0;font-family:var(--sans);color:var(--foam);background:var(--trench);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:var(--swell-light)}
a:hover{color:var(--foam)}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--swell-light);outline-offset:3px}
::selection{background:var(--swell-light);color:var(--trench)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-60px;z-index:100;padding:12px 18px;background:var(--foam);color:var(--trench);font-family:var(--mono);font-size:14px;text-decoration:none}
.skip-link:focus{top:12px}
.mono{font-family:var(--mono)}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);width:100%}
.pixel{shape-rendering:crispEdges}

/* ---------- Botões (retos, sem pílula) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;font-family:var(--sans);font-size:17px;font-weight:700;text-decoration:none;border:1px solid transparent;transition:background-color .15s,color .15s,border-color .15s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--swell-light);color:var(--trench)}
.btn--primary:hover{background:var(--foam);color:var(--trench)}
.btn--ghost{border-color:rgba(232,241,240,.5);background:rgba(7,22,31,.35);color:var(--foam);font-weight:500}
.btn--ghost:hover{border-color:var(--foam);background:rgba(7,22,31,.6);color:var(--foam)}
.btn--light{background:var(--foam);color:var(--trench);font-family:var(--mono);font-weight:500;letter-spacing:.08em;font-size:13px;min-height:44px;padding:0 20px}
.btn--light:hover{background:var(--swell-light);color:var(--trench)}

/* ---------- Cabeçalho fixo ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;transition:background-color .25s,border-color .25s,backdrop-filter .25s;border-bottom:1px solid transparent}
.site-header.is-scrolled,.site-header.is-open{background:rgba(7,22,31,.9);border-bottom-color:var(--line-soft);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.site-header__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--foam)}
.brand:hover{color:var(--foam)}
.brand__word{font-size:21px;letter-spacing:-.02em;line-height:1}
.brand__word b{font-weight:700}
.brand__word span{font-weight:400}
.nav{display:flex;gap:28px}
.nav a,.mobile-nav a.nav-link{color:var(--foam);text-decoration:none;font-family:var(--mono);font-size:13px;letter-spacing:.08em;padding:12px 2px;position:relative}
.nav a::after{content:"";position:absolute;left:2px;right:2px;bottom:6px;height:2px;background:var(--swell-light);transform:scaleX(0);transform-origin:left;transition:transform .2s steps(4)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:16px}
.lang{display:flex;gap:2px;font-family:var(--mono);font-size:13px}
.lang a{padding:8px;text-decoration:none;color:#8FB3BC}
.lang a[aria-current="true"]{color:var(--foam)}
.lang a:hover{color:var(--foam)}
.menu-toggle{display:none;align-items:center;gap:10px;min-height:44px;padding:0 14px;background:transparent;border:1px solid rgba(232,241,240,.4);color:var(--foam);font-family:var(--mono);font-size:13px;letter-spacing:.08em;cursor:pointer}
.menu-toggle__icon{width:14px;height:10px;position:relative}
.menu-toggle__icon::before,.menu-toggle__icon::after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform .2s}
.menu-toggle__icon::before{top:1px}
.menu-toggle__icon::after{bottom:1px}
.is-open .menu-toggle__icon::before{transform:translateY(3px)}
.is-open .menu-toggle__icon::after{transform:translateY(-3px)}
.mobile-nav{display:none}

@media (max-width:960px){
  .nav,.header-actions .btn--light{display:none}
  .menu-toggle{display:inline-flex}
  .mobile-nav{display:block;max-height:0;overflow:hidden;transition:max-height .3s ease}
  .is-open .mobile-nav{max-height:520px}
  .mobile-nav__inner{display:flex;flex-direction:column;padding-top:8px;padding-bottom:24px}
  .mobile-nav a.nav-link{font-size:15px;padding:16px 0;border-top:1px solid var(--line-soft)}
  .mobile-nav .btn{margin-top:16px}
}
@media (max-width:420px){
  .brand__word{font-size:19px}
  .header-actions{gap:8px}
}

/* ---------- Cenas em pixel art (camadas animadas) ---------- */
.scene{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.scene i{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;background-position:var(--pos,center);image-rendering:pixelated;image-rendering:crisp-edges}
.scene--flip{transform:scaleX(-1)}
.scene .nuvens{animation:clouds 46s ease-in-out infinite alternate}
.scene .halo{animation:glow 5s ease-in-out infinite alternate}
.scene .estrelas1{animation:twinkleA 3.2s ease-in-out infinite alternate}
.scene .estrelas2{animation:twinkleB 4.6s ease-in-out infinite alternate}
.scene .agua1{animation:w1 7.5s ease-in-out infinite}
.scene .agua2{animation:w2 7.5s ease-in-out infinite}
.scene .agua3{animation:w3 7.5s ease-in-out infinite}
.scene .brilho1{animation:w1 2.7s ease-in-out infinite}
.scene .brilho2{animation:w2 2.7s ease-in-out infinite}
.scene .brilho3{animation:w3 2.7s ease-in-out infinite}
/* pausa as animações de cenas fora da tela (economia de bateria) */
.is-offscreen .scene i{animation-play-state:paused}

.scene--dia .ceu{background-image:url(../../images/camadas/dia-ceu.png)}
.scene--dia .nuvens{background-image:url(../../images/camadas/dia-nuvens.png)}
.scene--dia .halo{background-image:url(../../images/camadas/dia-halo.png)}
.scene--dia .astro{background-image:url(../../images/camadas/dia-astro.png)}
.scene--dia .costa{background-image:url(../../images/camadas/dia-costa.png)}
.scene--dia .agua1{background-image:url(../../images/camadas/dia-agua1.png)}
.scene--dia .agua2{background-image:url(../../images/camadas/dia-agua2.png)}
.scene--dia .agua3{background-image:url(../../images/camadas/dia-agua3.png)}
.scene--dia .brilho1{background-image:url(../../images/camadas/dia-brilho1.png)}
.scene--dia .brilho2{background-image:url(../../images/camadas/dia-brilho2.png)}
.scene--dia .brilho3{background-image:url(../../images/camadas/dia-brilho3.png)}

.scene--entardecer .ceu{background-image:url(../../images/camadas/entardecer-ceu.png)}
.scene--entardecer .nuvens{background-image:url(../../images/camadas/entardecer-nuvens.png)}
.scene--entardecer .halo{background-image:url(../../images/camadas/entardecer-halo.png)}
.scene--entardecer .astro{background-image:url(../../images/camadas/entardecer-astro.png)}
.scene--entardecer .costa{background-image:url(../../images/camadas/entardecer-costa.png)}
.scene--entardecer .agua1{background-image:url(../../images/camadas/entardecer-agua1.png)}
.scene--entardecer .agua2{background-image:url(../../images/camadas/entardecer-agua2.png)}
.scene--entardecer .agua3{background-image:url(../../images/camadas/entardecer-agua3.png)}
.scene--entardecer .brilho1{background-image:url(../../images/camadas/entardecer-brilho1.png)}
.scene--entardecer .brilho2{background-image:url(../../images/camadas/entardecer-brilho2.png)}
.scene--entardecer .brilho3{background-image:url(../../images/camadas/entardecer-brilho3.png)}

.scene--noite .ceu{background-image:url(../../images/camadas/noite-ceu.png)}
.scene--noite .estrelas1{background-image:url(../../images/camadas/noite-estrelas1.png)}
.scene--noite .estrelas2{background-image:url(../../images/camadas/noite-estrelas2.png)}
.scene--noite .nuvens{background-image:url(../../images/camadas/noite-nuvens.png)}
.scene--noite .halo{background-image:url(../../images/camadas/noite-halo.png)}
.scene--noite .astro{background-image:url(../../images/camadas/noite-astro.png)}
.scene--noite .costa{background-image:url(../../images/camadas/noite-costa.png)}
.scene--noite .agua1{background-image:url(../../images/camadas/noite-agua1.png)}
.scene--noite .agua2{background-image:url(../../images/camadas/noite-agua2.png)}
.scene--noite .agua3{background-image:url(../../images/camadas/noite-agua3.png)}
.scene--noite .brilho1{background-image:url(../../images/camadas/noite-brilho1.png)}
.scene--noite .brilho2{background-image:url(../../images/camadas/noite-brilho2.png)}
.scene--noite .brilho3{background-image:url(../../images/camadas/noite-brilho3.png)}

.fade-top,.fade-bottom{position:absolute;left:0;right:0;pointer-events:none}
.fade-top{top:0;height:220px;background:linear-gradient(var(--trench),rgba(7,22,31,0))}
.fade-bottom{bottom:0;height:260px;background:linear-gradient(rgba(7,22,31,0),var(--trench))}

/* ---------- Abertura ---------- */
.hero{position:relative;overflow:hidden;min-height:max(100svh,760px);padding:calc(var(--header-h) + 8px) 0 clamp(96px,10vw,140px)}
.hero__camera{position:absolute;inset:0;animation:drift 30s ease-in-out infinite alternate}
.hero__night{animation:tide 24s ease-in-out infinite}
.hero .scene{--pos:center 62%}
.hero__ripples{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.hero .fade-top{z-index:1}
.hero .fade-bottom{z-index:1}
.hero__content{position:relative;z-index:2}
.swell-report{display:flex;flex-wrap:wrap;gap:8px 28px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:#A9C6CC}
.swell-report .live{color:var(--swell-light)}
.swell-report .live::before{content:"";display:inline-block;width:7px;height:7px;background:var(--swell-light);margin-right:8px;vertical-align:1px;animation:blink 2.2s steps(1) infinite}
.hero__main{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;padding-top:clamp(48px,7vw,72px)}
.hero h1{font-size:clamp(44px,8.2vw,104px);line-height:.94;font-weight:700;letter-spacing:-.045em;text-shadow:0 2px 24px rgba(7,22,31,.55);text-wrap:balance}
.hero__lead{font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:#fff;max-width:580px;text-shadow:0 1px 2px rgba(7,22,31,.9),0 0 18px rgba(7,22,31,.85)}
.hero__ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

.terminal{width:100%;max-width:560px;border:1px solid var(--line);background:var(--panel);font-family:var(--mono);font-size:15px;line-height:26px;text-align:left}
.terminal__bar{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);font-size:12px;color:#8FB3BC}
.terminal__body{padding:18px 20px;color:var(--foam)}
.terminal__body .p{color:var(--swell-light)}
.terminal__body .dots{color:var(--dots)}
.terminal__body .ok{color:var(--swell-light)}
.terminal__body .done{color:var(--sand)}
.cursor{display:inline-block;width:9px;height:17px;background:var(--swell-light);vertical-align:-3px;animation:blink 1.1s steps(1) infinite}
.hero .terminal{margin-top:clamp(24px,4vw,56px)}
.terminal__line{white-space:nowrap}
/* animação de digitação das linhas do terminal (ativada via JS) */
.js .terminal--typing .terminal__line{opacity:0}
.js .terminal--typing .terminal__line.is-shown{opacity:1}

.ripple{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border:2px solid rgba(232,241,240,.55);animation:ripple 1.6s steps(8) forwards;image-rendering:pixelated}

/* ---------- Índice de seções ---------- */
.section-index{display:flex;flex-wrap:wrap;position:relative;z-index:2}
.section-index a{flex:1 1 160px;display:flex;flex-direction:column;gap:6px;padding:18px 20px;text-decoration:none;color:#9FBEC2;border-top:2px solid var(--line-soft);transition:color .2s,border-color .2s}
.section-index a .n{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--dim);transition:color .2s}
.section-index a .t{font-size:18px;font-weight:700}
.section-index a:hover,.section-index a.is-active{color:var(--foam);border-top-color:var(--swell-light)}
.section-index a:hover .n,.section-index a.is-active .n{color:var(--swell-light)}
@media (max-width:640px){
  .section-index a{flex:1 1 33%;padding:14px 12px}
  .section-index a .t{font-size:15px}
}

/* ---------- Seções ---------- */
.section{position:relative;overflow:hidden;padding:var(--section-y) 0}
.section__inner{position:relative;z-index:1}
.eyebrow{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.16em;color:var(--swell-soft)}
.eyebrow--sand{color:var(--sand)}
.h2{font-size:clamp(40px,6vw,72px);line-height:1;font-weight:700;letter-spacing:-.04em;text-wrap:balance}
.lead{font-size:clamp(17px,1.5vw,19px);line-height:1.53;color:var(--muted-3)}
.heading{display:flex;flex-direction:column;gap:18px}
.panel{background:rgba(7,22,31,.82);border:1px solid var(--line)}

/* Serviços */
#servicos .scene{--pos:center 70%}
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:48px 64px;align-items:start}
.services .lead{max-width:420px}
.service-list{padding:8px clamp(20px,3vw,32px);list-style:none;margin:0}
.service{display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;align-items:baseline;padding:26px 0;border-top:1px solid var(--line)}
.service:first-child{border-top:0}
.service__n{font-family:var(--mono);font-size:14px;color:var(--swell-light)}
.service h3{font-size:clamp(24px,2.6vw,34px);line-height:1.12;font-weight:700;letter-spacing:-.025em}
.service p{margin-top:8px;font-size:17px;line-height:1.53;color:var(--muted-2)}
@media (max-width:520px){.service{grid-template-columns:32px minmax(0,1fr);gap:12px}}

/* Produtos */
#produtos .scene{--pos:center 40%}
.products-head{padding:28px clamp(20px,3vw,32px);align-self:flex-start}
.products-wrap{display:flex;flex-direction:column;gap:40px}
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:24px}
.product{border:1px solid var(--line);background:var(--panel-strong);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:24px;min-height:420px;transition:border-color .2s,transform .2s}
.product:hover{border-color:var(--swell)}
.product__meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:13px;letter-spacing:.12em}
.product__meta .idx{color:#9FBEC2}
.product__meta .status{color:var(--swell-light)}
.product__logo{height:110px;border:1px solid var(--line-soft);background:linear-gradient(135deg,rgba(28,140,147,.12),rgba(11,34,51,.4));display:flex;align-items:center;justify-content:center;gap:18px}
.product__logo img{height:44px;width:auto;max-width:80%}
.product__body{display:flex;flex-direction:column;gap:12px;flex-grow:1}
.product h3{font-size:clamp(38px,4vw,52px);line-height:1.04;font-weight:700;letter-spacing:-.03em}
.product p{font-size:17px;line-height:1.53;color:var(--muted-2)}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:4px 0 0;padding:0}
.tags li{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--swell-soft);border:1px solid var(--line);padding:4px 10px}
.product__link{display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-size:15px;color:var(--swell-light);text-decoration:none;overflow-wrap:anywhere}
.product__link:hover{color:var(--foam)}

/* Tábua de marés */
#mare{background:var(--abyss)}
.tide{display:flex;flex-direction:column;gap:48px}
.tide__chart{width:100%;height:auto}
.tide__steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:24px;list-style:none;margin:28px 0 0;padding:0}
.tide__step{display:flex;flex-direction:column;gap:10px;padding:0 8px}
.tide__step .label{font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--sand)}
.tide__step h3{font-size:26px;line-height:1.15;font-weight:700}
.tide__step p{font-size:16px;line-height:1.5;color:#9FBEC2}
@media (max-width:700px){.tide__chart{display:none}.tide__step{border-left:2px solid var(--line);padding:0 0 0 16px}}

/* Sobre */
#sobre .scene{--pos:20% 30%}
.about{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:64px;align-items:center}
.about__text{display:flex;flex-direction:column;gap:24px}
.about__quote{font-size:clamp(28px,3.2vw,40px);line-height:1.2;font-weight:500;letter-spacing:-.02em}
.about .terminal{max-width:none;background:var(--panel-strong)}
.whoami{display:flex;flex-wrap:wrap;gap:24px;padding:24px}
.whoami__photo{width:132px;height:132px;flex:0 0 auto;border:1px solid var(--line);background:var(--abyss);display:flex;align-items:center;justify-content:center;overflow:hidden}
.whoami__photo img{width:100%;height:100%;object-fit:cover}
.whoami__photo img.icon{width:88px;height:88px;object-fit:contain}
.whoami__info{flex:1 1 240px;display:flex;flex-direction:column;min-width:0}
.whoami__info .p{color:var(--swell-light)}
.whoami__info .cmd{color:#9FBEC2}
.whoami__info .val{color:var(--foam)}
.whoami__info .role{color:var(--sand)}
.whoami__info .bio{color:var(--foam);font-family:var(--sans);font-size:16px;line-height:1.56}

/* Contato */
.contact{position:relative;overflow:hidden;min-height:clamp(640px,80vw,860px);display:flex;flex-direction:column}
.contact .scene{--pos:center 72%}
.contact .fade-top{height:420px}
.contact__inner{position:relative;z-index:1;padding-top:var(--section-y);display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.contact h2{font-size:clamp(52px,9.5vw,120px);line-height:.94;font-weight:700;letter-spacing:-.05em;text-wrap:balance;text-shadow:0 2px 24px rgba(7,22,31,.4)}
.contact__lead{font-size:clamp(18px,1.8vw,22px);line-height:1.45;color:#fff;max-width:640px;text-shadow:0 1px 2px rgba(7,22,31,.9),0 0 18px rgba(7,22,31,.85)}
.contact__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.mail-btn{display:inline-flex;align-items:center;min-height:64px;padding:0 32px;background:var(--foam);color:var(--trench);text-decoration:none;font-family:var(--mono);font-size:clamp(15px,2vw,20px);font-weight:500;overflow-wrap:anywhere;transition:background-color .15s}
.mail-btn:hover{background:var(--swell-light);color:var(--trench)}
.copy-btn{min-height:64px;padding:0 22px;background:rgba(7,22,31,.55);border:1px solid rgba(232,241,240,.5);color:var(--foam);font-family:var(--mono);font-size:14px;letter-spacing:.06em;cursor:pointer;transition:border-color .15s,background-color .15s}
.copy-btn:hover{border-color:var(--foam);background:rgba(7,22,31,.75)}
.copy-btn[data-copied="true"]{border-color:var(--swell-light);color:var(--swell-light)}

/* Rodapé */
.footer{background:var(--trench);border-top:1px solid var(--line-soft);padding:64px 0 40px}
.footer__inner{display:flex;flex-direction:column;gap:48px}
.footer__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px}
.footer__brand{display:flex;flex-direction:column;gap:14px;max-width:320px}
.footer__brand .brand__word{font-size:19px}
.footer__brand p{font-size:15px;color:#9FBEC2}
.footer__cols{display:flex;flex-wrap:wrap;gap:48px}
.footer__col{display:flex;flex-direction:column;gap:12px;min-width:160px}
.footer__col h2{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.14em;color:var(--dim)}
.footer__col a,.footer__col span{color:#9FBEC2;text-decoration:none;font-size:15px}
.footer__col a:hover{color:var(--foam)}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:24px;border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--dim)}

/* Revelar ao rolar (só com JS ativo) */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .reveal.is-visible{opacity:1;transform:none}

/* ---------- Página 404 ---------- */
.notfound{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.notfound .scene{--pos:center 65%}
.notfound__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;padding-top:var(--header-h)}
.notfound h1{font-size:clamp(44px,8vw,96px);line-height:.95;letter-spacing:-.045em;text-shadow:0 2px 24px rgba(7,22,31,.55)}
.notfound p{font-size:19px;color:#fff;max-width:520px;text-shadow:0 1px 2px rgba(7,22,31,.9),0 0 18px rgba(7,22,31,.85)}

/* ---------- Animações ---------- */
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes tide{0%,35%{opacity:0}50%,85%{opacity:1}100%{opacity:0}}
@keyframes clouds{from{transform:translateX(-1.6%)}to{transform:translateX(1.6%)}}
@keyframes glow{from{opacity:.25}to{opacity:1}}
@keyframes twinkleA{from{opacity:1}to{opacity:.25}}
@keyframes twinkleB{from{opacity:.15}to{opacity:1}}
@keyframes w1{0%{opacity:1}33%{opacity:0}66%{opacity:0}100%{opacity:1}}
@keyframes w2{0%{opacity:0}33%{opacity:1}66%{opacity:0}100%{opacity:0}}
@keyframes w3{0%{opacity:0}33%{opacity:0}66%{opacity:1}100%{opacity:0}}
@keyframes drift{from{transform:scale(1.04) translateX(0)}to{transform:scale(1.04) translateX(-1.5%)}}
@keyframes ripple{from{transform:scale(1,.4);opacity:1}to{transform:scale(9,3.2);opacity:0}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .js .terminal--typing .terminal__line{opacity:1}
}