/* ============================================================
   OK HOME v2 - ported from Oleg's Claude Design handoff
   (project 31309d1c, Homepage.dc.html, 2026-08-11).
   Namespaced .okh-* so nothing collides with legacy pages.
   Header, footer and lockup rules live in ok-chrome.css (sitewide).
   Colors and fonts come from theme-override.css + ok-tokens.css.
   ============================================================ */


/* ---------- hero ---------- */
.okh-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--ok-border); }
.okh-hero-media { position: absolute; inset: 0; opacity: 0.16; }
.okh-hero-media .ok-hero-bg, .okh-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the legacy .ok-hero-bg-img rule (style.css) adds opacity .55 and a Ken Burns animation; the wrapper already carries the design's opacity */
.okh-hero-media .ok-hero-bg-img { opacity: 1; animation: none; }
.okh-hero-inner { position: relative; padding-top: 96px; padding-bottom: 56px; min-height: 66vh; display: flex; flex-direction: column; justify-content: flex-end; }
.okh-h1 { font-family: var(--ok-serif); font-weight: 800; font-size: clamp(42px, 6.2vw, 72px); line-height: 1.1; letter-spacing: 0; max-width: 16ch; margin: 0; text-wrap: balance; color: var(--ok-text); }
.okh-sub { color: var(--ok-text-muted); font-size: 18px; line-height: 1.65; max-width: 52ch; margin: 26px 0 0; text-wrap: pretty; }
.okh-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.okh-btn { display: inline-block; background: var(--ok-accent); color: var(--ok-accent-ink); border: 2px solid var(--ok-accent); border-radius: calc(var(--ok-radius) * 0.8); padding: 15px 30px; font-family: var(--ok-sans); font-weight: 700; font-size: 17px; text-decoration: none; white-space: nowrap; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; }
.okh-btn:hover { background: var(--ok-accent-hover); border-color: var(--ok-accent-hover); color: var(--ok-accent-ink); }
.okh-btn--ghost { background: transparent; color: var(--ok-text); border-color: var(--ok-border); }
.okh-btn--ghost:hover { background: transparent; border-color: var(--ok-text-muted); color: var(--ok-text); }
.okh-proof { margin: 72px 0 0; padding-top: 22px; border-top: 1px solid var(--ok-border); font-family: var(--ok-sans); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ok-text-muted); }
@media (max-width: 640px) { .okh-hero-inner { min-height: auto; padding-top: 64px; } .okh-proof { margin-top: 48px; } }

/* ---------- email capture ---------- */
.okh-capture { background: var(--ok-surface); border-bottom: 1px solid var(--ok-border); }
.okh-capture-row { padding-top: 64px; padding-bottom: 64px; display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: center; justify-content: space-between; }
.okh-capture-copy { flex: 1 1 400px; min-width: 280px; }
.okh-capture-copy h2 { font-family: var(--ok-serif); font-size: 26px; font-weight: 800; letter-spacing: 0; margin: 0; text-wrap: balance; }
.okh-capture-copy p { color: var(--ok-text-muted); font-size: 15.5px; margin: 10px 0 0; max-width: 46ch; text-wrap: pretty; }
.okh-capture-form { flex: 0 1 auto; min-width: 280px; }
.okh-capture-form form { display: flex; gap: 10px; flex-wrap: wrap; }
.okh-capture-form input[type="email"] { flex: 1 1 240px; background: var(--ok-bg); border: 1px solid var(--ok-border); border-radius: 10px; padding: 13px 18px; color: var(--ok-text); font-family: var(--ok-sans); font-size: 15px; outline: none; }
.okh-capture-form input[type="email"]:focus { border-color: var(--ok-text-muted); }
.okh-capture-form input::placeholder { color: var(--ok-text-muted); opacity: 0.75; }
.okh-capture-form button { background: var(--ok-accent); color: var(--ok-accent-ink); border: 2px solid var(--ok-accent); border-radius: calc(var(--ok-radius) * 0.8); padding: 12px 22px; font-family: var(--ok-sans); font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap; transition: background-color 0.18s ease, border-color 0.18s ease; }
.okh-capture-form button:hover { background: var(--ok-accent-hover); border-color: var(--ok-accent-hover); }
.okh-capture-done { font-weight: 600; font-size: 16px; margin: 0; }
.okh-capture-fine { font-family: var(--ok-sans); font-size: 12px; color: var(--ok-text-muted); margin: 10px 0 0; }
.okh-capture-fine a { color: inherit; text-decoration: underline; }

/* ---------- editorial sections ---------- */
.okh-sec { padding-top: 112px; }
.okh-sechead { display: flex; align-items: center; gap: 28px; margin-bottom: 40px; }
.okh-sechead h2 { font-family: var(--ok-serif); font-size: 30px; font-weight: 800; letter-spacing: 0; margin: 0; white-space: nowrap; }
.okh-rule { flex: 1 1 auto; height: 1px; background: var(--ok-border); }

/* products */
.okh-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.okh-card { background: var(--ok-surface); border: 1px solid var(--ok-border); border-radius: var(--ok-radius); padding: 28px; text-decoration: none; color: var(--ok-text); display: block; transition: border-color 0.18s ease; }
.okh-card:hover { border-color: var(--ok-text-muted); }
.okh-eyebrow { display: block; font-family: var(--ok-sans); font-weight: 600; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ok-text-muted); }
.okh-card b { display: block; font-family: var(--ok-sans); font-size: 20px; font-weight: 700; line-height: 1.3; margin-top: 14px; color: var(--ok-text); }
.okh-card p { color: var(--ok-text-muted); font-size: 15px; line-height: 1.6; margin: 8px 0 0; }

/* explore index */
.okh-sec .okh-index { margin-top: -28px; }
.okh-index a { display: flex; align-items: baseline; gap: 28px; padding: 26px 0; border-bottom: 1px solid var(--ok-border); color: var(--ok-text); text-decoration: none; transition: border-color 0.18s ease; }
.okh-index a:hover { border-bottom-color: var(--ok-text-muted); }
.okh-num { font-family: var(--ok-sans); font-weight: 600; font-size: 11px; letter-spacing: 1.5px; color: var(--ok-text-muted); min-width: 30px; }
.okh-index-title { font-family: var(--ok-serif); font-weight: 600; font-size: clamp(24px, 3vw, 32px); line-height: 1.2; }

/* videos */
.okh-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.okh-vid { position: relative; aspect-ratio: 16 / 9; background: var(--ok-surface-2); border: 1px solid var(--ok-border); border-radius: var(--ok-radius); overflow: hidden; display: block; }
.okh-vid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.okh-vid:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .okh-vid img, .okh-vid:hover img { transition: none; transform: none; } }
.okh-vid--empty { display: flex; align-items: center; justify-content: center; }
.okh-vid-label { font-family: var(--ok-sans); font-weight: 600; font-size: 14px; color: var(--ok-text-muted); letter-spacing: 0.5px; }
.okh-play { position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; border: 1px solid var(--ok-border); border-radius: 50%; background: var(--ok-bg); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.okh-play span { width: 0; height: 0; border-left: 11px solid var(--ok-text-muted); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }

/* ---------- E01 Fold Text: hero headline unfolds on load ----------
   Vanilla port of React Bits "Fold Text" with Oleg's settings
   (char split, top hinge, 0.65s, 0.045s stagger, power3.out,
   700px perspective, 0.55 crease). Colors stay on brand tokens so
   the headline survives the light/dark toggle. See
   docs/element-catalog/E01-fold-text.md */

/* Hidden until JS splits it. Pure-CSS safety net reveals the headline
   after 3s if the script never runs, so the hero can never end up blank. */
.okh-h1--fold { visibility: hidden; animation: okhFoldSafety 0s linear 3s forwards; }
@keyframes okhFoldSafety { to { visibility: visible; } }
.okh-h1--fold.is-split { visibility: visible; animation: none; }

.okh-fold-word { display: inline-block; white-space: nowrap; }
.okh-fold-char {
  display: inline-block;
  position: relative;
  transform-origin: 50% 0%;
  transform: perspective(700px) rotateX(-90deg);
  opacity: 0;
}
.okh-h1--fold.is-split .okh-fold-char {
  will-change: transform, opacity;
  animation: okhFoldOpen 0.65s cubic-bezier(0.165, 0.84, 0.44, 1) both;
  animation-delay: var(--okh-fold-d, 0s);
}
@keyframes okhFoldOpen {
  from { transform: perspective(700px) rotateX(-90deg); opacity: 0; }
  55%  { opacity: 1; }
  to   { transform: perspective(700px) rotateX(0deg); opacity: 1; }
}

/* the crease: a shadow across the fold that lifts as the panel opens */
.okh-fold-char::after {
  content: "";
  position: absolute;
  inset: -0.08em -0.02em;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  pointer-events: none;
  opacity: 0;
}
.okh-h1--fold.is-split .okh-fold-char::after {
  animation: okhFoldCrease 0.65s cubic-bezier(0.165, 0.84, 0.44, 1) both;
  animation-delay: var(--okh-fold-d, 0s);
}
@keyframes okhFoldCrease { from { opacity: 1; } to { opacity: 0; } }
/* light mode folds toward paper, not ink */
html[data-theme="light"] .okh-fold-char::after {
  background: linear-gradient(to bottom, rgba(34, 28, 21, 0.28), rgba(34, 28, 21, 0));
}

@media (prefers-reduced-motion: reduce) {
  .okh-h1--fold, .okh-h1--fold.is-split { visibility: visible; animation: none; }
  .okh-h1--fold .okh-fold-char { transform: none; opacity: 1; animation: none; }
  .okh-h1--fold .okh-fold-char::after { display: none; }
}

/* The fold splits the headline into spans, which drops them into the legacy
   Astra-era rule `html[data-theme="dark"] span { color: #CCC !important }`
   and dims the hero. Force the letters back to the headline's own color.
   Specificity is deliberately high to clear that !important override. */
html[data-theme] h1.okh-h1 span.okh-fold-word,
html[data-theme] h1.okh-h1 span.okh-fold-char { color: inherit !important; }

/* ---------- audit fixes (2026-09-03) ---------- */
/* 320px reflow: the nowrap heading and CTA pushed the page to 360px wide */
.okh-inner > *, .okh-ctas > * { min-width: 0; }
@media (max-width: 400px) {
  .okh-sechead h2 { white-space: normal; font-size: 26px; }
  .okh-btn, .okh-capture-form button { white-space: normal; text-align: center; }
  .okh-ctas .okh-btn { width: 100%; }
}
/* newsletter: inline error under the field instead of a false "Done" */
.okh-capture-error { font-family: var(--ok-sans); font-size: 13.5px; line-height: 1.5; margin: 10px 0 0; color: var(--ok-text); border-left: 3px solid var(--ok-text-muted); padding-left: 10px; }