/**
 * decorations.css — "Erlebniswelt"-Deko-System (Meilenstein Design-Vergleich Live-Seite).
 *
 * Enthält: schwebende Blob-/Stern-Deko, organische Bildmasken, verstärkte
 * Card-/Button-Microinteractions, Scroll-Reveal-Richtungsvarianten und
 * das CSS-Parallax-Hook (Klasse .tobidu-parallax, JS setzt --parallax-y).
 * Reine Deko/Effekte — keine Editor-Attribute, keine externen Assets,
 * kein Layout-Shift (nur transform/opacity animiert).
 */

/* ---------- Deko-Farbtokens ---------- */
:root {
    --deco-pink: #fb7185;
    --deco-teal: #2dd4bf;
    --deco-purple: #a78bfa;
    --deco-yellow: #fbbf24;
}

/* ---------- Schwebende Deko-Shapes ---------- */
.tobidu-deco-layer {
    position: relative;
    height: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
}

.tobidu-deco-layer .tobidu-deco {
    position: absolute;
}

.tobidu-deco {
    position: absolute;
    opacity: 0.55;
    animation: tobidu-float 9s ease-in-out infinite;
    will-change: transform;
}

.tobidu-deco--spin {
    animation: tobidu-spin 22s linear infinite;
}

.tobidu-deco--delay-1 { animation-delay: -2s; }
.tobidu-deco--delay-2 { animation-delay: -4.5s; }
.tobidu-deco--delay-3 { animation-delay: -6.5s; }

@keyframes tobidu-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-14px) rotate(6deg); }
}

@keyframes tobidu-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Sections brauchen Positionierungskontext für die Deko-Ebene + Content über der Deko. */
.tobidu-deco-host {
    position: relative;
    isolation: isolate;
}

/* WICHTIG: schließt Deko-Ebenen aus, die absichtlich position:absolute bzw.
   height:0 im eigenen Block-CSS setzen (z. B. .tobidu-hero__glow,
   .tobidu-deco-layer) — sonst überschreibt diese generische Host-Regel deren
   Positionierung mit "relative" und reißt ungewollt Leerraum in den Flow
   (realer Bug, gefunden/behoben in Meilenstein "Echte Bildwelt", Bericht 11:
   der Hero-Glow-Kreis wurde dadurch Teil des normalen Dokumentflusses statt
   frei zu schweben und schob den gesamten Hero-Content ~560px nach unten). */
.tobidu-deco-host > .container,
.tobidu-deco-host > *:not(.tobidu-hero__glow):not(.tobidu-deco-layer) {
    position: relative;
    z-index: 1;
}

/* ---------- Organische Bildmasken (statt reinem Rechteck/Radius) ---------- */
.tobidu-blob-mask {
    border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: border-radius var(--transition-base);
}

@media (min-width: 768px) {
    .tobidu-blob-mask {
        border-radius: 63% 37% 41% 59% / 47% 42% 58% 53%;
    }
}

/* ---------- Verstärktes Card-Lift ---------- */
.card:hover,
.tobidu-trust__card:hover {
    box-shadow: 0 18px 34px rgba(26, 26, 46, 0.16);
    transform: translateY(-6px) rotate(-0.4deg);
}

/* ---------- Button-Microinteractions ---------- */
.btn {
    position: relative;
    background-size: 160% 160%;
    background-position: 0% 50%;
    transition: background-position var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn--primary {
    background-image: linear-gradient(120deg, var(--color-accent) 0%, var(--deco-yellow) 45%, var(--color-accent-dark) 100%);
}

.btn--primary:hover {
    background-position: 100% 50%;
    transform: translateY(-2px) scale(1.035);
    box-shadow: 0 10px 22px rgba(217, 119, 6, 0.35);
}

.btn--secondary:hover {
    transform: translateY(-2px) scale(1.02);
}

.btn:active {
    transform: translateY(0) scale(0.98);
}

/* Icon-Bounce bei CTA-Buttons mit .btn__icon-Element (falls vorhanden). */
.btn__icon {
    display: inline-block;
    transition: transform var(--transition-fast);
}

.btn:hover .btn__icon {
    animation: tobidu-icon-bounce 0.5s ease;
}

@keyframes tobidu-icon-bounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

/* ---------- Scroll-Reveal-Richtungsvarianten (konsolidiertes Animation-System) ----------
   Kanonische Werte: fade-up | fade-left | fade-right | scale-in.
   Legacy-Werte (up/left/right/scale) aus der Vorrunde bleiben als Alias erhalten,
   damit bereits vorhandenes Markup ohne Änderung weiterläuft. */
html.js-reveal-ready .reveal[data-reveal="left"],
html.js-reveal-ready .reveal[data-reveal="fade-left"] { transform: translateX(-28px); }
html.js-reveal-ready .reveal[data-reveal="right"],
html.js-reveal-ready .reveal[data-reveal="fade-right"] { transform: translateX(28px); }
html.js-reveal-ready .reveal[data-reveal="up"],
html.js-reveal-ready .reveal[data-reveal="fade-up"] { transform: translateY(24px); }
html.js-reveal-ready .reveal[data-reveal="scale"],
html.js-reveal-ready .reveal[data-reveal="scale-in"] { transform: scale(0.92); }

html.js-reveal-ready .reveal[data-reveal].is-visible {
    transform: none;
    opacity: 1;
}

/* ---------- Float / Subtle-Rotate (wiederverwendbare Deko-Bewegungsklassen) ----------
   .float: dezentes, langsames Schweben (Deko-Icons, Ballons, Blobs).
   .subtle-rotate: sehr leichte Pendel-Rotation, unabhängig von .float kombinierbar.
   Variation über CSS nth-child (keine Inline-Styles pro Element nötig), respektiert
   prefers-reduced-motion und wird auf Mobile in Dichte/Amplitude reduziert. */
.float {
    animation: tobidu-float-soft 7s ease-in-out infinite;
    will-change: transform;
}

.float:nth-child(2n) { animation-duration: 8.5s; animation-delay: -2.5s; }
.float:nth-child(3n) { animation-duration: 9.5s; animation-delay: -4.5s; }
.float:nth-child(3n+1) { animation-duration: 6.5s; animation-delay: -1.5s; }

@keyframes tobidu-float-soft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.subtle-rotate {
    animation: tobidu-subtle-rotate 6s ease-in-out infinite;
    transform-origin: 50% 50%;
    will-change: transform;
}

.subtle-rotate:nth-child(2n) { animation-duration: 7.5s; animation-delay: -2s; }

@keyframes tobidu-subtle-rotate {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
}

/* Bericht Nr. 48 — Figma-Referenz Hero(): "wiggle" (VDH-Badge) und
   "spin-slow" (✨-Sparkle neben dem Hero-Bild). */
.wiggle {
    animation: tobidu-wiggle 3s ease-in-out infinite;
    will-change: transform;
}

@keyframes tobidu-wiggle {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

.tobidu-spin-slow {
    animation: tobidu-spin-slow 8s linear infinite;
    will-change: transform;
}

@keyframes tobidu-spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .float,
    .subtle-rotate,
    .tobidu-deco-bubble,
    .wiggle,
    .tobidu-spin-slow {
        animation: none !important;
    }
}

@media (max-width: 767px) {
    .float { animation-duration: 5s; }
}

/* ---------- Tilt-Hover (Figma-Referenz .tilt-card) ----------
   Bisher fehlendes Bewegungsmuster (Bericht Nr. 32 Animations-Audit):
   leichte 3D-Kippung bei Hover/Focus, zusätzlich zum bestehenden
   translateY-Lift der jeweiligen Card-Klassen. Bewusst NUR auf Desktop/
   Maus-Geräte (hover:hover) — auf Touch wirkungslos statt aufdringlich,
   und automatisch durch die bestehende globale prefers-reduced-motion-Regel
   in base.css deaktiviert (Transition, keine Keyframe-Animation). */
@media (hover: hover) and (pointer: fine) {
    .tobidu-tilt {
        transition: transform var(--transition-base), box-shadow var(--transition-base);
        transform-style: preserve-3d;
    }

    .tobidu-tilt:hover,
    .tobidu-tilt:focus-within {
        transform: perspective(700px) rotateX(-3deg) rotateY(3deg) translateY(-6px);
    }
}

/* ---------- Shimmer (Figma-Referenz .btn-wow) ----------
   Laufender Farbverlauf-Schimmer auf dem dominanten Primär-CTA bei Hover —
   verstärkt den "Wow"-Moment des wichtigsten Buttons, ohne alle Buttons
   gleichermaßen zu bewegen (bewusst nur .btn--primary/.tobidu-hero__cta,
   nicht sekundäre/neutrale Buttons — sonst Reizüberflutung). */
.tobidu-shimmer {
    position: relative;
    overflow: hidden;
}

.tobidu-shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 48%, transparent 66%);
    background-size: 200% 100%;
    background-position: 200% 0;
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
}

.tobidu-shimmer:hover::after,
.tobidu-shimmer:focus-visible::after {
    opacity: 1;
    animation: tobidu-shimmer-sweep 1.1s ease forwards;
}

@keyframes tobidu-shimmer-sweep {
    from { background-position: 200% 0; }
    to { background-position: -20% 0; }
}

/* ---------- Marquee (Figma-Referenz MarqueeStrip) ----------
   Endlos scrollende Fakten-Leiste — im Theme bisher nicht vorhanden.
   Nur Vanilla-CSS-Animation (translateX-Loop), Inhalt wird serverseitig
   verdoppelt (siehe front-page.php) statt per JS geklont, damit ohne JS
   trotzdem beide Hälften sichtbar/lesbar bleiben (kein "leer ohne JS"-Risiko). */
.tobidu-marquee {
    background: var(--color-primary);
    overflow: hidden;
    padding-block: var(--space-3);
    position: relative;
    z-index: 5;
}

.tobidu-marquee__track {
    display: flex;
    width: max-content;
    animation: tobidu-marquee-scroll 26s linear infinite;
}

.tobidu-marquee:hover .tobidu-marquee__track {
    animation-play-state: paused;
}

.tobidu-marquee__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-inline: var(--space-6);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--fs-sm);
    color: #fff;
    white-space: nowrap;
}

.tobidu-marquee__item::after {
    content: "•";
    margin-left: var(--space-6);
    opacity: 0.5;
}

@keyframes tobidu-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .tobidu-marquee__track {
        animation: none;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Zusätzliche Deko-Shape-Varianten (Section-Vielfalt, Meilenstein 10) ----------
   Gepunktete Verbindungslinie (Attraktionen), Ballon (Kindergeburtstag),
   Fragezeichen (FAQ) — als kleine Inline-SVG-Bausteine, die per PHP-Markup
   in front-page.php eingesetzt werden. Hier nur begleitende Basisstile. */
.tobidu-deco-dotted-line {
    stroke: var(--deco-teal);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 1 14;
    fill: none;
    opacity: 0.5;
}

.tobidu-deco-balloon {
    filter: drop-shadow(0 6px 10px rgba(26, 26, 46, 0.12));
}

.tobidu-deco-bubble {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), var(--color-primary-light) 70%);
    opacity: 0.55;
    animation: tobidu-float-soft 8s ease-in-out infinite;
}

/* Scroll-Anker für In-Page-Links (z. B. Hero-Sekundär-CTA "Attraktionen
   entdecken") — kompensiert den Sticky-Header, damit die Zielsection nicht
   darunter verschwindet. */
.tobidu-anchor-offset {
    display: block;
    position: relative;
    top: calc(var(--header-height) * -1);
    height: 0;
    visibility: hidden;
}

.tobidu-deco-question {
    font-family: var(--font-heading);
    font-weight: 700;
    opacity: 0.14;
    color: var(--color-primary);
    line-height: 1;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ---------- Parallax-Hook (Desktop only, JS setzt --parallax-y per rAF) ---------- */
@media (min-width: 1024px) {
    .tobidu-parallax {
        transform: translateY(var(--parallax-y, 0px));
        will-change: transform;
    }
}

/* ---------- Section-Übergänge: weicher Farbverlauf statt harter Kante ---------- */
.tobidu-fade-seam {
    display: block;
    width: 100%;
    height: var(--space-8);
    margin-top: calc(var(--space-8) * -1);
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, var(--color-bg-alt) 100%);
}

/* Bericht Nr. 37: die Ticket-CTA-Section ist jetzt Figma-Orange statt Navy
   (siehe sections.css) — die frühere Gelb-Verlauf-Regel für den Button
   (Bericht Nr. 32, damals als Kontrast-Kompromiss auf Navy begründet) ist
   damit hinfällig und wurde entfernt. Der Button ist jetzt die weiße
   Fläche mit Orange-Text aus cta-ticket/style.css (Figma-1:1), kein
   zusätzlicher Override nötig. */

/* ---------- Reduced Motion / Mobile: Bewegungseffekte zurückfahren ---------- */
@media (prefers-reduced-motion: reduce) {
    .tobidu-deco {
        animation: none !important;
    }

    .tobidu-parallax {
        transform: none !important;
    }

    .btn--primary:hover,
    .btn--secondary:hover,
    .card:hover,
    .tobidu-trust__card:hover {
        transform: none;
    }

    .btn:hover .btn__icon {
        animation: none;
    }
}

@media (max-width: 1023px) {
    .tobidu-parallax {
        transform: none !important;
    }

    .tobidu-deco {
        animation-duration: 13s;
        opacity: 0.35;
    }
}