/* ============================================================
   Shared shell for HanOxynoil interior pages.
   Mirrors the homepage tokens, header, footer, reveal, and
   mobile-drawer behaviour so subpages match index.html exactly.
   app.js (reused) locks the theme to graphite and wires the
   header-scroll, mobile drawer, reveals, and year stamp.
   ============================================================ */

:root {
  /* Petrol (default, dark) */
  --bg: #08182D; --bg-deep: #06121f; --card: #0b2138; --card-hover: #0E2C4A;
  --mid: #0A4A7C; --scrim-rgb: 8,24,45; --scrim2-rgb: 6,18,31;
  --header-bg: rgba(8,24,45,.88);
  --heading: #F8FAFB; --text: #E8EEF2; --text-2: #A9BAC7; --text-3: #9FB2C2; --text-dim: #7e93a3;
  --line-rgb: 159,178,194;
}
:root[data-theme="graphite"] {
  --bg: #15171A; --bg-deep: #0E1012; --card: #1C1F23; --card-hover: #262A30;
  --mid: #3C434B; --scrim-rgb: 18,20,23; --scrim2-rgb: 13,15,17;
  --header-bg: rgba(21,23,26,.9);
  --heading: #F6F7F8; --text: #E6E8EB; --text-2: #B7BDC4; --text-3: #A1A8B0; --text-dim: #889098;
  --line-rgb: 150,158,168;
}

/* The header floats over the dark page-hero, so keep light tokens. */
[data-header], [data-page-hero] {
  --heading: #F8FAFB; --text: #E8EEF2; --text-2: #C4D0D9; --text-3: #9FB2C2; --text-dim: #93a6b5;
  --line-rgb: 159,178,194;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Inter", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.5; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: #7BB23E; color: var(--bg); }
:focus-visible { outline: 2px solid #7BB23E; outline-offset: 3px; }
input::placeholder, textarea::placeholder { color: var(--text-dim); }

/* Scroll reveals: visible by default; the hidden state only exists while
   [data-armed] is set, which app.js adds when motion is allowed. */
@media (prefers-reduced-motion: no-preference) {
  [data-armed] [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); will-change: opacity, transform; }
  [data-armed] [data-reveal].is-in { opacity: 1; transform: none; }
  [data-armed] [data-reveal-line] { transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.22,1,.36,1); }
  [data-armed] [data-reveal-line].is-in { transform: scaleX(1); }
}

/* Nav link underline draw */
[data-navlink] { position: relative; }
[data-navlink]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: #7BB23E; transform: scaleX(0); transform-origin: left center; transition: transform .42s cubic-bezier(.22,1,.36,1); }
[data-navlink]:hover::after { transform: scaleX(1); }

/* CTA arrow slide + outline fill-wipe */
[data-cta] { position: relative; overflow: hidden; }
[data-arrow] { display: inline-block; transition: transform .38s cubic-bezier(.22,1,.36,1); }
[data-cta]:hover [data-arrow] { transform: translateX(6px); }

/* Mobile drawer / burger */
[data-m="drawer"] { display: none; }
[data-m="burger"] [data-burger-ico] span { transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease; }
[data-m="burger"].is-open [data-burger-ico] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
[data-m="burger"].is-open [data-burger-ico] span:nth-child(2) { opacity: 0; }
[data-m="burger"].is-open [data-burger-ico] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 820px) {
  html, body { overflow-x: clip; }
  [data-m="nav"] { display: none !important; }
  [data-m="burger"] { display: inline-flex !important; }
  [data-m="drawer"] {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(var(--line-rgb),.16);
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: opacity .3s ease, transform .34s cubic-bezier(.22,1,.36,1);
  }
  [data-m="drawer"].is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  [data-m="split"] { grid-template-columns: 1fr !important; gap: 34px !important; }
  [data-m="band"] { padding: 34px 24px !important; }
  [data-m="grid2"] { grid-template-columns: 1fr !important; }
  [data-page-hero] h1 { font-size: clamp(34px,9vw,60px) !important; }
}

/* Hover helpers (match index.html's baked classes) */
.hx0:hover, .hx1:hover, .hx2:hover, .hxg:hover, .hxh:hover, .hxi:hover, .hxj:hover { color: var(--text) !important; }
.hx3:hover { background: #8cc44d !important; }
.hx4:hover, .hxe:hover { background: #8cc44d !important; transform: translateY(-1px) !important; }
.hx5:hover { background-size: 100% 100% !important; color: var(--bg) !important; border-color: #7BB23E !important; }
.hx6:hover, .hx7:hover, .hx8:hover { background: var(--card-hover) !important; }
.hx9:hover { border-color: #7BB23E !important; color: #7BB23E !important; }
.hxk:hover, .hxl:hover { color: var(--bg) !important; background: #7BB23E !important; border-color: #7BB23E !important; }