/*
  ENVENOX landing page.
  Brand: the "Forge" palette (ink, paper, one red) and Inter Tight + Inter, from D:\project\envenox.
  Composition: the "type-only-statement" direction from the design-taste-frontend skill
  (seed 1874215551), with the robot scene as the first screen. See LANDING-PLAN.md.
*/

/* ------------------------------------------------------------------ tokens */

:root {
  --ink: #0f1113;
  --ink-2: #16181b;
  --paper: #fafafa;
  --paper-2: #f0f1f2;
  --paper-3: #dfe1e4;
  --studio: #dfdfdf;
  --soft-on-paper: #5a6068;
  --soft-on-ink: #9aa1aa;
  --accent: #e11d2e;          /* the one brand red: fills and the active state, never headings */
  --accent-hover: #c8152a;
  --accent-on-paper: #a5111e;
  --accent-on-ink: #ff5a4e;

  --f-display: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* five type steps, no more */
  --t-small: 15px;
  --t-body: 18px;
  --t-state: clamp(23px, 2.35vw, 34px);       /* statements, questions, table rows */
  --t-head: clamp(32px, 5.6vw, 92px);         /* section headlines and poster lists */
  --t-giant: 23vw;                            /* the wordmark and the two specimens */

  /* one pair of page margins, one grid, one section rhythm */
  --m: clamp(20px, 3.3vw, 48px);
  --col-gap: clamp(12px, 2vw, 32px);
  --gap: clamp(112px, 13vw, 208px);

  /* the brand's motion tokens */
  --ease: cubic-bezier(0, 0, 0.2, 1);
  --t-fast: 0.15s;
  --t-base: 0.3s;
  --t-slow: 0.6s;
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-body)/1.55 var(--f-text);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}

.section { padding: var(--gap) var(--m); position: relative; }
.on-ink { background: var(--ink); color: var(--paper); }
.on-paper { background: var(--paper); color: var(--ink); }
.on-paper-2 { background: var(--paper-2); color: var(--ink); }
.on-studio { background: var(--studio); color: var(--ink); }

.head {
  font: 600 var(--t-head)/1.02 var(--f-display);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.state {
  font: 500 var(--t-state)/1.22 var(--f-display);
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.soft { color: var(--soft-on-paper); }
.on-ink .soft { color: var(--soft-on-ink); }
.small { font-size: var(--t-small); line-height: 1.5; }
.line { display: block; }

/* one button shape, decided once: square corners, flat fill */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 28px;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  color: #fff;
  font: 600 17px/1 var(--f-display);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(2px); }
.btn--paper { background: var(--paper); color: var(--ink); }
.btn--paper:hover { background: var(--paper-3); }

.link {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  transition: text-underline-offset var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.link:hover { text-underline-offset: 0.34em; }

/* ------------------------------------------------------------------ hero: the robot's studio */

/*
  The studio is a CSS gradient measured down a clean column of the reference video: a flat 223
  wall, then a floor that darkens toward the viewer. --h, the horizon, is set by hero.js from
  the camera. This is the page's one gradient, and it is the floor of a 3D scene.
*/
.hero {
  --h: 69%;
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  color: var(--ink);
  background: linear-gradient(to bottom, /* taste-skill-ignore: the floor of the 3D studio, measured from the reference video */
    #dfdfdf 0%,
    #dfdfdf calc(var(--h) - 4%),
    #d8d8d8 var(--h),
    #c9c9c9 calc(var(--h) + 5.5%),
    #bdbdbd calc(var(--h) + 11%),
    #b4b4b4 calc(var(--h) + 16.5%),
    #afafaf calc(var(--h) + 22%),
    #ababab calc(var(--h) + 28%),
    #a9a9a9 100%);
}
.hero canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  /* horizontal drags steer the robot; vertical swipes still scroll on touch screens */
  touch-action: pan-y;
  outline: none;
}
.hero.no-webgl canvas { display: none; }

/* the top row: wordmark, two links on the 42% axis, the booking button */
.topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 42% 1fr auto;
  align-items: center;
  padding: clamp(20px, 3.2vh, 34px) var(--m) 0;
  font-size: 16px;
}
.topbar__mark {
  font: 800 26px/1 var(--f-display);
  letter-spacing: -0.045em;
  text-decoration: none;
}
.topbar__links { display: flex; gap: 28px; }
.topbar__links a { text-decoration: none; transition: color var(--t-base) var(--ease); }
.topbar__links a:hover { color: var(--accent-on-paper); }
.btn--top { min-height: 46px; padding: 0 22px; font-size: 16px; }
@media (max-width: 600px) {
  .topbar { grid-template-columns: 1fr auto; }
  .topbar__links { display: none; }
  .btn--top { min-height: 40px; padding: 0 16px; font-size: 14px; }
}
.x { color: var(--accent); }

/*
  The giant wordmark on the studio wall: the page's h1. Flat paper-white letters, one step lighter
  than the wall, and the head's light falls on them: hero.js sets --wx/--wy (where the head is)
  and --gc (its colour), so the letters near the robot glow in whatever colour its head is showing.
*/
.wall {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.wordmark {
  position: absolute;
  left: 0; right: 0;
  /* just above the top of the robot's dome (--dome is set by hero.js from the camera), so the
     robot stands below the name and never covers it; its head light still reaches the letters */
  top: calc(var(--dome, 45svh) - 0.74em - 2.2svh);
  text-align: center;
  font: 800 var(--t-giant)/0.74 var(--f-display);
  /* after the shorthand, which would reset it: on short, wide screens, never so large that it
     reaches up into the navigation */
  font-size: min(var(--t-giant), calc((var(--dome, 45svh) - 92px) / 0.62));
  letter-spacing: -0.045em;
  color: transparent;
  background: /* taste-skill-ignore: the robot's head light falling on the letters, live */
    radial-gradient(circle at var(--wx, -50vw) var(--wy, -50vh), /* taste-skill-ignore: as above */
      color-mix(in srgb, var(--gc, #ffffff) 70%, #ffffff) 0,
      color-mix(in srgb, var(--gc, #ffffff) 38%, transparent) 7vw,
      transparent 19vw),
    linear-gradient(#f4f4f4, #f4f4f4); /* taste-skill-ignore: a flat fill, written as a layer under the light */
  -webkit-background-clip: text; /* taste-skill-ignore: lets the head's light land on the glyphs only */
  background-clip: text; /* taste-skill-ignore: as above */
  /* flat, one step lighter than the wall: paper-white letters, no relief and nothing cast */
  user-select: none;
}
.wordmark .x { color: var(--accent); }

/* the glass heart bubble, as the client asked: the one thing in the hero that truly floats */
.bubble {
  --tint: #ffffff;
  position: absolute;
  left: 0; top: 0;
  z-index: 2;
  width: clamp(46px, 3.6vw, 60px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 30%;
  background: color-mix(in srgb, var(--tint) 16%, rgb(255 255 255 / 0.30));
  -webkit-backdrop-filter: blur(14px) saturate(170%); /* taste-skill-ignore: glass, by the client's request */
  backdrop-filter: blur(14px) saturate(170%); /* taste-skill-ignore: glass, by the client's request */
  border: 1px solid rgb(255 255 255 / 0.65); /* taste-skill-ignore: the glass rim */
  box-shadow: /* taste-skill-ignore: it floats over the scene */
    inset 0 1px 1px rgb(255 255 255 / 0.9),
    inset 0 -8px 14px rgb(255 255 255 / 0.16),
    0 12px 28px -10px rgb(15 17 19 / 0.28);
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}
.bubble svg { width: 46%; fill: var(--accent); filter: drop-shadow(0 2px 3px rgb(165 17 30 / 0.35)); /* taste-skill-ignore: the heart sits in the glass */ }


/* ------------------------------------------------------------------ hero motion */

/*
  The signature move: the wordmark rises while a clip opens upward from its baseline, so it
  comes up from behind the line. It animates as ONE element on purpose: letters transformed one
  by one inside text whose fill is clipped from its background drop out of that clip while they
  move (Chrome), which left the title half-painted at 1.2 s. Settles by about 1.0 s.
*/
.js .wordmark { clip-path: inset(100% -6% -30% -6%); transform: translateY(16%); }
.js .wordmark.is-in {
  clip-path: inset(-12% -6% -30% -6%);
  transform: none;
  transition: clip-path 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
}
.js .topbar { opacity: 0; transform: translateY(10px); }
.js .hero.is-in .topbar {
  opacity: 1; transform: none;
  transition: opacity 0.5s var(--ease) 0.4s, transform 0.5s var(--ease) 0.4s;
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js .wordmark, .js .topbar { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .wordmark { clip-path: none !important; }
}