/* =============================================================================
   ULTRA GYM — custom styles & animations
   (Tailwind handles layout/utility; this file adds motion & a few extras.)
   ========================================================================== */

:root {
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    /* flip digit size (height); width & font derive from it */
    --dh: clamp(3.75rem, 17vw, 6rem);
}
@media (min-width: 640px)  { :root { --dh: clamp(4rem, 10vw, 6.5rem); } }
@media (min-width: 1024px) { :root { --dh: 7.5rem; } }

html, body { overflow-x: hidden; max-width: 100%; }
html[dir="rtl"] body { line-height: 1.85; }

/* ------------------------------------------------------------------ *
 |  Entrance animations (same API as Kany Halk)
 * ------------------------------------------------------------------ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: none; }
}
.animate-in { animation: fadeInUp 0.9s ease both; }
.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.45s; }

@keyframes modalIn {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}
.lang-modal-card { animation: modalIn 0.5s var(--ease-out-back) both; }

@keyframes blob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, -50px) scale(1.12); }
    66%      { transform: translate(-30px, 30px) scale(0.92); }
}
.animate-blob { animation: blob 16s ease-in-out infinite; }

/* ------------------------------------------------------------------ *
 |  Background layers
 * ------------------------------------------------------------------ */
.bg-grid {
    background-image:
        linear-gradient(rgba(41, 90, 182, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(41, 90, 182, 0.07) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
            mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
    animation: gridDrift 30s linear infinite;
}
@keyframes gridDrift { to { background-position: 56px 56px, 56px 56px; } }

.bg-vignette {
    background: radial-gradient(ellipse at center, transparent 45%, var(--c-cream) 100%);
}

/* Brand logo: subtle lift on the light background */
.brand-logo img,
img.brand-logo {
    filter: drop-shadow(0 4px 12px rgba(41, 90, 182, 0.18));
    transition: filter 0.3s ease, transform 0.3s ease;
}
.brand-logo:hover img { filter: drop-shadow(0 6px 18px rgba(41, 90, 182, 0.3)); transform: translateY(-1px); }

/* Large faint icon watermark behind the headline */
.brand-watermark {
    width: min(70vw, 34rem);
    opacity: 0.05;
    animation: breathe 8s ease-in-out infinite;
}
@keyframes breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.04; }
    50%      { transform: translate(-50%, -50%) scale(1.05); opacity: 0.07; }
}

/* Giant outlined words scrolling behind the content */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee-track {
    display: inline-flex;
    width: max-content;
    animation: marquee 60s linear infinite;
}
.marquee-reverse .marquee-track { animation-direction: reverse; animation-duration: 75s; }
.marquee-track span {
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
    font-size: clamp(5rem, 14vw, 13rem);
    line-height: 1;
    padding-right: 4vw;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(41, 90, 182, 0.08);
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------ *
 |  Title gradient + heartbeat line
 * ------------------------------------------------------------------ */
.text-gradient {
    background: linear-gradient(90deg, var(--c-primary), var(--c-accent-dark), var(--c-primary-light), var(--c-primary));
    background-size: 300% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    animation: gradientShift 6s ease-in-out infinite;
}
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.pulse-line path {
    stroke-dasharray: 460;
    stroke-dashoffset: 460;
    animation: pulseDraw 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
    filter: drop-shadow(0 2px 4px rgba(41, 90, 182, 0.35));
}
@keyframes pulseDraw {
    0%   { stroke-dashoffset: 460; }
    60%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -460; }
}

/* ------------------------------------------------------------------ *
 |  Countdown cards
 * ------------------------------------------------------------------ */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.cd-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 0.75rem 1.75rem;
    border-radius: 1.5rem;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.7));
    box-shadow: 0 24px 50px -24px rgba(41, 90, 182, 0.35), 0 2px 6px rgba(15, 27, 61, 0.04), inset 0 1px 0 #fff;
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    transition: transform 0.4s var(--ease-out-back);
}
.cd-unit:hover .cd-card { transform: translateY(-6px); }

/* Rotating conic gradient border */
.cd-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--angle), transparent 0 60%, var(--c-primary) 75%, var(--c-accent) 85%, transparent 100%),
                linear-gradient(rgba(15, 27, 61, 0.08), rgba(15, 27, 61, 0.08));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: spinBorder 6s linear infinite;
    pointer-events: none;
}
.cd-unit:nth-child(2) .cd-card::before { animation-delay: -1.5s; }
.cd-unit:nth-child(3) .cd-card::before { animation-delay: -3s; }
.cd-unit:nth-child(4) .cd-card::before { animation-delay: -4.5s; }
@keyframes spinBorder { to { --angle: 360deg; } }

/* Soft glow that pulses whenever the unit ticks */
.cd-glow {
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--c-primary) 0%, transparent 70%);
    opacity: 0.1;
    filter: blur(28px);
    pointer-events: none;
}
.cd-unit.is-tick .cd-glow { animation: glowPulse 0.9s ease-out; }
@keyframes glowPulse {
    0%   { opacity: 0.35; transform: scale(1.15); }
    100% { opacity: 0.1; transform: scale(1); }
}

.cd-digits {
    position: relative;
    display: flex;
    gap: 0.35rem;
}

/* Progress bar at the bottom of every card */
.cd-bar {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 0.8rem;
    height: 3px;
    border-radius: 9999px;
    background: rgba(15, 27, 61, 0.08);
    overflow: hidden;
}
.cd-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
    transform-origin: left center;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
html[dir="rtl"] .cd-bar span {
    transform-origin: right center;
    background: linear-gradient(270deg, var(--c-primary), var(--c-accent));
}

/* ------------------------------------------------------------------ *
 |  Flip digit
 * ------------------------------------------------------------------ */
.flip {
    position: relative;
    display: inline-block;
    width: calc(var(--dh) * 0.66);
    height: var(--dh);
    font-size: calc(var(--dh) * 0.7);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #fff;
    perspective: calc(var(--dh) * 4);
}
.flip-half {
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    overflow: hidden;
    background: linear-gradient(180deg, #3A6CD0, #2F62C2);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
.flip-top {
    top: 0;
    border-radius: 0.75rem 0.75rem 0 0;
    transform-origin: 50% 100%;
}
.flip-bottom {
    bottom: 0;
    border-radius: 0 0 0.75rem 0.75rem;
    transform-origin: 50% 0;
    background: linear-gradient(180deg, #295AB6, #214C9E);
}
.flip-half > span {
    position: absolute;
    left: 0;
    right: 0;
    height: var(--dh);
    line-height: var(--dh);
    text-align: center;
}
.flip-top > span    { top: 0; }
.flip-bottom > span { bottom: 0; }

/* hinge line */
.flip::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: rgba(15, 27, 61, 0.35);
    z-index: 5;
}

/* Animated halves (created by main.js on value change) */
.flip-half.flip-anim-top {
    z-index: 3;
    animation: flipTop 0.28s ease-in forwards;
}
.flip-half.flip-anim-bottom {
    z-index: 3;
    transform: rotateX(90deg);
    animation: flipBottom 0.28s 0.28s ease-out forwards;
}
@keyframes flipTop {
    0%   { transform: rotateX(0);      filter: brightness(1); }
    100% { transform: rotateX(-90deg); filter: brightness(0.6); }
}
@keyframes flipBottom {
    0%   { transform: rotateX(90deg); filter: brightness(1.4); }
    100% { transform: rotateX(0);     filter: brightness(1); }
}

/* ------------------------------------------------------------------ *
 |  Road-to-opening bar
 * ------------------------------------------------------------------ */
.road-bar {
    position: relative;
    background: linear-gradient(90deg, var(--c-primary), var(--c-primary-light), var(--c-accent));
    box-shadow: 0 2px 10px rgba(41, 90, 182, 0.35);
    transition: width 1s ease;
    overflow: hidden;
}
.road-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: translateX(-100%);
    animation: shimmer 2.5s ease-in-out infinite;
}
html[dir="rtl"] .road-bar { margin-left: auto; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ------------------------------------------------------------------ *
 |  Launched state entrance
 * ------------------------------------------------------------------ */
#launched:not(.hidden) { animation: modalIn 0.8s var(--ease-out-back) both; }

/* Lock background scroll when the modal is open */
body.no-scroll { overflow: hidden; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .pulse-line path { stroke-dashoffset: 0; }
    #particles { display: none; }
}