/*
 * Karriaro Modern-2026-Tech Layer — Sprint 159 (Award-Boost)
 *
 * Progressive Enhancement. ALLE Features hier sind via @supports
 * gated — wenn Browser nicht unterstuetzt, faellt es auf existing
 * Behavior zurueck. Keine Regression-Risk.
 *
 * Features:
 *   1. Cascade Layers (@layer) — Spezifitaets-Hierarchie
 *   2. Modern-Color (oklch + color-mix) — wahrnehmungs-uniforme Palette
 *   3. View Transitions API (@view-transition) — Page-Morph
 *   4. Scroll-Driven Animations (animation-timeline) — Reveal-on-Scroll
 *   5. Container Queries (@container) — Komponenten-Resp.
 *   6. @starting-style — Pure-CSS-Modal-Animation
 *
 * Award-Effekt: Awwwards-Judges + Apple-Design-Awards bewerten
 * Modern-Tech-Adoption (Tech-Stack-Wirkung pro Sprint 135-Submission).
 */

/* ─────────────────────────────────────────────────────────────────
 * 1. CASCADE LAYERS — Spezifitaets-Hierarchie
 * ─────────────────────────────────────────────────────────────── */

@layer karriaro.modern;

/* ─────────────────────────────────────────────────────────────────
 * 2. MODERN-COLOR (oklch + color-mix) — wahrnehmungs-uniform
 *    Branchen-Palette als oklch-Versionen + Helligkeits-Stufen via
 *    color-mix(). Fallback: existing --kr-blue etc. aus tokens.css.
 * ─────────────────────────────────────────────────────────────── */

@layer karriaro.modern {
    @supports (color: oklch(50% 0.1 250)) {
        :root {
            /* Karriaro-Hauptmarke (Manufaktur-Indigo) als oklch */
            --kr-blue-oklch:       oklch(32% 0.06 240);
            --kr-blue-hover-oklch: oklch(38% 0.08 240);
            --kr-gold-oklch:       oklch(58% 0.05 75);
            --kr-ink-oklch:        oklch(20% 0.02 240);

            /* Branchen-Palette (Sprint 131 Hermès-Vitrine, oklch-erweitert) */
            --branche-indigo:    oklch(38% 0.08 240);   /* Immobilien */
            --branche-charcoal:  oklch(28% 0.02 240);   /* Coaching */
            --branche-sage:      oklch(55% 0.06 145);   /* Praxis */
            --branche-taupe:     oklch(55% 0.03 70);    /* Friseur */
            --branche-forest:    oklch(38% 0.08 160);   /* Spedition */
            --branche-burgundy:  oklch(35% 0.09 20);    /* Gastro */
            --branche-deep-blue: oklch(32% 0.10 250);   /* Dachdecker */
            --branche-copper:    oklch(48% 0.10 55);    /* Handwerk */
        }
    }

    @supports (color: color-mix(in oklch, white 50%, black)) {
        :root {
            /* Helligkeits-Stufen via color-mix — fuer Hover/Soft-States */
            --kr-blue-soft:    color-mix(in oklch, var(--kr-blue, #1A2E40) 18%, white);
            --kr-blue-glass:   color-mix(in oklch, var(--kr-blue, #1A2E40) 90%, transparent);
            --kr-gold-soft:    color-mix(in oklch, var(--kr-gold, #8A7B5C) 25%, white);
        }
    }
}

/* ─────────────────────────────────────────────────────────────────
 * 3. VIEW TRANSITIONS API — Page-Morph zwischen Hauptseite + Portfolio
 *    Chrome 111+, Safari 18+. Graceful Fallback: instant Navigation.
 * ─────────────────────────────────────────────────────────────── */

@layer karriaro.modern {
    @supports (view-transition-name: none) {
        @view-transition {
            navigation: auto;
        }

        ::view-transition-old(root) {
            animation: 240ms cubic-bezier(0.22, 1, 0.36, 1) both kr-fade-out;
        }
        ::view-transition-new(root) {
            animation: 240ms cubic-bezier(0.22, 1, 0.36, 1) both kr-fade-in;
        }

        @keyframes kr-fade-out {
            from { opacity: 1; }
            to   { opacity: 0; }
        }
        @keyframes kr-fade-in {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* Hero-Mockup als shared element fuer Card-to-Page-Morph */
        .hero-mockup,
        .m-poster-stage {
            view-transition-name: portfolio-mockup;
        }

        /* Reduced-Motion respektieren */
        @media (prefers-reduced-motion: reduce) {
            ::view-transition-old(root),
            ::view-transition-new(root) {
                animation-duration: 0.01ms !important;
            }
        }
    }
}

/* ─────────────────────────────────────────────────────────────────
 * 4. SCROLL-DRIVEN ANIMATIONS (animation-timeline)
 *    Chrome 115+, Safari TP. Progressive Enhancement.
 * ─────────────────────────────────────────────────────────────── */

@layer karriaro.modern {
    @supports (animation-timeline: view()) {
        /* Hero-Eyebrow + H1 + Subhead — sanftes Stagger-Reveal beim
         * initialen Scroll. Element-Reveal triggert wenn 30% sichtbar. */
        .hero-folio-eyebrow,
        .hero-headline,
        .hero-with-photo .subhead {
            animation: kr-rise-fade linear both;
            animation-timeline: view();
            animation-range: cover 0% cover 25%;
        }

        @keyframes kr-rise-fade {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* Section-Headlines: Line-Mask-Reveal — der Titel wischt beim Reinscrollen
         * aus einer Clip-Maske nach oben auf (Award-Editorial-Type-Reveal, Sprint 215).
         * Scroll-driven (kein JS), reduced-motion unten neutralisiert. */
        section h2 {
            animation: kr-mask-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 62%;
        }

        @keyframes kr-mask-rise {
            from {
                opacity: 0;
                transform: translateY(34px);
                clip-path: inset(0 0 100% 0);
            }
            55% { opacity: 1; }
            to {
                opacity: 1;
                transform: translateY(0);
                clip-path: inset(0 0 -10% 0);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .hero-folio-eyebrow,
            .hero-headline,
            .hero-with-photo .subhead,
            section h2 {
                animation: none;
                opacity: 1;
                transform: none;
            }
        }
    }
}

/* ─────────────────────────────────────────────────────────────────
 * 5. CONTAINER QUERIES — komponenten-bezogene Responsive-Regeln
 *    Statt Viewport-Breakpoints: pro-Container-Size.
 *    Stable in Chrome 105+, Safari 16+ → 98% Coverage 2026.
 * ─────────────────────────────────────────────────────────────── */

@layer karriaro.modern {
    /* Persona-Grid — wenn Container < 600px, single-column-center */
    .m-mag-personas-grid {
        container-type: inline-size;
        container-name: persona-grid;
    }

    @container persona-grid (max-width: 600px) {
        .m-persona-tile {
            text-align: center;
        }
    }

    /* Tools-Grid — analog */
    .m-mag-tools-list,
    .m-mag-tools-grid {
        container-type: inline-size;
        container-name: tools-grid;
    }

    @container tools-grid (max-width: 480px) {
        .m-mag-tool-item,
        .m-mag-tool {
            text-align: left;
        }
    }
}

/* ─────────────────────────────────────────────────────────────────
 * 6. @STARTING-STYLE — Pure-CSS-Modal-Reveals
 *    Chrome 117+, Safari 17.5+. Progressive Enhancement.
 *    Sheet-Modal (Sprint 155) bekommt CSS-Animation ohne JS-Timer.
 * ─────────────────────────────────────────────────────────────── */

@layer karriaro.modern {
    @supports (transition-behavior: allow-discrete) {
        .m-demo-sheet {
            transition:
                display 320ms allow-discrete,
                opacity 240ms ease,
                transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
        }

        @starting-style {
            .m-demo-sheet.is-open {
                opacity: 0;
                transform: translateY(24px);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .m-demo-sheet {
                transition: none;
            }
        }
    }
}

/* ─────────────────────────────────────────────────────────────────
 * Footer-Comment: alle Features sind @supports-gesichert.
 * Browser ohne Support sehen Standard-Behavior (kein Regression).
 * Cache-Bust v=409 markiert Sprint 159-Deploy.
 * ─────────────────────────────────────────────────────────────── */