/* CSS-04: Scroll reveal + premium UI animations */

/* ============================================================
   CORE KEYFRAMES
   ============================================================ */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   FLOATING SUIT SYMBOLS
   ============================================================ */

@keyframes floatA {
    0%, 100% { transform: translateY(0) rotate(-15deg); }
    50%       { transform: translateY(-14px) rotate(-12deg); }
}
@keyframes floatB {
    0%, 100% { transform: translateY(0) rotate(12deg); }
    50%       { transform: translateY(-11px) rotate(15deg); }
}
@keyframes floatC {
    0%, 100% { transform: translateY(0) rotate(8deg); }
    50%       { transform: translateY(-13px) rotate(5deg); }
}
@keyframes floatD {
    0%, 100% { transform: translateY(0) rotate(-10deg); }
    50%       { transform: translateY(-16px) rotate(-7deg); }
}
@keyframes floatE {
    0%, 100% { transform: translateY(0) rotate(20deg); }
    50%       { transform: translateY(-10px) rotate(23deg); }
}
@keyframes floatF {
    0%, 100% { transform: translateY(0) rotate(-20deg); }
    50%       { transform: translateY(-9px) rotate(-17deg); }
}

.suit-float-a { animation: floatA 7s   ease-in-out infinite; }
.suit-float-b { animation: floatB 5.5s ease-in-out 1s    infinite; }
.suit-float-c { animation: floatC 6.5s ease-in-out 0.5s  infinite; }
.suit-float-d { animation: floatD 8s   ease-in-out 2s    infinite; }
.suit-float-e { animation: floatE 9s   ease-in-out 1.5s  infinite; }
.suit-float-f { animation: floatF 6s   ease-in-out 3s    infinite; }

/* ============================================================
   HERO STAGGERED ENTRANCE
   ============================================================ */

.hero-enter-1 { animation: fadeInDown 0.75s cubic-bezier(0.16,1,0.3,1) 0.05s both; }
.hero-enter-2 { animation: fadeInUp   0.75s cubic-bezier(0.16,1,0.3,1) 0.2s  both; }
.hero-enter-3 { animation: fadeInUp   0.75s cubic-bezier(0.16,1,0.3,1) 0.35s both; }
.hero-enter-4 { animation: fadeInUp   0.75s cubic-bezier(0.16,1,0.3,1) 0.5s  both; }
.hero-enter-5 { animation: fadeIn     0.75s cubic-bezier(0.16,1,0.3,1) 0.65s both; }

/* ============================================================
   SHIMMER BUTTON EFFECT
   ============================================================ */

@keyframes shimmerSlide {
    0%   { transform: translateX(-100%) skewX(-10deg); }
    100% { transform: translateX(400%)  skewX(-10deg); }
}

.btn-shimmer {
    position: relative;
    overflow: hidden;
}
.btn-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 35%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
    transform: translateX(-100%) skewX(-10deg);
    pointer-events: none;
}
.btn-shimmer:hover::after {
    animation: shimmerSlide 0.6s ease forwards;
}

/* ============================================================
   CTA PULSE GLOW
   ============================================================ */

/* Periodic shimmer: idle 86% of cycle, then slides across in ~0.6s */
@keyframes ctaPulse {
    0%, 86% { transform: translateX(-100%) skewX(-10deg); }
    100%    { transform: translateX(400%)  skewX(-10deg); }
}

.btn-cta {
    box-shadow: 0 4px 24px rgba(194,31,37,0.35);
}
.btn-cta::after {
    animation: ctaPulse 4.5s linear infinite;
}
/* On hover, the quick shimmerSlide from btn-shimmer takes over naturally */

/* ============================================================
   PREMIUM CARD LIFT ON HOVER
   ============================================================ */

.card-lift {
    transition:
        transform    0.32s cubic-bezier(0.16,1,0.3,1),
        box-shadow   0.32s cubic-bezier(0.16,1,0.3,1),
        border-color 0.32s ease;
}
.card-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 50px rgba(0,0,0,0.35), 0 0 30px rgba(194,31,37,0.1);
    border-color: rgba(194,31,37,0.45) !important;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */

html.js-ready .scroll-reveal {
    opacity: 0;
    transform: translateY(28px);
}
.scroll-reveal.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition:
        opacity   0.65s cubic-bezier(0.16,1,0.3,1),
        transform 0.65s cubic-bezier(0.16,1,0.3,1);
}

/* ============================================================
   NAVBAR SCROLL STATE
   ============================================================ */

#navbar {
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
#navbar.scrolled {
    background: rgba(13,13,13,0.97) !important;
    box-shadow: 0 1px 25px rgba(0,0,0,0.5);
}

/* ============================================================
   BURGER → X MORPH ANIMATION
   ============================================================ */

#burger-btn .b-line {
    display: block;
    width: 22px;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.28s cubic-bezier(0.16,1,0.3,1), opacity 0.2s ease;
    transform-origin: center;
}
#burger-btn.is-open .b-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#burger-btn.is-open .b-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
#burger-btn.is-open .b-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ============================================================
   MOBILE MENU SLIDE-DOWN ANIMATION
   ============================================================ */

#mobile-menu {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition:
        max-height 0.38s cubic-bezier(0.16,1,0.3,1),
        opacity    0.3s ease;
}
#mobile-menu.is-open {
    max-height: 400px;
    opacity: 1;
}

/* ============================================================
   COUNTDOWN SEGMENT BOXES
   ============================================================ */

.countdown-unit {
    background: rgba(22,22,22,0.95);
    border: 1px solid rgba(46,46,46,0.9);
    border-radius: 12px;
    padding: 14px 10px 10px;
    min-width: 68px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}
.countdown-unit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(194,31,37,0.05) 0%, transparent 60%);
    pointer-events: none;
}
.countdown-unit:hover {
    border-color: rgba(194,31,37,0.4);
    box-shadow: 0 0 20px rgba(194,31,37,0.08);
}

/* ============================================================
   PHOTO CARD HOVER
   ============================================================ */

.photo-card img {
    transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), filter 0.5s ease;
}
.photo-card:hover img {
    transform: scale(1.05);
    filter: grayscale(10%) brightness(0.75) !important;
}

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */

#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(to right, #9b1318, #C21F25, #e84545);
    z-index: 9999;
    pointer-events: none;
    will-change: width;
    box-shadow: 0 0 10px rgba(194,31,37,0.6), 0 0 22px rgba(194,31,37,0.25);
}

/* ============================================================
   GRAIN / NOISE TEXTURE OVERLAY
   ============================================================ */

#grain-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9997;
    opacity: 0.038;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* ============================================================
   SPINNING BORDER — NEXT GAME CARD
   The ::before rotates a conic-gradient inside overflow:hidden
   so only the border-glow spins, not the card content.
   ============================================================ */

.spin-border-track {
    position: relative;
    border-radius: 17px;
    overflow: hidden;
}

.spin-border-track::before {
    content: '';
    position: absolute;
    /* 200%×200% centred on the wrapper — rotating around its own centre
       equals rotating around the card's centre */
    left: -50%;
    top:  -50%;
    width:  200%;
    height: 200%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent       0deg,
        transparent      68deg,
        rgba(194,31,37,0.9)  82deg,
        rgba(255,130,130,0.5) 90deg,
        rgba(194,31,37,0.9)  98deg,
        transparent      112deg,
        transparent      360deg
    );
    animation: spinBorder 7s linear infinite;
    will-change: transform;
}

@keyframes spinBorder {
    to { transform: rotate(360deg); }
}

.spin-border-inner {
    position: relative;
    z-index: 1;
    /* 1.5px gap = the visible "border" */
    margin: 1.5px;
    border-radius: 15.5px;
    background: rgba(22,22,22,0.96);
    box-shadow: inset 0 0 50px rgba(194,31,37,0.06);
}

/* ============================================================
   COUNTDOWN DIGIT FLIP ANIMATION
   ============================================================ */

@keyframes flipIn {
    0%   { opacity: 0.2; transform: rotateX(-70deg) scale(0.85); }
    100% { opacity: 1;   transform: rotateX(0deg)   scale(1); }
}

[data-countdown] {
    display: inline-block;
    perspective: 300px;
    transform-style: preserve-3d;
}

[data-countdown].flip-in {
    animation: flipIn 0.3s cubic-bezier(0.16,1,0.3,1);
}

/* ============================================================
   ACTIVE NAV LINK
   ============================================================ */

.nav-active {
    color: #C21F25 !important;
}

/* ============================================================
   MAGNETIC BUTTON — will-change hint
   ============================================================ */

.btn-magnetic {
    will-change: transform;
}

/* ============================================================
   LINK HOVER ACCENT (back links, secondary nav text links)
   ============================================================ */

.link-hover-accent {
    transition: color 0.2s ease;
}
.link-hover-accent:hover {
    color: #C21F25 !important;
}