/* ========================================================================== Joy Island – Animations & UI-Politur - Reveal-on-Scroll in mehreren Stilen (pro Seite via ) - Seitenspezifische Ambient-Animationen (passend zum jeweiligen Seiten-Typ) - Dezente globale Politur (Buttons, Karten, Smooth-Scroll) Sicherheit: Reveal-Zustaende gelten NUR, wenn gesetzt ist (fuegt reveal.js hinzu). Ohne JS/mit reduced-motion bleibt alles sichtbar. ========================================================================== */ /* ---- Reveal-on-Scroll -------------------------------------------------- */ .anim-ready [data-animate] { opacity: 0; will-change: opacity, transform; transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); } .anim-ready [data-animate].in-view { opacity: 1; transform: none; } .anim-ready [data-animate="rise"] { transform: translateY(26px); } .anim-ready [data-animate="slide-left"] { transform: translateX(-34px); } .anim-ready [data-animate="slide-right"] { transform: translateX(34px); } .anim-ready [data-animate="zoom"] { transform: scale(0.9); } .anim-ready [data-animate="fade"] { transform: none; } .anim-ready [data-animate="pop"] { transform: scale(0.8); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ---- Keyframes --------------------------------------------------------- */ @keyframes ji-shimmer { to { background-position: 300% 0; } } @keyframes ji-soft-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.88; } } @keyframes ji-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes ji-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 170, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(0, 212, 170, 0); } } @keyframes ji-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(3deg); } } /* Nutzbare Utility-Klasse fuer Farbverlauf-Text (z. B. Hero-Titel) */ .anim-gradient-text { background: linear-gradient(90deg, #00d4aa, #6c5ce7, #ffd93d, #00d4aa); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---- Globale Politur (dezent, sicher) ---------------------------------- */ .btn { transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .flight-card, .dark-card { transition: transform 0.25s ease, box-shadow 0.25s ease; } /* ========================================================================== Seitenspezifische Ambient-Animationen (nur wenn Nutzer Bewegung erlaubt) ========================================================================== */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } /* --- Startseite (rise): tropisches Schimmern + pulsierender Countdown --- */ body[data-anim="rise"] .anim-gradient-text { animation: ji-shimmer 9s linear infinite; } body[data-anim="rise"] .countdown-number { animation: ji-soft-pulse 2.4s ease-in-out infinite; } body[data-anim="rise"] .flight-card:not(.dark-card):hover { transform: translateY(-5px); box-shadow: 0 16px 42px rgba(0, 0, 0, 0.4); } /* --- Status (slide-right): Live-Puls auf Badges/Status --- */ body[data-anim="slide-right"] .badge { animation: ji-glow 2.2s ease-in-out infinite; border-radius: 999px; } /* --- Flugzeug (zoom): sanftes Heranzoomen der Bilder beim Hover --- */ body[data-anim="zoom"] .img-fluid { transition: transform 0.5s ease; } body[data-anim="zoom"] .img-fluid:hover { transform: scale(1.04); } /* --- Wichtig (slide-left): PDF/Info-Icons schweben leicht --- */ body[data-anim="slide-left"] .bs-icon { animation: ji-float 4s ease-in-out infinite; } /* --- Galerie/Fotos & Videos (fade): Kacheln heben beim Hover --- */ body[data-anim="fade"] .col-sm-4 { transition: transform 0.3s ease, filter 0.3s ease; } body[data-anim="fade"] .col-sm-4:hover { transform: translateY(-6px) scale(1.01); filter: brightness(1.06); } /* --- 404 / Offline (pop): grosse Ueberschrift wippt verspielt --- */ body[data-anim="pop"] h1 { animation: ji-bob 4.5s ease-in-out infinite; display: inline-block; } /* Dezenter Karten-Lift auf der Status-Seite (Info-Charakter) */ body[data-anim="slide-right"] .flight-card:hover, body[data-anim="slide-right"] .dark-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); } }