/* =========================================================
   Beko-Elite — Animations: intro/logo, device SVG loops, scroll reveals
   All motion is disabled by responsive.css under prefers-reduced-motion.
   ========================================================= */

/* ---------- Intro loader (logo animation) ---------- */
.intro { position: fixed; inset: 0; z-index: 500; background: #041431; display: grid; place-items: center; transition: opacity .6s var(--ease), visibility .6s; }
.intro.is-done { opacity: 0; visibility: hidden; }
.intro__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.intro__mark { width: 120px; height: 120px; }
.intro__word { font-family: var(--font-en); font-weight: 800; color: #fff; font-size: 2.1rem; letter-spacing: -.02em; display: flex; direction: ltr; overflow: hidden; }
.intro__word span { display: inline-block; transform: translateY(110%); animation: rise .7s var(--ease) forwards; }
.intro__word b { color: var(--blue-400); font-weight: 800; }
.intro__bar { width: 160px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.intro__bar i { display: block; height: 100%; width: 100%; background: var(--grad-blue); transform-origin: left; animation: load 1.6s var(--ease) forwards; }
@keyframes rise { to { transform: none; } }
@keyframes load { from { transform: scaleX(0); } }

/* ---------- Logo mark animations ---------- */
.logo-mark .lm-ring { stroke-dasharray: 260; stroke-dashoffset: 0; }
.logo-mark .lm-drum { transform-box: view-box; transform-origin: 50px 52px; }
.logo-mark .lm-wave { animation: wave 3.2s ease-in-out infinite; }
.logo-mark .lm-wave--2 { animation-duration: 4.4s; animation-direction: reverse; }
.logo-mark .lm-shine { transform: translateX(-120px); }
.logo-mark .lm-spark { transform-box: fill-box; transform-origin: center; opacity: 0; }
@keyframes wave { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-22px); } }
.brand:hover .logo-mark .lm-drum, .logo-mark.is-spinning .lm-drum { animation: drumSpin 1.2s var(--ease) both; }
.brand:hover .logo-mark .lm-shine { animation: shine 1.1s var(--ease) both; }
.brand:hover .logo-mark .lm-spark { animation: spark 1.1s var(--ease) both .45s; }
@keyframes drumSpin { 0% { transform: rotate(0); } 70% { transform: rotate(740deg); } 100% { transform: rotate(720deg); } }
@keyframes shine { to { transform: translateX(140px); } }
@keyframes spark { 0% { opacity: 0; transform: scale(0) rotate(0); } 40% { opacity: 1; transform: scale(1.2) rotate(45deg); } 100% { opacity: 0; transform: scale(.4) rotate(90deg); } }
/* Intro: draw ring, fill water, spin, sparkle */
.intro .logo-mark .lm-ring { stroke-dashoffset: 260; animation: draw 1s var(--ease) forwards .1s; }
.intro .logo-mark .lm-body { opacity: 0; animation: fadeIn .5s forwards .05s; }
.intro .logo-mark .lm-water { transform: translateY(40px); animation: fill .9s var(--ease) forwards .5s; }
.intro .logo-mark .lm-drum { animation: drumSpin 1.3s var(--ease) both .7s; }
.intro .logo-mark .lm-shine { animation: shine 1s var(--ease) both 1.2s; }
.intro .logo-mark .lm-spark { animation: spark 1s var(--ease) both 1.5s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes fill { to { transform: none; } }

/* ---------- Device SVG animations ---------- */
.dev .spin { transform-box: fill-box; transform-origin: center; animation: spin 2.4s linear infinite; }
.dev .spin--slow { animation-duration: 6s; }
.dev .tumble { transform-box: view-box; animation: spin 3.2s cubic-bezier(.45,.05,.55,.95) infinite; }
.dev .wave { animation: wave 2.6s ease-in-out infinite; }
.dev .wave--b { animation-duration: 3.4s; animation-direction: reverse; }
.dev .bubble { animation: bubble 3s ease-in infinite; opacity: 0; }
.dev .bubble:nth-of-type(2) { animation-delay: .7s; } .dev .bubble:nth-of-type(3) { animation-delay: 1.4s; } .dev .bubble:nth-of-type(4) { animation-delay: 2.1s; }
@keyframes bubble { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateY(-46px); opacity: 0; } }
.dev .jet { stroke-dasharray: 4 7; animation: jet .6s linear infinite; }
@keyframes jet { to { stroke-dashoffset: -22; } }
.dev .arm { transform-box: fill-box; transform-origin: center; animation: armSwing 1.4s ease-in-out infinite alternate; }
@keyframes armSwing { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.dev .heat { animation: heat 2.2s ease-in-out infinite; opacity: 0; }
.dev .heat:nth-of-type(2) { animation-delay: .6s; } .dev .heat:nth-of-type(3) { animation-delay: 1.2s; }
@keyframes heat { 0% { transform: translateY(8px); opacity: 0; } 40% { opacity: .9; } 100% { transform: translateY(-26px); opacity: 0; } }
.dev .mist { animation: mist 4s ease-out infinite; opacity: 0; }
.dev .mist:nth-of-type(2) { animation-delay: 1.3s; } .dev .mist:nth-of-type(3) { animation-delay: 2.6s; }
@keyframes mist { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 30% { opacity: .7; } 100% { transform: translate(-30px, 24px) scale(1.6); opacity: 0; } }
.dev .sparkle { transform-box: fill-box; transform-origin: center; animation: twinkle 2.4s ease-in-out infinite; }
.dev .sparkle:nth-of-type(2) { animation-delay: .8s; } .dev .sparkle:nth-of-type(3) { animation-delay: 1.6s; }
@keyframes twinkle { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } }
.dev .led { animation: led 1.6s steps(2) infinite; }
@keyframes led { 50% { opacity: .25; } }
.dev .door-open { transform-box: fill-box; transform-origin: bottom; animation: doorOpen 5s var(--ease) infinite; }
@keyframes doorOpen { 0%, 15% { transform: scaleY(1); } 35%, 75% { transform: scaleY(.28); } 95%, 100% { transform: scaleY(1); } }
.dev .fridge-door { transform-box: fill-box; transform-origin: right; animation: fridgeDoor 6s var(--ease) infinite; }
@keyframes fridgeDoor { 0%, 12% { transform: scaleX(1); } 30%, 70% { transform: scaleX(.18); } 88%, 100% { transform: scaleX(1); } }
.dev .glow { animation: glow 6s var(--ease) infinite; opacity: 0; }
@keyframes glow { 0%, 14% { opacity: 0; } 32%, 68% { opacity: 1; } 86%, 100% { opacity: 0; } }
.dev .shake { animation: shake .35s ease-in-out infinite; }
@keyframes shake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(.6px, -.4px); } 75% { transform: translate(-.6px, .4px); } }
.dev .blink-text { animation: led 2s steps(2) infinite; }
.is-paused .dev *, .dev.is-paused * { animation-play-state: paused !important; }

/* ---------- Reveal animations (driven by animations.js) ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.reveal--left { transform: translateX(40px); } html[dir="ltr"] .reveal--left { transform: translateX(-40px); }
.reveal--scale { transform: scale(.92); }
.reveal.is-in { opacity: 1; transform: none; }
.split-words .w { display: inline-block; opacity: 0; transform: translateY(.6em) rotate(2deg); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.split-words.is-in .w { opacity: 1; transform: none; }
.img-zoom { overflow: hidden; }
.img-zoom > * { transform: scale(1.12); transition: transform 1.6s var(--ease); }
.img-zoom.is-in > * { transform: scale(1); }
.counter { font-family: var(--font-en); font-variant-numeric: tabular-nums; }