/* Keyframes shared by the home page sections (names kept from the design file). */
@keyframes mDrift1 {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    22% { transform: translate3d(16%, 14%, 0) scale(1.22); }
    44% { transform: translate3d(-12%, 26%, 0) scale(.88); }
    68% { transform: translate3d(12%, -16%, 0) scale(1.14); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes mDrift2 {
    0% { transform: translate3d(0, 0, 0) scale(1.05); }
    30% { transform: translate3d(-22%, 10%, 0) scale(.85); }
    55% { transform: translate3d(10%, -20%, 0) scale(1.28); }
    80% { transform: translate3d(-8%, 18%, 0) scale(1); }
    100% { transform: translate3d(0, 0, 0) scale(1.05); }
}

@keyframes mDrift3 {
    0% { transform: translate3d(0, 0, 0) scale(.95); }
    26% { transform: translate3d(20%, -12%, 0) scale(1.2); }
    52% { transform: translate3d(-18%, -8%, 0) scale(1.05); }
    78% { transform: translate3d(6%, 20%, 0) scale(.9); }
    100% { transform: translate3d(0, 0, 0) scale(.95); }
}

@keyframes mDrift4 {
    0% { transform: translate3d(0, 0, 0) scale(1.1) rotate(0deg); }
    40% { transform: translate3d(-16%, -18%, 0) scale(.92) rotate(60deg); }
    70% { transform: translate3d(18%, 8%, 0) scale(1.25) rotate(140deg); }
    100% { transform: translate3d(0, 0, 0) scale(1.1) rotate(360deg); }
}

@keyframes mDrift5 {
    0% { transform: translate3d(-10%, 6%, 0) scale(1); }
    35% { transform: translate3d(14%, -14%, 0) scale(1.3); }
    65% { transform: translate3d(22%, 16%, 0) scale(.86); }
    100% { transform: translate3d(-10%, 6%, 0) scale(1); }
}

@keyframes mBreathe {
    0%, 100% { opacity: .9; }
    30% { opacity: .45; }
    62% { opacity: 1; }
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-14px) rotate(-1deg); }
}

@keyframes bubbleIn {
    0% { opacity: 0; transform: translateY(14px) scale(.92); }
    70% { opacity: 1; transform: translateY(-2px) scale(1.02); }
    100% { opacity: 1; transform: none; }
}

@keyframes popLoop {
    0%, 8% { opacity: 0; transform: scale(.3); }
    14% { opacity: 1; transform: scale(1.12); }
    18%, 88% { opacity: 1; transform: scale(1); }
    96%, 100% { opacity: 0; transform: scale(.8); }
}

@keyframes fillLoop {
    0%, 6% { transform: scaleX(0); }
    70%, 90% { transform: scaleX(1); }
    100% { transform: scaleX(1); opacity: 0; }
}

@keyframes crown {
    0%, 100% { transform: rotate(-10deg) translateY(0); }
    50% { transform: rotate(-4deg) translateY(-4px); }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

@keyframes themeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: none; }
}

/* Scroll reveal: hidden only once JS has confirmed it will animate them in. */
.js-reveal [data-reveal] {
    opacity: 0;
}

/* Animated mesh background (hero and the phone's game card).
   Colors come from CSS variables that home-mesh.js updates with the theme. */
.mesh {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
}

/* The mask fades to fully transparent exactly at the element's edges
   (closest-side): CSS applies the blur first and the mask last, so a mask
   still partly opaque at the edge would cut the blur into a visible rim. */
.mesh__blob {
    position: absolute;
    -webkit-mask: radial-gradient(closest-side, #000 15%, rgba(0, 0, 0, .5) 55%, transparent 100%);
    mask: radial-gradient(closest-side, #000 15%, rgba(0, 0, 0, .5) 55%, transparent 100%);
    transition: background-color 1.6s ease;
    will-change: transform;
}

.mesh__blob--halo { top: -10%; left: -15%; width: 78%; height: 64%; background-color: var(--m-halo); filter: blur(calc(90px * var(--mesh-blur, 1))); animation: mDrift1 17s ease-in-out infinite; }
.mesh__blob--warm { top: 18%; right: -22%; width: 82%; height: 60%; background-color: var(--m-warm); filter: blur(calc(100px * var(--mesh-blur, 1))); mix-blend-mode: screen; transition-delay: .1s; animation: mDrift2 23s ease-in-out -4s infinite; }
.mesh__blob--deep { bottom: 2%; left: -8%; width: 88%; height: 66%; background-color: var(--m-deep); filter: blur(calc(110px * var(--mesh-blur, 1))); transition-delay: .2s; animation: mDrift3 19s ease-in-out -9s infinite; }
.mesh__blob--cool { bottom: 10%; right: -6%; width: 56%; height: 44%; background-color: var(--m-cool); filter: blur(calc(90px * var(--mesh-blur, 1))); mix-blend-mode: screen; transition-delay: .3s; animation: mDrift5 29s ease-in-out -2s infinite; }
.mesh__blob--lift { top: 34%; left: 22%; width: 50%; height: 40%; background-color: var(--m-lift); filter: blur(calc(80px * var(--mesh-blur, 1))); mix-blend-mode: screen; transition-delay: .4s; animation: mDrift4 13s ease-in-out -6s infinite; }

.mesh__breath {
    position: absolute;
    top: -10%;
    left: -5%;
    width: 70%;
    height: 65%;
    background-color: var(--m-breath);
    -webkit-mask: radial-gradient(closest-side, #000, transparent);
    mask: radial-gradient(closest-side, #000, transparent);
    transition: background-color 1.6s ease;
    animation: mBreathe 21s ease-in-out -3s infinite;
}

/* SVG fractal noise overlay, keeps the gradient from banding. */
.mesh__noise {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    opacity: .09;
    mix-blend-mode: overlay;
}