/** * motion.css – Signatur-Effekte (design-system §5/§6). * Reveals, Flutlicht-Hero, Kreidelinien-Trenner, Intro-Animation, Ball-Cursor. * Nur transform & opacity animiert (GPU). Jeder Effekt hat einen * prefers-reduced-motion-Fallback (Inhalt sofort sichtbar / statisch). */ /* ============================ Scroll-Reveals ============================ */ /* Verstecken NUR wenn JS aktiv ist (Klasse svk-js am ). Ohne JS bleibt der Inhalt voll sichtbar – keine leere Seite bei deaktiviertem JavaScript. */ .svk-js .svk-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); will-change: opacity, transform; } .svk-js .svk-reveal.is-visible { opacity: 1; transform: none; } /* Fallback: bei reduced-motion sofort sichtbar (auch mit JS) */ @media (prefers-reduced-motion: reduce) { .svk-js .svk-reveal { opacity: 1; transform: none; transition: none; } } /* ============================ Flutlicht-Hero ============================ */ /* Bild-Vorbereitung (Phase 2): Das spaetere responsive WebP wird NUR ueber * die Variable --svk-hero-image gesetzt (z. B. image-set(...)), ohne Umbau. * Der Overlay-Gradient (Nachtblau, unten dichter) liegt bereits als ::before. * Solange keine Datei gesetzt ist (Default: none), bleibt der Marken-Verlauf * als Fallback sichtbar; der Overlay dunkelt die Unterkante dezent ab. * Der Flutlicht-Schimmer (.svk-hero__flutlicht) bleibt als zusaetzlicher * Layer darueber erhalten. KEINE Bilddatei wird hier referenziert. */ .svk-hero { --svk-hero-image: none; position: relative; overflow: hidden; background-color: var(--sv-blau-900); background-image: linear-gradient(160deg, #14213a 0%, #0e1526 100%); color: #fff; isolation: isolate; } /* Bild- + Overlay-Ebene: liegt hinter Flutlicht und Inhalt. */ .svk-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: linear-gradient(180deg, rgba(14, 21, 38, 0) 0%, rgba(14, 21, 38, 0.35) 55%, rgba(14, 21, 38, 0.72) 100%), var(--svk-hero-image, none); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; } .svk-hero :where(h1, h2, h3, p) { color: #fff; } /* Flutlicht-Kegel als Radial, "geht an" beim Laden und atmet minimal */ .svk-hero__flutlicht { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient( 120% 80% at 70% 0%, rgba(243, 230, 104, 0.35) 0%, rgba(243, 230, 104, 0) 45% ); opacity: 0; animation: svk-flutlicht-an 0.8s var(--ease) forwards, svk-flutlicht-atem 6s ease-in-out 0.8s infinite; } @keyframes svk-flutlicht-an { to { opacity: 1; } } @keyframes svk-flutlicht-atem { 0%, 100% { opacity: 1; } 50% { opacity: 0.94; } } @media (prefers-reduced-motion: reduce) { .svk-hero__flutlicht { opacity: 1; animation: none; } } /* ============================ Kreidelinien-Trenner ============================ */ .svk-kreide { display: block; width: 100%; height: 24px; overflow: visible; color: var(--border-strong); } .svk-kreide path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; opacity: 0.5; } .svk-kreide.is-visible path { animation: svk-kreide-zeichnen 0.6s var(--ease) forwards; } @keyframes svk-kreide-zeichnen { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .svk-kreide path { stroke-dashoffset: 0; animation: none; } } /* Mittelkreis-Deko (dezent, hinter Hero/Statement) */ .svk-mittelkreis { position: absolute; inset: 0; z-index: -1; pointer-events: none; display: flex; align-items: center; justify-content: center; opacity: 0.08; } .svk-mittelkreis svg { width: min(60vw, 480px); height: auto; } /* Trikot-Streifen-Kante (Statement-/CTA-Boxen) */ .svk-trikotkante { position: relative; padding-left: 1.5rem; } .svk-trikotkante::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: var(--radius-pill); background: repeating-linear-gradient( 180deg, var(--sv-gelb-400) 0 12px, var(--sv-blau-600) 12px 24px ); } /* ============================ Intro-Animation ============================ */ .svk-intro { position: fixed; inset: 0; z-index: 10000; background: #0e1526; color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; } html.svk-intro-active { overflow: hidden; } .svk-intro__bild { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1); animation: svk-intro-zoom 4.5s var(--ease) forwards; } .svk-intro__bild::after { content: ""; position: absolute; inset: 0; background: radial-gradient( 100% 70% at 50% 0%, rgba(243, 230, 104, 0.35) 0%, rgba(243, 230, 104, 0) 55% ), linear-gradient(180deg, rgba(14, 21, 38, 0.5), rgba(14, 21, 38, 0.85)); opacity: 0; animation: svk-intro-flutlicht 4.5s ease forwards; } @keyframes svk-intro-zoom { 0% { transform: scale(1); } 100% { transform: scale(1.15); } } @keyframes svk-intro-flutlicht { 0%, 40% { opacity: 0.2; } 70%, 100% { opacity: 1; } } .svk-intro__content { position: relative; text-align: center; z-index: 1; opacity: 0; transform: translateY(12px); animation: svk-intro-logo 4.5s ease forwards; animation-delay: 0.2s; } @keyframes svk-intro-logo { 0%, 55% { opacity: 0; transform: translateY(12px); } 70%, 100% { opacity: 1; transform: none; } } .svk-intro__logo { width: clamp(96px, 20vw, 160px); height: auto; margin: 0 auto 1rem; } .svk-intro__claim { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: clamp(2.5rem, 8vw, 4.5rem); line-height: 1; margin: 0; color: #fff; } .svk-intro__sub { color: var(--sv-gelb-300); font-weight: 600; letter-spacing: 0.04em; margin-top: 0.5rem; } .svk-intro__overline { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: #b7c1d8; margin-bottom: 1rem; } .svk-intro__skip { position: absolute; top: 1.5rem; right: 1.5rem; z-index: 2; min-height: 44px; padding: 0.5rem 1.25rem; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: var(--radius-pill); color: #fff; font-weight: 600; cursor: pointer; } .svk-intro__skip:hover { background: rgba(255, 255, 255, 0.22); } .svk-intro__skip:focus-visible { outline: 3px solid var(--sv-gelb-300); outline-offset: 2px; } .svk-intro.is-leaving { opacity: 0; transition: opacity 0.6s var(--ease); } /* Ohne JS: Intro nie zeigen (Progressive Enhancement). Das
ist hidden; JS blendet es ein. So bleibt die Startseite ohne JS voll nutzbar. */ .svk-intro[hidden] { display: none; } /* ============================ Fußball-Cursor ============================ */ .svk-ball-cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; width: 28px; height: 28px; will-change: transform; filter: drop-shadow(0 2px 3px rgba(20, 33, 58, 0.35)); } html.svk-has-ball-cursor, html.svk-has-ball-cursor a, html.svk-has-ball-cursor button { cursor: none; } @media (hover: none), (pointer: coarse) { .svk-ball-cursor { display: none; } } /* ============================ Konfetti-Canvas ============================ */ .svk-konfetti-canvas { pointer-events: none; } .svk-intro__credit { position: absolute; right: 12px; bottom: 10px; margin: 0; font-size: 0.6875rem; color: rgba(255, 255, 255, 0.55); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); z-index: 2; } /* Sieg-Jubel: Ball rollt ein, Wappen fliegt ein und parkt rechts neben dem Ball. */ .svk-sieg-jubel { display: flex; align-items: center; gap: 10px; margin-top: 0.75rem; min-height: 48px; } .svk-sieg-jubel__ball { font-size: 2rem; line-height: 1; } .svk-sieg-jubel__logo { width: 44px; height: 44px; border-radius: 50%; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); } @media (prefers-reduced-motion: no-preference) { .svk-sieg-jubel__ball, .svk-sieg-jubel__logo { opacity: 0; } .svk-sieg-jubel.is-live .svk-sieg-jubel__ball { animation: svk-ball-einrollen 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .svk-sieg-jubel.is-live .svk-sieg-jubel__logo { animation: svk-wappen-einflug 1.1s cubic-bezier(0.34, 1.4, 0.64, 1) 0.55s forwards; } } @media (prefers-reduced-motion: reduce) { .svk-sieg-jubel__ball, .svk-sieg-jubel__logo { opacity: 1; } } @keyframes svk-ball-einrollen { from { opacity: 0; transform: translateX(-30vw) rotate(-540deg); } to { opacity: 1; transform: translateX(0) rotate(0); } } @keyframes svk-wappen-einflug { from { opacity: 0; transform: translate(40vw, -20vh) rotate(160deg) scale(0.4); } to { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); } } /* Intro-Finale: Overlay blendet aus, während das Wappen in den Header fliegt. */ .svk-intro.is-flying { opacity: 0; pointer-events: none; transition: opacity 0.65s ease 0.15s; } .svk-intro__logo--flug { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; border-radius: 50%; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.4)); } /* ===== Hero-/Kopfbilder (Phase 2): echtes Epprath-Motiv, abendlich * abgedunkelt, als WebP. Nur uebers --svk-hero-image gesetzt; der * Overlay-Gradient in .svk-hero::before sorgt fuer Textlesbarkeit. * Pfade relativ zu dieser CSS-Datei (assets/css/). Mobile: kleineres * Derivat, damit auf schmalen Screens weniger geladen wird. */ .svk-hero--img-home { --svk-hero-image: url("../img/hero-flutlicht-1920.webp"); } .svk-hero--img-mannschaften { --svk-hero-image: url("../img/kopf-mannschaften-1600.webp"); } .svk-hero--img-mitmachen { --svk-hero-image: url("../img/kopf-mitmachen-1600.webp"); } .svk-hero--img-termine { --svk-hero-image: url("../img/kopf-termine-1600.webp"); } .svk-hero--img-sponsoren { --svk-hero-image: url("../img/kopf-sponsoren-1600.webp"); } .svk-hero--img-kontakt { --svk-hero-image: url("../img/kopf-kontakt-1600.webp"); } @media (max-width: 820px) { .svk-hero--img-home { --svk-hero-image: url("../img/hero-flutlicht-800.webp"); } .svk-hero--img-mannschaften { --svk-hero-image: url("../img/kopf-mannschaften-800.webp"); } .svk-hero--img-mitmachen { --svk-hero-image: url("../img/kopf-mitmachen-800.webp"); } .svk-hero--img-termine { --svk-hero-image: url("../img/kopf-termine-800.webp"); } .svk-hero--img-sponsoren { --svk-hero-image: url("../img/kopf-sponsoren-800.webp"); } .svk-hero--img-kontakt { --svk-hero-image: url("../img/kopf-kontakt-800.webp"); } } /* ===== Hero-Hintergrundvideo (Startseite) ===== * Echtes Drohnenvideo vom Sportpark Epprath, stumm + geloopt hinter Headline * und CTAs. Liegt unter der Overlay-Ebene (.svk-hero::before, Gradient) fuer * saubere Textlesbarkeit. Bei .svk-hero--video zeigt ::before NUR den Gradient * (kein Standbild), damit das Video durchscheint. */ .svk-hero--video { --svk-hero-image: none; } .svk-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; pointer-events: none; background: var(--sv-blau-900, #14213a); } /* Reduced Motion: kein Autoplay-Video, stattdessen das abgedunkelte Standbild. */ @media (prefers-reduced-motion: reduce) { .svk-hero--video { --svk-hero-image: url("../img/hero-poster.webp"); } .svk-hero--video .svk-hero__video { display: none; } }