/* ══════════════════════════════════════════════════════
   index-extras.css — scoped additions for the index page only
   1) Section 2 "Switch-Up" two-column + CN Tower w/ orbiting emblem halo
   2) Process section connecting line-draw (step 1 → 4)
   Brand tokens reused from site.css (--red #c8102e, --ink, --on-black).
══════════════════════════════════════════════════════ */

/* ── 1. SWITCH-UP two-column layout ───────────────────── */
.sv-duality--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* balanced: text · framed eye */
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
}
/* left column: stack the two panels vertically */
.sv-duality__col {
  display: flex; flex-direction: column;
  gap: 1.4rem;
}
.sv-duality--split .sv-duality__panel { height: 100%; }

/* readability: the .32-alpha faint kicker/link were unreadable on near-black.
   Lift the eye panel's kicker + both panels' links to legible contrast. */
.sv-duality--split .sv-duality__panel--eye .sv-duality__kicker {
  color: rgba(245, 241, 232, .62);
}
.sv-duality--split .sv-duality__link {
  color: rgba(245, 241, 232, .68);
  border-bottom-color: rgba(245, 241, 232, .28);
}
.sv-duality--split .sv-duality__body {
  color: rgba(245, 241, 232, .72);
}

/* ── CN Tower with the emblem orbiting it as a halo ────── */
.sv-halo {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  perspective: 1200px;       /* gives the ring real depth so it reads as an orbit */
}
/* the CN Tower photo: tilted, graded dark+red, feathered into the section */
.sv-halo__tower {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% 30%;  /* keep the CN Tower spire (right side) in frame */
  z-index: 1;
  transform: rotate(-3deg) scale(1.06);   /* subtle cinematic tilt */
  transform-origin: 60% 40%;
  /* feather every edge into the dark section */
  -webkit-mask-image: radial-gradient(120% 110% at 60% 38%,
    #000 38%, rgba(0,0,0,.55) 64%, transparent 88%);
          mask-image: radial-gradient(120% 110% at 60% 38%,
    #000 38%, rgba(0,0,0,.55) 64%, transparent 88%);
  /* dark + red colour grade matching the brand palette */
  filter: brightness(.62) contrast(1.12) saturate(.78)
          sepia(.18) hue-rotate(-12deg);
  /* fade-in on scroll reveal */
  opacity: 0;
  transition: opacity 1.1s ease, transform 1.4s ease;
}
/* a red duotone wash bonded to the tower so it sits in palette */
.sv-halo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(120% 110% at 60% 38%,
      rgba(200, 16, 46, .26) 0%,
      rgba(200, 16, 46, .10) 40%,
      transparent 70%),
    linear-gradient(180deg, transparent 55%, rgba(10,10,10,.65) 100%);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(120% 110% at 60% 38%,
    #000 38%, rgba(0,0,0,.55) 64%, transparent 88%);
          mask-image: radial-gradient(120% 110% at 60% 38%,
    #000 38%, rgba(0,0,0,.55) 64%, transparent 88%);
}
/* soft red bloom seated behind the orbit, upper third */
.sv-halo::before {
  content: '';
  position: absolute;
  top: 26%; left: 58%;
  width: 60%; height: 60%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(200, 16, 46, .28) 0%,
    rgba(200, 16, 46, .10) 42%,
    transparent 70%);
  z-index: 1;
  pointer-events: none;
}
/* the emblem rendered as a tilted ring that ORBITS the tower's upper third */
.sv-halo__ring {
  position: absolute;
  top: 26%;                 /* sit the halo around the upper third / spire */
  left: 58%;
  width: 64%;
  height: auto;
  transform: translate(-50%, -50%) rotateX(66deg) rotateZ(0deg);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  z-index: 3;               /* over the tower, like a halo */
  pointer-events: none;
  object-fit: contain;
  filter:
    drop-shadow(0 0 16px rgba(200, 16, 46, .55))
    drop-shadow(0 0 40px rgba(200, 16, 46, .28));
  animation: sv-halo-orbit 30s linear infinite;
}
/* spin in-plane while held at the rotateX tilt → reads as a ring encircling the tower */
@keyframes sv-halo-orbit {
  from { transform: translate(-50%, -50%) rotateX(66deg) rotateZ(0deg); }
  to   { transform: translate(-50%, -50%) rotateX(66deg) rotateZ(360deg); }
}
/* fade the tower in once the section is revealed (.sv-halo carries data-reveal) */
.sv-halo.is-revealed .sv-halo__tower {
  opacity: 1;
  transform: rotate(-3deg) scale(1.02);
}

/* ── SWITCH-UP right column: spinning emblem orb ───────── */
/* Same emblem + same `spin-emblem` keyframe as the bottom-right Terrence
   chat orb (#tnaado-chat-btn .chat-btn-emblem), scaled up as a feature.
   Centred in the right column with an empty image placeholder dead-centre. */
.sv-orb {
  position: relative;
  width: 100%;
  max-width: 400px;       /* sized down so the composition is balanced, not oversized */
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
/* soft red bloom seated behind the emblem */
.sv-orb::before {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(200, 16, 46, .26) 0%,
    rgba(200, 16, 46, .10) 44%,
    transparent 70%);
  z-index: 0;
  pointer-events: none;
}
/* the emblem — identical asset + identical spin to the chat orb.
   Layered ON TOP of the image core so the swirl arms frame the photo and
   the grey image only reads through the open centre (the eye / pupil). */
.sv-orb__emblem {
  position: relative;
  z-index: 3;            /* over the image core → emblem frames the photo */
  width: 100%;
  height: 100%;
  animation: spin-emblem 8s linear infinite;   /* keyframe shared with .chat-btn-emblem */
  filter: drop-shadow(0 0 16px rgba(200, 16, 46, .45))
          drop-shadow(0 0 40px rgba(200, 16, 46, .22));
  opacity: .96;
}
/* the image, seated crisply inside the emblem's open centre (the pupil).
   Pupil measures ~50% of the box and is centred; a 40% disc sits cleanly
   within it so the swirl arms read as framing the photo. */
.sv-orb__core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 66%;            /* enlarged — the spinning emblem on top crops it to the eye */
  aspect-ratio: 1 / 1;
  z-index: 1;            /* behind the emblem */
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  background: #0a0a0a;
  box-shadow:
    inset 0 0 0 1px rgba(200, 16, 46, .3),
    inset 0 0 18px rgba(0, 0, 0, .55),
    0 0 22px rgba(200, 16, 46, .22);
}
.sv-orb__core-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  filter: grayscale(100%) contrast(1.06) brightness(1.06);  /* black & white, brighter */
  opacity: 1;
  /* full disc; the red emblem swirl on top is what crops the photo */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 93%, transparent 100%);
          mask-image: radial-gradient(circle at 50% 50%, #000 93%, transparent 100%);
}
.sv-orb__core-img[hidden] { display: none; }

@media (max-width: 900px) {
  .sv-duality--split {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 7vw, 3rem);
  }
  .sv-halo { order: -1; max-width: 420px; aspect-ratio: 1 / 1; }
  .sv-halo__ring { width: 72%; animation-duration: 40s; }  /* tamer on mobile */
  /* stack: emblem above the text on narrow screens */
  .sv-orb { order: -1; max-width: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-halo__ring { animation: none !important; }
  .sv-halo__tower { opacity: 1; transition: none; }
  .sv-orb__emblem { animation: none !important; }
}

/* ── 2. PROCESS connecting line-draw (step 1 → 4) ─────── */
/* SVG overlays the existing indicator track; its stroke draws on with scroll. */
.home-process__indicator-track { position: relative; }
.home-process__connector {
  position: absolute;
  left: 12.5%; right: 12.5%; top: 50%;
  width: 75%; height: 2px;
  transform: translateY(-1px);
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.home-process__connector-line {
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(200, 16, 46, .55));
  /* dash set up in JS: full length hidden, then drawn 0 → 1 on scroll */
}
@media (max-width: 900px) {
  /* indicator track is hidden on mobile (site.css); hide connector too */
  .home-process__connector { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* show the full line statically — no draw-on */
  .home-process__connector-line { stroke-dashoffset: 0 !important; }
}