/* ============================================================
   Beat 01 — Pipeline hero
   Visual target: Opinomix Hero.dc.html (hero redesign)
   ============================================================ */

/* --- Keyframes -------------------------------------------- */

/* Stage fades in on load; the pipe dots themselves are driven by
   SMIL (animateMotion/animate) baked into the SVG markup. */
@keyframes opx-fade {
  from { opacity: 0 }
  to   { opacity: 1 }
}

/* --- Hero container --------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding-bottom: 0;
  background: radial-gradient(ellipse 120% 90% at 50% 40%, #FBFCFE 0%, #F4F5F7 72%);
}

/* Stage — svg pipe schematic plus the absolutely-positioned wordmark
   that sits over it. Sized by the svg's own aspect ratio, not the
   viewport, so the full diagram is always visible. Runs edge-to-edge —
   no max-width — to match the full-bleed design. */
.hero__stage {
  position: relative;
  width: 100%;
  animation: opx-fade 1.4s ease both;
}

.hero__network {
  display: block;
  width: 100%;
  height: auto;
}

/* Pipe-diagram node tiles — cobalt by default, flip to black on hover */

.hero-node__tile {
  fill: #004AAD;
  transition: fill 200ms var(--ease-out);
}

.hero-node:hover .hero-node__tile {
  fill: #0A0B0D;
}

/* Node process label — hidden until the node (or its wrapper) is hovered.
   Uses the sitewide detail/label face, matching every other small caption
   on the site (team roles, record years, the ethos item numbers). */
.hero-node__label {
  font-family: var(--font-detail);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.04em;
  fill: var(--color-grey-mid);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms var(--ease-out);
}

.hero-node-wrap:hover .hero-node__label {
  opacity: 1;
}

/* --- Content ---------------------------------------------- */

.hero__content {
  position: absolute;
  left: 0;
  right: 0;
  top: 44%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6vw;
  padding: 0 var(--space-6);
  pointer-events: none;
}

/* Wordmark — the typographic centrepiece, now the logo lockup */
.hero__wordmark {
  position: relative;
  line-height: 0;
  margin: 0;
}

/* Logo reveal — plays once on load. Two copies of the same 798x178 mark,
   each clipped to its own half, slide together from off-centre to rest;
   the tagline sits in the gap and is progressively clipped away as the
   halves close in on it. Scale is driven by JS (js/hero-reveal.js) using
   the same clamp(247px, 44.7vw, 646px) target the static logo used, so
   the resting size matches what was there before. */

.hero-reveal {
  display: inline-block;
}

.hero-reveal__scaler {
  transform-origin: center center;
  will-change: transform;
}

.hero-reveal__group {
  position: relative;
  width: 798px;
  height: 178px;
  /* Hidden until JS confirms the initial clip/transform state is applied —
     otherwise a hard refresh briefly paints the raw, unclipped tagline
     sitting over the O before js/hero-reveal.js runs (deferred script). */
  opacity: 0;
  transition: opacity 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hero-reveal__tag {
  position: absolute;
  top: 0;
  left: 70.5px;
  height: 178px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transform: translateX(-50%);
  will-change: clip-path;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 58px;
  line-height: 1;
  color: #0A0B0D;
}

.hero-reveal__layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 798px;
  height: 178px;
  user-select: none;
  pointer-events: none;
  will-change: transform;
}

/* Split follows the O's actual italic seam (measured from the source art:
   x = -0.1772*y + 84.8841, i.e. x=84.88 at the top, x=53.35 at the bottom),
   not a straight vertical cut — a vertical inset() left a floating bracket
   fragment because the real seam is on the diagonal. */
.hero-reveal__layer--left {
  clip-path: polygon(0px 0px, 84.88px 0px, 53.35px 178px, 0px 178px);
}

.hero-reveal__layer--right {
  clip-path: polygon(84.88px 0px, 798px 0px, 798px 178px, 53.35px 178px);
}

/* Invisible anchor over the logo's stylised "O" — js/animations.js reads
   its position to centre the Beat 02 clip-path reveal. */
.hero__wordmark-o {
  position: absolute;
  left: 70.5px;
  top: 89px;
  width: 1px;
  height: 1px;
}

/* --- Home-page nav override --------------------------------
   Base nav is already dark in layout.css; these overrides add
   the hero-specific box-shadow on initial load. */

.page-home .site-nav {
  box-shadow: 0 10px 34px rgba(20, 30, 55, 0.22);
}

.page-home .site-nav--solid {
  box-shadow: none;
}

/* --- Reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__stage {
    animation: none;
  }
}

/* ============================================================
   Beat 02 — The Old Way
   Visual target: Section 02 - The Old Way.dc.html
   ============================================================ */

.old-way {
  position: relative;
  background: var(--color-bg-base);
  padding: var(--space-10) 0;
}

/* Hero pipe continuation — sits behind the grid so the frame graphic
   covers its lower portion, reading as "runs behind the frame". */
.old-way__pipe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.old-way__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.02fr 1.18fr;
  gap: 72px;
  align-items: center;
}

.old-way__copy {
  max-width: 520px;
}

.old-way__heading {
  font-family: var(--font-heading);
  font-size: clamp(40px, 4.6vw, 62px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin: 0;
  text-wrap: balance;
}

.old-way__body {
  margin: 28px 0 0;
  font-size: var(--text-md);
  line-height: 1.62;
  color: var(--color-grey-mid);
  max-width: 44ch;
}

.old-way__cta {
  margin-top: 36px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--color-orange);
  color: #FFFFFF;
  font-family: var(--font-cta);
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: -0.01em;
  padding: 16px 30px;
  text-decoration: none;
  transition: background 180ms var(--ease-out), transform 180ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .old-way__cta:hover {
    background: #F47B2E;
    transform: translateY(-2px);
    text-decoration: none;
  }
}

.old-way__frame-wrap {
  justify-self: center;
  width: 100%;
  max-width: 600px;
}

.old-way__frame {
  background: #FFFFFF;
  border: 1px solid rgba(10, 11, 13, 0.12);
  box-shadow: 0 44px 90px -34px rgba(10, 11, 13, 0.22), 0 2px 0 rgba(10, 11, 13, 0.04);
}

.old-way__frame-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(10, 11, 13, 0.10);
}

.old-way__frame-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid rgba(10, 11, 13, 0.10);
}

.old-way__frame-label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--color-cobalt);
  font-family: var(--font-detail);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.16em;
}

.old-way__frame-pip {
  width: 7px;
  height: 7px;
  background: var(--color-cobalt);
  display: inline-block;
  flex-shrink: 0;
}

.old-way__frame-date {
  font-family: var(--font-detail);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--color-grey-dim);
}

.old-way__video {
  display: block;
  width: 100%;
  height: auto;
  min-height: 280px;
  background: var(--color-bg-raised);
}

.old-way__frame-status {
  font-family: var(--font-detail);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--color-grey-mid);
}

.old-way__frame-time {
  font-family: var(--font-detail);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--color-grey-mid);
  font-weight: 300;
}

@media (max-width: 880px) {
  .old-way__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .old-way__heading {
    font-size: var(--text-xl);
  }

  .old-way__frame-wrap {
    max-width: 100%;
  }
}

/* ============================================================
   Beat 03 — Workflow optimisation
   O-zoom reveal + pinned messy→clean pipeline
   ============================================================ */

.pipeline {
  position: relative;
  height: 100vh;
  background: var(--color-bg-mid);
  overflow: hidden;
}

.pipeline__pin {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-9) 0;
}

.pipeline__intro {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.pipeline__placeholder-tag {
  margin-top: var(--space-3);
}

.pipeline__heading {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
  margin-top: var(--space-4);
  color: var(--color-text);
}

.pipeline__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--content-max);
  height: 42vh;
  min-height: 320px;
  margin: 0 auto;
}

.pipeline__messy {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pipeline__messy-lines line {
  stroke: rgba(20, 24, 32, 0.12);
  stroke-width: 1;
}

.pipeline__messy-nodes rect {
  fill: var(--color-bg-raised);
  stroke: var(--color-grey-dim);
  stroke-width: 1;
}

.pipeline__messy-nodes text {
  fill: var(--color-grey-mid);
  font-size: 13px;
  text-anchor: middle;
  letter-spacing: 0.04em;
}

/* Without scroll animation active, show only the clean pipeline state */
.page-home .pipeline__messy {
  display: none;
}

.page-home .pipeline__stage {
  height: auto;
}

.page-home .pipeline__clean {
  position: relative;
  inset: auto;
}

.pipeline__clean {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}

.pipeline__bubble {
  position: relative;
  flex: 1;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-6);
  background: radial-gradient(circle at 50% 30%, rgba(42, 111, 219, 0.10), var(--color-bg-raised) 72%);
  border: 1px solid var(--color-line);
}

.pipeline__bubble--core {
  background: radial-gradient(circle at 50% 30%, rgba(42, 111, 219, 0.22), var(--color-bg-raised) 72%);
  border-color: rgba(42, 111, 219, 0.30);
}

.pipeline__bubble-tag {
  position: absolute;
  top: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-grey-dim);
}

.pipeline__bubble h3 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-text);
}

.pipeline__bubble p {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-grey-mid);
  max-width: 24ch;
}

@media (max-width: 880px) {
  .pipeline {
    height: auto;
    min-height: 100vh;
  }

  .pipeline__pin {
    height: auto;
    min-height: 100vh;
    padding: var(--space-10) 0 var(--space-9);
  }

  .pipeline__stage {
    height: auto;
    min-height: 0;
  }

  .pipeline__clean {
    position: relative;
    flex-direction: column;
    gap: var(--space-5);
  }

  .pipeline__messy {
    position: relative;
    height: 280px;
  }

  .pipeline__bubble {
    max-width: 240px;
    margin: 0 auto;
  }
}

/* ============================================================
   Beat 03 — Opinomix Applied
   Visual target: App Showcase.dc.html
   ============================================================ */

.applied {
  position: relative;
  background: linear-gradient(160deg, var(--color-bg-raised) 0%, #E9EAEF 52%, var(--color-bg-mid) 100%);
  overflow: hidden;
  padding: var(--space-10) 0;
}

.applied__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.applied__glow--cobalt {
  bottom: -18%;
  right: 0;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(42, 111, 219, 0.15) 0%, rgba(42, 111, 219, 0) 70%);
}

.applied__glow--white {
  top: 20%;
  left: -6%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
}

.applied__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: var(--space-9);
  align-items: center;
}

.applied__copy {
  max-width: 600px;
}

.applied__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.85rem, 3vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.applied__cta {
  margin-top: var(--space-7);
  padding: 16px 30px;
  background: var(--color-text);
  color: var(--color-white);
  font-family: var(--font-cta);
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: -0.01em;
  box-shadow: 0 8px 24px -10px rgba(20, 22, 26, 0.5);
}

.applied__cta:hover {
  background: #1E2128;
  color: var(--color-white);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(20, 22, 26, 0.55);
}

.applied__cta-arrow {
  color: var(--color-orange);
  font-size: 1.1em;
  line-height: 1;
}

.applied__stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 560px;
}

.applied__node {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.applied__node-tile {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: #0F1116;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 26px -10px rgba(15, 17, 22, 0.4);
}

.applied__node-label {
  font-family: var(--font-detail);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--color-grey-mid);
}

.applied__node--1 {
  top: 2%;
  left: 1%;
}

.applied__node--2 {
  top: 33%;
  right: -1%;
}

.applied__node--3 {
  bottom: 4%;
  left: 5%;
}

.applied__phone {
  position: relative;
  z-index: 5;
  will-change: transform, opacity;
  /* Purely decorative — its box (transparent PNG margins included) was
     sitting above the node tiles in z-order and silently swallowing their
     hover/tap events despite the nodes being what's visually on top at
     that pixel. Letting events pass through fixes that without changing
     how anything looks. */
  pointer-events: none;
}

.applied__phone::before {
  content: "";
  position: absolute;
  inset: 6% 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 58%, rgba(20, 22, 26, 0.14) 0%, rgba(20, 22, 26, 0) 60%);
  filter: blur(8px);
  pointer-events: none;
}

.applied__phone-img {
  position: relative;
  display: block;
  width: min(430px, 86%);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 44px 64px rgba(20, 22, 26, 0.26));
}

@media (max-width: 880px) {
  .applied__grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-8);
  }

  .applied__copy {
    order: 2;
    max-width: 100%;
  }

  .applied__stage {
    order: 1;
    min-height: 0;
  }

  .applied__node {
    display: none;
  }

  .applied__phone-img {
    width: min(280px, 80%);
  }
}