/* ====== /about ======
   Built 2026-09-17 on the site's system (no Figma frame); loads after
   home.css for the .hero and .why patterns. Six sections: hero, who we are,
   we don't speak in words, vision (the light band), principles, CTA band. */

/* The page carried no lit phrase at all until 2026-10-03. Same roles as the
   other pages: cyan the capability, pink the payoff. */
.about-cyan { color: var(--c-accent-highlight); }
.about-pink { color: var(--c-accent-pink); }

/* ── 1 · Hero: "the signal engine" (voice-about.js mounts in .hero__video) ── */
.about-hero {
    min-height: 0;
    padding-block: 168px var(--space-15);   /* below 1024 the canvas is a 168px strip above the copy */
    /* The same left-to-right gradient voice-about.js paints on its box, so
       below 1024 the 168px strip meets the section with no seam; from 1024 the
       script covers the whole hero and this is only the pre-mount ground.     */
    background: linear-gradient(104deg, var(--primary-900) 0%, var(--primary-800) 46%, var(--primary-600) 100%);
}
/* voice-about.js lays itself out against the box it is given and, below 1024,
   expects that box to BE the 168px strip above the copy (it does not measure
   the copy the way voice-careers.js does). So the mount box is the strip
   there, and the whole hero from 1024 up.                                  */
.about-hero .hero__video { inset: 0 0 auto 0; height: 168px; }
.about-hero h1 { max-width: 14ch; }
.about-hero__intro { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); max-width: 640px; font-size: var(--t-h4); line-height: var(--lh-heading); color: var(--c-text-muted); }   /* H4 intro, as KH / Contact / Demo / Minus Hype */
.about-hero .btn { margin-top: var(--space-6); }

/* TRIAL (2026-09-18): the composition BEHIND the copy below 1024 rather than
   stacked above it. The box fills the whole hero at low opacity; the copy sits
   on top, bottom-aligned as on the Home mobile frame. A mask fades the box's
   foot so the hero hands over to the next section without a hard edge.
   Nothing here touches voice-about.js.                                    */
.about-hero.hero--under { min-height: 0; padding-top: 150px; }   /* the hero is as tall as its copy; the ring sits behind the headline */
.about-hero.hero--under .hero__video {
    inset: 0; height: auto;
    opacity: .55;
    /* The script puts the ring at 55% of its box and treats any box >= 1024px
       wide as desktop, so the box stays the hero's own width (always compact
       below 1024) and is SHIFTED right by 20% to land the ring at ~75% of the
       screen. The mask fades its foot into the next section and its left edge
       where the shift leaves the hero uncovered.                            */
    transform: translateX(20%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 18%);
            mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 18%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
}

/* ── 2 · Who we are ────────────────────────────────────────────────── */
.about-who { background: linear-gradient(180deg, var(--primary-900) 0%, var(--primary-800) 100%); }
.about-who__grid { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-8); }
/* The dictionary entry. Galano has no Devanagari; the script line falls to
   the platform's Devanagari face (Kohinoor on Apple, Nirmala on Windows,
   Noto on Android), which every one of them ships.                         */
.about-word {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-2);
    min-height: 260px;
}
.about-word__script {
    font-family: 'Kohinoor Devanagari', 'Devanagari MT', 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', sans-serif;
    font-size: clamp(88px, 6vw + 40px, 168px);
    line-height: 1.25;
    font-weight: 400;
    /* the sheen: a light band sweeping through the letterforms once, on reveal */
    background: linear-gradient(100deg, var(--c-accent-highlight) 0%, var(--c-accent-highlight) 35%, #FFFFFF 50%, var(--c-accent-highlight) 65%, var(--c-accent-highlight) 100%);
    background-size: 300% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    position: relative;
}
/* The glow is a blurred twin painted ONCE beneath the word. A filter animated
   on background-clipped text re-rasterises every frame and froze the page. */
.about-word__script::before {
    content: attr(data-text); position: absolute; inset: 0; z-index: -1;
    color: var(--c-accent-cyan); filter: blur(16px); opacity: .35;
    animation: about-breathe 6s ease-in-out infinite;
}
.about-word.is-visible .about-word__script { animation: about-sheen 1.6s ease-out .4s 1 both; }
@keyframes about-sheen   { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes about-breathe { 0%, 100% { opacity: .3; } 50% { opacity: .55; } }
.about-word__meta    { font-family: var(--font-secondary); font-size: var(--t-p3); letter-spacing: var(--ls-cta); text-transform: uppercase; color: var(--c-accent-pink); }
.about-word__meta span { margin-inline: 4px; color: var(--c-text-muted); }
.about-word__meaning { font-size: var(--t-h3); line-height: var(--lh-heading); font-weight: var(--fw-regular); color: var(--c-text); }

/* The Sanskrit line: the page's one light surface — the teal band as a panel */
.about-quote {
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-6);
    border-radius: var(--radius-card);
    background: var(--gloss-sheen), var(--c-accent-band);
    color: var(--c-primary-dark);
    font-size: var(--t-h4); line-height: var(--lh-heading);
    box-shadow: var(--gloss-edge), 0 16px 40px rgba(0, 0, 0, .3);
}
.about-quote p { color: inherit; max-width: none; }

/* ── 3 · We don't speak in words ───────────────────────────────────── */
.about-signals { background: linear-gradient(180deg, var(--primary-800) 0%, var(--primary-900) 100%); }
.about-signals__top { display: flex; flex-direction: column; gap: var(--space-6); }
.about-signals__body { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--measure); color: var(--c-text-muted); }
.about-signals__row { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-10); }
.about-signals__panel { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-6); font-size: var(--t-h4); line-height: var(--lh-heading); }
/* The annotated utterance: transcript on top, the voice beneath it, and the
   signals surfacing in sequence. Everything sequences off .is-visible, which
   main.js adds when the panel scrolls in — one-shot, like the reveals.     */
.utter { display: flex; flex-direction: column; gap: var(--space-3); }
.utter__label { font-family: var(--font-secondary); font-size: var(--t-p3); letter-spacing: var(--ls-cta); text-transform: uppercase; color: var(--c-accent-pink); }
.utter__label + .utter__label, .utter__wave + .utter__label { margin-top: var(--space-4); }
.utter__text { display: flex; flex-wrap: wrap; gap: 0 .3em; font-size: var(--t-h3); line-height: var(--lh-heading); color: var(--c-text); }
.utter__word { opacity: 0; transform: translateY(6px); }
.utter.is-visible .utter__word { animation: utter-word .4s ease-out calc(.3s + var(--i) * .22s) 1 both; }
@keyframes utter-word { to { opacity: 1; transform: none; } }

.utter__wave { position: relative; margin-top: var(--space-2); padding-bottom: 36px; }   /* room for the tags under the wave */
.utter__wave svg { display: block; width: 100%; height: 80px; overflow: visible; }
.utter__path {
    fill: none; stroke: var(--c-accent-cyan); stroke-width: 1.5; stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(171, 235, 240, .5));
    stroke-dasharray: 1; stroke-dashoffset: 1;       /* pathLength trick: draws 0 → 1 */
}
.utter.is-visible .utter__path { animation: utter-draw 2.2s ease-out 1.2s 1 both; }
@keyframes utter-draw { to { stroke-dashoffset: 0; } }

.utter__tag {
    position: absolute; top: calc(80px + 10px); left: calc(var(--x) * 100%); transform: translateX(-50%);
    padding: 3px 10px; border-radius: 999px; white-space: nowrap;
    font-family: var(--font-secondary); font-size: var(--t-p3); letter-spacing: var(--ls-cta); text-transform: uppercase;
    color: var(--c-accent-cyan);
    border: 1px solid rgba(171, 235, 240, .35); background: rgba(171, 235, 240, .08);
    box-shadow: var(--gloss-edge);
    opacity: 0;
}
.utter__tag::before {                             /* the tick up to the wave */
    content: ''; position: absolute; left: 50%; top: -10px; width: 1px; height: 10px; background: rgba(171, 235, 240, .5);
}
.utter.is-visible .utter__tag { animation: utter-tag .4s ease-out calc(1.6s + var(--i) * .55s) 1 both; }
@keyframes utter-tag { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }

.utter__verdict {
    align-self: flex-start; margin-top: var(--space-3);
    padding: 6px 14px; border-radius: 999px;
    font-family: var(--font-secondary); font-size: var(--t-p2); letter-spacing: var(--ls-cta); text-transform: uppercase;
    color: var(--c-primary-dark); background: var(--c-accent-cyan);
    box-shadow: var(--gloss-edge), var(--gloss-glow);
    opacity: 0;
}
.utter__verdict { position: relative; }
.utter.is-visible .utter__verdict { animation: utter-verdict .5s ease-out 3.6s 1 both; }
@keyframes utter-verdict { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── 4 · Vision: the light band (teal, as Home's stats band) ───────── */
.about-vision { overflow: hidden; background-color: var(--c-accent-band); color: var(--c-primary-dark); }
/* "voice" in twelve scripts, a ribbon across the band between the heading and
   the panel. Two identical tracks; the loop moves exactly one track (50% of a
   max-content box, so the seam lands on whole pixels). about.js lights the
   word nearest the centre of the screen.                                    */
.about-scripts {
    display: flex; width: max-content; white-space: nowrap; pointer-events: none;
    margin-block: var(--space-8) var(--space-2);
    font-size: clamp(40px, 5vw, 72px); line-height: 1.4;
    animation: about-scripts-drift 10s linear infinite;
    will-change: transform;
}
.about-scripts__track { display: flex; flex: 0 0 auto; gap: 1em; padding-right: 1em; }
.about-scripts__track span { color: var(--c-surface-1); opacity: .18; transition: opacity .35s ease; }
.about-scripts__track span.is-lit { opacity: 1; }
@keyframes about-scripts-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.about-vision__top { display: flex; flex-direction: column; gap: var(--space-4); }
.about-vision h2 { color: var(--c-surface-1); }
.about-vision__line { max-width: 600px; font-size: var(--t-h4); line-height: var(--lh-heading); color: var(--c-surface-1); }
.about-vision__panel {
    display: flex; flex-direction: column; gap: var(--space-6);
    margin-top: var(--space-8);
    color: var(--c-text);
    background: var(--gloss-sheen), linear-gradient(180deg, var(--primary-500) 0%, var(--primary-800) 100%);   /* the designer's Background/gradient 1 */
    box-shadow: var(--gloss-edge), 0 20px 60px rgba(0, 0, 0, .3);
}
.about-vision__body { font-size: var(--t-h5); line-height: var(--lh-heading); max-width: var(--measure); }

/* ── 5 · Principles ────────────────────────────────────────────────── */
.about-principles { background: linear-gradient(180deg, var(--primary-900) 0%, var(--primary-800) 100%); }
.about-principles__grid { display: flex; flex-direction: column; gap: var(--space-8); }
.about-principles__list { display: flex; flex-direction: column; }
.principle {
    position: relative;
    display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-4);
    padding-block: var(--space-6);
    border-top: 1px solid rgba(171, 235, 240, .16);
}
.principle::before {                          /* the hairline lights as the item arrives */
    content: ''; position: absolute; top: -1px; left: 0; width: 96px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--c-accent-cyan), rgba(171, 235, 240, 0));
    box-shadow: var(--gloss-glow);
    opacity: 0; transition: opacity .6s ease .3s;
}
.principle.is-visible::before { opacity: 1; }
.principle__num { font-family: var(--font-secondary); font-size: var(--t-h5); letter-spacing: var(--ls-cta); color: var(--c-accent-cyan); padding-top: .2em; }
/* The pillars replaced the "X, not Y." principles, so the line that used to
   strike a word out now draws under the pillar instead: same gesture, same
   timing, affirming rather than rejecting (2026-10-03). */
.principle__word { position: relative; display: inline-block; }
.principle__word::after {
    content: ''; position: absolute; left: 0; bottom: -.12em; height: 2px; width: 0;
    background: var(--c-accent-cyan); box-shadow: 0 0 8px rgba(171, 235, 240, .8);
    transition: width .6s ease .5s;
}
.principle.is-visible .principle__word::after { width: 100%; }
.principle__title { font-size: var(--t-h3); line-height: var(--lh-heading); font-weight: var(--fw-medium); color: var(--c-text); }
.principle__text { margin-top: var(--space-2); font-size: var(--t-p1); line-height: var(--lh-body); color: var(--c-text-muted); }

/* ── Tablet ───────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .about-signals__row { flex-direction: row; align-items: stretch; gap: var(--space-6); }
    .about-signals__panel { flex: 0 0 38%; }
    .utter { flex: 1 1 0; }
}

/* ── Desktop ──────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    .about-hero { min-height: 560px; padding-block: var(--space-15); }
    .about-hero .hero__video, .about-hero.hero--under .hero__video { inset: 0; height: auto; opacity: 1; transform: none; -webkit-mask-image: none; mask-image: none; }
    .about-hero.hero--under { padding-top: var(--space-15); }
    .about-hero h1 { max-width: 16ch; }

    .about-who__grid { flex-direction: row; align-items: center; gap: var(--space-16); }
    .about-word { flex: 0 0 44%; align-self: center; }
    .about-who__grid .why__text { flex: 1; }

    /* Same two columns as the panel + utterance row beneath, so the copy sits
       over the utterance; baselines aligned so the H2 and the first line read
       as one row.                                                            */
    /* The heading sat in a 38% column beside the copy, so neither used the row.
       Stacked instead, both running the container (2026-10-03). */
    .about-signals__body { max-width: none; }


    .about-vision__panel { padding: var(--space-15); }

    .about-principles__grid { flex-direction: row; align-items: flex-start; gap: var(--space-16); }
    .about-principles__head { flex: 0 0 40%; position: sticky; top: calc(var(--nav-height) + var(--space-8)); }
    .about-principles__list { flex: 1; }
    .principle { grid-template-columns: 72px minmax(0, 1fr); padding-block: var(--space-8); }
}