/* About page: same language as the homepage (34/66 rows, panels, spots) */

/* Intro */
.ab-intro { position: relative; isolation: isolate; padding-top: clamp(40px, 6vw, 96px); }
.ab-row { display: grid; grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); padding-right: 12px; align-items: start; }
.ab-side { display: grid; align-content: start; gap: var(--s-4); padding: var(--s-6) var(--s-7) var(--s-6) var(--gutter); }
.ab-side .case-name { font-size: clamp(2.25rem, 4.4vw, 4.25rem); max-width: 8ch; }
.ab-side .case-kind { max-width: 28ch; }
.ab-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); gap: var(--s-7); align-items: end; padding: var(--s-6) var(--gutter) var(--s-6) 0; }
.ab-musing { font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.12; text-wrap: pretty; max-width: 22ch; }
.ab-musing .m-a { color: var(--ink); }
.ab-musing .m-b { color: var(--ink-2); }
.ab-photo { position: relative; margin: 0; }
.ab-photo img { position: relative; display: block; width: 100%; aspect-ratio: 388 / 520; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
/* a patch of whale-shark spots peeking out behind the photo */
.ab-photo-spots { position: absolute; z-index: -1; width: 92%; height: 70%; right: -18%; top: -14%; background: var(--spot); opacity: .55;
  -webkit-mask: url('hero-dot-pattern-alpha.png') center / auto 520px repeat, radial-gradient(closest-side, #000 30%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask: url('hero-dot-pattern-alpha.png') center / auto 520px repeat, radial-gradient(closest-side, #000 30%, transparent 100%);
  mask-composite: intersect; }

/* Moments */
.ab-spots-corner { position: absolute; z-index: -1; right: 0; top: 40px; width: min(520px, 50vw); height: 360px; pointer-events: none; background: var(--spot); opacity: .22;
  -webkit-mask: url('hero-dot-pattern-alpha.png') right top / auto 520px repeat, radial-gradient(ellipse at 100% 0%, #000 0%, transparent 70%);
  -webkit-mask-composite: source-in;
  mask: url('hero-dot-pattern-alpha.png') right top / auto 520px repeat, radial-gradient(ellipse at 100% 0%, #000 0%, transparent 70%);
  mask-composite: intersect; }
.ab-media { display: block; position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.ab-media img, .ab-media video { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.ab-idx { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--s-5); font-size: var(--t-small); color: var(--ink-2); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
/* each number gets a single whale-shark spot */
.ab-idx i { width: 9px; height: 7px; border-radius: 52% 48% 58% 42% / 60% 45% 55% 40%; background: var(--c); transform: rotate(-18deg); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 55%, transparent); }

/* Shark */
.ab-shark { padding-top: var(--s-9); padding-bottom: var(--s-9); }

@media (max-width: 1000px) {
  .ab-main { grid-template-columns: 1fr; padding-left: var(--gutter); }
  .ab-photo { max-width: 300px; }
    }
@media (max-width: 720px) {
  .ab-row { grid-template-columns: 1fr; padding-right: 0; }
  .ab-side { padding-bottom: 0; }
  .ab-main { padding-top: var(--s-4); }
  .ab-photo { max-width: 240px; }
}
@media (max-width: 480px) {
      }

/* ---------- The rush: fast words that slow to a stop ---------- */
.ab-rush { position: relative; height: 260vh; margin-top: var(--s-9); }
.rush-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.rush-rows { position: absolute; inset: 0; display: grid; align-content: center; gap: clamp(8px, 2vw, 24px);
  opacity: calc(1 - var(--p, 0) * 0.82); filter: blur(calc((1 - var(--p, 0)) * 1.5px));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.rush-row { overflow: visible; white-space: nowrap; }
.rush-track { display: inline-flex; align-items: center; gap: clamp(20px, 3vw, 48px); will-change: transform; padding-right: clamp(20px, 3vw, 48px); }
.rush-track span { font-size: clamp(2.5rem, 7.5vw, 6.5rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: color-mix(in srgb, var(--ink) 16%, transparent); }
.rush-row:nth-child(2) .rush-track span { color: color-mix(in srgb, var(--ink) 9%, transparent); }
.rush-track i { width: 14px; height: 10px; border-radius: 52% 48% 58% 42% / 60% 45% 55% 40%; background: color-mix(in srgb, var(--spot) 45%, transparent); flex: none; }
.rush-copy { position: relative; display: grid; text-align: center; padding-inline: var(--gutter); }
.rush-line { grid-area: 1 / 1; align-self: center; font-size: clamp(1.75rem, 4vw, 3.25rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.08; transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out); }
.rush-line.l1 { opacity: clamp(0, calc((0.5 - var(--p, 0)) * 8), 1); }
.rush-line.l2 { opacity: clamp(0, calc((var(--p, 0) - 0.55) * 6), 1); background: linear-gradient(95deg, #EAF2F0 0%, #9BEBE1 50%, #FFD38A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.rush-meter { position: absolute; left: 50%; bottom: clamp(24px, 5vh, 56px); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; font-size: var(--t-small); color: var(--ink-2); letter-spacing: .12em; text-transform: uppercase; }
.rush-meter b { position: relative; width: 140px; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.rush-meter b i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(calc(1 - var(--p, 0) * 0.94)); background: linear-gradient(90deg, #3CC9C0, #6FB3FF 70%, #F2CF7A); }

/* ---------- Breathe ---------- */
.ab-breathe { display: grid; justify-items: center; text-align: center; gap: var(--s-4); padding: var(--s-9) var(--gutter) var(--s-10); }
.breathe-orb { position: relative; width: clamp(180px, 22vw, 260px); aspect-ratio: 1; display: grid; place-items: center; margin-bottom: var(--s-6); }
.breathe-orb::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(60, 201, 192, .22), transparent 70%); animation: breathe 10s var(--ease-in-out) infinite; }
.orb-spots { position: absolute; inset: 0; border-radius: 50%; background: var(--spot); opacity: .75; animation: breathe 10s var(--ease-in-out) infinite;
  -webkit-mask: url('hero-dot-pattern-alpha.png') center / auto 360px repeat, radial-gradient(closest-side, #000 55%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask: url('hero-dot-pattern-alpha.png') center / auto 360px repeat, radial-gradient(closest-side, #000 55%, transparent 100%);
  mask-composite: intersect; }
.orb-word { position: relative; grid-area: 1 / 1; font-size: var(--t-small); letter-spacing: .3em; text-transform: uppercase; color: var(--ink); }
.w-in { animation: word-in 10s linear infinite; }
.w-out { animation: word-out 10s linear infinite; }
@keyframes breathe { 0%, 100% { transform: scale(.62); } 50% { transform: scale(1); } }
@keyframes word-in { 0%, 42% { opacity: 1; } 48%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes word-out { 0%, 44% { opacity: 0; } 50%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
.ab-breathe h2 { font-size: var(--t-h2); }
.ab-breathe p { color: var(--ink-2); max-width: 36ch; }

/* ---------- Moments, one at a time: fast vs slow ---------- */
.ab-moments { position: relative; isolation: isolate; padding-top: var(--s-8); }
.mo-list { list-style: none; margin: 0; padding: 0; }
.mo { display: grid; grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); align-items: center; min-height: 92vh; min-height: 92svh; padding-right: 12px; }
.mo-text { display: grid; gap: var(--s-5); align-content: center; padding: var(--s-6) var(--s-7) var(--s-6) var(--gutter); }
.mo-fast { display: grid; gap: 6px; color: var(--ink-2); font-size: 1rem; }
.mo-fast s { text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--ink-2) 70%, transparent); }
.mo-slow { display: grid; gap: 8px; font-size: clamp(1.5rem, 2.4vw, 2.25rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.12; max-width: 18ch; }
.tag { font-size: 0.75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
.mo-slow .tag { color: var(--c); }
.mo-note { color: var(--ink-2); max-width: 30ch; }
.mo-media { position: relative; justify-self: center; width: min(100%, 460px); aspect-ratio: 3 / 4; overflow: hidden; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.mo-media a, .mo-media img, .mo-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.mo:nth-child(even) .mo-media { justify-self: start; margin-left: 8%; }
.mo:nth-child(odd) .mo-media { justify-self: end; margin-right: 10%; }
/* each moment comes into focus slowly: the fast line rushes in, the slow part takes its time */
.js .mo .mo-media img, .js .mo .mo-media video { filter: blur(14px) saturate(.6); transform: scale(1.06); transition: filter 2.4s var(--ease-out), transform 2.8s var(--ease-out); }
.js .mo.is-focus .mo-media img, .js .mo.is-focus .mo-media video { filter: none; transform: none; }
.js .mo .mo-fast { opacity: 0; transform: translateX(-40px); transition: opacity .35s ease, transform .35s ease; }
.js .mo .mo-slow, .js .mo .mo-note, .js .mo .ab-idx { opacity: 0; transform: translateY(10px); transition: opacity 1.6s var(--ease-out), transform 1.6s var(--ease-out); }
.js .mo.is-focus .mo-fast { opacity: 1; transform: none; }
.js .mo.is-focus .ab-idx { opacity: 1; transform: none; transition-delay: .2s; }
.js .mo.is-focus .mo-slow { opacity: 1; transform: none; transition-delay: .9s; }
.js .mo.is-focus .mo-note { opacity: 1; transform: none; transition-delay: 1.8s; }

/* ---------- The question to the viewer ---------- */
.ab-ask { position: relative; isolation: isolate; display: grid; justify-items: center; text-align: center; gap: var(--s-5); min-height: 90vh; min-height: 90svh; align-content: center; padding: var(--s-9) var(--gutter); }
.ab-ask .spot-reveal { inset: 0; }
.ask-eyebrow { font-size: var(--t-small); letter-spacing: .16em; text-transform: uppercase; color: var(--spot); }
.ab-ask h2 { font-size: clamp(2.25rem, 5.4vw, 4.75rem); letter-spacing: -0.045em; line-height: 1; max-width: 16ch; text-wrap: balance; }
.ask-sub { color: var(--ink-2); }
.ask-dots { display: flex; gap: 12px; margin-top: var(--s-5); }
.ask-dots i { width: 9px; height: 7px; border-radius: 52% 48% 58% 42% / 60% 45% 55% 40%; background: var(--line); }
.ab-ask.is-on .ask-dots i { animation: tick 1s var(--ease-out) forwards; }
.ab-ask.is-on .ask-dots i:nth-child(2) { animation-delay: 1s; } .ab-ask.is-on .ask-dots i:nth-child(3) { animation-delay: 2s; }
.ab-ask.is-on .ask-dots i:nth-child(4) { animation-delay: 3s; } .ab-ask.is-on .ask-dots i:nth-child(5) { animation-delay: 4s; }
@keyframes tick { to { background: var(--spot); transform: scale(1.3); } }

.ab-bridge { padding-block: var(--s-8) 0; }
.ab-bridge p { font-size: clamp(1.5rem, 2.8vw, 2.5rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; max-width: 30ch; }
.ab-bridge .m-b { color: var(--ink-2); }

@media (max-width: 860px) {
  .mo { grid-template-columns: 1fr; min-height: 0; padding: var(--s-8) 0 0; gap: var(--s-5); }
  .mo-text { padding: 0 var(--gutter); }
  .mo-media, .mo:nth-child(even) .mo-media, .mo:nth-child(odd) .mo-media { justify-self: start; margin: 0 var(--gutter); width: min(calc(100% - var(--gutter) * 2), 420px); }
  .ab-rush { height: 220vh; }
}
@media (prefers-reduced-motion: reduce) {
  .breathe-orb::before, .orb-spots, .w-in, .w-out { animation: none; }
  .w-out { display: none; }
  .js .mo .mo-media img, .js .mo .mo-media video, .js .mo .mo-fast, .js .mo .mo-slow, .js .mo .mo-note, .js .mo .ab-idx { filter: none; opacity: 1; transform: none; transition: none; }
  .ab-ask .ask-dots i { background: var(--spot); }
}
.rush-copy::before { content: ''; position: absolute; z-index: -1; inset: -60px -120px; background: radial-gradient(closest-side, var(--ground) 35%, transparent 100%); }
.rush-copy { isolation: isolate; }

/* Intro: musing + a little context before the first scroll */
.ab-main { grid-template-areas: "musing photo" "context photo" "cue photo"; grid-template-rows: auto auto 1fr; row-gap: var(--s-5); }
.ab-musing { grid-area: musing; }
.ab-context { grid-area: context; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.55; max-width: 44ch; }
.ab-cue { grid-area: cue; align-self: end; display: inline-flex; gap: 8px; font-size: var(--t-small); letter-spacing: .14em; text-transform: uppercase; color: var(--spot); }
.ab-cue span { display: inline-block; animation: cue 2.4s var(--ease-in-out) infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.ab-photo { grid-area: photo; align-self: start; }
@media (max-width: 1000px) { .ab-main { grid-template-areas: "musing" "context" "cue" "photo"; grid-template-rows: auto; } }
@media (prefers-reduced-motion: reduce) { .ab-cue span { animation: none; } }

/* ---------- Mobile polish ---------- */
@media (max-width: 720px) {
  .ab-intro { padding-top: var(--s-6); }
  .ab-main { gap: var(--s-5); padding-bottom: 0; }
  .ab-photo { max-width: none; width: 100%; }
  .ab-photo img { aspect-ratio: 4 / 3; object-position: 50% 30%; }
  .ab-musing { font-size: 1.625rem; }
  .ab-rush { height: 170vh; height: 170svh; margin-top: var(--s-7); }
  .rush-track span { font-size: 2.75rem; color: color-mix(in srgb, var(--ink) 20%, transparent); }
  .rush-line { font-size: 1.875rem; }
  .ab-moments { padding-top: var(--s-6); }
  .ab-moments .cases-head { margin-bottom: 0; }
  .ab-spots-corner { display: none; }
  .mo { padding-top: var(--s-8); gap: var(--s-4); }
  .mo-text { gap: var(--s-3); }
  .mo-slow { font-size: 1.5rem; max-width: none; }
  .mo-media, .mo:nth-child(even) .mo-media, .mo:nth-child(odd) .mo-media { width: calc(100% - var(--gutter) * 2); aspect-ratio: 4 / 5; }
  .js .mo .mo-media img, .js .mo .mo-media video { filter: blur(8px) saturate(.7); }
  .ab-ask { min-height: 0; padding: var(--s-10) var(--gutter) var(--s-9); }
  .ab-ask h2 { font-size: 2.25rem; }
  .ab-bridge { padding-top: 0; }
  .ab-bridge p { font-size: 1.375rem; }
  .ab-shark { padding-top: var(--s-8); padding-bottom: var(--s-7); }
}