/* ============================================================
   APNO — Sub-page hero & layout (Tresmares-inspired)
   ============================================================ */

.subnav-back { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.subnav-back:hover { color: var(--blue); }

/* ---------- Page hero ---------- */
.page-hero { position: relative; min-height: 86vh; display: flex; align-items: center; overflow: hidden; padding: 120px 0 70px; }
.ph2-grid {
  position: relative; z-index: 3; display: grid;
  grid-template-columns: 280px 1fr 220px; gap: 56px; align-items: start; width: 100%;
}
.ph2-side, .ph2-stats { padding-top: 48px; }
@media (max-width: 1100px){ .ph2-grid { grid-template-columns: 1fr; gap: 30px; } }

.ph2-side { }
.ph2-index { display: flex; flex-direction: column; gap: 2px; margin-bottom: 28px; }
.ph2-index a { padding: 9px 0; font-size: 15px; font-weight: 480; color: var(--muted-2); border-top: 1px solid var(--line); transition: color .2s, padding .25s var(--ease); }
.ph2-index a:hover { color: var(--ink); padding-left: 8px; }
.ph2-index a.cur { color: var(--ink); font-weight: 560; }
.ph2-desc { font-size: 15px; line-height: 1.6; color: var(--slate); max-width: 280px; }
.ph2-cta { margin-top: 22px; }

.ph2-stage { position: relative; min-height: 420px; display: flex; align-items: center; justify-content: center; overflow: visible; }
.ph2-shape {
  position: absolute; z-index: 1; inset: 0; margin: auto; width: 66%; height: 68%;
  background: linear-gradient(150deg, #4F8DF5 0%, #2E63D6 100%);
  opacity: .92;
}
.ph2-shape.s-pe   { clip-path: polygon(8% 0, 100% 22%, 92% 100%, 0 78%); }
.ph2-shape.s-dl   { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.ph2-shape.s-fof  { clip-path: circle(46% at 50% 50%); }
.ph2-shape.s-ff   { clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.ph2-shape.s-blue { background: linear-gradient(150deg, #5A92F6, #2E63D6); }
.ph2-shape.s-teal { background: linear-gradient(150deg, #2BC0DE, #2E8FCB); }
.ph2-shape.s-green{ background: linear-gradient(150deg, #2DBB6B, #169469); }
.ph2-shape.s-indigo{ background: linear-gradient(150deg, #7480E6, #3A45B8); }

.ph2-organic { position: absolute; z-index: 2; inset: -6% ; width: 112%; height: 112%; left: -6%; top: -6%; opacity: .5; mix-blend-mode: screen; pointer-events: none; }
.ph2-organic path, .ph2-organic line { stroke: rgba(255,255,255,.55); stroke-width: 1; fill: none; }
.ph2-title {
  position: relative; z-index: 4; font-weight: 560; letter-spacing: -.045em; line-height: .9;
  font-size: clamp(56px, 8.5vw, 132px); color: var(--ink); text-align: center;
}
.ph2-title .lo { color: var(--ink); }

.ph2-stats { display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 1100px){ .ph2-stats { flex-direction: row; flex-wrap: wrap; gap: 28px; } }
.ph2-stat { }
.ph2-stat .sk { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.ph2-stat .sv { font-size: 22px; font-weight: 580; letter-spacing: -.02em; color: var(--ink); margin-top: 4px; }

/* atmospheric bg behind page hero */
.page-hero .ph-atmos { position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(60% 55% at 75% 18%, rgba(37,99,232,.08), transparent 60%),
              radial-gradient(50% 50% at 15% 80%, rgba(21,176,201,.06), transparent 60%); }
.page-hero .ph-grid { position:absolute; inset:0; z-index:0; opacity:.5;
  background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: radial-gradient(70% 70% at 60% 30%, #000 30%, transparent 78%); mask-image: radial-gradient(70% 70% at 60% 30%, #000 30%, transparent 78%); }

/* page intro band */
.page-intro { padding: 90px 0; }
.page-intro .lede { max-width: 760px; }

/* simple two-column prose row */
.prose-row { display: grid; grid-template-columns: 360px 1fr; gap: 56px; align-items: start; }
@media (max-width: 900px){ .prose-row { grid-template-columns: 1fr; gap: 28px; } }
.prose-row h3 { letter-spacing: -.03em; }

/* ---------- Sub-page hero: 3D orb (Three.js) ---------- */
.ph2-orb { position: absolute; inset: -8%; width: 116%; height: 116%; z-index: 2; pointer-events: none; }
/* old flat blob becomes a soft colour glow behind the orb (also the no-WebGL fallback) */
.ph2-stage .ph2-shape { opacity: .16; filter: blur(34px); }
.ph2-organic { display: none; }

/* ============================================================
   APNO — Sub-page SECTION FX  (alive, premium; all 5 pages)
   White background. The motion lives in the cards: they swing up
   in 3D on scroll and tilt + glow under the cursor.
   ============================================================ */

/* keep the page clean white */
body { background: #FFFFFF; }

/* --- Prose headings: an accent line that draws in on reveal --- */
.page-intro .prose-row h3 { font-size: clamp(26px, 3vw, 40px); }
.prose-row { position: relative; }
.prose-row h3 { position: relative; }
.prose-row h3::before {
  content: ""; display: block; width: 0; height: 4px; border-radius: 3px;
  background: linear-gradient(90deg, #2563E8, #2BC0DE);
  margin-bottom: 24px; transition: width 1s var(--ease-out) .15s;
}
.prose-row h3.in::before { width: 56px; }

/* --- Section eyebrow: gently pulsing dot --- */
@media (prefers-reduced-motion: no-preference) {
  .sec-head .eyebrow::before { animation: apno-pulse 2.6s var(--ease) infinite; }
  @keyframes apno-pulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--blue-tint); }
    50%      { box-shadow: 0 0 0 7px rgba(37, 99, 232, .06); }
  }
}

/* --- Card grid: 3D swing-up entrance + cursor tilt + spotlight --- */
.bgrid { perspective: 1400px; }
.bgrid .bcard {
  position: relative; overflow: hidden; isolation: isolate;
  transform-style: preserve-3d; background: #fff;
}
.bgrid .bcard > * { position: relative; z-index: 1; transform: translateZ(28px); }

/* scroll-driven progressive "scan" build: cards assemble one-by-one
   as the section scrolls through, each snapping in with a glow pulse */
.bgrid.scan .bcard {
  opacity: .22; transform: translateY(44px) scale(.92) rotateX(12deg);
  transform-origin: 50% 100%;
  transition: opacity .55s var(--ease-out), transform .7s var(--ease-out),
              box-shadow .45s, border-color .45s;
}
.bgrid.scan .bcard.on { opacity: 1; transform: none; }
.bgrid.scan .bcard.fire { box-shadow: 0 0 0 0 rgba(37,99,232,.40); animation: card-fire 1.05s var(--ease-out); }
@keyframes card-fire {
  0%   { box-shadow: 0 0 0 0 rgba(37,99,232,.45); border-color: rgba(37,99,232,.6); }
  100% { box-shadow: 0 0 0 22px rgba(37,99,232,0); }
}
/* top accent line draws across on hover */
.bgrid .bcard::before {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 0; z-index: 2;
  background: linear-gradient(90deg, #2563E8, #2BC0DE);
  transition: width .55s var(--ease-out);
}
.bgrid .bcard.tilt::before, .bgrid .bcard:hover::before { width: 100%; }
/* radial spotlight follows the cursor (vars set in apno-fx.js) */
.bgrid .bcard::after {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%),
              rgba(37, 99, 232, .16), transparent 60%);
  transition: opacity .35s; pointer-events: none;
}
.bgrid .bcard.tilt::after, .bgrid .bcard:hover::after { opacity: 1; }
.bgrid .bcard.tilt {
  box-shadow: 0 28px 60px -24px rgba(37, 99, 232, .40);
  border-color: rgba(37, 99, 232, .40);
}
.bgrid .bcard .bic { transition: transform .45s var(--ease-out), box-shadow .45s; }
.bgrid .bcard.tilt .bic, .bgrid .bcard:hover .bic { transform: translateZ(40px) scale(1.08) rotate(-3deg); }

/* ============================================================
   Pinned solution-showcase (the "watching" scroll, desktop only).
   The 6-card grid is hidden and replaced by a stage that walks
   through each item one-by-one as the section stays pinned.
   ============================================================ */
.bgrid.as-show { display: none; }

/* the host section becomes a tall scroll track; its .container sticks
   natively (no GSAP pin), so it can never desync or overlap neighbours */
.section.show-host {
  height: calc(var(--n, 6) * 62vh);
  padding: 0; position: relative; background: #fff; z-index: 1;
}
.section.show-host > .container {
  position: sticky; top: 70px; height: 92vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 28px; padding-bottom: 24px; background: #fff;
}
.section.show-host .sec-head { margin-bottom: 20px; }

.show {
  display: grid; grid-template-columns: 270px 1fr 170px; gap: 48px;
  align-items: center; min-height: 56vh; position: relative; margin-top: 4px;
}
.show-left { align-self: start; padding-top: 8px; }
.show-nav { display: flex; flex-direction: column; }
.show-navi {
  font-size: 17px; font-weight: 500; color: var(--muted-2);
  padding: 13px 0; border-top: 1px solid var(--line);
  transition: color .35s var(--ease), padding-left .35s var(--ease);
}
.show-navi.active { color: var(--ink); font-weight: 650; padding-left: 10px; }
.show-desc { margin-top: 30px; max-width: 260px; font-size: 15px; line-height: 1.62; color: var(--slate); }

.show-stage { position: relative; min-height: 60vh; overflow: visible; }

/* ONE bold solid colour block (the single accent — like Tres Mares' red) */
.show-block {
  position: absolute; z-index: 0; top: 14%; left: 8%; width: 52%; height: 70%;
  background: linear-gradient(150deg, #5B97FF 0%, #2E6BF2 100%);
}
.show-block.sp0 { clip-path: polygon(6% 0, 100% 16%, 94% 100%, 0 84%); }
.show-block.sp1 { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.show-block.sp2 { clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); }
.show-block.sp3 { clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }

/* black-and-white ARTISTIC photo, overlapping the block — never tinted blue */
.show-art {
  position: absolute; z-index: 1; top: 22%; right: 6%; width: 46%; height: 64%;
  overflow: hidden; box-shadow: 0 44px 96px -46px rgba(12, 26, 60, .5);
}
.show-art.ap0 { clip-path: circle(50% at 50% 50%); }
.show-art.ap1 { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.show-art.ap2 { clip-path: polygon(0 14%, 100% 0, 100% 86%, 0 100%); }
.show-art.ap3 { clip-path: circle(50% at 50% 50%); }
.show-photo { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.0) brightness(1.22); }
/* light wash so the dark title stays readable even over busy/darker photos */
.show-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,.24), rgba(255,255,255,.5));
}
@media (prefers-reduced-motion: no-preference) {
  .show-photo { animation: show-kb 18s ease-in-out infinite alternate; }
  @keyframes show-kb { from { transform: scale(1.06); } to { transform: scale(1.18) translate(-2%, -2%); } }
}

/* huge dark title spanning across, overlapping both (the signature look) */
.show-title {
  position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 600; font-size: clamp(46px, 6.6vw, 112px);
  line-height: .9; letter-spacing: -.045em; color: var(--ink); text-align: center; padding: 0 3%;
  pointer-events: none;
  /* crisp white halo keeps the dark title legible over any photo */
  text-shadow: 0 0 2px rgba(255,255,255,.92), 0 1px 24px rgba(255,255,255,.78), 0 0 46px rgba(255,255,255,.6);
}

.show-meta { text-align: right; align-self: start; padding-top: 8px; }
.show-num { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; color: var(--muted-2); }
.show-ic {
  display: inline-grid; place-items: center; width: 52px; height: 52px; margin-top: 18px;
  border-radius: 14px; background: var(--blue-tint); color: var(--blue);
}
.show-ic svg { width: 26px; height: 26px; }

/* --- CTA panel: slow living gradient instead of a flat block --- */
@media (prefers-reduced-motion: no-preference) {
  .cta .cta-bg { background-size: 170% 170%; animation: apno-cta 14s ease-in-out infinite; }
  @keyframes apno-cta {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
  }
}

/* --- vshow photo: settles from a soft zoom as it reveals --- */
.vshow .v-visual img { transition: transform 1.1s var(--ease-out), opacity 1.1s; }
.vshow .v-visual[data-reveal] img { transform: scale(1.08); }
.vshow .v-visual[data-reveal].in img { transform: scale(1); }