/* Oilance FZE — editorial redesign layer on top of Tailwind utilities.
   Premium / industrial-editorial: warm ivory, deep navy ink, restrained
   forest-green accent, Fraunces display serif. Graphic-only (no photography). */

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-family: 'Archivo', system-ui, sans-serif; }

/* Newsreader — editorial serif chosen for legibility: even stroke contrast and
   automatic optical sizing keep large display type readable. Applied via
   .font-display (optical sizing picks the right opsz from font-size for free). */
.font-display {
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
}

::selection { background: #C9E29A; color: #0E220A; }

/* ============================================================
   SIGNATURE MOTIF — molecular bond lattice (the thing to remember)
   A fine isometric/triangular mesh evoking molecular bonds. Used on
   dark navy surfaces (hero, footer, dark panels) at low opacity.
   ============================================================ */
.lattice {
  background-image:
    linear-gradient(60deg,  rgba(141,198,63,.05) 1px, transparent 1px),
    linear-gradient(-60deg, rgba(141,198,63,.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 110px, 64px 110px, 64px 110px;
}
.lattice-soft {
  background-image:
    linear-gradient(60deg,  rgba(17,33,46,.04) 1px, transparent 1px),
    linear-gradient(-60deg, rgba(17,33,46,.04) 1px, transparent 1px);
  background-size: 64px 110px, 64px 110px;
}

/* fluid / liquid glow behind hero (navy depth + a single restrained green bloom) */
.radial-accent {
  background:
    radial-gradient(48% 60% at 78% 8%,  rgba(94,158,46,.20), transparent 62%),
    radial-gradient(60% 70% at 12% 96%, rgba(53,120,184,.30), transparent 72%),
    radial-gradient(40% 50% at 50% 50%, rgba(13,30,44,.0), rgba(13,30,44,.35) 100%);
}

/* fine paper grain for warmth on light sections */
.grain { position: relative; }
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

/* striped placeholder (retained for any graphic fills) */
.ph-stripe {
  background-color: #0D1E2C;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 12px, transparent 12px 24px);
}
.ph-stripe-light {
  background-color: #EDE7D9;
  background-image: repeating-linear-gradient(45deg, rgba(17,33,46,.05) 0 12px, transparent 12px 24px);
}

/* ---- editorial type helpers ---- */
.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
}
/* oversized section index numeral (editorial) */
.numeral {
  font-family: 'Newsreader', Georgia, serif;
  font-optical-sizing: auto;
  line-height: .8;
}

/* hairline corner ticks on cards */
.tick-tl::before, .tick-br::after {
  content: ""; position: absolute; width: 9px; height: 9px;
  border-color: #5E9E2E; border-style: solid;
}
.tick-tl::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.tick-br::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

/* thin scrollbar */
.thin-scroll::-webkit-scrollbar { height: 8px; width: 8px; }
.thin-scroll::-webkit-scrollbar-thumb { background: #D8CFBD; border-radius: 0; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }

/* ---- mega menu animation ---- */
.mega-panel {
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events: none;
}
.mega-wrap:hover .mega-panel,
.mega-wrap:focus-within .mega-panel,
.mega-panel.open {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

/* nav underline */
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -20px; height: 2px; width: 0;
  background: #5E9E2E; transition: width .2s ease;
}
.nav-link:hover::after, .nav-link[data-active="true"]::after { width: 100%; }

/* ---- motion ---- */
/* page-load staggered reveal — resting state VISIBLE (no fill-mode) so content
   never gets stuck hidden if the tab is backgrounded / animations throttled */
@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.rise { animation: riseIn .7s cubic-bezier(.2,.7,.2,1) both; }

/* scroll-triggered reveal — only hidden when JS is confirmed (.js on <html>),
   so a no-JS / failed-script visitor still sees everything */
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  .js .reveal, .js .reveal.in { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
}

/* tape ticker */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: inline-flex; white-space: nowrap; animation: marquee 42s linear infinite; }

/* table / row hover */
.prod-row { transition: background .14s ease; }
.prod-row:hover { background: #FBF8F1; }

/* link with animated underline (editorial inline links) */
.ulink { background-image: linear-gradient(#37661A, #37661A); background-size: 0% 1.5px;
  background-position: 0 100%; background-repeat: no-repeat; transition: background-size .25s ease; }
.ulink:hover { background-size: 100% 1.5px; }

/* focus ring */
.fr:focus-visible { outline: 2px solid #5E9E2E; outline-offset: 2px; }