/* Omega GTI — supplemental styles on top of Tailwind utilities */

.hover-lift {
  transition: transform 400ms ease-in-out, box-shadow 400ms ease-in-out;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 40px 40px -20px rgba(0, 0, 0, 0.08);
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Logo marquee for partners */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 45s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Mobile nav drawer */
#mobile-menu {
  transition: transform 0.4s ease-in-out, opacity 0.3s ease-in-out;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}
#mobile-menu.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* Subtle PCB-trace texture for light sections — continuous traces, vias & BGA footprints.
   Traces enter/exit tile edges at matching coordinates so the routing flows seamlessly across tiles. */
.pcb-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%231c2433' stroke-opacity='.04' stroke-width='1.5'%3E%3Cpath d='M0 96h88l24-24h96l24 24h168'/%3E%3Cpath d='M288 0v64l-24 24v80l24 24v208'/%3E%3Cpath d='M96 0v40l16 16v56l-16 16v272'/%3E%3Cpath d='M0 296h64l32 32h80l32-32h192'/%3E%3Cpath d='M168 192h48l24 24v32'/%3E%3Cpath d='M328 200v40l-24 24'/%3E%3Cpath d='M40 160v48l24 24'/%3E%3Crect x='160' y='104' width='56' height='56' rx='4'/%3E%3Crect x='300' y='312' width='48' height='48' rx='4'/%3E%3Ccircle cx='240' cy='248' r='3'/%3E%3Ccircle cx='304' cy='264' r='3'/%3E%3Ccircle cx='64' cy='232' r='3'/%3E%3Ccircle cx='136' cy='360' r='2.5'/%3E%3Ccircle cx='360' cy='40' r='2.5'/%3E%3C/g%3E%3Cg fill='%231c2433' fill-opacity='.05'%3E%3Ccircle cx='168' cy='192' r='4'/%3E%3Ccircle cx='328' cy='200' r='4'/%3E%3Ccircle cx='40' cy='160' r='4'/%3E%3Ccircle cx='170' cy='114' r='1.8'/%3E%3Ccircle cx='182' cy='114' r='1.8'/%3E%3Ccircle cx='194' cy='114' r='1.8'/%3E%3Ccircle cx='206' cy='114' r='1.8'/%3E%3Ccircle cx='170' cy='126' r='1.8'/%3E%3Ccircle cx='182' cy='126' r='1.8'/%3E%3Ccircle cx='194' cy='126' r='1.8'/%3E%3Ccircle cx='206' cy='126' r='1.8'/%3E%3Ccircle cx='170' cy='138' r='1.8'/%3E%3Ccircle cx='182' cy='138' r='1.8'/%3E%3Ccircle cx='194' cy='138' r='1.8'/%3E%3Ccircle cx='206' cy='138' r='1.8'/%3E%3Ccircle cx='170' cy='150' r='1.8'/%3E%3Ccircle cx='182' cy='150' r='1.8'/%3E%3Ccircle cx='194' cy='150' r='1.8'/%3E%3Ccircle cx='206' cy='150' r='1.8'/%3E%3Ccircle cx='309' cy='321' r='1.6'/%3E%3Ccircle cx='319' cy='321' r='1.6'/%3E%3Ccircle cx='329' cy='321' r='1.6'/%3E%3Ccircle cx='339' cy='321' r='1.6'/%3E%3Ccircle cx='309' cy='331' r='1.6'/%3E%3Ccircle cx='319' cy='331' r='1.6'/%3E%3Ccircle cx='329' cy='331' r='1.6'/%3E%3Ccircle cx='339' cy='331' r='1.6'/%3E%3Ccircle cx='309' cy='341' r='1.6'/%3E%3Ccircle cx='319' cy='341' r='1.6'/%3E%3Ccircle cx='329' cy='341' r='1.6'/%3E%3Ccircle cx='339' cy='341' r='1.6'/%3E%3Ccircle cx='309' cy='351' r='1.6'/%3E%3Ccircle cx='319' cy='351' r='1.6'/%3E%3Ccircle cx='329' cy='351' r='1.6'/%3E%3Ccircle cx='339' cy='351' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 400px 400px;
}

/* Subtle grid background helper */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(198,198,203,0.25) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(198,198,203,0.25) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ---- Tech-forward hero ---- */
.aurora {
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  opacity: 0.55;
  will-change: transform;
  pointer-events: none;
}
.aurora--1 { animation: drift1 16s ease-in-out infinite; }
.aurora--2 { animation: drift2 20s ease-in-out infinite; }
.aurora--3 { animation: drift1 24s ease-in-out infinite reverse; }
@keyframes drift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(50px, -40px) scale(1.18); }
}
@keyframes drift2 {
  0%, 100% { transform: translate(0, 0) scale(1.1); }
  50%      { transform: translate(-60px, 45px) scale(1); }
}

/* Circuit grid that fades toward the edges */
.hero-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 78%);
}

/* ---- Page hero photos ---- */
/* Full-bleed hero images sit in a band whose height is fixed by the heading
   text but whose width grows with the viewport. On wide screens object-cover
   therefore crops the top & bottom hard, pushing faces and the Omega GTI logo
   out of frame. These photos put their subject in the upper half, so biasing
   the focal point above center keeps the subject visible as the window widens.
   Scope note: index.html's hero is a <video> and market-insights' hero is a
   decorative pattern — neither matches this selector, so both are untouched. */
.absolute.inset-0.z-0 > img.object-cover {
  object-position: center 30%;
}

/* Glass panels */
.glass {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.glass-light {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.text-gradient {
  background: linear-gradient(92deg, #ffffff 0%, #ffb3b6 55%, #ff4d6d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.floaty { animation: floaty 6s ease-in-out infinite; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Live capability ticker */
.ticker { overflow: hidden; }
.ticker__track { display: flex; width: max-content; animation: marquee 32s linear infinite; }

/* Line-Down hotline card */
.hotline-card {
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.hotline-card.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Quality "Journey of a Part" gate connector */
.gate-step { position: relative; }
@media (min-width: 1024px) {
  .gate-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2.25rem;
    left: calc(50% + 1.75rem);
    right: calc(-50% + 1.75rem);
    height: 2px;
    background: linear-gradient(90deg, #ba0035 0%, #c6c6cb 100%);
  }
}

/* ---- Industries We Power grid ---- */
/* Photo tiles that show the industry name by default and reveal a short
   description on hover/focus. Cards carry tabindex="0" so tap/keyboard focus
   works on touch and for keyboard users. */
.ind-card {
  position: relative;
  display: block;
  min-height: 15rem;
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: #1c2433;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  isolation: isolate;
}
/* Always-on darkening so the title stays readable over the photo. */
.ind-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0.08) 100%);
}
.ind-card__front,
.ind-card__back {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}
/* Front: industry name pinned to the bottom over the photo. */
.ind-card__front {
  justify-content: flex-end;
  transition: opacity 0.4s ease;
}
/* Back: solid brand overlay with the description, hidden until hover/focus. */
.ind-card__back {
  justify-content: center;
  gap: 0.75rem;
  background: linear-gradient(155deg, rgba(186, 0, 53, 0.95) 0%, rgba(12, 15, 23, 0.96) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.ind-card:hover .ind-card__back,
.ind-card:focus .ind-card__back,
.ind-card:focus-within .ind-card__back { opacity: 1; }
.ind-card:hover .ind-card__front,
.ind-card:focus .ind-card__front,
.ind-card:focus-within .ind-card__front { opacity: 0; }

.ind-card__title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  color: #ffffff;
}
.ind-card__desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}

/* ---- Locations network-map hero ---- */
/* Center the crop on the marker band. On narrow screens the wide map is
   cropped to a thin slice of longitudes, so pan toward the Asia hubs
   (Shenzhen + Batangas) to keep the highlighted beacons on screen. */
body[data-page="locations"] .absolute.inset-0.z-0 > img.object-cover {
  object-position: center 40%;
}
@media (max-width: 640px) {
  body[data-page="locations"] .absolute.inset-0.z-0 > img.object-cover {
    object-position: 78% 42%;
  }
}

/* ---- Legal / policy pages (privacy, terms) ---- */
/* Self-contained list & table styling so long legal copy renders correctly
   without depending on purged Tailwind utilities (list-disc, border, etc.). */
.legal-body ul { list-style: disc; padding-left: 1.5rem; margin: 0.75rem 0; }
.legal-body li { margin-bottom: 0.4rem; line-height: 1.65; }
.legal-body strong { font-weight: 600; color: #1c2433; }
.legal-body .tbl-wrap { overflow-x: auto; margin: 0.75rem 0; }
.legal-body table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.legal-body th,
.legal-body td { border: 1px solid #d4d7dd; padding: 0.55rem 0.8rem; text-align: left; vertical-align: top; }
.legal-body th { background: #eef0f3; color: #1c2433; font-weight: 600; }
.legal-body td { color: rgb(69 71 75); }

/* ---- Market Insights ---- */
/* Trend indicators (compiled Tailwind has no error/success colors) */
.trend-up   { color: #ba0035; } /* tightening — matches secondary accent */
.trend-flat { color: #6f7378; }
.trend-down { color: #15803d; } /* easing */

/* Article typography (no Tailwind prose plugin in the build) */
.article-body { color: rgb(69 71 75); }
.article-body p { margin-bottom: 1.25rem; line-height: 1.75; }
.article-body h2 { font-family: "Space Grotesk", sans-serif; color: #000; font-size: 1.5rem; font-weight: 600; margin: 2.5rem 0 1rem; }
.article-body h3 { font-family: "Space Grotesk", sans-serif; color: #000; font-size: 1.125rem; font-weight: 600; margin: 2rem 0 0.75rem; }
.article-body ul, .article-body ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: 0.5rem; line-height: 1.7; }
.article-body strong { color: #000; font-weight: 600; }
.article-callout {
  border-left: 4px solid #ba0035;
  background: rgb(242 244 246);
  border-radius: 0 0.75rem 0.75rem 0;
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
}
.article-callout h3 { margin-top: 0; }
.article-callout :last-child { margin-bottom: 0; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee__track, .ticker__track { animation: none; }
  .aurora, .floaty { animation: none; }
  .hover-lift { transition: none; }
}

/* ---- Mobile tap feedback (mirrors desktop hover on touch devices) ---- */
@media (hover: none) and (pointer: coarse) {
  /* Cards */
  .hover-lift:active {
    transform: translateY(-4px);
    box-shadow: 0 40px 40px -20px rgba(0, 0, 0, 0.08);
  }
  /* Service card icon bubble */
  .hover-lift:active [class*="bg-secondary/10"] {
    background-color: rgba(186, 0, 53, 0.2);
  }
  /* Solid fill buttons (bg-secondary, bg-primary CTAs) */
  a[class*="bg-secondary"]:active,
  button[class*="bg-secondary"]:active {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(186, 0, 53, 0.35);
    opacity: 0.92;
  }
  a[class*="bg-primary"]:not([class*="text-secondary"]):active,
  button[class*="bg-primary"]:not([class*="text-secondary"]):active {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    opacity: 0.92;
  }
  /* Ghost / outline buttons */
  a[class*="border"][class*="transition-all"]:active,
  button[class*="border"][class*="transition-all"]:active {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
  }
}