/* =========================================================
   enlabs — home (index.html / en/index.html)
   Requer enlabs.css
   ========================================================= */

body{overflow-x:hidden;}
#home{width:100%;}

/* logo do nav só aparece quando o logo do hero sai (uma faísca por tela) */
.ec-nav-logo{opacity:0;}

/* ---------- scroll stage ---------- */
.ec-stage{position:relative;height:600vh;}
.ec-anchor{position:absolute;height:1px;width:1px;}
.ec-anchor--work{top:110vh;}
.ec-anchor--about{top:270vh;}
.ec-anchor--contact{top:450vh;}
.ec-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;}

/* ---------- hero ---------- */
.ec-hero{position:absolute;inset:0;}
.ec-slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05);
  opacity:0;transition:opacity 1.4s var(--ease-standard);
}
.ec-slide.is-active{opacity:1;}
.ec-hero-scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at center,rgba(11,10,16,.45) 0%,rgba(11,10,16,0) 70%),
    var(--scrim-void);
}

.ec-logo-layer{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
}
.ec-logo-row{display:flex;align-items:center;gap:clamp(28px,4vw,56px);}
/* Syne 800 is wide (~4.6em for "enlabs●"): 17vw keeps it inside the viewport on phones */
.ec-logo{margin:0;font-size:clamp(64px,17vw,168px);}

/* movimento "reação": as letras entram, o ponto acende, o descritor assenta */
@keyframes letterIn{
  from{opacity:0;filter:blur(8px);transform:translateY(10px);}
  to{opacity:1;filter:blur(0);transform:translateY(0);}
}
@keyframes dotIgnite{
  0%{opacity:0;transform:scale(.3);box-shadow:0 0 0 var(--ember);}
  60%{opacity:1;transform:scale(1.15);box-shadow:0 0 .6em var(--ember);}
  100%{opacity:1;transform:scale(1);box-shadow:0 0 .27em var(--ember);}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:translateY(0);}
}
.ec-logo-letter{display:inline-block;animation:letterIn .6s var(--ease-standard) both;}
.ec-logo .ec-wm i{animation:dotIgnite .9s var(--ease-standard) .75s both,emberFlicker 3.2s ease-in-out 1.65s infinite;}
.ec-logo .ec-ds{animation:fadeUp .6s var(--ease-standard) 1.2s both;}

.ec-arrows{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--mist);}
.ec-arrows svg path{stroke:currentColor;}
@keyframes scrollArrowGlow{0%,100%{opacity:.18;}50%{opacity:1;}}
.ec-scroll-arrow{animation:scrollArrowGlow 1.8s ease-in-out infinite;}

@media (prefers-reduced-motion: reduce){
  .ec-logo-letter,.ec-logo .ec-wm i,.ec-logo .ec-ds{animation:none !important;opacity:1 !important;filter:none !important;transform:none !important;}
  .ec-scroll-arrow{animation:none !important;opacity:.6 !important;}
}

/* ---------- overlays: work / about / contact ---------- */
.ec-overlay{position:absolute;inset:0;opacity:0;pointer-events:none;background:var(--void);}
.ec-overlay--work{z-index:4;background:rgba(11,10,16,.45);}
.ec-overlay--about{z-index:5;}
.ec-overlay--contact{z-index:6;background:transparent;}
.ec-overlay-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 25%;filter:grayscale(1) contrast(1.05);
}
.ec-overlay-scrim{
  position:absolute;inset:0;
  background:linear-gradient(to right,rgba(11,10,16,.92) 0%,rgba(11,10,16,.7) 55%,rgba(11,10,16,.45) 100%);
}
.ec-overlay-inner{
  position:relative;z-index:1;max-width:var(--content-max);margin:0 auto;
  padding:0 var(--content-pad);width:100%;height:100%;
  display:flex;flex-direction:column;justify-content:center;
}
.ec-overlay-head{display:flex;flex-direction:column;gap:16px;margin-bottom:32px;}

.ec-about-body{
  margin:0;font:400 16px/1.6 var(--font-body);
  color:var(--mist);max-width:62ch;white-space:pre-line;
}

/* ---------- work: horizontal project scroller ---------- */
.ec-work-scroll{
  display:flex;gap:4px;width:100%;overflow-x:auto;padding-bottom:16px;
  -webkit-overflow-scrolling:touch;scrollbar-color:var(--line-strong) transparent;
}
.ec-work-scroll::-webkit-scrollbar{height:4px;}
.ec-work-scroll::-webkit-scrollbar-track{background:var(--line);}
.ec-work-scroll::-webkit-scrollbar-thumb{background:var(--smoke);border-radius:0;}
.ec-work-item{
  position:relative;flex:0 0 auto;width:clamp(300px,32vw,460px);aspect-ratio:4/3;
  overflow:hidden;display:block;background:var(--graphite);
}
.ec-work-item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--duration-slow) var(--ease-standard);
}
.ec-work-item:hover img{transform:scale(1.04);}
.ec-work-item::after{
  content:"";position:absolute;inset:auto 0 0 0;height:45%;pointer-events:none;
  background:linear-gradient(to top,rgba(11,10,16,.85),rgba(11,10,16,0));
}
.ec-work-label{
  position:absolute;left:18px;bottom:16px;z-index:1;
  display:flex;flex-direction:column;gap:8px;
  font:800 clamp(20px,1.8vw,26px)/1 var(--font-display);letter-spacing:var(--tracking-title);
  color:var(--mist);
}

/* ---------- contact ---------- */
.ec-contact-body{
  margin:0 0 36px;font:500 clamp(20px,2.4vw,30px)/1.3 var(--font-display);
  letter-spacing:-.015em;max-width:30ch;color:var(--mist);
}
.ec-contact-cta{margin-bottom:48px;width:fit-content;}
.ec-socials{
  display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,48px);
  border-top:1px solid var(--line);padding-top:28px;
}
.ec-socials a{
  font:500 12px/1 var(--font-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--smoke);padding-bottom:7px;border-bottom:1px solid transparent;
  transition:color var(--duration-standard) var(--ease-standard),border-color var(--duration-standard) var(--ease-standard);
}
.ec-socials a:hover{color:var(--mist);border-bottom-color:var(--line-strong);}

/* ---------- mobile (<=820px) ---------- */
@media (max-width:820px){
  /* logo + scroll arrows: stack instead of cramming side by side */
  .ec-logo-row{flex-direction:column;gap:28px;}

  /* work: bigger single-card thumbs on mobile */
  .ec-work-item{width:88vw;}

  /* work / about / contact: align to top, tighten spacing, and allow internal scroll instead of hard-clipping long text */
  .ec-overlay-inner{
    justify-content:flex-start;
    padding-top:88px;padding-bottom:20px;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .ec-overlay-head{gap:12px;margin-bottom:20px;}
  .ec-about-body{font-size:14px;line-height:1.55;}
  .ec-overlay-scrim{background:rgba(11,10,16,.82);}
}