/* ============================================================
   ENERI · MENU / WALL INTERACTIVE
   ============================================================ */

*,*::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',serif;--f-sans:'Inter Tight',sans-serif;--f-mono:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.22,.9,.28,1);--ease-out:cubic-bezier(.16,1,.3,1);
}

html,body{height:100%;background:#000;color:var(--bone);font-family:var(--f-sans);}
body{overflow:hidden;user-select:none;-webkit-tap-highlight-color:transparent;}
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);}
.serif{font-family:var(--f-serif);}
.italic{font-style:italic;}

.film-grain,.scanlines,.vignette{position:fixed;inset:0;pointer-events:none;z-index:8000;}
.film-grain{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='.5'/></svg>");
  animation:grain 1.6s steps(8) infinite;z-index:8002;}
@keyframes grain{0%{transform:translate(0,0);}25%{transform:translate(-2%,1%);}50%{transform:translate(2%,-1%);}75%{transform:translate(-1%,2%);}100%{transform:translate(0,0);}}
.scanlines{mix-blend-mode:overlay;opacity:.35;z-index:8001;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.04) 0,rgba(255,255,255,.04) 1px,transparent 1px,transparent 3px);}
.vignette{background:radial-gradient(ellipse at center,transparent 25%,rgba(0,0,0,.92) 100%);z-index:8000;}

.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:72px;height:72px;background:rgba(255,255,255,.06);}
.cursor.is-spray .cursor__ring{width:96px;height:96px;border-color:var(--bone);background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);}
@media (pointer:coarse){.cursor{display:none;} body,a,button{cursor:auto!important;}}
@media (pointer:fine){body,a,button{cursor:none;}}

.wall{position:fixed;inset:0;}
.wall__bg{position:fixed;top:-4%;left:-4%;width:108%;height:108%;background-image:url('../eneri2.jpg');background-size:cover;background-position:center;transition:transform .15s linear;}
.wall__bg--dim{filter:grayscale(1) brightness(.1) contrast(1.2);}
.wall__bg--lit{
  filter:contrast(1.05) brightness(.85) saturate(1.05);
  -webkit-mask-image:radial-gradient(circle 380px at var(--x,50%) var(--y,50%),#000 0,transparent 78%);
  mask-image:radial-gradient(circle 380px at var(--x,50%) var(--y,50%),#000 0,transparent 78%);
  opacity:0;transition:opacity .35s var(--ease);
}
body.is-lit .wall__bg--lit,body:hover .wall__bg--lit{opacity:1;}
body.is-lit .wall__bg--lit{-webkit-mask-image:none;mask-image:none;filter:contrast(1.05) brightness(.55) saturate(1.05);}
#sprayCanvas{position:fixed;inset:0;z-index:3;touch-action:none;}

.m-hud{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;
  padding:18px clamp(16px,4vw,40px);
  background:linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,.15) 70%,transparent);
  pointer-events:none;
}
.m-hud > *{pointer-events:auto;}
.m-logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-serif);font-weight:900;font-style:italic;font-size:1.35rem;letter-spacing:.16em;}
.m-logo__dot{width:6px;height:6px;border-radius:50%;background:var(--oxblood);box-shadow:0 0 10px var(--oxblood);animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:.35;}50%{opacity:1;}}
.m-hud__center{display:flex;align-items:center;gap:10px;justify-self:center;background:rgba(10,9,8,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:99px;padding:8px 16px;}
.rec{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--oxblood);margin-right:4px;animation:pulse 1.4s infinite;}
.m-toolbar{display:flex;gap:6px;justify-self:end;}
.m-tool{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone);background:rgba(10,9,8,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:99px;padding:9px 14px;
  transition:.3s var(--ease);
}
.m-tool::before{content:attr(data-k);color:var(--dim);font-size:.58rem;padding-right:8px;border-right:1px solid var(--faint);}
.m-tool:hover{background:var(--bone);color:var(--ink);border-color:var(--bone);}
.m-tool:hover::before{color:var(--ink);border-color:rgba(0,0,0,.25);}
.m-tool.is-on{background:var(--oxblood);color:var(--bone);border-color:var(--oxblood);}
.m-tool.is-on::before{color:var(--bone);border-color:rgba(255,255,255,.35);}

.m-main{
  position:fixed;inset:0;z-index:20;
  display:grid;
  grid-template-columns:minmax(200px, 22%) minmax(280px, 38%);
  gap:clamp(16px, 3vw, 48px);
  align-items:center;
  padding:100px clamp(16px, 3vw, 40px) 100px;
  pointer-events:none;
}
.m-main > *{pointer-events:auto;}

.m-brand{
  display:flex;flex-direction:column;gap:12px;
  background:rgba(10,9,8,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line);border-radius:20px;padding:20px 20px 22px;
  animation:rise .9s .2s var(--ease-out) both;
}
.m-brand__logo{width:100%;max-width:200px;filter:drop-shadow(0 20px 40px #000);}
.m-brand__tag{font-size:.9rem;line-height:1.4;color:var(--bone-2);}
.m-brand__line{height:1px;background:var(--line);width:40%;}
@keyframes rise{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

.m-index{
  background:rgba(10,9,8,.62);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line);border-radius:20px;
  padding:8px 8px 12px;
  max-height:min(68vh, 640px);
  overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--ash) transparent;
  box-shadow:0 40px 100px -20px rgba(0,0,0,.9);
  animation:rise .9s .4s var(--ease-out) both;
}
.m-index::-webkit-scrollbar{width:5px;}
.m-index::-webkit-scrollbar-thumb{background:var(--faint);border-radius:99px;}
.m-index__head{display:flex;justify-content:space-between;align-items:center;padding:6px 12px 10px;border-bottom:1px solid var(--line);}
.m-index__head .mono{font-size:.6rem;}

.m-list{list-style:none;display:flex;flex-direction:column;gap:2px;}
.m-item{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  padding:12px 12px;
  border-radius:12px;
  transition:.4s var(--ease);
  border:1px solid transparent;
  overflow:hidden;
}
.m-item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--oxblood);
  transition:width .45s var(--ease);
}
.m-item__num{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.18em;color:var(--dim);min-width:24px;}
.m-item__title{font-family:var(--f-serif);font-weight:700;font-style:italic;font-size:clamp(1.1rem, 1.6vw, 1.5rem);line-height:1;letter-spacing:-.01em;transition:transform .4s var(--ease),color .3s;}
.m-item__cat{font-family:var(--f-mono);font-size:.5rem;letter-spacing:.22em;color:var(--ash);text-transform:uppercase;}
.m-item:hover{background:rgba(255,255,255,.04);border-color:var(--line);}
.m-item:hover::before{width:3px;}
.m-item:hover .m-item__title{transform:translateX(6px);color:var(--bone);}
.m-item:hover .m-item__num{color:var(--oxblood);}

.m-hint{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px clamp(16px,4vw,40px);
  background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);
  pointer-events:none;
}
.m-hint__pill{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(10,9,8,.65);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:99px;padding:8px 16px;pointer-events:auto;
}
.m-hint__dot{width:7px;height:7px;border-radius:50%;background:var(--oxblood);box-shadow:0 0 8px var(--oxblood);animation:pulse 1.6s infinite;}
.m-hint__pill .mono{font-size:.6rem;}

/* Seletor de idiomas no rodapé do menu */
.lang {
  display: flex;
  align-items: center;
  gap: 12px;
  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;
  pointer-events: auto;
}
.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);
}

@media (max-width:900px){
  .m-hud{grid-template-columns:auto 1fr auto;}
  .m-hud__center{display:none;}
  .m-toolbar{gap:4px;}
  .m-tool span{display:none;}
  .m-tool::before{border:0;padding:0;font-size:.7rem;}
  .m-tool{padding:9px 12px;}
  .m-main{
    grid-template-columns:1fr;
    padding:80px 12px 100px;
    align-items:start;
    gap:14px;
    overflow-y:auto;
  }
  .m-brand{padding:16px;flex-direction:row;align-items:center;gap:12px;}
  .m-brand__logo{max-width:100px;}
  .m-brand__tag{display:none;}
  .m-brand__line{display:none;}
  .m-index{max-height:none;padding:6px;}
  .m-item{padding:10px 10px;gap:10px;}
  .m-item__title{font-size:1.2rem;}
  .m-item__cat{display:none;}
  .m-hint{flex-wrap:wrap;justify-content:center;gap:10px;}
  .lang{font-size:.6rem;padding:3px 10px;}
}
@media (max-width:480px){
  .m-logo{font-size:1.1rem;}
  .m-main{padding:70px 8px 90px;}
  .m-brand__logo{max-width:80px;}
  .m-item__title{font-size:1rem;}
}