/* ============================================================================ BYTEWORKS REBUILD — motion.css Ett gemensamt motion-vokabulär. Allt scroll-drivet aktiveras endast när finns och prefers-reduced-motion inte är satt. Utan JavaScript visas allt innehåll direkt. ========================================================================== */ /* ── Reveal-grund ─────────────────────────────────────────────────────── */ html.js [data-avsloja] { opacity: 0; transform: translateY(26px); transition: opacity var(--t-lugn) var(--ease-ut), transform var(--t-lugn) var(--ease-ut); transition-delay: calc(var(--i, 0) * var(--stagger)); will-change: opacity, transform; } html.js [data-avsloja="skala"] { transform: translateY(18px) scale(.97); } html.js [data-avsloja="vanster"] { transform: translateX(-30px); } html.js [data-avsloja="hoger"] { transform: translateX(30px); } html.js [data-avsloja].syns { opacity: 1; transform: none; } /* Mask-reveal för bildpaneler */ html.js [data-avsloja="mask"] { transform: none; clip-path: inset(12% 6% 12% 6% round var(--r-panel)); transition: opacity var(--t-scen) var(--ease-ut), clip-path var(--t-scen) var(--ease-ut); transition-delay: calc(var(--i, 0) * var(--stagger)); } html.js [data-avsloja="mask"].syns { clip-path: inset(0 0 0 0 round var(--r-panel)); } /* Stagger-grupp: barnen ärver index via inline --i */ html.js [data-avsloja-grupp] > * { opacity: 0; transform: translateY(22px); transition: opacity var(--t-lugn) var(--ease-ut), transform var(--t-lugn) var(--ease-ut); transition-delay: calc(var(--i, 0) * var(--stagger)); } html.js [data-avsloja-grupp].syns > * { opacity: 1; transform: none; } /* ── Hero-scen: orkestrerad entré vid sidladdning ─────────────────────── */ html.js .hero [data-scen] { opacity: 0; transform: translateY(30px); animation: scen-in var(--t-scen) var(--ease-ut) forwards; animation-delay: calc(120ms + var(--i, 0) * 130ms); } @keyframes scen-in { to { opacity: 1; transform: none; } } html.js .hero__visual[data-scen] { transform: translateY(40px) scale(.965); } /* Ljusbandet i hero ritas in */ html.js .hero__vag path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: vag-rita 2s var(--ease-ut) .45s forwards; } @keyframes vag-rita { to { stroke-dashoffset: 0; } } /* Långsam aurora-drift */ .hero__aurora { animation: aurora-drift 26s ease-in-out infinite alternate; } @keyframes aurora-drift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 2%, 0) scale(1.06); } } .puls-glod { animation: puls-glod 5.5s ease-in-out infinite; } @keyframes puls-glod { 0%, 100% { opacity: .55; } 50% { opacity: .95; } } /* ── Parallax-hookar (transform sätts av site.js) ─────────────────────── */ [data-parallax] { will-change: transform; } /* ── Marquee-lik glid för dekorlinjer ─────────────────────────────────── */ .glidlinje { background: linear-gradient(90deg, transparent, var(--t-accent), transparent); background-size: 200% 100%; animation: glid 7s linear infinite; height: 1px; opacity: .5; } @keyframes glid { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ── Reduced motion: allt scroll-/scen-drivet stängs av ───────────────── */ @media (prefers-reduced-motion: reduce) { html.js [data-avsloja], html.js [data-avsloja-grupp] > *, html.js .hero [data-scen] { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; transition: none !important; } .hero__aurora, .puls-glod, .glidlinje { animation: none !important; } html.js .hero__vag path { animation: none !important; stroke-dashoffset: 0; } [data-parallax] { transform: none !important; } }