/* Everyhuman Studio: site-wide variables, first-paint background, entrance motion.
   Linked from the <head> of every page so it applies before anything renders.
   All tunable values live in :root below. See EDITING.md > Typography / Motion. */

:root {
  /* ---- Typography (Latin: EN, ES, NL) ---- */
  --eh-lh-display: 1.12;    /* large serif statements and headlines */
  --eh-lh-marquee: 1;       /* scrolling hero headline */
  --eh-lh-caption: 1.25;    /* project captions, accordion titles, medium serif text */
  --eh-lh-body: 1.5;        /* sans body text */
  --eh-ls-serif: -0.01em;   /* letter-spacing for serif text */
  --eh-ls-marquee: -0.01em;

  /* ---- Motion ---- */
  --reveal-distance: 50px;                      /* content rises from this far below */
  --reveal-duration: 1100ms;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-delay: 200ms;                        /* content starts this long after the header */
  --reveal-stagger: 120ms;                      /* gap between items in a row or grid */
  --reveal-scale: 0.96;                         /* images start at this scale */
  --reveal-brightness: 0.4;                     /* images start this dark */
  --header-fade: 700ms;
  --exit-duration: 220ms;                       /* whole page fades to black before the next page loads */
  --exit-ease: ease-out;
  --lang-fade: 160ms;                           /* text crossfade when switching language */
  --reveal-fallback: 1.5s;                      /* if scripts fail, everything shows after this */
  --marquee-seconds: 70s;                       /* hero headline: time for one copy of the text to pass. Higher = slower */
}

/* Japanese keeps more open leading and slightly smaller type. */
:root:lang(ja) {
  --eh-fs-serif: 0.76;      /* serif headlines and statements */
  --eh-fs-marquee: 0.6;     /* scrolling hero headline */
  --eh-fs-sans: 0.94;       /* nav and body */
  --eh-lh-display: 1.5;
  --eh-lh-marquee: 1.15;
  --eh-lh-caption: 1.6;
  --eh-lh-body: 1.8;
  --eh-ls-serif: 0.04em;
  --eh-ls-marquee: 0.03em;
  --eh-ls-sans: 0.04em;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: #0a0a09; color: #ecebe6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
a { color: #ecebe6; }
a:hover { color: #ffffff; }
a:focus-visible, button:focus-visible { outline: 1px solid #ecebe6; outline-offset: 5px; }
::selection { background: #dcdcd3; color: #0a0a09; }
[hidden] { display: none !important; }

/* ---- Hover states (kept out of the HTML) ---- */
.hv-dim:hover { opacity: 0.65 !important; }
.hv-dim-soft:hover { opacity: 0.75 !important; }
.hv-zoom:hover { transform: scale(1.035) !important; }
.hv-btn:hover { background: #f1f0ea !important; color: #0a0a09 !important; }
.hv-white:hover { background: #ffffff !important; }
.hv-cream:hover { background: #f1f0ea !important; }

/* ---- Header: desktop nav and language dropdown vs. mobile menu button (same 900px breakpoint as before) ---- */
.eh-desktop { display: contents; }
.eh-mobile { display: none; }
@media (max-width: 899.98px) {
  .eh-desktop { display: none; }
  .eh-mobile { display: contents; }
}
.eh-chevron { transition: transform .3s; }
[aria-expanded="true"] > .eh-chevron { transform: rotate(180deg); }

/* ---- Images and video stay invisible until loaded (no grey boxes), then fade in ---- */
.eh-img { opacity: 0; transition: opacity 700ms ease; }
.eh-img.is-loaded { opacity: 1; }
/* A failed or not-yet-loaded image stays invisible, so its alt text is never drawn over the black page. */

/* ---- Header scrim: barely-there dark gradient so the logo and nav stay readable on a light photo (Home hero) ---- */
.eh-header-scrim { position: absolute; top: 0; left: 0; right: 0; height: clamp(110px, 13vw, 190px); pointer-events: none; background: linear-gradient(180deg, rgba(10,10,9,0.34) 0%, rgba(10,10,9,0.14) 55%, rgba(10,10,9,0) 100%); }
@media (prefers-reduced-motion: reduce) { video.eh-img { display: none; } }

/* ---- "Email copied" note beside the footer email icon ---- */
.eh-copy-note { position: absolute; left: 0; bottom: calc(100% + 12px); z-index: 5; padding: 7px 14px; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 300ms ease, transform 300ms ease; background: #0a0a09; border: 1px solid #2a2a27; color: #cfcec7; font-size: 13px; letter-spacing: 0.01em; line-height: 1.3; }
.eh-copy-note.is-on { opacity: 1; transform: none; }
.eh-copy-note:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .eh-copy-note { transition: none; transform: none; } }

/* ---- Services accordion: plus becomes minus when open ---- */
[aria-expanded="true"] [data-plus] { display: none; }

/* ---- Entrance ---- */
@keyframes eh-show { to { opacity: 1; } }

/* Without js/motion.js everything still appears after --reveal-fallback. */
[data-reveal], [data-reveal-header] { opacity: 0; animation: eh-show .6s ease var(--reveal-fallback) forwards; }

html.eh-motion [data-reveal], html.eh-motion [data-reveal-header] { animation: none; }
html.eh-motion [data-reveal-header] { transition: opacity var(--header-fade) ease; }
html.eh-motion [data-reveal] {
  transform: translate3d(0, var(--reveal-distance), 0);
  transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease), filter var(--reveal-duration) var(--reveal-ease);
  transition-delay: var(--reveal-d, 0ms);
}
html.eh-motion [data-reveal][data-media] {
  transform: translate3d(0, var(--reveal-distance), 0) scale(var(--reveal-scale));
  filter: brightness(var(--reveal-brightness));
}
html.eh-motion [data-reveal] [data-media] {
  transform: scale(var(--reveal-scale));
  filter: brightness(var(--reveal-brightness));
  transition: transform var(--reveal-duration) var(--reveal-ease), filter var(--reveal-duration) var(--reveal-ease);
  transition-delay: var(--reveal-d, 0ms);
}
/* data-reveal="fade": no movement (full-bleed backgrounds, overlay controls). */
html.eh-motion [data-reveal="fade"], html.eh-motion [data-reveal="fade"][data-media] { transform: none; }

html.eh-motion [data-reveal-header].is-in,
html.eh-motion [data-reveal].is-in,
html.eh-motion [data-reveal][data-media].is-in,
html.eh-motion [data-reveal].is-in [data-media] { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  html.eh-motion [data-reveal], html.eh-motion [data-reveal][data-media], html.eh-motion [data-reveal] [data-media] {
    transform: none !important; filter: none !important; transition: opacity 400ms ease !important; transition-delay: 0ms !important;
  }
}

/* ---- Arriving from a language switch: no entrance, just a quick text crossfade ---- */
html.eh-instant [data-reveal], html.eh-instant [data-reveal-header], html.eh-instant [data-reveal] [data-media] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; animation: none !important; }
html.eh-lang-in [data-page] :is(h1, h2, h3, p, nav, button, [data-marquee]) { opacity: 0; animation: eh-show var(--lang-fade) ease var(--reveal-fallback) forwards; }
html.eh-lang-in.eh-lang-go [data-page] :is(h1, h2, h3, p, nav, button, [data-marquee]) { opacity: 1; animation: none; transition: opacity var(--lang-fade) ease; }

/* ---- Exit (internal link clicked): one fade of the whole page, header included ---- */
html.eh-leaving [data-page] { opacity: 0 !important; transition: opacity var(--exit-duration) var(--exit-ease) !important; pointer-events: none; }