/* EmTech Oil — shared styles */

:root {
  /* Charcoal / near-black (was "navy") — kept variable names for compatibility */
  --navy-950: #0A0A0A;
  --navy-900: #121212;
  --navy-800: #1A1A1A;
  --navy-700: #232323;
  --navy-600: #2E2E2E;
  --navy-500: #3D3D3D;
  --navy-300: #8A8A8A;
  --navy-200: #B5B5B5;
  --navy-100: #D8D8D8;

  /* Orange (logo droplet) — kept "copper" variable names for compatibility */
  --copper-700: #B8650A;
  --copper-600: #D27812;
  --copper-500: #E68C19;
  --copper-400: #F39B1F;
  --copper-300: #F5B654;

  /* Red accent (logo flame) */
  --flame-700: #B82018;
  --flame-600: #D02720;
  --flame-500: #E63027;
  --flame-400: #EF5048;

  --paper: #F7F5F0;
  --paper-2: #ECE8DF;
  --paper-3: #E2DDD1;

  --ink-900: #121212;
  --ink-700: #2E2E2E;
  --ink-500: #5D5D5D;
  --ink-400: #8A8A8A;

  /* Copper as small TEXT on light backgrounds — ≥4.5:1 (WCAG 1.4.3).
     Copper-500/400 stay for graphic elements, large display type and logos. */
  --copper-text: #7A4D00;
  /* Burnt orange for inline LINKS on cream — ≥4.5:1 while staying visibly orange */
  --copper-link: #B85C12;

  --rule: rgba(18, 18, 18, 0.10);
  --rule-strong: rgba(18, 18, 18, 0.18);

  --font-display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html, body {
  background: var(--paper);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11";
}

body {
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

.font-display { font-family: var(--font-display); letter-spacing: -0.02em; }
.font-mono { font-family: var(--font-mono); }

/* Type scale */
.h-display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.t-1 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.02;
}
.t-2 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.08;
}
.t-3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.15;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-text);
}
.text-copper-text { color: var(--copper-text); }
.eyebrow-muted {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.label-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* Skip link — first tab stop on every page; visible only on focus (WCAG 2.4.1) */
.skip-link {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 300;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 4px;
  background: var(--navy-900);
  color: #FFF;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateY(calc(-100% - 20px));
}
.skip-link:focus {
  transform: none;
  outline: 2px solid var(--copper-500);
  outline-offset: 2px;
}
#main-content:focus { outline: none; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--copper-500);
  color: var(--ink-900); /* was #FFF — 2.58:1 on copper; ink-900 gives 7.19:1 (WCAG 1.4.3) */
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 1px 2px rgba(18,18,18,0.15);
}
.btn-primary:hover { background: var(--copper-600); }

.btn-dark {
  background: var(--navy-900);
  color: #FFF;
}
.btn-dark:hover { background: var(--navy-800); }

.btn-ghost {
  background: transparent;
  color: var(--ink-900);
  border-color: rgba(18,18,18,0.35); /* was --rule-strong (~0.18) — too faint to read as a control */
}
.btn-ghost:hover { background: rgba(18,18,18,0.04); }

.btn-ghost-light {
  background: rgba(255,255,255,0.05);
  color: #FFF;
  border-color: rgba(255,255,255,0.45); /* was 0.22 — too faint on the dark field */
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.12); }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-900);
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
  transition: color .15s ease, border-color .15s ease;
}
.btn-link:hover { color: var(--copper-link); border-color: var(--copper-link); }
.btn-link.on-dark { color: #FFF; border-color: rgba(255,255,255,0.3); }
.btn-link.on-dark:hover { color: var(--copper-300); border-color: var(--copper-400); }

/* Container */
.container-x {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 768px) {
  .container-x { padding-left: 40px; padding-right: 40px; }
}
@media (min-width: 1280px) {
  .container-x { padding-left: 56px; padding-right: 56px; }
}

/* Hairline grid lines */
.rule-t { border-top: 1px solid var(--rule); }
.rule-b { border-bottom: 1px solid var(--rule); }
.rule-l { border-left: 1px solid var(--rule); }

.rule-t-dark { border-top: 1px solid rgba(255,255,255,0.10); }
.rule-b-dark { border-bottom: 1px solid rgba(255,255,255,0.10); }
.rule-l-dark { border-left: 1px solid rgba(255,255,255,0.10); }

/* Grid background overlay (subtle, technical) */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(18,18,18,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18,18,18,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
}
.grid-bg-dark {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 80px 80px;
}

/* Nav */
.nav-link {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-700);
  letter-spacing: -0.005em;
  transition: color .15s ease;
}
.nav-link:hover { color: var(--ink-900); }
.nav-link.on-dark { color: rgba(255,255,255,0.78); }
.nav-link.on-dark:hover { color: #FFF; }

/* Cards */
.card {
  background: #FFF;
  border: 1px solid var(--rule);
  border-radius: 6px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card-hover:hover {
  border-color: var(--rule-strong);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -16px rgba(18,18,18,0.18);
}

/* Tag/Pill */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--rule-strong);
  color: var(--ink-700);
  background: rgba(255,255,255,0.6);
}
.tag.on-dark {
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.04);
}
.tag-copper {
  border-color: rgba(185,105,75,0.4);
  color: var(--copper-text);
  background: rgba(185,105,75,0.08);
}
.tag-copper.on-dark {
  border-color: rgba(222,163,136,0.3);
  color: var(--copper-300);
  background: rgba(185,105,75,0.12);
}

/* Dot indicator */
.dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--copper-500);
  display: inline-block;
}
.dot-live {
  background: #4ADE80;
  box-shadow: 0 0 0 3px rgba(74,222,128,0.18);
}

/* Section number */
.sec-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-500);
  letter-spacing: 0.08em;
}

/* Reveal — JS arms it, then plays a fade-up via animation. `reveal-done` locks
   the visible end-state without depending on the animation clock, so content can
   never stay stuck hidden (e.g. in an unpainted/background tab). */
@keyframes revealUp {
  0%   { opacity: 0; transform: translateY(30px) scale(.988); filter: blur(8px); }
  45%  { opacity: 1; }
  62%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.js-reveal-armed .reveal {
  opacity: 0;
  transform: translateY(30px) scale(.988);
  filter: blur(8px);
  will-change: opacity, transform, filter;
}
/* Even, decelerating glide (easeOutCubic): opacity resolves early for readability
   while the rise keeps settling, with a faint scale for depth and a focus-pull on
   the blur. Reads natural, futuristic and premium rather than snappy. */
.js-reveal-armed .reveal.reveal-play { animation: revealUp 1.25s cubic-bezier(.215,.61,.355,1) both; }
.js-reveal-armed .reveal.reveal-done { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal-armed .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .js-reveal-armed .reveal.reveal-play { animation: none; }
  .container-cell, .container-cell .cell-shape, .img-card img, .btn, .arrow-line { transition: none; }
  .container-cell:hover { transform: none; }
  .img-card:hover img { transform: none; }
}

/* Subtle shine on hero image card */
.hero-img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: var(--navy-800);
}
.hero-img-wrap::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,18,18,0.0) 40%, rgba(18,18,18,0.55) 100%);
  pointer-events: none;
}

/* Brand wordmark */
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.04em;
  font-size: 22px;
  color: var(--ink-700);
  transition: color .2s ease;
}
.wordmark:hover { color: var(--ink-900); }
.wordmark.on-dark { color: rgba(255,255,255,0.7); }
.wordmark.on-dark:hover { color: #FFF; }
.wordmark.starfire {
  color: var(--ink-900);
  letter-spacing: 0.02em;
  font-weight: 700;
  font-size: 22px;
}
.wordmark.starfire.on-dark { color: #FFF; }

/* EmTech logo mark */
.emtech-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: 18px;
  color: var(--ink-900);
}
.emtech-mark.on-dark { color: #FFF; }
.emtech-mark .mark-glyph {
  width: 26px; height: 26px; border-radius: 4px;
  background: var(--navy-900);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.emtech-mark.on-dark .mark-glyph {
  background: var(--copper-500);
}
.emtech-mark .mark-glyph::before {
  content: "";
  position: absolute;
  width: 10px; height: 2px;
  background: var(--copper-500);
  top: 9px; left: 8px;
}
.emtech-mark.on-dark .mark-glyph::before {
  background: #FFF;
}
.emtech-mark .mark-glyph::after {
  content: "";
  position: absolute;
  width: 6px; height: 2px;
  background: var(--copper-500);
  top: 14px; left: 8px;
}
.emtech-mark.on-dark .mark-glyph::after {
  background: #FFF;
}

/* Bitmap logo */
.emtech-logo {
  height: 64px;
  width: auto;
  display: block;
}
@media (max-width: 640px) {
  .emtech-logo { height: 54px; }
}
.emtech-mark.on-dark .emtech-logo {
  /* Logo is transparent — gear is dark; on dark navs we lift it slightly */
  filter: brightness(1.05) contrast(1.05);
}

/* Header logo descriptor — hairline-separated, hidden when the nav is tight */
.logo-desc {
  display: none;
  padding-left: 14px;
  border-left: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink-500);
  white-space: nowrap;
}
@media (min-width: 1100px) { .logo-desc { display: inline-block; } }

/* Image fallback shimmer */
.img-skeleton {
  background: linear-gradient(110deg, var(--navy-800) 30%, var(--navy-700) 50%, var(--navy-800) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Marquee for brand wall */
@keyframes scroll-x {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee {
  display: flex;
  width: max-content;
  animation: scroll-x 50s linear infinite;
}
.marquee.is-paused { animation-play-state: paused; }
/* WCAG 2.2.2 / 2.3.3 — no motion for users who asked for none */
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; }
}
/* keyboard-operable pause control next to the marquee eyebrow */
.marquee-toggle {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  background: none;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 3px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.marquee-toggle:hover { color: #FFF; border-color: rgba(255,255,255,0.7); }
.marquee-toggle:focus-visible { outline: 2px solid var(--copper-500); outline-offset: 2px; }

/* Fine selection */
::selection { background: var(--copper-500); color: #FFF; }

/* Form inputs */
.input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  background: #FFF;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-900);
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Placeholder hints must clear 4.5:1 on white (audit N7a) */
.input::placeholder { color: #6b7280; }
.input:focus {
  outline: none;
  border-color: var(--copper-500);
  box-shadow: 0 0 0 3px rgba(230,140,25,0.6); /* ring lifted to ≥0.60 alpha (WCAG 2.4.7 / 2.4.11) */
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--navy-900);
  z-index: 100;
  display: none;
  flex-direction: column;
  padding: 80px 24px 32px;
}
.mobile-menu.open { display: flex; }

/* Subtle ascii-y arrow chip */
.arrow-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--copper-500);
  color: #FFF;
  flex-shrink: 0;
}

/* Hero-specific */
.hero-grid::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.10) 20%, rgba(255,255,255,0.10) 80%, transparent);
  pointer-events: none;
}

/* Tabular nums */
.tabular { font-variant-numeric: tabular-nums; }

/* Underline-on-hover navigation arrow */
.arrow-line {
  display: inline-block;
  transition: transform .2s ease;
}
.btn:hover .arrow-line, a:hover .arrow-line { transform: translateX(3px); }

/* Catalog category card */
.cat-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 32px 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 900px) {
  .cat-row {
    grid-template-columns: 200px 1fr 1fr 200px;
    gap: 40px;
    align-items: start;
    padding: 40px 0;
  }
}

/* Container scale visual */
.container-scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  align-items: end;
}
@media (max-width: 700px) {
  .container-scale { grid-template-columns: repeat(5, 1fr); gap: 8px; }
}

.container-cell {
  position: relative;
  cursor: pointer;
  transition: transform .25s ease;
}
.container-cell:hover { transform: translateY(-4px); }
.container-cell .cell-shape {
  margin: 0 auto 12px;
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 4px;
  position: relative;
  transition: background .2s ease, border-color .2s ease;
}
.container-cell:hover .cell-shape {
  background: var(--copper-700);
  border-color: var(--copper-500);
}
.container-cell.is-active .cell-shape {
  background: var(--copper-500);
  border-color: var(--copper-400);
}

/* Step number chips — 01–03 solid, 04 ghost-outline (color variation, not
   contrast reduction; all descriptions stay at full contrast) */
.step-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--copper-500);
  color: var(--ink-900);
  border: 1px solid var(--copper-500);
}
.step-chip--ghost {
  background: transparent;
  color: var(--copper-text);
  border: 1px dashed var(--copper-600);
}

/* Semantic list wrappers for step/card sequences (<ol>/<li>) — reset the list
   box only; the <li> cells carry their own utility padding. */
.list-reset { list-style: none; margin: 0; padding: 0; }

/* Dashed "+ more, sourced on request" end-cap in the brand marquee */
.brand-more-chip {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border: 1px dashed rgba(255,255,255,0.45);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
a.brand-more-chip:hover { color: #FFF; border-color: rgba(255,255,255,0.8); }

/* Visible focus everywhere, never hidden under the sticky header (WCAG 2.4.7 / 2.4.11) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--copper-600);
  outline-offset: 2px;
}
[id] { scroll-margin-top: 100px; }

/* The prebuilt tailwind.css orders .md\:grid-cols-2 after .lg\:grid-cols-5, so
   the md rule wins at ≥1024px and the Industries grid collapses to 2 columns.
   Re-assert the 5-column layout at lg. */
@media (min-width: 1024px) {
  #industries .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Service step */
.step-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--copper-text);
  letter-spacing: 0.1em;
}

/* Industries icon box */
.icon-box {
  width: 44px; height: 44px;
  border-radius: 4px;
  background: var(--paper-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-900);
  border: 1px solid var(--rule);
}

/* Diagonal "tech-ish" frame for hero stat */
.stat-frame {
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(2px);
}

/* Print-style data block */
.spec-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  font-size: 14px;
}
.spec-row:first-child { border-top: 0; }
.spec-row .spec-key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding-top: 2px;
}

/* Image card hover */
.img-card {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: var(--navy-800);
}
.img-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.6,.2,1);
}
.img-card:hover img { transform: scale(1.04); }

/* =========================================================================
   BRAND SPLASH LOADER — shown once per session on page load, then fades out.
   Pure CSS + SVG (the only JS is the timed removal). Zero layout shift:
   everything animates with transform / opacity / clip-path only.
   ========================================================================= */
/* ============================================================ brand logos */
/* Real brand marks from Brand Assets (assets/brands/). */
.brand-logo { width: 118px; height: 44px; object-fit: contain; object-position: left center; display: block; }
.brand-logo.on-dark { filter: brightness(0) invert(1); opacity: 0.8; object-position: center; }
.brand-logo.brand-logo-lg { width: 150px; height: 52px; }
.brand-logo.brand-logo-sm { width: 110px; height: 40px; }

.emtech-splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 38%, #1c1c1f 0%, #121212 46%, #0A0A0A 100%);
  opacity: 1;
  transition: opacity .5s ease;
  /* safety net: never trap the page behind the splash if the script fails */
  animation: emtechSplashSafety 0s linear 5s forwards;
}
.emtech-splash::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 42%, #000 0%, transparent 78%);
          mask-image: radial-gradient(70% 60% at 50% 42%, #000 0%, transparent 78%);
}
.emtech-splash.is-hiding { opacity: 0; pointer-events: none; }
@keyframes emtechSplashSafety { to { opacity: 0; visibility: hidden; pointer-events: none; } }
html.splash-lock, body.splash-lock { overflow: hidden; }
/* Safety net: the splash scroll-lock can NEVER trap the page — even if the
   script that removes the class dies, overflow is forced back after 6s. */
html.splash-lock { animation: emtechLockSafety 0s linear 6s forwards; }
@keyframes emtechLockSafety { to { overflow: visible; } }

.emtech-loader {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  width: clamp(170px, 32vmin, 300px);
  transform-origin: 50% 50%;
  animation: emtech-exit 3.5s cubic-bezier(0.4,0,0.2,1) infinite both;
  will-change: transform, opacity;
}
.emtech-loader__mark { width: 100%; display: block; overflow: visible; }

.gear-cog { fill: url(#emtechGear);
  animation: gearfill-in 3.5s cubic-bezier(0.4,0,0.2,1) infinite both; will-change: opacity; }
.gear-cog-line {
  fill: none; stroke: url(#emtechSilver); stroke-width: 3.5;
  stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: gear-draw 3.5s cubic-bezier(0.4,0,0.2,1) infinite both;
  will-change: stroke-dashoffset;
}

.drop-group { animation: glow-pulse 3.5s cubic-bezier(0.4,0,0.2,1) infinite both; }
.drop-outline {
  fill: none; stroke: url(#emtechSilver); stroke-width: 7;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 760; stroke-dashoffset: 760;
  animation: drop-draw 3.5s cubic-bezier(0.4,0,0.2,1) infinite both;
  will-change: stroke-dashoffset;
}
.drop-base { fill: rgba(243,155,31,0.10); }
.liquid { animation: fill-rise 3.5s cubic-bezier(0.4,0,0.2,1) infinite both; will-change: transform; }
.liquid__wave { fill: url(#emtechOil); animation: wave-scroll 1.1s linear infinite; will-change: transform; }
.liquid__wave--back { fill: url(#emtechOilBack); animation: wave-scroll 1.7s linear infinite reverse; opacity: .65; }
.flame { fill: url(#emtechFlame); transform-box: fill-box; transform-origin: 50% 100%;
  animation: flame-in 3.5s cubic-bezier(0.4,0,0.2,1) infinite both; will-change: transform, opacity; }
.glint__bar { fill: url(#emtechGlint);
  animation: glint-sweep 3.5s cubic-bezier(0.4,0,0.2,1) infinite both; will-change: transform, opacity; }

.emtech-loader__word {
  margin-top: clamp(18px, 4vmin, 28px);
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(20px, 4.4vmin, 36px); line-height: 1; white-space: nowrap;
  -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0);
  animation: word-wipe 3.5s cubic-bezier(0.4,0,0.2,1) infinite both;
  will-change: clip-path, opacity;
}
.emtech-loader__word .em { color: var(--flame-500); }
.emtech-loader__word .tech { color: #fff; }
.emtech-loader__word .oil { color: var(--copper-400); }
.emtech-loader__sub {
  margin-top: 14px; font-family: var(--font-mono);
  font-size: clamp(9px, 1.5vmin, 11px); letter-spacing: 0.34em; text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  animation: sub-in 3.5s cubic-bezier(0.4,0,0.2,1) infinite both;
}

@keyframes emtech-exit {
  0%   { opacity: 0; transform: scale(.975); }
  6%   { opacity: 1; transform: scale(1); }
  77%  { opacity: 1; transform: scale(1); }
  87%  { opacity: 1; transform: scale(1.012); }
  100% { opacity: 0; transform: scale(1.05); }
}
@keyframes gear-draw { 0% { stroke-dashoffset: 1000; } 16% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes gearfill-in { 0%,12% { opacity: 0; } 28% { opacity: 1; } 100% { opacity: 1; } }
@keyframes teeth-in {
  0%,6% { opacity: 0; transform: scale(.6) rotate(-14deg); }
  20%   { opacity: 1; transform: scale(1) rotate(0deg); }
  100%  { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes hub-in { 0%,10% { opacity: 0; } 22% { opacity: .5; } 100% { opacity: .5; } }
@keyframes drop-draw { 0%,8% { stroke-dashoffset: 760; } 22% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes fill-rise {
  0%,20% { transform: translateY(86px); }
  77%    { transform: translateY(-52px); }
  100%   { transform: translateY(-52px); }
}
@keyframes wave-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-80px); } }
@keyframes glow-pulse {
  0%,20% { filter: drop-shadow(0 0 0 rgba(243,155,31,0)); }
  34%    { filter: drop-shadow(0 0 10px rgba(243,155,31,0.35)); }
  50%    { filter: drop-shadow(0 0 22px rgba(243,155,31,0.6)); }
  66%    { filter: drop-shadow(0 0 12px rgba(243,155,31,0.4)); }
  77%    { filter: drop-shadow(0 0 20px rgba(243,155,31,0.55)); }
  100%   { filter: drop-shadow(0 0 6px rgba(243,155,31,0.25)); }
}
@keyframes flame-in {
  0%,32% { opacity: 0; transform: translateY(10px) scaleY(.7); }
  50%    { opacity: 1; transform: translateY(0) scaleY(1.06); }
  62%    { opacity: 1; transform: translateY(0) scaleY(.97); }
  77%    { opacity: 1; transform: translateY(0) scaleY(1.02); }
  100%   { opacity: 1; transform: translateY(0) scaleY(1); }
}
@keyframes glint-sweep {
  0%,77%  { opacity: 0; transform: translateX(-150px); }
  80%     { opacity: 1; }
  87%     { opacity: 1; transform: translateX(150px); }
  90%,100%{ opacity: 0; transform: translateX(150px); }
}
@keyframes word-wipe {
  0%,22% { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); opacity: .4; }
  60%    { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); opacity: 1; }
  100%   { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes sub-in { 0%,40% { opacity: 0; } 64% { opacity: 1; } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .emtech-loader, .gear-cog, .gear-cog-line, .drop-group, .drop-outline,
  .liquid, .liquid__wave, .flame, .glint__bar, .emtech-loader__word, .emtech-loader__sub {
    animation: none !important;
  }
  .emtech-loader { opacity: 1; transform: none; }
  .gear-cog-line, .drop-outline { stroke-dashoffset: 0; }
  .gear-cog, .flame { opacity: 1; transform: none; }
  .liquid { transform: translateY(-52px); }
  .emtech-loader__word { -webkit-clip-path: none; clip-path: none; opacity: 1; }
  .emtech-loader__sub { opacity: 1; }
  .glint__bar { opacity: 0; }
}