/* =============================================================================
   custom.css — Amaya Casino
   Design-system layer on top of Tailwind: glassmorphism, gradient borders,
   glow, grain texture, animated aurora and accessibility helpers.
   ============================================================================= */

/* Hide Alpine elements until Alpine has initialised (prevents flash). */
[x-cloak] { display: none !important; }

:root {
    --gold:  #f59e0b;
    --gold-2:#fbbf24;
    --clay:  #cf5b3f;
    --turq:  #14b8a6;
}

/* Smoother default rendering. */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* --- Gradient text helper (richer than bg-clip alone) --------------------- */
.text-gold {
    background: linear-gradient(120deg, #fde68a 0%, #f59e0b 35%, #fbbf24 55%, #cf5b3f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* Slowly shifting variant for headline emphasis. */
@keyframes goldshift { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } }
.text-gold-animated {
    background: linear-gradient(120deg, #fde68a, #f59e0b, #fbbf24, #cf5b3f, #fde68a);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: goldshift 6s linear infinite;
}


/* --- Brand lockup (nav + footer) ------------------------------------------ */
/* The nav wordmark is the original artwork (logo-word.webp) since 9. 7. 2026 —
   the old CSS gradient wordmark (.amaya-word) was replaced by it. */
.amaya-chip { filter: drop-shadow(0 4px 12px rgba(245, 158, 11, .38)); }

/* --- Glassmorphism surface with inner highlight --------------------------- */
.glass {
    position: relative;
    background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
/* subtle top sheen */
.glass::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
    pointer-events: none;
}
/* Warm, gold-tinted glass variant for premium chips/cards. */
.glass-gold {
    background: linear-gradient(160deg, rgba(245,158,11,.16), rgba(181,70,44,.06));
    border: 1.5px solid rgba(245,158,11,.4);
    box-shadow: 0 0 20px rgba(245,158,11,.15), inset 0 1px 1px rgba(255,255,255,.1);
    transition: all .3s ease;
    backdrop-filter: blur(20px);
}
.group:hover .glass-gold {
    background: linear-gradient(160deg, rgba(245,158,11,.22), rgba(181,70,44,.1));
    border-color: rgba(245,158,11,.6);
    box-shadow: 0 0 30px rgba(245,158,11,.3), inset 0 1px 1px rgba(255,255,255,.15);
}

/* --- Ornate gilded portrait frame (hero mascot) --------------------------- */
.frame-ornate {
    position: relative;
    padding: 8px;
    border-radius: 1.6rem;
    background: linear-gradient(150deg, #fde68a 0%, #f59e0b 22%, #b5462c 52%, #0d9488 82%, #fde68a 100%);
    box-shadow:
        0 0 40px rgba(245, 158, 11, .3),
        0 40px 100px -30px rgba(0,0,0,.9),
        0 0 0 2px rgba(253,230,138,.4),
        inset 0 1px 0 rgba(255,255,255,.15);
    transition: all .5s cubic-bezier(.22, 1, .36, 1);
    will-change: transform, box-shadow;
}
.group:hover .frame-ornate {
    box-shadow:
        0 0 60px rgba(245, 158, 11, .6),
        0 50px 120px -20px rgba(0,0,0,.95),
        0 0 0 2px rgba(253,230,138,.8),
        inset 0 1px 0 rgba(255,255,255,.25);
}
/* inner dark bevel + gold hairline between frame and photo */
.frame-ornate::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 1.25rem;
    z-index: 2;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px rgba(19,12,7,.95),
        inset 0 0 20px rgba(0,0,0,.7),
        inset 0 1px 2px rgba(253,230,138,.6);
}
/* gilded corner brackets */
.corner {
    position: absolute;
    width: clamp(1.25rem, 5vw, 1.625rem);
    height: clamp(1.25rem, 5vw, 1.625rem);
    z-index: 3;
    border: 2px solid #fde68a;
    filter: drop-shadow(0 0 8px rgba(245,158,11,.65));
    transition: all .4s ease;
}
.group:hover .corner {
    border-color: #fde68a;
    filter: drop-shadow(0 0 16px rgba(245,158,11,.9)) drop-shadow(0 0 4px rgba(253,230,138,.7));
}
.corner-tl { top: -0.25rem; left: -0.25rem;  border-right: 0; border-bottom: 0; border-top-left-radius: 0.75rem; }
.corner-tr { top: -0.25rem; right: -0.25rem; border-left: 0;  border-bottom: 0; border-top-right-radius: 0.75rem; }
.corner-bl { bottom: -0.25rem; left: -0.25rem;  border-right: 0; border-top: 0; border-bottom-left-radius: 0.75rem; }
.corner-br { bottom: -0.25rem; right: -0.25rem; border-left: 0;  border-top: 0; border-bottom-right-radius: 0.75rem; }

/* --- Poker-chip medallion (VIP tiers) ------------------------------------- */
.chip-medallion {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(3rem, 12vw, 4.75rem);
    height: clamp(3rem, 12vw, 4.75rem);
    border-radius: 50%;
    /* notched gold + oxblood chip edge */
    background: repeating-conic-gradient(#fbbf24 0deg 9deg, #7a1f1f 9deg 18deg);
    box-shadow: 0 10px 24px -10px rgba(245, 158, 11, .55),
                inset 0 0 0 2px rgba(253, 230, 138, .6);
    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.group:hover .chip-medallion { transform: rotate(18deg); }
/* dark inner face with a turquoise ring */
.chip-medallion::after {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: radial-gradient(closest-side, #241a12, #130c07);
    border: 2px solid rgba(45, 212, 191, .8);
    box-shadow: inset 0 0 14px rgba(0, 0, 0, .65);
}
/* keep the icon above the inner face */
.chip-medallion > * { position: relative; z-index: 1; }

/* --- Decorative quotation glyph (testimonial cards) ------------------------ */
.quote-mark {
    position: absolute;
    top: .5rem;
    right: 1.1rem;
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    line-height: 1;
    font-weight: 700;
    background: linear-gradient(160deg, rgba(245,158,11,.35), rgba(245,158,11,.08));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    pointer-events: none;
    user-select: none;
}

/* --- Gradient-border card (premium look) ---------------------------------- */
/* Use on a wrapper; the border is a masked gradient ring that lights up.     */
.gradient-border {
    position: relative;
    border-radius: 1rem;
    background: rgba(17, 26, 46, .55);
    isolation: isolate;
}
.gradient-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, rgba(245,158,11,.55), rgba(255,255,255,.06) 40%, rgba(20,184,166,.45));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: .6;
    transition: opacity .4s ease;
    z-index: -1;
}
.gradient-border:hover::before { opacity: 1; }

/* --- Generic hover lift + glow for cards ---------------------------------- */
.card-hover {
    transition: all .4s cubic-bezier(.22, 1, .36, 1);
    will-change: transform, box-shadow, border-color;
}
.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .85),
                0 0 30px rgba(245, 158, 11, .35);
}
/* Bonus cards specific hover boost */
.card-hover.gradient-border:hover {
    box-shadow: 0 0 40px rgba(245, 158, 11, .5),
                0 50px 100px -20px rgba(0,0,0,.9),
                0 0 0 2px rgba(253,230,138,.6),
                inset 0 1px 0 rgba(255,255,255,.2);
}
.card-hover.glass:hover {
    background: linear-gradient(160deg, rgba(245,158,11,.12), rgba(181,70,44,.04));
    border-color: rgba(245,158,11,.5);
    box-shadow: 0 0 30px rgba(245,158,11,.25), inset 0 1px 1px rgba(255,255,255,.12);
}

/* --- Neon outline buttons (nav login/register — totem-light accent) ------- */
.btn-neon {
    --neon: #22d3ee;
    --neon-soft: rgba(34, 211, 238, .5);
    position: relative;
    background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
    border: 1.5px solid var(--neon);
    color: var(--neon);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 0 0 var(--neon-soft), inset 0 0 12px -8px var(--neon-soft);
    transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.btn-neon:hover {
    background: var(--neon);
    color: #05060d;
    box-shadow: 0 0 26px 1px var(--neon-soft), inset 0 0 14px -6px rgba(255,255,255,.5);
}
.btn-neon-turq { --neon: #2dd4bf; --neon-soft: rgba(45, 212, 191, .5); }

/* --- Functional icon rail (fixed left, desktop only) ----------------------- */
.icon-rail-btn {
    position: relative;
    transition: transform .3s cubic-bezier(.22,1,.36,1), color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.icon-rail-btn:hover,
.icon-rail-btn:focus-visible {
    transform: translateX(4px);
    color: var(--rail-neon, #22d3ee);
    border-color: var(--rail-neon, #22d3ee);
    box-shadow: 0 0 18px -2px var(--rail-neon-soft, rgba(34,211,238,.55));
}

/* --- Shine sweep for primary buttons -------------------------------------- */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
    content: "";
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-18deg);
    transition: left .7s ease;
}
.btn-shine:hover::after { left: 140%; }

/* --- Animated aurora background blob --------------------------------------- */
.aurora-blob {
    background:
        radial-gradient(closest-side, rgba(245,158,11,.45), transparent),
        radial-gradient(closest-side, rgba(20,184,166,.35), transparent);
    filter: blur(60px);
    transition: all .6s ease;
}
.group:hover .aurora-blob {
    filter: blur(50px) brightness(1.3);
    opacity: 0.9;
}

/* --- Film-grain / noise overlay for depth --------------------------------- */
.grain::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .035;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Native-American inspired geometric pattern (pure CSS) ----------------- */
.tribal-pattern {
    background-image:
        linear-gradient(135deg, rgba(245, 158, 11, .8) 25%, transparent 25%),
        linear-gradient(225deg, rgba(20, 184, 166, .8) 25%, transparent 25%),
        linear-gradient(45deg,  rgba(207, 91, 63, .8)  25%, transparent 25%),
        linear-gradient(315deg, rgba(245, 158, 11, .8) 25%, transparent 25%);
    background-position: 20px 0, 20px 0, 0 0, 0 0;
    background-size: 40px 40px;
    background-repeat: repeat;
}

/* Thin tribal "weave" divider used at the top of the footer. */
.tribal-divider {
    background:
        repeating-linear-gradient(
            90deg,
            #f59e0b 0, #f59e0b 10px,
            #cf5b3f 10px, #cf5b3f 20px,
            #14b8a6 20px, #14b8a6 30px,
            #0b0805 30px, #0b0805 40px
        );
}

/* --- Recent-winner chips (jackpot section) --------------------------------- */
/* Newly inserted chips pop in; keyframe runs automatically on DOM insert.    */
@keyframes winnerIn {
    from { opacity: 0; transform: translateY(10px) scale(.9); }
    to   { opacity: 1; transform: none; }
}
.winner-chip { animation: winnerIn .55s cubic-bezier(.22, 1, .36, 1) both; }

/* --- Marquee strip (provider logos) --------------------------------------- */
.marquee-mask {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* --- Section heading eyebrow ---------------------------------------------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .25em;
    text-transform: uppercase;
}
.eyebrow::before,
.eyebrow::after {
    content: "";
    width: 1.75rem; height: 1px;
    background: linear-gradient(90deg, transparent, currentColor);
}
.eyebrow::after { transform: rotate(180deg); }

/* --- Custom scrollbar (desktop) ------------------------------------------- */
@media (pointer: fine) {
    ::-webkit-scrollbar { width: 11px; }
    ::-webkit-scrollbar-track { background: #05060d; }
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(#f59e0b, #cf5b3f);
        border-radius: 99px;
        border: 3px solid #05060d;
    }
}