/* Besere Oil — Home page (implements Home.dc.html from the design project).
   Keyframes, intro/no-intro wiring, JS-driven states, responsive fixes.
   Layout the design expressed inline stays inline in index.html for fidelity.
   The animated footer is shared and lives in site-footer.css. */

@keyframes rise { from { opacity: 0; transform: translateY(1.8rem); } to { opacity: 1; transform: none; } }
@keyframes drawX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.12; } }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes reveal { from { opacity: 0; transform: translateY(1.4rem); } to { opacity: 1; transform: none; } }
@keyframes pageIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: none; } }

body { overflow-x: clip; }

/* — intro (first visit this session) vs return (pageIn wipe) — */
html.intro .hnav { animation: reveal 0.6s ease 0.95s both; }
html.intro .hero { animation: slideInRight 0.95s cubic-bezier(0.22, 1, 0.36, 1) both; }
html.intro .hl-1 { animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.05s both; }
html.intro .hl-2 { animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.27s both; }
html.intro .hl-3 { animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.49s both; }
html.intro .hero-rule { animation: drawX 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.75s both; }
html.intro .hero-ctas { animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 2.05s both; }
html.intro [data-typed-text] { visibility: hidden; } /* home.js reveals + types */

.type-caret {
  display: inline-block; width: 0.55ch; height: 1em;
  background: var(--color-accent); vertical-align: -0.12em; margin-left: 0.15ch;
  animation: blink 0.8s steps(1) infinite;
}
.type-caret[hidden] { display: none; }

/* — the fixed transparent→solid nav styles are shared: see menu.css — */

/* — hero video crossfade (home.js rotates a → b → c every 20s) — */
.hero-video-b, .hero-video-c { opacity: 0; transition: opacity 1.8s ease; }
.hero-video-b.is-showing, .hero-video-c.is-showing { opacity: 1; }

/* — ticker — */
.ticker-track { animation: ticker 46s linear infinite; }

/* — operations: sticky scroll console —
   Desktop: a ~20%-wide rail with just the numbers, scroll-progress lines
   between them, and the active line's copy overlaid on the image.
   Mobile: no image; the copy expands between the numbers. */
.ops-sticky {
  --ops-rail: clamp(13rem, 20vw, 22rem);
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: var(--ops-rail) 1fr;
}
.ops-left {
  display: flex; flex-direction: column; justify-content: center; min-height: 0;
  padding: clamp(var(--space-4), 6vh, calc(var(--space-8) * 1.6)) clamp(var(--space-3), 1.6vw, var(--space-6));
  border-right: calc(var(--space-1) / 2) solid var(--color-divider);
}
.ops-head { margin: 0 0 clamp(var(--space-3), 3.4vh, var(--space-6)); font-size: clamp(1.15rem, 0.6rem + 1.1vw, 1.7rem); }
.ops-list { display: flex; flex-direction: column; min-height: 0; }
.ops-item { display: contents; }
.ops-row {
  appearance: none; -webkit-appearance: none; background: none; border: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-1) 0;
}
.ops-num {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(2.1rem, 2.6vw, 3.2rem); line-height: 1.05;
  color: var(--color-neutral-300); font-variant-numeric: tabular-nums;
  transition: color 0.35s ease;
}
@supports (-webkit-text-stroke: 1px black) {
  .ops-num { color: transparent; -webkit-text-stroke: 0.09rem var(--color-neutral-400); }
}
.ops-row.is-active .ops-num { color: var(--color-accent-600); -webkit-text-stroke: 0; }
.ops-row:hover:not(.is-active) .ops-num { color: var(--color-neutral-500); }
.ops-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 0.95rem; text-wrap: balance;
  opacity: 0.5; transition: opacity 0.35s ease;
}
.ops-row.is-active .ops-title { opacity: 1; }

/* scroll-progress line between consecutive numbers: fills top-to-bottom
   as the current segment is scrolled through (home.js drives the scale) */
.ops-prog {
  flex: 1 1 0; min-height: clamp(1.5rem, 6vh, 3.5rem); width: calc(var(--space-1) / 2);
  margin: var(--space-2) 0 var(--space-2) 1.1rem;
  background: color-mix(in srgb, var(--color-text) 12%, transparent);
  position: relative; overflow: hidden;
}
.ops-prog-fill {
  position: absolute; inset: 0; background: var(--color-accent);
  transform: scaleY(0); transform-origin: top;
}

/* rail foot: current position over total */
.ops-count {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: clamp(var(--space-4), 4vh, var(--space-8));
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 0.7rem; letter-spacing: 0.16em; color: var(--color-neutral-500);
  font-variant-numeric: tabular-nums;
}
.ops-count [data-ops-count] { color: var(--color-accent-700); }
.ops-count-sep { flex: 0 0 1.6rem; height: 0.0625rem; background: var(--color-divider); }

.ops-stage { position: relative; background: var(--color-neutral-900); overflow: hidden; }
/* the hero/footer hairline grid continues over the imagery */
.ops-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(to right,
    color-mix(in srgb, var(--color-bg) 5%, transparent) 0,
    color-mix(in srgb, var(--color-bg) 5%, transparent) 0.0625rem,
    transparent 0.0625rem, transparent 8rem);
}
/* oversized outlined index, watermarked on the imagery */
.ops-ghost {
  position: absolute; top: clamp(var(--space-4), 4vh, var(--space-8)); right: clamp(var(--space-4), 3vw, var(--space-8));
  z-index: 4; pointer-events: none; line-height: 0.9;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(6rem, 11vw, 12rem); font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 0.09rem color-mix(in srgb, var(--color-bg) 55%, transparent);
  filter: drop-shadow(0 0 0.0625rem color-mix(in srgb, var(--color-neutral-900) 60%, transparent));
}
.ops-visual {
  position: absolute; inset: 0; opacity: 0; transform: scale(1.05);
  transition: opacity 0.7s ease, transform 0.9s ease;
}
.ops-visual.is-active { opacity: 1; transform: scale(1); }

.ops-tagrow { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.ops-tagline { flex: 1; height: 0.0625rem; background: color-mix(in srgb, var(--color-bg) 28%, transparent); }
.ops-cta { margin-top: var(--space-2); }

@media (min-width: 768px) {
  .ops-title { display: none; } /* the rail carries numbers only */
  .ops-detail {
    display: none; position: absolute; z-index: 5;
    left: var(--ops-rail); right: 0; bottom: 0;
    padding: clamp(var(--space-8), 11vh, calc(var(--space-8) * 3))
             clamp(var(--space-4), 3.5vw, calc(var(--space-8) * 1.6))
             clamp(var(--space-6), 6vh, calc(var(--space-8) * 1.4));
    background: linear-gradient(to top,
      color-mix(in srgb, var(--color-neutral-900) 94%, transparent),
      color-mix(in srgb, var(--color-neutral-900) 55%, transparent) 52%,
      transparent);
  }
  .ops-detail.is-active { display: block; animation: rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .ops-detail h3 { color: var(--color-bg); margin: var(--space-3) 0 var(--space-2); max-width: 24ch; text-wrap: balance; font-size: clamp(1.6rem, 2.6vw, 2.5rem); letter-spacing: -0.015em; }
  .ops-detail p { color: var(--color-neutral-300); max-width: 54ch; margin: 0 0 var(--space-4); font-size: 1rem; }
  .ops-detail .ops-tag { color: var(--color-bg); border-color: color-mix(in srgb, var(--color-bg) 45%, transparent); }
}

@media (max-width: 767px) {
  .ops-sticky { grid-template-columns: 1fr; }
  .ops-stage, .ops-prog { display: none; }
  .ops-left { border-right: none; overflow-y: auto; }
  .ops-list { border-bottom: calc(var(--space-1) / 4) solid var(--color-divider); }
  .ops-row {
    width: 100%; display: grid; grid-template-columns: 3.4rem 1fr;
    gap: var(--space-3); padding: var(--space-3) 0;
    border-top: calc(var(--space-1) / 4) solid var(--color-divider);
  }
  .ops-num { font-size: 1.9rem; }
  .ops-detail { display: none; padding: 0 0 var(--space-4) calc(3.4rem + var(--space-3)); }
  .ops-detail.is-active { display: block; animation: rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .ops-detail h3 { margin: var(--space-3) 0 var(--space-2); font-size: 1.2rem; max-width: 24ch; text-wrap: balance; }
  .ops-detail p { color: color-mix(in srgb, var(--color-text) 55%, transparent); font-size: 0.95rem; margin: 0 0 var(--space-3); }
  .ops-tagline { background: var(--color-divider); }
  .ops-count { margin-top: var(--space-4); }
}

/* — purpose & principles: architectural tab rail + gridded cells — */
.ptabs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: calc(var(--space-1) / 2) solid var(--color-text);
  border-bottom: calc(var(--space-1) / 4) solid var(--color-divider);
  margin-bottom: calc(var(--space-8) * 1.2);
}
.ptab {
  appearance: none; -webkit-appearance: none; background: none; border: none;
  cursor: pointer; position: relative; text-align: left;
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: var(--space-4) var(--space-3) var(--space-4) var(--space-3);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(0.68rem, 1.6vw, 0.82rem); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-neutral-500); transition: color 0.3s ease;
}
.ptab + .ptab { border-left: calc(var(--space-1) / 4) solid var(--color-divider); }
.ptab::after {
  content: ""; position: absolute; top: calc(var(--space-1) / -2); left: 0; right: 0;
  height: calc(var(--space-1) / 2); background: var(--color-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.ptab:hover { color: var(--color-text); }
.ptab.is-active { color: var(--color-text); }
.ptab.is-active::after { transform: scaleX(1); }
.ptab-n { font-variant-numeric: tabular-nums; color: var(--color-accent-700); font-size: 0.85em; }

.purpose-pane { display: none; }
.purpose-pane.is-active { display: block; }
.purpose-stmt {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.12; letter-spacing: -0.015em;
  max-width: 28ch; margin: 0 0 calc(var(--space-8) * 1.2); text-wrap: balance;
}
.purpose-pane.is-active .purpose-stmt { animation: reveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }

.p-cells {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  border-top: calc(var(--space-1) / 4) solid var(--color-divider);
  border-right: calc(var(--space-1) / 4) solid var(--color-divider);
}
.p-cell {
  border-left: calc(var(--space-1) / 4) solid var(--color-divider);
  border-bottom: calc(var(--space-1) / 4) solid var(--color-divider);
  padding: var(--space-6) var(--space-4) calc(var(--space-8) * 1.1);
}
.purpose-pane.is-active .p-cell {
  animation: reveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0s);
}
.p-n {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-700);
}
.p-t {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 1.1rem; margin: var(--space-2) 0;
}
.p-cell p { margin: 0; font-size: 0.95rem; max-width: 40ch; }

/* — scroll-driven reveals (accent CTA band). Browsers without
   animation-timeline simply play the animation on load. — */
.sr { animation: reveal 0.8s both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
.drawx {
  transform-origin: left;
  animation: drawX 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-timeline: view(); animation-range: entry 0% entry 40%;
}
@supports not (animation-timeline: view()) {
  .sr, .drawx { animation-timeline: auto; animation-range: normal; }
}

/* — footer links shared class (kept for inner-page parity) — */
.m-flink { color: inherit; text-decoration: none; font-size: 0.9rem; }
.m-flink:hover { color: var(--color-accent-700); }

/* — logo fallback (used if assets/img/logo.png fails) — */
.logo-fallback {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 1.35rem; letter-spacing: 0.02em; white-space: nowrap;
  color: var(--color-text);
}
.logo-fallback em { font-style: normal; color: var(--color-accent); }

/* — responsive — */
@media (max-width: 640px) {
  .m-nav { gap: var(--space-3) !important; }
  .m-nav img { height: 2.4rem !important; }
}

/* — reduced motion — */
@media (prefers-reduced-motion: reduce) {
  .sr, .drawx, .ops-detail.is-active,
  .purpose-pane.is-active .purpose-stmt, .purpose-pane.is-active .p-cell,
  html.intro .hnav, html.intro .hero, html.intro .hl-1, html.intro .hl-2, html.intro .hl-3,
  html.intro .hero-rule, html.intro .hero-ctas, html.no-intro [data-screen="home"] {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  html.intro [data-typed-text] { visibility: visible; }
  .hero-video-b { transition: none; }
  .ticker-track { animation: none !important; }
  .ops-visual { transition: none; }
  .type-caret { display: none; }
}

/* — operations scroll progress (small screens; the rail lines are hidden) — */
.ops-pill {
  position: absolute; bottom: clamp(0.9rem, 2.5vh, 1.5rem); left: 50%;
  transform: translateX(-50%); z-index: 6;
}
.ops-pill .prog-line { background: color-mix(in srgb, var(--color-text) 22%, transparent); }
@media (min-width: 768px) { .ops-pill { display: none; } }