/* ============================================================================
   KRANZ — Cinematic scroll layer.  Loaded AFTER kranz.css.
   Additive: every "scene-on" rule is applied by cinematic.js only when JS runs
   and prefers-reduced-motion is OFF.  Without it the markup is a normal,
   readable, fully-accessible stacked layout.  Warm-noir + brass skin preserved.
   ============================================================================ */

/* ============================ Hero — pinned depart ============================ */
/* The hero is wrapped in .hero-stage; cinematic.js adds .scene-on, makes the
   stage taller than the viewport and pins the hero so the next section rises
   over it while the film scales up and the copy fades. */
.hero-stage { position: relative; }
html.js .hero-stage.scene-on { height: 145svh; }
html.js .hero-stage.scene-on .hero {
    position: sticky; top: 0; height: 100svh; min-height: 100svh;
}
html.js .hero-stage.scene-on .hero__media { will-change: transform, filter; }
html.js .hero-stage.scene-on .hero__inner { will-change: opacity, transform; }
/* JS writes transform/opacity inline; nothing else needed. */

/* ============================ Values band (was marquee) ============================ */
.values { border-block: 1px solid var(--line); background: var(--surface); padding-block: clamp(2.2rem, 5vw, 4rem); }
.values__row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: clamp(1rem, 3.5vw, 3rem);
    width: min(100% - calc(var(--gutter) * 2), var(--content)); margin-inline: auto;
}
.values__item {
    font-family: var(--serif); font-style: italic; font-weight: 500;
    font-size: clamp(1.5rem, 3.4vw, 2.7rem); line-height: 1; letter-spacing: -.01em;
    color: var(--text-soft); display: inline-flex; align-items: center; gap: clamp(1rem, 3.5vw, 3rem);
}
.values__item::after { content: "✦"; font-style: normal; color: var(--brass); font-size: .42em; transform: translateY(-.15em); }
.values__item:last-child::after { display: none; }

/* ============================ Word-by-word reveal (manifesto) ============================ */
/* splitWords() wraps each word in <span class="wd" style="--i:N">.  When the
   browser supports scroll-driven animations, each word brightens in sequence as
   the paragraph travels through the viewport.  Fallback = fully visible. */
.words-ready .wd { display: inline-block; white-space: pre; }
@supports (animation-timeline: view()) {
    html.js .words-ready { view-timeline-name: --wds; view-timeline-axis: block; }
    @media (prefers-reduced-motion: no-preference) {
        html.js .words-ready .wd {
            color: var(--muted);
            animation: wordWarm linear both;
            animation-timeline: --wds;
            animation-range: cover calc(var(--i) * 1.5% + 6%) cover calc(var(--i) * 1.5% + 38%);
        }
        html.js .words-ready em .wd { animation: none; color: var(--brass-deep); }
    }
    @keyframes wordWarm { to { color: var(--text); } }
}

/* ============================ Statement — pinned cinematic sequence (Apple-style) ============================ */
/* Three nanobanana scenes. The first opens from an inset card to full-bleed; then,
   while the section stays pinned, the film cross-dissolves through all three —
   each with a slow Ken-Burns push and its own line of copy.
   No-JS / reduced-motion → three contained editorial stills stacked vertically. */
.statement { position: relative; }
.statement__pin { width: min(100% - calc(var(--gutter) * 2), var(--content)); margin-inline: auto; display: grid; gap: var(--s7); }
.statement__scene { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-md); box-shadow: var(--shadow-lg); }
.statement__scene img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.statement__scrim { position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(14,13,12,.16) 0%, rgba(14,13,12,0) 34%, rgba(14,13,12,.70) 100%); }
.statement__copy { position: absolute; z-index: 2; left: clamp(1.25rem, 5vw, 3rem); right: clamp(1.25rem, 5vw, 3rem);
    bottom: clamp(1.25rem, 5vw, 2.6rem); color: var(--bone); }
.statement__title { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -.02em; color: var(--bone); margin-top: var(--s3); }
.statement__title em { font-style: italic; color: var(--brass-soft); }

/* --- scene-on: pin a 100vh stage; JS drives per-scene opacity + image scale + copy --- */
html.js .statement.scene-on { height: 340vh; }
html.js .statement.scene-on .statement__pin {
    position: sticky; top: 0; height: 100svh; width: 100%; max-width: none; margin: 0;
    display: block; overflow: hidden; background: var(--noir, var(--char));
}
html.js .statement.scene-on .statement__scene {
    position: absolute; inset: 0; border-radius: 0; box-shadow: none; opacity: 0; will-change: opacity;
}
html.js .statement.scene-on .statement__scene.is-active { opacity: 1; }   /* pre-JS-frame: first scene visible */
html.js .statement.scene-on .statement__scene img {
    width: 100%; height: 100%; aspect-ratio: auto; transform-origin: center; will-change: transform;
}
html.js .statement.scene-on .statement__scrim { border-radius: 0; }
html.js .statement.scene-on .statement__copy {
    left: 50%; right: auto; transform: translateX(-50%); bottom: clamp(2.5rem, 8vh, 6rem);
    width: min(100% - calc(var(--gutter) * 2), var(--content)); text-align: left; will-change: opacity, transform;
}

@media (max-width: 720px) {
    html.js .statement.scene-on { height: 300vh; }
}
@media (prefers-reduced-motion: reduce) {
    html.js .statement.scene-on { height: auto; }
    html.js .statement.scene-on .statement__pin { position: relative; height: auto; display: grid; gap: var(--s7); background: none; }
    html.js .statement.scene-on .statement__scene { position: relative; inset: auto; opacity: 1; border-radius: var(--r-md); box-shadow: var(--shadow-lg); }
    html.js .statement.scene-on .statement__scene img { aspect-ratio: 16/9; }
    html.js .statement.scene-on .statement__copy { left: clamp(1.25rem, 5vw, 3rem); right: clamp(1.25rem, 5vw, 3rem); transform: none; width: auto; }
}

/* ============================ Sieben Disziplinen — sticky stage ============================ */
.disc { position: relative; }
.disc__grid { display: grid; gap: clamp(2rem, 5vw, 5rem); }
/* --- non-scene fallback: image then list, normal flow --- */
.disc__stage { position: relative; }
.disc__stage-inner {
    position: relative; overflow: hidden; border-radius: var(--r-md);
    background: var(--surface-2); aspect-ratio: 4/5; box-shadow: var(--shadow-md);
}
.disc__img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transform: scale(1.06); transition: opacity .9s var(--ease);
}
.disc__img.is-active { opacity: 1; }
.disc__stage-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(14,13,12,.78)); z-index: 2; pointer-events: none; }
.disc__stage-meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: clamp(1.3rem, 2.4vw, 2.2rem); color: var(--bone); display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.disc__stage-num { font-family: var(--serif); font-weight: 500; font-size: clamp(3rem, 9vw, 6rem); line-height: .85; color: var(--bone); }
.disc__stage-label { font-family: var(--mono); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brass-soft); text-align: right; max-width: 14ch; }

.disc__row { display: block; padding: clamp(1.6rem, 3vw, 2.4rem) 0; border-top: 1px solid var(--line); position: relative; color: inherit; }
.disc__row:last-child { border-bottom: 1px solid var(--line); }
.disc__head { display: flex; align-items: baseline; gap: 1.2rem; }
.disc__num { font-family: var(--mono); font-size: .8rem; color: var(--brass-deep); }
.disc__name { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.02; letter-spacing: -.01em; }
.disc__desc { display: block; font-size: .94rem; color: var(--muted); max-width: 42ch; margin-top: var(--s3); }
.disc__row .disc__go { font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-deep); margin-top: var(--s4); display: inline-flex; gap: .5rem; align-items: center; }
.disc__row .disc__go .ar { transition: transform var(--dur-fast) var(--ease-out); }
.disc__row:hover .disc__go .ar { transform: translateX(4px); }

/* --- scene-on: pin the stage, scroll the rows, light the active one --- */
html.js .disc.scene-on .disc__grid { grid-template-columns: 1fr 1fr; align-items: start; }
html.js .disc.scene-on .disc__stage { position: sticky; top: clamp(78px, 12vh, 110px); }
html.js .disc.scene-on .disc__stage-inner { aspect-ratio: auto; height: min(76svh, 720px); }
html.js .disc.scene-on .disc__list { padding-block: 8vh; }
html.js .disc.scene-on .disc__row {
    border: 0; min-height: 60svh; display: flex; flex-direction: column; justify-content: center;
    opacity: .58; transition: opacity .55s var(--ease), transform .55s var(--ease);
}
html.js .disc.scene-on .disc__row::after {
    content: ""; position: absolute; left: 0; bottom: 18%; width: 0; height: 1px; background: var(--brass);
    transition: width .6s var(--ease-out);
}
html.js .disc.scene-on .disc__row.is-active { opacity: 1; }
html.js .disc.scene-on .disc__row.is-active::after { width: clamp(40px, 8vw, 90px); }
html.js .disc.scene-on .disc__row:focus-visible { opacity: 1; }
html.js .disc.scene-on .disc__row.is-active .disc__name { color: var(--ink); }
html.js .disc.scene-on .disc__name { transition: color .5s var(--ease); }

@media (max-width: 900px) {
    html.js .disc.scene-on .disc__grid { grid-template-columns: 1fr; gap: 0; }
    html.js .disc.scene-on .disc__stage { top: 60px; z-index: 1; }
    html.js .disc.scene-on .disc__stage-inner { height: 42svh; }
    html.js .disc.scene-on .disc__list { padding-block: 4vh; }
    html.js .disc.scene-on .disc__row { min-height: 52svh; }
}

/* ============================ Referenzen — horizontal-in-vertical ============================ */
.folioh { position: relative; }
.folioh__head { width: min(100% - calc(var(--gutter) * 2), var(--content)); margin-inline: auto; }
/* non-scene fallback: a native horizontal scroll strip (great on touch / no-JS) */
.folioh__stick { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; }
.folioh__stick::-webkit-scrollbar { display: none; }
.folioh__track { display: flex; gap: clamp(1rem, 2vw, 2rem); padding: var(--s6) var(--gutter); width: max-content; }
.folioh__card {
    position: relative; flex: 0 0 auto; width: min(80vw, 540px); aspect-ratio: 4/5;
    overflow: hidden; background: var(--surface-2); scroll-snap-align: center; display: block; color: var(--bone);
}
.folioh__card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.folioh__card:hover img { transform: scale(1.05); }
.folioh__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(14,13,12,.74)); }
.folioh__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(1.3rem, 2.2vw, 2rem); }
.folioh__cap .m { font-family: var(--mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-soft); display: block; margin-bottom: .4rem; }
.folioh__cap .t { display: block; font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 500; line-height: 1.05; color: var(--bone); }
.folioh__rail { height: 2px; background: var(--line); width: min(100% - calc(var(--gutter) * 2), var(--content)); margin: var(--s5) auto 0; }
.folioh__rail-fill { display: block; height: 100%; width: 100%; background: var(--brass); transform: scaleX(0); transform-origin: left; }

/* --- scene-on: pin a 100vh viewport, drive the track with scroll progress --- */
html.js .folioh.scene-on { height: 260vh; }
html.js .folioh.scene-on .folioh__stick {
    position: sticky; top: 0; height: 100svh; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
}
html.js .folioh.scene-on .folioh__track { will-change: transform; padding-block: 0; }
html.js .folioh.scene-on .folioh__card { width: min(46vw, 560px); }
html.js .folioh.scene-on .folioh__rail { position: absolute; bottom: clamp(2rem, 6vh, 4rem); left: 50%; transform: translateX(-50%); }

@media (max-width: 820px) {
    html.js .folioh.scene-on { height: 240vh; }
    html.js .folioh.scene-on .folioh__card { width: 78vw; }
}

/* ============================ Prozess — sticky image stage + step lock ============================ */
.proc__grid { display: grid; gap: clamp(2rem, 5vw, 5rem); }

/* image stage (each phase cross-dissolves) */
.proc__stage { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--char); aspect-ratio: 4/5; box-shadow: var(--shadow-lg); }
.proc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06);
    filter: saturate(.85) sepia(.07) contrast(1.03); transition: opacity .9s var(--ease); }
.proc__img.is-active { opacity: 1; }
.proc__stage-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, rgba(14,13,12,.12) 0%, rgba(14,13,12,0) 28%, rgba(14,13,12,.88) 100%); }
.proc__stage-meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: clamp(1.3rem, 2.4vw, 2.2rem); }
.proc__bignum { font-family: var(--serif); font-weight: 500; font-size: clamp(3.4rem, 9vw, 6.5rem); line-height: .82; color: var(--bone); }
.proc__biglabel { font-family: var(--mono); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--brass-soft); margin-top: var(--s3); }
.proc__bar { height: 2px; background: rgba(244,240,233,.18); margin-top: var(--s4); position: relative; }
.proc__bar-fill { position: absolute; inset: 0 auto 0 0; width: 20%; background: var(--brass); transition: width .6s var(--ease-out); }

/* steps */
.proc__step { padding: clamp(1.4rem, 2.6vw, 2rem) 0; border-top: 1px solid var(--line-dark); }
.proc__step:last-child { border-bottom: 1px solid var(--line-dark); }
.proc__step-n { font-family: var(--mono); font-size: .7rem; color: var(--brass-soft); letter-spacing: .12em; }
.proc__step-t { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 500; margin-top: var(--s2); transition: color .5s var(--ease); }
.proc__step-d { font-size: .92rem; color: var(--muted-dark); margin-top: var(--s3); max-width: 46ch; }

html.js .proc.scene-on .proc__grid { grid-template-columns: 1fr 1fr; align-items: start; }
html.js .proc.scene-on .proc__aside { position: sticky; top: clamp(78px, 12vh, 110px); }
html.js .proc.scene-on .proc__stage { aspect-ratio: auto; height: min(74svh, 700px); }
html.js .proc.scene-on .proc__steps { padding-block: 7vh; }
html.js .proc.scene-on .proc__step { border: 0; min-height: 44svh; display: flex; flex-direction: column; justify-content: center;
    opacity: .58; transition: opacity .55s var(--ease); position: relative; }
html.js .proc.scene-on .proc__step::after { content: ""; position: absolute; left: 0; bottom: 14%; width: 0; height: 1px; background: var(--brass); transition: width .6s var(--ease-out); }
html.js .proc.scene-on .proc__step.is-active { opacity: 1; }
html.js .proc.scene-on .proc__step.is-active::after { width: clamp(40px, 8vw, 90px); }
html.js .proc.scene-on .proc__step.is-active .proc__step-t { color: var(--bone); }

@media (max-width: 900px) {
    html.js .proc.scene-on .proc__grid { grid-template-columns: 1fr; gap: 0; }
    html.js .proc.scene-on .proc__aside { top: 60px; z-index: 1; }
    html.js .proc.scene-on .proc__stage { height: 44svh; }
    html.js .proc.scene-on .proc__steps { padding-block: 4vh; }
    html.js .proc.scene-on .proc__step { min-height: 44svh; }
}

/* ============================ Atmospheric backdrops (decorative, on dark bands) ============================ */
/* Clearly-decorative ambiance imagery — NOT presented as a specific KRANZ project.
   Sits behind text on already-dark sections; a scrim guarantees WCAG contrast. */
.atmo { position: relative; isolation: isolate; }
.atmo > .wrap { position: relative; z-index: 1; }
.atmo__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.atmo__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .42; will-change: transform; }
.atmo__bg::after {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(90deg, rgba(14,13,12,.94) 0%, rgba(14,13,12,.58) 48%, rgba(14,13,12,.82) 100%),
      linear-gradient(180deg, rgba(14,13,12,.5) 0%, rgba(14,13,12,.18) 34%, rgba(14,13,12,.86) 100%);
}
/* centred variant (quote) — darken the middle where the text sits */
.atmo--center .atmo__bg img { opacity: .34; }
.atmo--center .atmo__bg::after {
    background:
      radial-gradient(130% 100% at 50% 50%, rgba(14,13,12,.55) 0%, rgba(14,13,12,.88) 70%),
      linear-gradient(180deg, rgba(14,13,12,.6) 0%, rgba(14,13,12,.35) 40%, rgba(14,13,12,.8) 100%);
}
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .atmo__bg img { animation: atmoDrift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
        /* more pronounced parallax → the dark bands read with real depth */
        @keyframes atmoDrift { from { transform: scale(1.1) translateY(-4.5%); } to { transform: scale(1.18) translateY(4.5%); } }
    }
}

/* ============================ 9.5 polish: living imagery · progress · smooth-scroll ============================ */
/* Ken-Burns drift on the active stage frame → cross-dissolves read as film, not slideshow */
@media (prefers-reduced-motion: no-preference) {
    html.js .disc.scene-on .disc__img.is-active,
    html.js .proc.scene-on .proc__img.is-active { animation: stageKen 14s var(--ease-out) forwards; }
}
@keyframes stageKen { from { transform: scale(1.06); } to { transform: scale(1.14) translate(-1.2%, -1.2%); } }

/* Top scroll-progress hairline (brass) — element injected by cinematic.js */
.cine-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 250; pointer-events: none; }
.cine-progress span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left;
    background: linear-gradient(90deg, var(--brass-deep), var(--brass-soft)); box-shadow: 0 0 12px var(--brass-glow); }

/* Lenis smooth-scroll (the `lenis` class is added to <html> only when active) */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* ============================ Reduced motion / no-scene guards ============================ */
@media (prefers-reduced-motion: reduce) {
    /* belt-and-braces: if a scene-on slipped through, neutralise pins & long scroll */
    html.js .hero-stage.scene-on { height: auto; }
    html.js .hero-stage.scene-on .hero { position: relative; height: auto; min-height: 100svh; }
    html.js .disc.scene-on .disc__row,
    html.js .proc.scene-on .proc__step { min-height: auto; opacity: 1 !important; }
    html.js .folioh.scene-on { height: auto; }
    html.js .folioh.scene-on .folioh__stick { position: static; height: auto; display: block; overflow-x: auto; }
    .disc__img, .proc__img { transition: none; }
}