/* Shared pieces: Tankt sprites, tank swimmers, bubbles, Suncurio motifs, reveal-on-scroll. */
@font-face { font-family: 'Dogica'; src: url('../assets/tankt/fonts/dogicapixel.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Dogica'; font-weight: 700; src: url('../assets/tankt/fonts/dogicapixelbold.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('../assets/suncurio/Nunito.ttf') format('truetype'); font-weight: 200 1000; font-display: swap; }

.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }

/* --- Sprites --- */
.bm-sprite { display: inline-block; position: relative; overflow: hidden; pointer-events: none; -webkit-user-select: none; user-select: none; }
.bm-sprite canvas { position: absolute; left: 0; top: 0; image-rendering: pixelated; opacity: 0; transition: opacity .4s; animation: bm-strip var(--dur) steps(var(--frames)) var(--delay) infinite; }
.bm-sprite.is-ready canvas { opacity: 1; }
.bm-sprite.is-still canvas { animation: none; }
@keyframes bm-strip { to { transform: translateX(-100%); } }

.bm-swimmer { position: absolute; left: 0; top: 0; will-change: transform; pointer-events: none; z-index: 2; filter: drop-shadow(0 6px 6px rgba(0, 20, 40, .25)); }
.bm-bubbles { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.bm-bubbles i { position: absolute; border-radius: 50%; border: 2px solid rgba(220, 250, 255, .75); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .7) 0 18%, transparent 22%); animation: bm-rise var(--dur) ease-in forwards; }
@keyframes bm-rise { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(var(--sway), var(--rise)) scale(1.1); opacity: 0; } }

/* --- Reveal on scroll --- */
[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="left"] { transform: translateX(-60px); }
[data-reveal="right"] { transform: translateX(60px); }
[data-reveal="pop"] { transform: scale(.85) rotate(-3deg); }
[data-reveal].is-in { transform: none; }

/* --- Suncurio motifs --- */
.sc-motif { width: 100%; height: auto; display: block; overflow: visible; }
.sc-motif * { transform-box: fill-box; }
.sc-draw { stroke-dasharray: 400; stroke-dashoffset: 400; animation: sc-draw 5s ease-in-out infinite; }
@keyframes sc-draw { 0%, 8% { stroke-dashoffset: 400; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -400; } }
.sc-twinkle { animation: sc-twinkle 2.4s ease-in-out infinite; transform-origin: center; }
@keyframes sc-twinkle { 50% { opacity: .35; transform: scale(.7); } }
.sc-stamp { animation: sc-stamp 4.8s cubic-bezier(.5, 0, .2, 1) infinite; }
@keyframes sc-stamp { 0%, 10% { transform: translate(26px, -22px) rotate(12deg); } 40%, 80% { transform: none; } 100% { transform: translate(26px, -22px) rotate(12deg); } }
.sc-hole { animation: sc-hole 4.8s cubic-bezier(.5, 0, .2, 1) infinite; }
@keyframes sc-hole { 0%, 38% { opacity: 0; } 44%, 80% { opacity: 1; } 86%, 100% { opacity: 0; } }
.sc-slide { animation: sc-slide 4s ease-in-out infinite alternate; }
.sc-slide.b { animation-delay: -1.3s; animation-direction: alternate-reverse; }
.sc-slide.c { animation-delay: -2.6s; }
@keyframes sc-slide { 0% { transform: translateX(-14px); } 100% { transform: translateX(14px); } }
.sc-unfold { transform-origin: left center; animation: sc-unfold 4.4s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes sc-unfold { 0%, 15% { transform: scaleX(0); } 45%, 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.sc-drop-in { animation: sc-drop-in 4.2s cubic-bezier(.3, 1.4, .5, 1) infinite; }
@keyframes sc-drop-in { 0%, 10% { transform: translate(18px, -30px) rotate(90deg); opacity: 0; } 40%, 85% { transform: none; opacity: 1; } 100% { transform: translate(18px, -30px) rotate(90deg); opacity: 0; } }
.sc-bloom { transform-origin: center; animation: sc-bloom 4.2s ease-out infinite; }
@keyframes sc-bloom { 0%, 40% { transform: scale(0); } 55% { transform: scale(1.3); } 65%, 85% { transform: scale(1); } 100% { transform: scale(0); } }
.sc-gold { stroke-dasharray: 120; animation: sc-gold 4.6s ease-in-out infinite; }
@keyframes sc-gold { 0%, 15% { stroke-dashoffset: 120; } 60%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 120; } }
.sc-beam { transform-origin: 0 50%; animation: sc-beam 6s ease-in-out infinite; }
@keyframes sc-beam { 0%, 100% { transform: rotate(-38deg); } 50% { transform: rotate(18deg); } }
.sc-lit { animation: sc-lit 6s ease-in-out infinite; }
@keyframes sc-lit { 0%, 30%, 70%, 100% { opacity: 0; } 45%, 55% { opacity: 1; } }
.sc-bob { animation: sc-bob 3s ease-in-out infinite; }
@keyframes sc-bob { 50% { transform: translateY(-3px) rotate(-4deg); } }
.sc-grow { transform-origin: 50% 100%; animation: sc-grow 4s cubic-bezier(.3, 1.6, .5, 1) infinite; }
@keyframes sc-grow { 0%, 5% { transform: scale(0); } 30%, 85% { transform: scale(1); } 100% { transform: scale(0); } }
.sc-fly { animation: sc-fly 4s ease-in-out infinite; }
@keyframes sc-fly { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.sc-sync { animation: sc-sync 4s ease-in-out infinite; transform-origin: center; }
@keyframes sc-sync { 0%, 60%, 100% { opacity: 0; transform: scale(.4); } 72% { opacity: 1; transform: scale(1.6); } 84% { opacity: 0; transform: scale(2.2); } }
.sc-rain { animation: sc-rain 1.6s cubic-bezier(.5, 0, 1, 1) infinite; }
@keyframes sc-rain { 0% { transform: translateY(-14px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(56px); opacity: 0; } }
.sc-tip { transform-origin: center; animation: sc-tip 3.2s ease-in-out infinite; }
@keyframes sc-tip { 0%, 40% { transform: rotate(-16deg); } 50%, 90% { transform: rotate(16deg); } 100% { transform: rotate(-16deg); } }
.sc-pour { stroke-dasharray: 6 5; animation: sc-pour .6s linear infinite; }
@keyframes sc-pour { to { stroke-dashoffset: -11; } }
.sc-fill { transform-origin: 50% 100%; animation: sc-fill 4s ease-in-out infinite; }
@keyframes sc-fill { 0% { transform: scaleY(.1); } 70%, 90% { transform: scaleY(1); } 100% { transform: scaleY(.1); } }
.sc-swing { transform-origin: 50% 0; animation: sc-swing 3.6s ease-in-out infinite; }
.sc-swing.b { animation-duration: 2.8s; animation-delay: -1s; }
@keyframes sc-swing { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
.sc-dye { transform-origin: 0 50%; animation: sc-dye 4.4s ease-in-out infinite; }
.sc-dye.b { transform-origin: 50% 0; animation-delay: -1.5s; }
@keyframes sc-dye { 0%, 10% { transform: scale(0, 1); } 45%, 85% { transform: scale(1, 1); } 100% { transform: scale(0, 1); } }
.sc-dye.b { animation-name: sc-dye-v; }
@keyframes sc-dye-v { 0%, 10% { transform: scale(1, 0); } 45%, 85% { transform: scale(1, 1); } 100% { transform: scale(1, 0); } }
.sc-gust { animation: sc-gust 5s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes sc-gust { 0%, 15% { transform: translateX(0); } 45%, 85% { transform: translateX(34px); } 100% { transform: translateX(0); } }
.sc-wind { stroke-dasharray: 10 8; animation: sc-pour 1s linear infinite reverse; }
.sc-spin { transform-box: fill-box; transform-origin: center; animation: sc-spin 30s linear infinite; }
@keyframes sc-spin { to { transform: rotate(360deg); } }
.sc-pulse { transform-box: fill-box; transform-origin: center; animation: sc-pulse 3s ease-in-out infinite; }
@keyframes sc-pulse { 50% { transform: scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .001s !important; }
  .sc-draw, .sc-gold { stroke-dashoffset: 0 !important; }
  [data-reveal] { opacity: 1; transform: none; }
}