/* ========================================================================== e-schmid.ch — Animationen & Spielereien Preloader · Scroll-Reveal · Cursor · Parallax · Keyframes Alles dezent, respektiert prefers-reduced-motion. ========================================================================== */ /* ---------- Keyframes ---------------------------------------------------- */ @keyframes spin-soft { to { transform: rotate(360deg); } } @keyframes spin-slow { to { transform: rotate(360deg); } } @keyframes rise-in { to { opacity: 1; transform: none; } } @keyframes underline-grow { to { transform: scaleX(1); } } @keyframes float-y { 50% { transform: translateY(-14px); } } @keyframes draw-arc { to { stroke-dashoffset: 0; } } @keyframes pulse-dot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .6; } } @keyframes sheen { to { background-position: 200% center; } } @keyframes pop-badge { 0% { transform: scale(.4); opacity:0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity:1; } } /* ---------- Preloader --------------------------------------------------- */ .preloader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--paper); transition: opacity .6s var(--ease), visibility .6s; } .preloader.is-done { opacity: 0; visibility: hidden; } .preloader__mark { width: 84px; height: 84px; } .preloader__mark svg { width: 100%; height: 100%; overflow: visible; } .preloader__mark .arc-out, .preloader__mark .arc-in { stroke-dasharray: 260; stroke-dashoffset: 260; animation: draw-arc 1.1s var(--ease) forwards; } .preloader__mark .arc-in { animation-delay: .25s; stroke-dasharray: 150; stroke-dashoffset: 150; } .preloader__mark .dot { transform-origin: 50px 50px; animation: pulse-dot 1.2s var(--ease) .9s infinite; } .preloader__word { margin-top: 1.2rem; font-weight: 600; letter-spacing: .05em; color: var(--text-soft); opacity: 0; animation: rise-in .6s var(--ease) .7s forwards; } /* ---------- Scroll-Reveal ----------------------------------------------- */ /* Sichtbar ist der Standard. Der versteckte Startzustand greift NUR, wenn theme.js die Klasse .js-anim auf setzt — ohne JS bleibt alles sichtbar. */ .reveal { transition: opacity .8s var(--ease), transform .8s var(--ease); will-change: transform, opacity; } :where(html.js-anim) .reveal { opacity: 0; transform: translateY(28px); } .reveal.is-in { opacity: 1 !important; transform: none !important; } :where(html.js-anim) .reveal[data-reveal="left"] { transform: translateX(-36px); } :where(html.js-anim) .reveal[data-reveal="right"] { transform: translateX(36px); } :where(html.js-anim) .reveal[data-reveal="scale"] { transform: scale(.92); } .reveal[data-reveal="left"].is-in, .reveal[data-reveal="right"].is-in, .reveal[data-reveal="scale"].is-in { transform: none !important; } /* gestaffelte Kinder */ .stagger > * { transition: opacity .7s var(--ease), transform .7s var(--ease); } :where(html.js-anim) .stagger > * { opacity: 0; transform: translateY(26px); } .stagger.is-in > * { opacity: 1 !important; transform: none !important; } .stagger.is-in > *:nth-child(1){transition-delay:.05s} .stagger.is-in > *:nth-child(2){transition-delay:.13s} .stagger.is-in > *:nth-child(3){transition-delay:.21s} .stagger.is-in > *:nth-child(4){transition-delay:.29s} .stagger.is-in > *:nth-child(5){transition-delay:.37s} .stagger.is-in > *:nth-child(6){transition-delay:.45s} /* ---------- Parallax ---------------------------------------------------- */ [data-parallax] { will-change: transform; } .float { animation: float-y 6s var(--ease) infinite; } .float--slow { animation-duration: 9s; } .float--delay { animation-delay: -3s; } /* ---------- Eigener Cursor ---------------------------------------------- */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 150; pointer-events: none; border-radius: 50%; mix-blend-mode: multiply; } html[data-theme="dark"] .cursor-dot, html[data-theme="dark"] .cursor-ring { mix-blend-mode: screen; } .cursor-dot { width: 7px; height: 7px; background: var(--green); transform: translate(-50%, -50%); } .cursor-ring { width: 38px; height: 38px; border: 2px solid var(--green); opacity: .5; transform: translate(-50%, -50%); transition: width .25s var(--ease), height .25s var(--ease), opacity .25s, background .25s, border-color .25s; } .cursor-ring.is-hover { width: 64px; height: 64px; opacity: .25; background: color-mix(in oklab, var(--green) 18%, transparent); border-color: transparent; } .cursor-ring.is-down { width: 26px; height: 26px; opacity: .7; } body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button { cursor: none; } @media (hover: none) { .cursor-dot, .cursor-ring { display: none !important; } body.has-custom-cursor, body.has-custom-cursor a { cursor: auto; } } /* ---------- Hero-Spiral animiert ---------------------------------------- */ .hero-spiral .arc-out { animation: spin-slow 60s linear infinite; transform-origin: 50px 50px; } .hero-spiral .arc-in { animation: spin-slow 40s linear infinite reverse; transform-origin: 50px 50px; } .hero-spiral .dot { animation: pulse-dot 3s var(--ease) infinite; transform-origin: 50px 50px; } /* ---------- Badge-Pop bei Welten ---------------------------------------- */ .world.is-in .world__badge { animation: pop-badge .7s var(--ease-back) both; } /* ---------- Link-Sheen auf Buttons -------------------------------------- */ .btn--sheen { background-image: linear-gradient(110deg, var(--green) 40%, var(--green-light) 50%, var(--green) 60%); background-size: 200% auto; } .btn--sheen:hover { animation: sheen 1.1s linear; } /* ---------- Zahlen-Zähler (Über mich) ----------------------------------- */ .stat { text-align: center; } .stat .num { font-size: var(--fs-step-3); font-weight: 700; color: var(--green); letter-spacing: -.03em; } .stat .lbl { color: var(--text-mute); font-size: var(--fs-step--1); margin-top: .2rem; } /* ---------- Reduced motion ---------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal, .stagger > * { opacity: 1 !important; transform: none !important; } .preloader { display: none !important; } .cursor-dot, .cursor-ring { display: none !important; } .hero h1 .hl::after { transform: scaleX(1); } }