/* Motion Stufe 1 (30.09.2026): gemeinsames Bewegungs- und Sinnes-System der Website.
   - Sinnes-Code (R6, wie im Video-Programm): Farben nur für Sinne.
   - Seitenwechsel mit Klammern (View Transitions, page-transition.js).
   - Countdown-Chip mit sieben Balken im Rhythmus des Sound-Logos (components/countdown.html, motion.js).
   - Sinnes-Wörter und Sinnes-Chips (home.html «sehen, hören, riechen …», motion.js).
   Bei «reduzierter Bewegung» bleibt alles statisch sichtbar. */

:root {
    --sense-visuals: #4f7bff;
    --sense-sound: #9d6bff;
    --sense-scent: #ff4f8e;
    --sense-taste: #ff8a3d;
    --sense-haptics: var(--color-lime);
    --sense-interaction: #6fe0a8;
    --sense-meaning: #cfa56a;
}

[data-sense="visuals"] { --sense: var(--sense-visuals); }
[data-sense="sound"] { --sense: var(--sense-sound); }
[data-sense="scent"] { --sense: var(--sense-scent); }
[data-sense="taste"] { --sense: var(--sense-taste); }
[data-sense="haptics"] { --sense: var(--sense-haptics); }
[data-sense="interaction"] { --sense: var(--sense-interaction); }
[data-sense="meaning"] { --sense: var(--sense-meaning); }

/* ── Seitenwechsel: alte Seite schliesst zur Mitte, die Klammern treffen sich auf Ink, die neue Seite öffnet ── */
.vt-brackets {
    display: none;
    inset: 0;
    pointer-events: none;
    position: fixed;
    view-transition-name: vt-brackets;
    z-index: 2147483000;
}

html.vt-reveal .vt-brackets {
    display: block;
}

.vt-brackets span {
    --arm: clamp(26px, 3.4vw, 48px);
    --gap: 7px;
    border: 0 solid var(--color-lime);
    border-block-width: 9px;
    height: min(62vh, 520px);
    position: absolute;
    top: 50%;
    width: var(--arm);
}

.vt-brackets span:first-child {
    animation: s7-vt-bracket-l 0.6s cubic-bezier(0.65, 0, 0.35, 1) both;
    border-left-width: 9px;
    left: 0;
}

.vt-brackets span:last-child {
    animation: s7-vt-bracket-r 0.6s cubic-bezier(0.65, 0, 0.35, 1) both;
    border-right-width: 9px;
    right: 0;
}

@keyframes s7-vt-bracket-l {
    0% { opacity: 0; transform: translate(24px, -50%) scaleY(1); }
    8% { opacity: 1; }
    34% { transform: translate(calc(50vw - var(--arm) - var(--gap)), -50%) scaleY(0.46); }
    82% { opacity: 1; }
    100% { opacity: 0; transform: translate(24px, -50%) scaleY(1); }
}

@keyframes s7-vt-bracket-r {
    0% { opacity: 0; transform: translate(-24px, -50%) scaleY(1); }
    8% { opacity: 1; }
    34% { transform: translate(calc(-50vw + var(--arm) + var(--gap)), -50%) scaleY(0.46); }
    82% { opacity: 1; }
    100% { opacity: 0; transform: translate(-24px, -50%) scaleY(1); }
}

/* Desktop (30.09.2026): auf breiten Bildschirmen wirkten die Handy-Klammern klein und verloren. Ab 900 px sind sie
   rund doppelt so gross und kräftiger, mit sichtbarer Lücke in der Mitte. Die Höhe wird hier direkt animiert statt mit
   scaleY gestaucht, damit der Strich auch oben und unten gleich dick bleibt. Unter 900 px bleibt alles wie bisher. */
@media (min-width: 900px) {
    .vt-brackets span {
        --arm: clamp(60px, 5.4vw, 110px);
        --gap: clamp(12px, 1.2vw, 24px);
        --stroke: clamp(12px, 1vw, 18px);
        --h: min(84vh, 880px);
        --h-meet: calc(var(--h) * 0.52);
        border-block-width: var(--stroke);
        height: var(--h);
    }

    .vt-brackets span:first-child {
        animation-name: s7-vt-bracket-l-lg;
        border-left-width: var(--stroke);
    }

    .vt-brackets span:last-child {
        animation-name: s7-vt-bracket-r-lg;
        border-right-width: var(--stroke);
    }
}

@keyframes s7-vt-bracket-l-lg {
    0% { height: var(--h); opacity: 0; transform: translate(24px, -50%); }
    8% { opacity: 1; }
    34% { height: var(--h-meet); transform: translate(calc(50vw - var(--arm) - var(--gap)), -50%); }
    82% { opacity: 1; }
    100% { height: var(--h); opacity: 0; transform: translate(24px, -50%); }
}

@keyframes s7-vt-bracket-r-lg {
    0% { height: var(--h); opacity: 0; transform: translate(-24px, -50%); }
    8% { opacity: 1; }
    34% { height: var(--h-meet); transform: translate(calc(-50vw + var(--arm) + var(--gap)), -50%); }
    82% { opacity: 1; }
    100% { height: var(--h); opacity: 0; transform: translate(-24px, -50%); }
}

@keyframes s7-page-close {
    to { clip-path: inset(0 50% 0 50%); }
}

@keyframes s7-page-open {
    from { clip-path: inset(0 50% 0 50%); }
}

@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    ::view-transition {
        background: var(--color-ink);
    }

    ::view-transition-old(root) {
        animation: s7-page-close 0.2s cubic-bezier(0.55, 0, 1, 0.45) both;
    }

    ::view-transition-new(root) {
        animation: s7-page-open 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
    }

    ::view-transition-old(vt-brackets) {
        display: none;
    }

    ::view-transition-new(vt-brackets) {
        animation: none;
    }
}

/* ── Countdown-Chip ── */
.countdown {
    align-items: center;
    background: var(--color-ink);
    border-radius: 999px;
    color: var(--color-white);
    display: inline-flex;
    font-size: 0.86rem;
    font-weight: 700;
    gap: 10px;
    margin-top: 18px;
    padding: 7px 14px 7px 12px;
}

.countdown--dark {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.countdown__num {
    font-variant-numeric: tabular-nums;
}

.countdown__bars {
    align-items: flex-end;
    display: inline-flex;
    gap: 2px;
    height: 14px;
}

.countdown__bars i {
    background: var(--color-lime);
    border-radius: 1px;
    display: block;
    height: 100%;
    transform-origin: 50% 100%;
    width: 3px;
}

/* heights rise to the seventh bar; delays = sound-logo onsets (0·3·6·9·12·21·23 frames at 25 fps) */
.countdown__bars i:nth-child(1) { --d: 0ms; height: 34%; }
.countdown__bars i:nth-child(2) { --d: 120ms; height: 45%; }
.countdown__bars i:nth-child(3) { --d: 240ms; height: 56%; }
.countdown__bars i:nth-child(4) { --d: 360ms; height: 67%; }
.countdown__bars i:nth-child(5) { --d: 480ms; height: 78%; }
.countdown__bars i:nth-child(6) { --d: 840ms; height: 89%; }
.countdown__bars i:nth-child(7) { --d: 920ms; height: 100%; }

@keyframes s7-bar-rise {
    0% { transform: scaleY(0); }
    60% { transform: scaleY(1.25); }
    100% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: no-preference) {
    .countdown.is-live .countdown__bars i {
        animation: s7-bar-rise 0.36s cubic-bezier(0.2, 0.9, 0.3, 1) var(--d) both;
    }
}

/* ── Sinnes-Wörter: Marker in der Sinnesfarbe hinter dem Verb (Text bleibt Ink, Kontrast unverändert) ── */
.sense-word {
    position: relative;
    white-space: nowrap;
    z-index: 0;
}

.sense-word::before {
    background: var(--sense);
    border-radius: 0.08em;
    bottom: 0.04em;
    content: "";
    left: -0.06em;
    opacity: 0.55;
    position: absolute;
    right: -0.06em;
    top: 0.52em;
    transform-origin: 0 50%;
    z-index: -1;
}

[data-sense="haptics"].sense-word::before {
    opacity: 0.9;
}

@media (prefers-reduced-motion: no-preference) {
    [data-sense-sequence].is-armed .sense-word::before {
        transform: scaleX(0);
    }

    [data-sense-sequence].is-armed.is-lit .sense-word::before {
        transform: scaleX(1);
        transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 0.32s);
    }
}

/* ── Sinnes-Chips: jeder Sinn hat sein Zeichen und seine Bewegung ── */
.sense-chip {
    align-items: center;
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    color: var(--color-ink);
    display: inline-flex;
    font-size: 0.88rem;
    font-weight: 700;
    position: relative;
    user-select: none;
}

.sense-chip__mark {
    background: var(--sense);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(23, 23, 32, 0.18);
    display: inline-block;
    flex: 0 0 auto;
    height: 12px;
    position: relative;
    width: 12px;
}

/* Hören: drei Pegel statt Punkt */
[data-sense="sound"] .sense-chip__mark {
    background:
        linear-gradient(var(--sense), var(--sense)) 0 100% / 3px 50% no-repeat,
        linear-gradient(var(--sense), var(--sense)) 4.5px 100% / 3px 100% no-repeat,
        linear-gradient(var(--sense), var(--sense)) 9px 100% / 3px 70% no-repeat;
    border-radius: 0;
    box-shadow: none;
}

/* Schmecken: Tropfen (um -45° gedreht, der fallende Tropfen läuft daher auf (-14, 14) = senkrecht nach unten) */
[data-sense="taste"] .sense-chip__mark {
    border-radius: 50% 0 50% 50%;
    transform: rotate(-45deg);
}

/* Interaktion: Ring */
[data-sense="interaction"] .sense-chip__mark {
    background: transparent;
    box-shadow: inset 0 0 0 3px var(--sense);
}

@media (prefers-reduced-motion: no-preference) {
    .sense-chip.is-play[data-sense="haptics"] { animation: s7-squish 0.7s cubic-bezier(0.3, 0.7, 0.4, 1) both; }
    .sense-chip.is-play[data-sense="visuals"] .sense-chip__mark { animation: s7-spectrum 1.1s linear both; }
    .sense-chip.is-play[data-sense="sound"] .sense-chip__mark { animation: s7-levels 0.9s steps(1, end) both; }
    .sense-chip.is-play[data-sense="scent"] .sense-chip__mark::before,
    .sense-chip.is-play[data-sense="scent"] .sense-chip__mark::after { animation: s7-waft 1.2s ease-out both; }
    .sense-chip.is-play[data-sense="scent"] .sense-chip__mark::after { animation-delay: 0.22s; }
    .sense-chip.is-play[data-sense="taste"] .sense-chip__mark::after { animation: s7-drop 0.9s cubic-bezier(0.5, 0, 0.9, 0.6) both; }
    .sense-chip.is-play[data-sense="interaction"] .sense-chip__mark::after { animation: s7-ripple 0.9s ease-out both; }
}

[data-sense="scent"] .sense-chip__mark::before,
[data-sense="scent"] .sense-chip__mark::after,
[data-sense="taste"] .sense-chip__mark::after,
[data-sense="interaction"] .sense-chip__mark::after {
    content: "";
    opacity: 0;
    position: absolute;
}

[data-sense="scent"] .sense-chip__mark::before,
[data-sense="scent"] .sense-chip__mark::after {
    background: var(--sense);
    border-radius: 50%;
    height: 6px;
    left: 3px;
    top: -2px;
    width: 6px;
}

[data-sense="taste"] .sense-chip__mark::after {
    background: var(--sense);
    border-radius: 50% 0 50% 50%;
    height: 7px;
    left: 2.5px;
    top: 2.5px;
    width: 7px;
}

[data-sense="interaction"] .sense-chip__mark::after {
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--sense);
    inset: 0;
}

@keyframes s7-squish {
    0% { transform: scale(1); }
    28% { transform: scale(1.12, 0.84); }
    52% { transform: scale(0.94, 1.08); }
    74% { transform: scale(1.03, 0.97); }
    100% { transform: scale(1); }
}

@keyframes s7-spectrum {
    0% { background-color: var(--sense-visuals); }
    16% { background-color: var(--sense-sound); }
    32% { background-color: var(--sense-scent); }
    48% { background-color: var(--sense-taste); }
    64% { background-color: var(--sense-haptics); }
    80% { background-color: var(--sense-interaction); }
    100% { background-color: var(--sense-visuals); }
}

@keyframes s7-levels {
    0%, 100% { background-size: 3px 50%, 3px 100%, 3px 70%; }
    12% { background-size: 3px 100%, 3px 40%, 3px 80%; }
    25% { background-size: 3px 30%, 3px 90%, 3px 40%; }
    38% { background-size: 3px 80%, 3px 60%, 3px 100%; }
    50% { background-size: 3px 60%, 3px 100%, 3px 30%; }
    62% { background-size: 3px 100%, 3px 50%, 3px 70%; }
    75% { background-size: 3px 40%, 3px 80%, 3px 90%; }
    88% { background-size: 3px 70%, 3px 30%, 3px 50%; }
}

@keyframes s7-waft {
    0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
    20% { opacity: 0.9; }
    100% { opacity: 0; transform: translate(5px, -22px) scale(1.4); }
}

@keyframes s7-drop {
    0% { opacity: 0; transform: translate(0, 0); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translate(-14px, 14px); }
}

@keyframes s7-ripple {
    0% { opacity: 0.9; transform: scale(1); }
    100% { opacity: 0; transform: scale(3.2); }
}

/* ── Sinnes-Instrument (Startseite, sense-sound.js): jeder Chip ist ein Knopf mit seinem Ton. Gespielte Sinne
   färben ihren Chip und ihren Balken; sind alle sechs erklungen, steigen die sieben Balken im Rhythmus des
   Sound-Logos und der siebte Sinn (Sinnhaftigkeit, Gold) erscheint. ── */
.sense-chip {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.sense-chip__play {
    align-items: center;
    appearance: none;
    background: none;
    border: 0;
    border-radius: inherit;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    gap: 8px;
    margin: 0;
    padding: 7px 12px 7px 10px;
    touch-action: manipulation;
}

.sense-chip__play:focus-visible {
    outline: 3px solid var(--color-ink);
    outline-offset: 2px;
}

.sense-chip.is-heard {
    background: color-mix(in srgb, var(--sense) 18%, var(--color-paper));
    border-color: var(--sense);
}

.sense-instrument {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 14px;
}

.sense-instrument[hidden] {
    display: none;
}

.sense-meter {
    align-items: flex-end;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 3px;
    height: 20px;
}

.sense-meter i {
    background: var(--color-line);
    border-radius: 1px;
    display: block;
    transform-origin: 50% 100%;
    transition: background-color 0.25s ease;
    width: 4px;
}

/* heights and onsets as the countdown bars (sound-logo onsets 0·3·6·9·12·21·23 frames at 25 fps) */
.sense-meter i:nth-child(1) { --d: 0ms; height: 34%; }
.sense-meter i:nth-child(2) { --d: 120ms; height: 45%; }
.sense-meter i:nth-child(3) { --d: 240ms; height: 56%; }
.sense-meter i:nth-child(4) { --d: 360ms; height: 67%; }
.sense-meter i:nth-child(5) { --d: 480ms; height: 78%; }
.sense-meter i:nth-child(6) { --d: 840ms; height: 89%; }
.sense-meter i:nth-child(7) { --d: 920ms; height: 100%; }

.sense-meter i.is-on {
    background: var(--sense);
}

.sense-instrument__hint {
    color: var(--color-muted);
    flex: 1 1 16rem;
    font-size: 0.88rem;
    margin: 0;
}

.sense-instrument__seventh {
    align-items: center;
    display: flex;
    flex-basis: 100%;
    font-weight: 700;
    gap: 8px;
    margin: 0;
}

.sense-instrument__seventh:empty {
    display: none;
}

/* der siebte Sinn erscheint als eigener Chip in Gold (Sinnes-Code 7) */
.sense-chip[hidden] {
    display: none;
}

.sense-chip--seventh {
    background: color-mix(in srgb, var(--sense) 22%, var(--color-paper));
    border-color: var(--sense);
}

.sense-chip--seventh .sense-chip__play {
    cursor: default;
}

.sense-chip--seventh .sense-chip__mark {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sense) 35%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
    .sense-instrument.is-resolved .sense-meter i {
        animation: s7-bar-rise 0.36s cubic-bezier(0.2, 0.9, 0.3, 1) var(--d) both;
    }

    .sense-instrument__seventh:not(:empty) {
        animation: s7-seventh-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .sense-chip--seventh.is-born {
        animation: s7-seventh-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    .sense-chip--seventh.is-born .sense-chip__mark {
        animation: s7-halo 1.4s ease-out 0.2s both;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sense-chip,
    .sense-meter i {
        transition: none;
    }
}

@keyframes s7-seventh-in {
    from { opacity: 0; transform: translateY(6px); }
}

@keyframes s7-seventh-pop {
    0% { opacity: 0; transform: scale(0.4); }
    60% { opacity: 1; transform: scale(1.12); }
    100% { transform: scale(1); }
}

@keyframes s7-halo {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sense) 70%, transparent); }
    100% { box-shadow: 0 0 0 14px transparent; }
}

/* Sinnes-Kacheln im Hero: Nummer und Markierung in der Farbe des Sinns */
.sense-tile[data-sense] .sense-tile__mark {
    color: var(--sense);
}

.hero__media .sense-tile[data-sense].is-active {
    background: color-mix(in srgb, var(--sense) 14%, transparent);
    border-color: var(--sense);
}