/* ══════════════════════════════════════════════════════════════════════════
   IMPRESSIVE — the opening of the home (I-005 → I-009; was /new-design/ until 19/09/2026)

   Only what is the hero's own lives here: the stage, the galaxy, the glass
   mark, the type over it, and the sheet the site rises on. Tokens come from
   /static/imp-foundation.css; every shared component (capsule, sections,
   cards, pills, band, contact, footer) from /static/imp-brand.css. Load order
   in hero-lab.html: foundation → brand → this file.

   Two laws: only transform / opacity / clip-path ever animate; `html.calm`
   (reduced motion) and `html.fallback` show the composed opening, readable.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* local names the hero rules were written in, mapped to the identity */
  --void: var(--imp-bg);
  --ink: var(--imp-text);
  --ink-soft: var(--imp-text-2);
  --ink-faint: var(--imp-text-3);
  --line: var(--imp-line);
  --pink: var(--imp-pink);
  --font: var(--imp-font);
  --ease: var(--imp-ease);
  --gutter: var(--imp-gutter);
}
/* (The page's base — box-sizing, body, resets, the skip link — is the
   brand's: imp-brand.css and imp-foundation.css. Nothing of it here.) */

/* ── Stage ──────────────────────────────────────────────────────────────── */
.journey { position: relative; min-height: 100svh; }
.stage {
  position: relative; width: 100%; height: 100svh;
  overflow: clip; isolation: isolate;
  /* The light pass reads this perspective; the world itself never tilts. */
  perspective: 950px; perspective-origin: 50% 42%;
  background: var(--void);
}
.galaxy { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* The logo's own light on the space around it: a reflection, not a neon sign. */
.halo {
  position: absolute; left: 0; top: 0; z-index: 1; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; transform-origin: 0 0; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(214, 60, 214, .26), rgba(150, 40, 190, .12) 42%, rgba(80, 30, 140, .04) 70%, transparent 100%);
}

/* ── The world: the mark at viewBox size, moved by one transform ─────────── */
.world {
  position: absolute; top: 0; left: 0; z-index: 2;
  width: 2000px; height: 2000px;
  transform-origin: 0 0; transform-style: preserve-3d;
  will-change: transform, opacity;
}
.world > * { position: absolute; inset: 0; }
[data-clip] { clip-path: url(#imp-mark-clip); }
.road-gl { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
html.fallback .road-gl { display: none; }

/* 1 · refraction: the galaxy behind, smeared and lit inside the material */
.glass-refract > i {
  position: absolute; inset: 0; display: block;
  -webkit-backdrop-filter: blur(var(--refract, 9px)) saturate(175%);
  backdrop-filter: blur(var(--refract, 9px)) saturate(175%);
}
/* 2 · body: internal illumination, magenta emitted from inside the glass */
.glass-body {
  background:
    radial-gradient(75% 55% at 28% 22%, rgba(255, 179, 221, .42), transparent 62%),
    radial-gradient(60% 45% at 78% 74%, rgba(139, 47, 201, .55), transparent 65%),
    linear-gradient(152deg, rgba(255, 16, 144, .58) 0%, rgba(192, 9, 193, .42) 46%, rgba(40, 14, 56, .52) 100%);
  mix-blend-mode: screen; opacity: .72;
}
/* 3 · specular: one soft highlight */
.glass-spec { overflow: hidden; mix-blend-mode: screen; opacity: .85; }
.glass-spec i {
  position: absolute; left: 50%; top: 50%;
  width: var(--spec, 520px); height: var(--spec, 520px);
  translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .5), rgba(255, 214, 239, .16) 45%, transparent 72%);
}
.mark { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Edge highlights on the REAL outline, divided by the camera scale (--sc) so a
   highlight stays a highlight as the mark shrinks into the nav. */
.mark .edge { fill: none; stroke: url(#imp-edge); stroke-width: calc(1.5px / var(--sc, 1)); }
.mark .edge-soft { fill: none; stroke: rgba(255, 45, 130, .5); stroke-width: calc(5px / var(--sc, 1)); opacity: .5; }
.mark .edge-chroma-a { fill: none; stroke: rgba(255, 60, 180, .22); stroke-width: calc(1.2px / var(--sc, 1));
  transform: translate(calc(1.2px / var(--sc, 1)), calc(-1.2px / var(--sc, 1))); }
.mark .edge-chroma-b { fill: none; stroke: rgba(120, 220, 255, .18); stroke-width: calc(1.2px / var(--sc, 1));
  transform: translate(calc(-1.2px / var(--sc, 1)), calc(1.2px / var(--sc, 1))); }
.mark .bevel { mix-blend-mode: screen; opacity: .6; }
html.lite .mark .edge-chroma-a, html.lite .mark .edge-chroma-b { display: none; }
/* Lucas, 18/09 (iPhone: "olha essas linhas"): Safari paints the backdrop
   filter in the element's rectangle and does not clip it to the mark, so the
   world's box showed as a faint lit rectangle over the sky. On touch devices
   the refraction layer is simply off — the body, bevel and edges carry the
   glass; nothing is lost that a thumb could see. */
html.lite .glass-refract { display: none; }
@media (pointer: coarse) { .glass-refract { display: none; } }
@media (prefers-reduced-transparency: reduce) {
  .glass-refract { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(24, 12, 34, .72); }
}
html.calm .glass-spec, html.fallback .glass-spec { display: none; }

/* ── Type: one line of promise, then the mark's move takes the frame ─────── */
.type {
  position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter);
  bottom: clamp(2.5rem, 9vh, 6.5rem);
  display: grid; gap: clamp(.7rem, 1.6vh, 1.1rem); justify-items: start;
  pointer-events: none; will-change: transform, opacity;
}
.eyebrow { font-size: .7rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-faint); }
.brand {
  display: grid; font-weight: 600;
  font-size: var(--imp-h1); line-height: .94; letter-spacing: -.048em;
  text-wrap: balance;
}
.brand em { font-style: normal; color: var(--pink); }
.tag { max-width: 36ch; font-size: clamp(.95rem, 1.15vw, 1.15rem); font-weight: 400; letter-spacing: -.005em; color: var(--ink-soft); }
.cue { display: flex; align-items: center; gap: .7rem; margin-top: .6rem; font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-faint); }
.cue span { width: 36px; height: 1px; background: linear-gradient(90deg, var(--pink), transparent); }
html.calm .cue, html.fallback .cue { display: none; }
@media (max-width: 760px) {
  .type { bottom: clamp(1.6rem, 6vh, 3rem); }
  .brand { font-size: clamp(2.2rem, 11vw, 3.2rem); }
  .tag { font-size: .92rem; max-width: 30ch; }
}

/* ── The sheet the site rises on ────────────────────────────────────────── */
/* Opaque, with a hairline and a soft top edge, so it reads as a surface
   arriving over the sky (the stage is pinned with no spacing). */
.site {
  position: relative; z-index: 4;
  background: var(--void);
  border-top: 1px solid var(--line);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, .8);
}
@media (max-width: 760px) { .site { border-radius: 20px 20px 0 0; } }
.sec-services { padding-top: clamp(3rem, 7vw, 6rem); }