/* ============================================================
   ENERI · ARQUIVO — SHARED + SPLASH STYLES
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;}

:root{
  --ink:#0a0908;
  --ink-2:#14110f;
  --ink-3:#1c1916;
  --bone:#f2ede4;
  --bone-2:#e6dfd2;
  --ash:#8a8276;
  --dim:rgba(242,237,228,0.58);
  --faint:rgba(242,237,228,0.18);
  --line:rgba(242,237,228,0.12);
  --oxblood:#e63232;
  --oxblood-soft:#ff6b6b;

  --f-serif:'Fraunces','Times New Roman',serif;
  --f-sans:'Inter Tight','Helvetica Neue',sans-serif;
  --f-mono:'JetBrains Mono','Courier New',monospace;

  --ease:cubic-bezier(.22,.9,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

html,body{height:100%;background:var(--ink);color:var(--bone);font-family:var(--f-sans);}
body{
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;background:none;border:0;color:inherit;cursor:pointer;}
.mono{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;}
.dim{color:var(--dim);}
.sep{color:var(--faint);}

/* ============ Global atmospheric layers ============ */
.film-grain{
  position:fixed;inset:0;z-index:9000;pointer-events:none;mix-blend-mode:overlay;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/></svg>");
  animation:grain 1.6s steps(8) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0);}10%{transform:translate(-3%,2%);}
  30%{transform:translate(2%,-1%);}50%{transform:translate(-2%,3%);}
  70%{transform:translate(3%,-2%);}90%{transform:translate(-1%,1%);}
  100%{transform:translate(0,0);}
}
.scanlines{
  position:fixed;inset:0;z-index:9001;pointer-events:none;mix-blend-mode:overlay;opacity:.3;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.04) 0,rgba(255,255,255,.04) 1px,transparent 1px,transparent 3px);
}
.vignette{
  position:fixed;inset:0;z-index:9002;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.85) 100%);
}

/* ============ Custom cursor ============ */
.cursor{position:fixed;top:0;left:0;width:0;height:0;z-index:9999;pointer-events:none;mix-blend-mode:difference;}
.cursor__ring{
  position:absolute;left:50%;top:50%;width:34px;height:34px;border:1px solid var(--bone);border-radius:50%;
  transform:translate(-50%,-50%);transition:width .35s var(--ease),height .35s var(--ease),background .3s,border-color .3s;
}
.cursor__dot{
  position:absolute;left:50%;top:50%;width:4px;height:4px;background:var(--bone);border-radius:50%;
  transform:translate(-50%,-50%);
}
.cursor.is-hover .cursor__ring{width:68px;height:68px;background:rgba(255,255,255,.06);}
.cursor.is-action .cursor__ring{width:88px;height:88px;border-color:var(--oxblood);background:rgba(230,50,50,.08);}
@media (pointer:coarse){.cursor{display:none;} body,a,button{cursor:auto!important;}}
@media (pointer:fine){body,a,button{cursor:none;}}

/* ============ Boot loader com vídeo ============ */
.boot{
  position:fixed;inset:0;z-index:9500;background:#000;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .8s var(--ease) .2s,visibility .8s var(--ease) .2s;
  overflow:hidden;
}
.boot.is-done{opacity:0;visibility:hidden;}

.boot__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:35% 88%; /* desktop: puxa para esquerda e desce – centraliza o nome "ENERI" e revela a personagem */
  transform:scale(1.0);
  z-index:1;
  filter:brightness(0.55) contrast(1.1);
}

.boot__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
  z-index:2;
}

.boot__mark{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  width:min(70vw,280px);
  text-shadow:0 2px 20px rgba(0,0,0,0.8);
}

.boot__mono{
  font-family:var(--f-mono);
  font-size:.62rem;
  letter-spacing:.4em;
  color:var(--bone);
  text-transform:uppercase;
}

.boot__bar{
  position:relative;
  width:100%;
  height:2px;
  background:rgba(255,255,255,0.15);
  overflow:hidden;
}

.boot__bar span{
  position:absolute;
  inset:0;
  background:var(--oxblood);
  transform-origin:left;
  transform:scaleX(0);
  box-shadow:0 0 12px var(--oxblood);
}

.boot__pct{
  color:var(--bone);
  font-size:.7rem;
  font-weight:500;
}

/* ============================================================
   SPLASH
   ============================================================ */
.splash-body{height:100vh;overflow:hidden;}
.stage{position:relative;width:100%;height:100vh;overflow:hidden;}

.stage__bg{position:absolute;inset:-4%;}
.stage__bg .stage__img{
  width:100%;height:100%;object-fit:cover;object-position:center 28%;
  filter:grayscale(1) contrast(1.25) brightness(.42);
  animation:slowZoom 30s ease-in-out infinite alternate;
  transition:transform .6s var(--ease);
}
@keyframes slowZoom{from{transform:scale(1.04);}to{transform:scale(1.12);}}
.stage__tint{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(10,9,8,.45) 0%,rgba(10,9,8,0) 25%,rgba(10,9,8,0) 60%,rgba(10,9,8,.85) 100%),
    radial-gradient(ellipse at 30% 70%,rgba(230,50,50,.18),transparent 55%);
}

.stage__reveal{
  position:absolute;inset:-4%;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle 220px at var(--mx,50%) var(--my,50%),#000 0,transparent 70%);
  mask-image:radial-gradient(circle 220px at var(--mx,50%) var(--my,50%),#000 0,transparent 70%);
  opacity:0;transition:opacity .4s var(--ease);
}
.stage:hover .stage__reveal{opacity:.55;}
.stage__reveal img{width:100%;height:100%;object-fit:cover;object-position:center 28%;
  filter:contrast(1.1) saturate(1.15) brightness(.7);}

/* HUD */
.hud{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;
  padding:24px clamp(20px,5vw,56px);
}
.hud__group{display:flex;align-items:center;gap:10px;}
.hud__center{justify-self:center;}
.hud__right{justify-self:end;}
.hud__dot{width:7px;height:7px;border-radius:50%;background:var(--oxblood);box-shadow:0 0 12px var(--oxblood);animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.4;}50%{opacity:1;}}

/* Seletor de idiomas no topo (HUD) */
.lang {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: .65rem;
  letter-spacing: .08em;
  background: rgba(10, 9, 8, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 4px 14px 4px 12px;
}

.lang-label {
  color: var(--bone);
  font-weight: 600;
  letter-spacing: .18em;
  font-size: .6rem;
  padding-right: 5px;
  border-right: 1px solid var(--faint);
}

.lang__opt {
  background: none;
  border: 0;
  color: var(--dim);
  padding: 3px 2px;
  border-bottom: 2px solid transparent;
  transition: .3s var(--ease);
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
}

.lang__opt.is-active {
  border-bottom-color: var(--oxblood);
  color: var(--bone);
}

.lang__opt:hover {
  color: var(--bone);
}

.lang__sep {
  color: var(--faint);
}

/* Vertical sides */
.side{
  position:absolute;z-index:15;
  writing-mode:vertical-rl;transform:rotate(180deg);
  top:50%;translate:0 -50%;
}
.side--left{left:18px;}
.side--right{right:18px;}
@media (max-width:768px){.side{display:none;}}

/* Hero */
.hero{
  position:absolute;left:clamp(20px,5vw,56px);bottom:clamp(180px,28vh,260px);
  z-index:15;max-width:min(86vw,720px);
  display:flex;flex-direction:column;gap:22px;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;width:fit-content;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.35em;text-transform:uppercase;color:var(--bone);
  padding:8px 14px;border:1px solid var(--line);border-radius:99px;background:rgba(10,9,8,.4);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:rise .9s .8s var(--ease-out) both;
}
.eyebrow__pulse{width:6px;height:6px;border-radius:50%;background:var(--oxblood);box-shadow:0 0 8px var(--oxblood);animation:pulse 1.5s infinite;}

.hero__title{
  font-family:var(--f-serif);font-weight:900;
  font-size:clamp(2.8rem, 8vw, 6rem);
  line-height:1.1;
  letter-spacing:-0.01em;
  font-style:italic;
  color:var(--bone);
  text-shadow:0 10px 60px rgba(0,0,0,.5);
  padding-right:0.8em;
}
.hero__line{display:inline-flex;}
.hero__char{display:inline-block;transform:translateY(110%);animation:charIn .9s var(--ease-out) forwards;}
.hero__char:nth-child(1){animation-delay:.95s;}
.hero__char:nth-child(2){animation-delay:1.05s;}
.hero__char:nth-child(3){animation-delay:1.15s;}
.hero__char:nth-child(4){animation-delay:1.25s;}
.hero__char:nth-child(5){animation-delay:1.35s;}
@keyframes charIn{to{transform:translateY(0);}}

.hero__sub{
  font-family:var(--f-serif);font-style:italic;font-weight:400;
  font-size:clamp(1.1rem,2.4vw,1.7rem);line-height:1.3;color:var(--bone-2);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;
  animation:rise 1s 1.6s var(--ease-out) both;
}
.hero__sub .hero__static{display:inline-block;}

.hero__meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;animation:rise 1s 1.9s var(--ease-out) both;}

@keyframes rise{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}

/* CTA / Enter */
.enter{
  position:absolute;right:clamp(20px,5vw,56px);bottom:clamp(110px,18vh,180px);z-index:16;
  display:flex;flex-direction:column;align-items:flex-end;gap:18px;
  animation:rise 1s 2.1s var(--ease-out) both;
}
.enter__btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:22px 36px;border:1px solid var(--bone);border-radius:99px;
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink);background:var(--bone);
  overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease),transform .3s var(--ease);
}
.enter__btn:hover{transform:translateY(-3px);color:var(--bone);}
.enter__btn::before{
  content:"";position:absolute;inset:0;background:var(--oxblood);
  transform:translateY(100%);transition:transform .55s var(--ease);z-index:-1;
}
.enter__btn:hover::before{transform:translateY(0);}
.enter__label{display:inline-flex;align-items:center;gap:18px;}
.enter__arrow{display:inline-flex;transform:translateX(0);transition:transform .4s var(--ease);}
.enter__btn:hover .enter__arrow{transform:translateX(8px);}

/* Marquee */
.marquee{
  position:absolute;left:0;right:0;bottom:0;z-index:14;
  padding:18px 0;border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(10,9,8,0),rgba(10,9,8,.85));
  overflow:hidden;
}
.marquee__track{
  display:inline-flex;align-items:center;gap:32px;
  font-family:var(--f-serif);font-style:italic;font-weight:300;font-size:clamp(1rem,2vw,1.5rem);
  white-space:nowrap;color:var(--bone-2);
  animation:marquee 60s linear infinite;
}
.marquee__track span{flex-shrink:0;}
.marquee__track .dot{color:var(--oxblood);font-style:normal;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* Corner frame */
.corner{position:absolute;width:22px;height:22px;border:1px solid var(--faint);z-index:13;pointer-events:none;}
.corner--tl{top:80px;left:24px;border-right:0;border-bottom:0;}
.corner--tr{top:80px;right:24px;border-left:0;border-bottom:0;}
.corner--bl{bottom:80px;left:24px;border-right:0;border-top:0;}
.corner--br{bottom:80px;right:24px;border-left:0;border-top:0;}

/* ============ Splash · Mobile ============ */
@media (max-width:860px){
  .hud{padding:16px 18px;font-size:.6rem;gap:10px;}
  .hud__center{display:flex;}
  .lang{font-size:.55rem;padding:3px 8px;gap:6px;}
  .lang-label{font-size:.5rem;padding-right:3px;}
  .corner{display:none;}
  .hero{left:18px;right:18px;bottom:auto;top:50%;translate:0 -50%;max-width:none;gap:18px;}
  .hero__title{font-size:clamp(2rem, 10vw, 4rem);}
  .enter{position:absolute;right:18px;left:18px;bottom:90px;align-items:stretch;}
  .enter__btn{width:100%;padding:18px 22px;font-size:.7rem;}
  .marquee{padding:12px 0;}
  .marquee__track{font-size:1rem;gap:22px;}
}
@media (max-height:680px) and (min-width:861px){
  .hero{bottom:140px;}
  .enter{bottom:90px;}
}

/* ============ Ajustes para o vídeo em mobile ============ */
@media (max-width:480px){
  .boot__video{
    object-position:50% 85%; /* centraliza horizontalmente e desce para mostrar a personagem em telas pequenas */
    transform:scale(1.0);
  }
}