/* =====================================================================
   MASTER DANCE CUP — sistem vizual
   ---------------------------------------------------------------------
   Paleta: negru cald + un singur accent auriu (ca logo-ul oficial).
           Rosul "live" exista doar ca stare functionala (pe scena).
   Tipografie: Bodoni Moda (titluri, registru editorial/fashion)
               Geist (interfata, text, cifre — cu cifre tabulare).
   Fotografie: toate imaginile trec prin acelasi "grading" cald (vezi
               .photo) ca sa arate ca o singura sedinta foto.
   Fara dependente in afara de Bootstrap 5 (grid + cateva utilitare).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Token-uri
   --------------------------------------------------------------------- */
:root {
    /* Negru cald, in straturi (nuanta usor sepia, nu negru pur) */
    --ink-950: #080706;
    --ink-900: #0C0B09;
    --ink-800: #13110E;
    --ink-700: #1B1814;
    --ink-600: #25211B;
    --ink-500: #332D24;

    /* Accentul unic — auriul logo-ului */
    --gold-200: #F6ECD2;
    --gold-300: #EEDBAE;
    --gold-400: #E0C07E;
    --gold-500: #C9A052;
    --gold-600: #A07A34;
    --gold-700: #6E5424;

    /* Stari functionale (nu decor) */
    --live: #E0594C;
    --success: #7FCB9C;

    /* Text */
    --text-100: #F5F1E8;
    --text-300: #D6CEBF;
    --text-500: #A0968A;
    --text-700: #6F665B;

    /* Suprafete */
    --glass: rgba(245, 241, 232, .04);
    --glass-strong: rgba(245, 241, 232, .07);
    --hairline: rgba(245, 241, 232, .11);
    --hairline-soft: rgba(245, 241, 232, .06);

    /* Tipografie */
    --font-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
    --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-accent: var(--font-sans);
    --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* Ritm */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --section-y: clamp(5rem, 10vw, 9.5rem);

    /* Umbre nuantate (lumina calda, de sus) */
    --shadow-soft: 0 18px 50px -24px rgba(4, 3, 2, .9);
    --shadow-lift: 0 40px 90px -36px rgba(4, 3, 2, .95);
    --glow-gold: 0 10px 40px -14px rgba(201, 160, 82, .55);

    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);

    /* Scara z-index */
    --z-nav: 1000;
    --z-overlay: 2000;
    --z-loader: 3000;

    /* Setata din JS: progresul scroll-ului in hero, 0 -> 1 */
    --hero-progress: 0;
    --pointer-x: 0;
    --pointer-y: 0;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 92px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--ink-950);
    color: var(--text-300);
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: clamp(.97rem, .25vw + .92rem, 1.0625rem);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Un singur halou cald, discret — fara "glow" colorat. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(70rem 40rem at 85% -10%, rgba(201, 160, 82, .07), transparent 60%),
        radial-gradient(60rem 40rem at 0% 110%, rgba(201, 160, 82, .04), transparent 60%);
    pointer-events: none;
}

/* Granulatie de film peste tot site-ul. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    opacity: .045;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

img { max-width: 100%; }

/* Grading comun pentru fotografii: cald, contrast usor, fara saturatie stridenta. */
.photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.82) sepia(.12) contrast(1.04) brightness(.94);
}

/* ---------------------------------------------------------------------
   2. Tipografie
   --------------------------------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    color: var(--text-100);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -.012em;
    margin: 0 0 .5em;
    text-wrap: balance;
}

.display-xl {
    font-size: clamp(3.4rem, 9.5vw, 9rem);
    line-height: .9;
    letter-spacing: -.03em;
}

.display-lg { font-size: clamp(2.5rem, 5.6vw, 4.8rem); letter-spacing: -.022em; }
.display-md { font-size: clamp(1.95rem, 3.4vw, 3rem); }

p { text-wrap: pretty; }

em, .italic {
    font-style: italic;
    color: var(--gold-300);
}

.eyebrow {
    font-family: var(--font-sans);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-400);
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.3rem;
}

.eyebrow::before {
    content: "";
    width: 1.8rem;
    height: 1px;
    background: var(--gold-500);
}

.lead-soft {
    color: var(--text-500);
    font-size: clamp(1.02rem, .4vw + .94rem, 1.17rem);
    line-height: 1.7;
    max-width: 60ch;
}

.text-gold { color: var(--gold-400); }
.text-muted-soft { color: var(--text-500); }

.gradient-text {
    background: linear-gradient(110deg, var(--gold-200) 0%, var(--gold-400) 45%, var(--gold-600) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Numere si scoruri: cifre tabulare, ca sa nu "danseze" la actualizare live */
.numeric {
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: -.01em;
}

a { color: var(--gold-400); text-decoration: none; transition: color .25s var(--ease-out); }
a:hover { color: var(--gold-300); }

:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; }

::selection { background: var(--gold-500); color: var(--ink-950); }

/* ---------------------------------------------------------------------
   3. Structura
   --------------------------------------------------------------------- */
.section { padding-block: var(--section-y) calc(var(--section-y) * 1.08); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }

.container-x {
    width: min(1280px, 100% - 3rem);
    margin-inline: auto;
}

@media (max-width: 575.98px) {
    .container-x { width: min(1280px, 100% - 2rem); }
}

.rule {
    height: 1px;
    background: var(--hairline);
    border: 0;
    margin: 0;
}

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 3rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head > div { max-width: 44rem; }
.section-head h2 { margin-bottom: 0; }

/* Link de tip "text" (tertiar), in loc de inca un buton */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-100);
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--gold-500);
    transition: gap .3s var(--ease-out), color .3s var(--ease-out);
}

.link-arrow::after { content: "→"; color: var(--gold-400); }
.link-arrow:hover { gap: .95rem; color: var(--gold-300); }

/* ---------------------------------------------------------------------
   4. Navigatie
   --------------------------------------------------------------------- */
.nav-bar {
    position: fixed;
    inset: 0 0 auto;
    z-index: var(--z-nav);
    padding-block: 1.1rem;
    transition: padding .4s var(--ease-out), background .4s var(--ease-out),
                border-color .4s var(--ease-out), backdrop-filter .4s var(--ease-out);
    border-bottom: 1px solid transparent;
    background: linear-gradient(180deg, rgba(8, 7, 6, .7), transparent);
}

.nav-bar.is-stuck {
    padding-block: .6rem;
    background: rgba(8, 7, 6, .86);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-bottom-color: var(--hairline-soft);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: var(--text-100);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.brand:hover { color: var(--text-100); }

.brand-mark {
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex: none;
    filter: drop-shadow(0 2px 8px rgba(201, 160, 82, .4));
}

/* Doar in navigatia principala: logo singur, fara text, putin mai mare. */
.nav-bar .brand-mark {
    width: 52px;
    height: 52px;
    transition: width .4s var(--ease-out), height .4s var(--ease-out);
}

.nav-bar.is-stuck .brand-mark { width: 44px; height: 44px; }

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links a:not(.btn) {
    position: relative;
    color: var(--text-300);
    font-size: .88rem;
    font-weight: 500;
    padding-block: .35rem;
}

.nav-links a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--gold-400);
    transition: width .35s var(--ease-out);
}

.nav-links a:not(.btn):hover { color: var(--text-100); }
.nav-links a:hover::after,
.nav-links a.is-active::after { width: 100%; }
.nav-links a.is-active { color: var(--gold-300); }
.nav-links .btn::after { display: none; }

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: var(--glass);
    color: var(--text-100);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

.nav-toggle span {
    display: block;
    width: 17px;
    height: 1.5px;
    background: currentColor;
    transition: transform .35s var(--ease-out), opacity .25s;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1099.98px) {
    .nav-toggle { display: flex; }

    .nav-links {
        position: fixed;
        inset: 78px .9rem auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: .75rem;
        border-radius: var(--radius);
        background: rgba(12, 11, 9, .97);
        backdrop-filter: blur(26px);
        -webkit-backdrop-filter: blur(26px);
        border: 1px solid var(--hairline);
        box-shadow: var(--shadow-lift);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-14px);
        transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility .3s;
    }

    .nav-links.is-open { opacity: 1; visibility: visible; transform: none; }
    .nav-links a:not(.btn) { padding: .9rem 1rem; font-size: 1rem; border-radius: 10px; }
    .nav-links a:not(.btn):hover { background: var(--glass); }
    .nav-links a::after { display: none; }
    .nav-links .btn { margin-top: .5rem; justify-content: center; width: 100%; }
    .nav-links form { width: 100%; }
}

/* ---------------------------------------------------------------------
   5. Butoane
   --------------------------------------------------------------------- */
.btn {
    --btn-bg: transparent;
    --btn-fg: var(--text-100);
    --btn-bd: var(--hairline);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1rem 1.9rem;
    border-radius: 999px;
    border: 1px solid var(--btn-bd);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-sans);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out),
                border-color .28s var(--ease-out), background .28s var(--ease-out), color .28s var(--ease-out);
}

.btn:hover { transform: translateY(-2px); color: var(--btn-fg); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn-gold {
    --btn-fg: var(--ink-950);
    --btn-bd: transparent;
    background: linear-gradient(135deg, var(--gold-300), var(--gold-500) 60%, var(--gold-600));
    box-shadow: var(--glow-gold);
}

.btn-gold:hover { box-shadow: 0 14px 48px -12px rgba(201, 160, 82, .75); }

/* Luciu care traverseaza butonul la hover */
.btn-gold::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform .75s var(--ease-out);
}

.btn-gold:hover::after { transform: translateX(120%); }

.btn-ghost {
    background: rgba(8, 7, 6, .35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.btn-ghost:hover { border-color: var(--gold-500); background: rgba(201, 160, 82, .08); }

.btn-sm { padding: .65rem 1.2rem; font-size: .72rem; }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------------
   6. HERO — fotografie full-bleed, paralaxa pe scroll
   ---------------------------------------------------------------------
   JS scrie --hero-progress (0 la varf, 1 la iesire). Fotografia se
   apropie si coboara usor; textul urca si se estompeaza. Simetric:
   scroll invers readuce exact starea initiala.
   --------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
    background: var(--ink-950);
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.hero-media .photo {
    object-position: 68% 40%;
    transform:
        translate3d(calc(var(--pointer-x) * -10px), calc(var(--hero-progress) * 70px + var(--pointer-y) * -8px), 0)
        scale(calc(1.06 + var(--hero-progress) * .08));
    transition: transform .15s linear;
    will-change: transform;
    animation: hero-in 2.2s var(--ease-out) both;
}

@keyframes hero-in {
    from { opacity: 0; scale: 1.08; }
    to   { opacity: 1; scale: 1; }
}

.hero-shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(8, 7, 6, .94) 0%, rgba(8, 7, 6, .72) 34%, rgba(8, 7, 6, .18) 68%, rgba(8, 7, 6, .35) 100%),
        linear-gradient(0deg, var(--ink-950) 0%, rgba(8, 7, 6, 0) 38%),
        linear-gradient(180deg, rgba(8, 7, 6, .55) 0%, transparent 22%);
}

.hero-content {
    position: relative;
    z-index: 2;
    width: min(1280px, 100% - 3rem);
    margin-inline: auto;
    padding-block: clamp(6.5rem, 14vh, 9rem) clamp(3rem, 7vh, 5.5rem);
    transform: translate3d(0, calc(var(--hero-progress) * -60px), 0);
    opacity: calc(1 - var(--hero-progress) * 1.3);
    will-change: transform, opacity;
}

.hero-title {
    margin: 0;
    font-weight: 500;
    max-width: 12ch;
}

/* Titlul se scaleaza si cu inaltimea ecranului, ca butoanele sa ramana vizibile. */
.hero-title.display-xl { font-size: clamp(3.2rem, min(8.4vw, 12.5vh), 8.4rem); }

.hero-title .line { display: block; }

.hero-title .line--accent {
    font-style: italic;
    font-weight: 400;
    color: var(--gold-300);
    padding-left: .55em;
}

.hero-lead {
    margin: 1.3rem 0 0;
    max-width: 44ch;
    font-size: clamp(1.05rem, .5vw + .95rem, 1.25rem);
    color: var(--text-300);
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.8rem;
    margin-top: 1.5rem;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-300);
}

.hero-meta span { display: inline-flex; align-items: center; gap: .6rem; }
.hero-meta span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-500); }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.6rem;
    align-items: center;
    margin-top: 2rem;
}

/* Countdown — cifre mari, fara "cutii" */
.countdown {
    display: flex;
    gap: 0;
    margin-top: 1.8rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--hairline);
    max-width: 30rem;
}

.countdown-cell {
    flex: 1 1 0;
    min-width: 70px;
    padding: 1rem 1rem .2rem 0;
    text-align: left;
}

.countdown-cell + .countdown-cell { padding-left: 1rem; border-left: 1px solid var(--hairline-soft); }

.countdown-value {
    display: block;
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--text-100);
    font-variant-numeric: tabular-nums;
}

.countdown-label {
    display: block;
    margin-top: .5rem;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-500);
}

.scroll-cue {
    position: absolute;
    right: clamp(1.5rem, 4vw, 3rem);
    bottom: 2.5rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    color: var(--text-500);
    opacity: calc(1 - var(--hero-progress) * 2.4);
}

.scroll-cue-line {
    width: 1px;
    height: 54px;
    background: linear-gradient(180deg, var(--gold-500), transparent);
    animation: cue 2.4s var(--ease-in-out) infinite;
    transform-origin: top;
}

@keyframes cue {
    0%, 100% { transform: scaleY(.35); opacity: .35; }
    50%      { transform: scaleY(1); opacity: 1; }
}

@media (max-width: 767.98px) {
    .hero { align-items: flex-end; }
    .hero-media .photo { object-position: 72% 30%; }
    .hero-shade {
        background:
            linear-gradient(0deg, var(--ink-950) 6%, rgba(8, 7, 6, .78) 42%, rgba(8, 7, 6, .12) 72%, rgba(8, 7, 6, .45) 100%);
    }
    .hero-media .photo { object-position: 84% 30%; }
    .hero-content { padding-block: 13rem 3.5rem; width: min(1280px, 100% - 2rem); }
    .hero-title, .hero-lead { text-shadow: 0 2px 18px rgba(8, 7, 6, .7); }
    .hero-title .line--accent { padding-left: .3em; }
    .scroll-cue { display: none; }
}

/* ---------------------------------------------------------------------
   6b. Antet de pagina cu fotografie (paginile interioare)
   --------------------------------------------------------------------- */
.page-hero {
    position: relative;
    min-height: clamp(26rem, 62vh, 36rem);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
}

.page-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.page-hero__media .photo { animation: hero-in 1.6s var(--ease-out) both; }

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(8, 7, 6, .9) 0%, rgba(8, 7, 6, .55) 50%, rgba(8, 7, 6, .2) 100%),
        linear-gradient(0deg, var(--ink-950) 0%, rgba(8, 7, 6, 0) 55%),
        linear-gradient(180deg, rgba(8, 7, 6, .6) 0%, transparent 30%);
}

.page-hero__content {
    width: min(1280px, 100% - 3rem);
    margin-inline: auto;
    padding-block: 9rem clamp(3rem, 6vw, 4.5rem);
}

.page-hero__content h1 { margin-bottom: .35em; max-width: 16ch; }
.page-hero__content .lead-soft { color: var(--text-300); }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.4rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-300);
}

.back-link:hover { color: var(--gold-300); }

@media (max-width: 575.98px) {
    .page-hero__content { width: min(1280px, 100% - 2rem); padding-top: 8rem; }
}

/* ---------------------------------------------------------------------
   7. Statistici
   --------------------------------------------------------------------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.stat-cell {
    padding: 2rem 1.25rem 1.8rem 0;
}

.stat-cell + .stat-cell { padding-left: 1.5rem; border-left: 1px solid var(--hairline-soft); }

.stat-value {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 5vw, 3.8rem);
    font-weight: 500;
    line-height: 1;
    color: var(--gold-300);
    font-variant-numeric: lining-nums tabular-nums;
}

.stat-label {
    display: block;
    margin-top: .7rem;
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-500);
}

@media (max-width: 575.98px) {
    .stat-cell { padding: 1.4rem .75rem 1.3rem 0; }
    .stat-cell + .stat-cell { padding-left: .9rem; }
}

/* ---------------------------------------------------------------------
   8. Carduri de categorie — fotografie + inclinare 3D
   --------------------------------------------------------------------- */
.tilt-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
    perspective: 1200px;
}

/* Grila "decalata": coloana din mijloc coboara — ritm editorial. */
@media (min-width: 992px) {
    .tilt-grid--stagger > :nth-child(3n + 2) { margin-top: 4rem; }
    .tilt-grid--stagger { padding-bottom: 4rem; }
}

@media (max-width: 991.98px) { .tilt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .tilt-grid { grid-template-columns: 1fr; } }

.tilt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 4 / 5;
    padding: 1.75rem;
    border-radius: var(--radius-lg);
    background: var(--ink-800);
    color: var(--text-300);
    overflow: hidden;
    isolation: isolate;
    transform-style: preserve-3d;
    transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
    will-change: transform;
}

.tilt-card:hover { box-shadow: var(--shadow-lift); color: var(--text-300); }

.tilt-card__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    transition: transform 1.1s var(--ease-out);
}

.tilt-card:hover .tilt-card__media { transform: scale(1.06); }

/* Degrade pentru lizibilitate + reflexia care urmareste cursorul */
.tilt-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(24rem 24rem at var(--mx, 50%) var(--my, 0%), rgba(224, 192, 126, .16), transparent 60%),
        linear-gradient(0deg, rgba(8, 7, 6, .96) 0%, rgba(8, 7, 6, .7) 38%, rgba(8, 7, 6, .05) 72%);
}

.tilt-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid var(--hairline-soft);
    pointer-events: none;
    transition: border-color .5s var(--ease-out);
}

.tilt-card:hover::after { border-color: rgba(224, 192, 126, .45); }

.tilt-card__index {
    position: absolute;
    top: 1.5rem;
    left: 1.75rem;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--gold-300);
}

.tilt-card__title {
    font-size: clamp(1.9rem, 2.6vw, 2.5rem);
    color: var(--text-100);
    margin: 0 0 .5rem;
    transform: translateZ(40px);
}

.tilt-card__text {
    font-size: .92rem;
    color: var(--text-300);
    margin-bottom: 1.3rem;
    max-width: 34ch;
    transform: translateZ(22px);
}

.tilt-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-500);
}

.tilt-card__arrow {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--hairline);
    display: grid;
    place-items: center;
    color: var(--gold-300);
    transition: transform .4s var(--ease-out), background .4s var(--ease-out), color .4s;
    flex: none;
}

.tilt-card:hover .tilt-card__arrow {
    transform: translateX(4px);
    background: var(--gold-400);
    color: var(--ink-950);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .32rem .7rem;
    border-radius: var(--radius-xs);
    border: 1px solid var(--hairline);
    background: rgba(8, 7, 6, .35);
    font-family: var(--font-sans);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-300);
}

.chip--gold { border-color: rgba(224, 192, 126, .4); color: var(--gold-300); }
.chip--live { border-color: rgba(224, 89, 76, .5); color: #F2A79E; }

.chip--live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--live);
    animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(224, 89, 76, .6); }
    50%      { opacity: .55; transform: scale(.85); box-shadow: 0 0 0 6px rgba(224, 89, 76, 0); }
}

/* ---------------------------------------------------------------------
   8b. Fotografie + text (split editorial) si galerie
   --------------------------------------------------------------------- */
.split-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
}

.split-media--reverse > :first-child { order: 2; }

.split-media__figure {
    position: relative;
    margin: 0;
}

.split-media__frame {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lift);
}

/* Rama aurie decalata — profunzime fara "card" */
.split-media__figure::before {
    content: "";
    position: absolute;
    inset: 1.5rem -1.5rem -1.5rem 1.5rem;
    border: 1px solid rgba(224, 192, 126, .35);
    border-radius: var(--radius-lg);
    z-index: -1;
}

.split-media--reverse .split-media__figure::before { inset: 1.5rem 1.5rem -1.5rem -1.5rem; }

.split-media__caption {
    position: absolute;
    left: 1.25rem;
    bottom: 1.25rem;
    padding: .55rem .85rem;
    border-radius: var(--radius-xs);
    background: rgba(8, 7, 6, .72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: .74rem;
    font-weight: 500;
    color: var(--text-300);
}

@media (max-width: 991.98px) {
    .split-media { grid-template-columns: 1fr; }
    .split-media--reverse > :first-child { order: 0; }
    .split-media__frame { aspect-ratio: 16 / 11; }
    .split-media__figure::before { display: none; }
}

.pillar-list {
    display: grid;
    gap: 0;
    margin: 2.2rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: pillar;
}

.pillar-list li {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1.3rem 0;
    border-top: 1px solid var(--hairline-soft);
}

.pillar-list li::before {
    counter-increment: pillar;
    content: "0" counter(pillar);
    font-size: .8rem;
    font-weight: 600;
    color: var(--gold-400);
    padding-top: .3rem;
}

.pillar-list h3 { font-size: 1.35rem; margin-bottom: .3rem; }
.pillar-list p { margin: 0; font-size: .93rem; color: var(--text-500); }

/* Galerie orizontala cu scroll-snap */
.gallery {
    display: flex;
    gap: clamp(.75rem, 1.5vw, 1.25rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 max(1.5rem, calc((100vw - 1280px) / 2)) 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--gold-700) transparent;
}

.gallery-item {
    position: relative;
    flex: none;
    height: clamp(300px, 46vw, 520px);
    aspect-ratio: 3 / 4;
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    scroll-snap-align: start;
}

.gallery-item--wide { aspect-ratio: 7 / 5; }
.gallery-item:nth-child(even) { margin-top: 2.5rem; }

.gallery-item .photo { transition: transform 1.1s var(--ease-out); }
.gallery-item:hover .photo { transform: scale(1.04); }

/* ---------------------------------------------------------------------
   9. Juriu
   --------------------------------------------------------------------- */
.jury-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.jury-card {
    position: relative;
    padding: 1.8rem 1.6rem 1.9rem;
    border-radius: var(--radius-lg);
    background: var(--ink-800);
    transition: transform .45s var(--ease-out), background .45s var(--ease-out);
}

.jury-card:hover { transform: translateY(-4px); background: var(--ink-700); }

.jury-avatar {
    width: 84px;
    height: 84px;
    border-radius: 30%;
    display: grid;
    place-items: center;
    margin-bottom: 1.4rem;
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-style: italic;
    color: var(--gold-300);
    background: linear-gradient(150deg, rgba(224, 192, 126, .22), rgba(110, 84, 36, .25));
    border: 1px solid rgba(224, 192, 126, .3);
    object-fit: cover;
}

.jury-name { font-size: 1.5rem; margin-bottom: .35rem; }

.jury-role {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold-400);
    margin-bottom: 1rem;
}

.jury-bio { font-size: .9rem; color: var(--text-500); line-height: 1.65; margin-bottom: 0; }

/* ---------------------------------------------------------------------
   10. Formulare
   --------------------------------------------------------------------- */
.panel {
    border-radius: var(--radius-lg);
    border: 1px solid var(--hairline-soft);
    background: var(--ink-800);
    padding: clamp(1.75rem, 3.5vw, 3rem);
    box-shadow: var(--shadow-soft);
}

.panel--glass {
    background: rgba(12, 11, 9, .6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.field { margin-bottom: 1.3rem; }

.field-label {
    display: block;
    margin-bottom: .5rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-300);
}

.field-label .req { color: var(--gold-400); }

.input,
.select,
.textarea {
    width: 100%;
    padding: .9rem 1.05rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--hairline);
    background: rgba(8, 7, 6, .5);
    color: var(--text-100);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s;
    appearance: none;
}

.textarea { min-height: 120px; resize: vertical; }

.select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%23A0968A' stroke-width='1.6'><path d='M1 1l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1.05rem center;
    padding-right: 2.6rem;
}

.select option { background: var(--ink-800); color: var(--text-100); }

.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--gold-500);
    background: rgba(8, 7, 6, .7);
    box-shadow: 0 0 0 3px rgba(201, 160, 82, .16);
}

.input::placeholder, .textarea::placeholder { color: var(--text-700); }

.input.is-invalid,
.select.is-invalid,
.textarea.is-invalid { border-color: var(--live); }

.field-error {
    display: block;
    margin-top: .45rem;
    font-size: .82rem;
    color: #F2A79E;
}

.field-hint { display: block; margin-top: .45rem; font-size: .8rem; color: var(--text-500); }

/* Zona de upload */
.dropzone {
    position: relative;
    border: 1px dashed var(--hairline);
    border-radius: var(--radius);
    padding: 2rem 1.25rem;
    text-align: center;
    background: rgba(8, 7, 6, .35);
    transition: border-color .3s var(--ease-out), background .3s var(--ease-out);
    cursor: pointer;
}

.dropzone:hover,
.dropzone.is-dragover { border-color: var(--gold-500); background: rgba(201, 160, 82, .07); }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone-icon { font-size: 1.6rem; color: var(--gold-400); }
.dropzone-text { font-size: .92rem; color: var(--text-300); margin-top: .6rem; }
.dropzone-file { margin-top: .6rem; font-size: .85rem; color: var(--gold-300); word-break: break-all; }

.check {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    font-size: .9rem;
    color: var(--text-500);
    cursor: pointer;
}

.check input {
    margin-top: .25rem;
    width: 18px;
    height: 18px;
    accent-color: var(--gold-500);
    flex: none;
}

/* Lista de taxe (inscriere) */
.fee-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fee-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--hairline-soft);
    font-size: .95rem;
    color: var(--text-300);
}

.fee-list strong { color: var(--gold-300); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fee-list small { color: var(--text-500); font-weight: 400; }

/* ---------------------------------------------------------------------
   11. Program (timeline) + harta
   --------------------------------------------------------------------- */
.timeline { position: relative; padding-left: 2.2rem; }

.timeline::before {
    content: "";
    position: absolute;
    left: 6px;
    top: .6rem;
    bottom: .6rem;
    width: 1px;
    background: linear-gradient(180deg, var(--gold-500), rgba(201, 160, 82, .15));
}

.timeline-item { position: relative; padding-bottom: 2rem; }

.timeline-item::before {
    content: "";
    position: absolute;
    left: -2.2rem;
    top: .45rem;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid var(--gold-400);
    background: var(--ink-950);
    box-shadow: 0 0 0 4px rgba(201, 160, 82, .1);
}

.timeline-time {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--gold-400);
    font-variant-numeric: tabular-nums;
}

.timeline-title { font-size: 1.45rem; margin: .3rem 0 .25rem; }
.timeline-text { font-size: .92rem; color: var(--text-500); margin: 0; }

.day-heading {
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-100);
    padding: .5rem 0 1.4rem;
}

.map-frame {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--hairline);
    min-height: 340px;
    height: 100%;
    background: var(--ink-700);
    position: relative;
}

.map-frame iframe {
    width: 100%;
    height: 100%;
    min-height: 340px;
    border: 0;
    display: block;
    /* Hartile OSM sunt luminoase; le aducem in paleta calda, intunecata. */
    filter: invert(90%) hue-rotate(180deg) sepia(.25) saturate(.5) brightness(.9) contrast(1.05);
}

/* ---------------------------------------------------------------------
   12. Tabele de rezultate
   --------------------------------------------------------------------- */
.table-wrap {
    border: 1px solid var(--hairline-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--ink-800);
}

.result-table { width: 100%; border-collapse: collapse; }

.result-table th {
    padding: 1rem 1.2rem;
    text-align: left;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-500);
    background: rgba(8, 7, 6, .4);
    border-bottom: 1px solid var(--hairline-soft);
    white-space: nowrap;
}

.result-table td {
    padding: 1.05rem 1.2rem;
    border-bottom: 1px solid var(--hairline-soft);
    font-size: .95rem;
    vertical-align: middle;
}

.result-table tbody tr:last-child td { border-bottom: 0; }
.result-table tbody tr { transition: background .3s var(--ease-out); }
.result-table tbody tr:hover { background: rgba(245, 241, 232, .025); }
.result-table .name { color: var(--text-100); font-weight: 500; }

.result-table .score {
    text-align: right;
    color: var(--gold-300);
    font-size: 1.1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rank-badge {
    width: 36px;
    height: 36px;
    border-radius: 30%;
    display: grid;
    place-items: center;
    font-size: .88rem;
    font-weight: 700;
    color: var(--text-300);
    border: 1px solid var(--hairline);
    font-variant-numeric: tabular-nums;
}

.rank-badge--1 {
    color: var(--ink-950);
    background: linear-gradient(140deg, var(--gold-200), var(--gold-500));
    border-color: transparent;
    box-shadow: var(--glow-gold);
}

.rank-badge--2 { color: #1D1B18; background: linear-gradient(140deg, #E9E6DF, #9C978D); border-color: transparent; }
.rank-badge--3 { color: #22160C; background: linear-gradient(140deg, #D9A574, #9A6436); border-color: transparent; }

/* Scroll orizontal pe mobil, fara ca pagina sa se lateasca */
@media (max-width: 767.98px) {
    .table-wrap { overflow-x: auto; }
    .result-table { min-width: 560px; }
}

/* ---------------------------------------------------------------------
   13. Parteneri
   --------------------------------------------------------------------- */
.sponsor-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1px;
    margin-bottom: 2.5rem;
    background: var(--hairline-soft);
    border-radius: var(--radius);
    overflow: hidden;
}

.sponsor-tile {
    flex: 1 1 180px;
    display: grid;
    place-items: center;
    min-height: 92px;
    padding: 1rem 1.6rem;
    background: var(--ink-900);
    color: var(--text-500);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: center;
    transition: color .4s var(--ease-out), background .4s var(--ease-out);
}

.sponsor-tile:hover { color: var(--gold-300); background: var(--ink-800); }
.sponsor-tile--title { min-height: 120px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; letter-spacing: 0; }
.sponsor-tile img { max-width: 140px; max-height: 54px; object-fit: contain; filter: grayscale(1) brightness(1.4); opacity: .75; }
.sponsor-tile:hover img { filter: none; opacity: 1; }

.tier-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-500);
    text-align: center;
    margin-bottom: 1rem;
}

/* ---------------------------------------------------------------------
   13b. Banda CTA cu fotografie (inscrieri)
   --------------------------------------------------------------------- */
.cta-band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius-lg);
    padding: clamp(2.5rem, 6vw, 5rem);
    min-height: 26rem;
    display: grid;
    align-items: end;
}

.cta-band__media { position: absolute; inset: 0; z-index: -2; }

.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(8, 7, 6, .95) 0%, rgba(8, 7, 6, .75) 45%, rgba(8, 7, 6, .3) 100%);
}

.cta-band__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 2.5rem 4rem;
    align-items: end;
}

@media (max-width: 991.98px) {
    .cta-band__grid { grid-template-columns: 1fr; }
    .cta-band::before { background: linear-gradient(0deg, rgba(8, 7, 6, .96) 30%, rgba(8, 7, 6, .6) 100%); }
}

/* ---------------------------------------------------------------------
   14. Footer
   --------------------------------------------------------------------- */
.footer {
    padding-block: clamp(4rem, 8vw, 7rem) 2rem;
    border-top: 1px solid var(--hairline-soft);
    background: var(--ink-900);
}

.footer-title { font-size: clamp(2.2rem, 4.8vw, 3.8rem); margin-bottom: 1rem; }

.newsletter-form {
    display: flex;
    gap: .6rem;
    max-width: 480px;
    flex-wrap: wrap;
}

.newsletter-form .input { flex: 1 1 220px; border-radius: 999px; padding-inline: 1.3rem; }

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .6rem; }
.footer-links a { color: var(--text-500); font-size: .93rem; }
.footer-links a:hover { color: var(--gold-300); }

.footer-heading {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-100);
    margin-bottom: 1.1rem;
}

.social-row { display: flex; gap: .6rem; margin-top: 1.6rem; }

.social-dot {
    width: 44px;
    height: 44px;
    border-radius: 30%;
    display: grid;
    place-items: center;
    border: 1px solid var(--hairline);
    color: var(--text-300);
    transition: all .3s var(--ease-out);
}

.social-dot:hover {
    border-color: var(--gold-500);
    color: var(--ink-950);
    background: var(--gold-400);
    transform: translateY(-3px);
}

.footer-bottom {
    margin-top: 4rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--hairline-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    font-size: .82rem;
    color: var(--text-700);
}

/* ---------------------------------------------------------------------
   15. Alerte
   --------------------------------------------------------------------- */
.alert-x {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--hairline);
    background: var(--glass);
    font-size: .93rem;
    margin-bottom: 1.25rem;
}

/* Mesajele flash pe site-ul public plutesc sub navigatie, peste antetele foto. */
.flash-wrap { padding-top: 7rem; }

body:not(.panel-body) .flash-wrap {
    position: fixed;
    top: 6.4rem;
    left: 50%;
    z-index: calc(var(--z-nav) + 1);
    width: min(640px, 100% - 2rem);
    padding-top: 0;
    transform: translateX(-50%);
    animation: flash-in .6s var(--ease-out) both;
}

body:not(.panel-body) .flash-wrap .alert-x {
    background-color: rgba(19, 17, 14, .97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-lift);
}

@keyframes flash-in { from { opacity: 0; transform: translate(-50%, -12px); } }

/* Pagina de autentificare: fotografie + formular */
.auth-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    padding-block: 3rem;
}

.auth-split__photo {
    position: relative;
    aspect-ratio: 4 / 5;
    max-height: 82vh;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lift);
}

.auth-split__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(8, 7, 6, .75), transparent 45%);
}

.auth-split__quote {
    position: absolute;
    left: 1.75rem;
    right: 1.75rem;
    bottom: 1.6rem;
    z-index: 1;
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    line-height: 1.25;
    color: var(--text-100);
}

@media (max-width: 991.98px) {
    .auth-split { grid-template-columns: 1fr; }
    .auth-split__photo { display: none; }
}

.alert-x--success { border-color: rgba(127, 203, 156, .4); color: #BFE6CD; background: rgba(127, 203, 156, .08); }
.alert-x--danger  { border-color: rgba(224, 89, 76, .45); color: #F2A79E; background: rgba(224, 89, 76, .08); }
.alert-x--warning { border-color: rgba(224, 192, 126, .45); color: var(--gold-300); background: rgba(201, 160, 82, .09); }
.alert-x--info    { border-color: var(--hairline); color: var(--text-300); background: var(--glass-strong); }

/* ---------------------------------------------------------------------
   16. Animatii la intrarea in viewport (Intersection Observer)
   --------------------------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(.95); }

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Titluri care se dezvaluie linie cu linie */
.reveal-mask { display: block; overflow: hidden; padding-bottom: .06em; }

.reveal-mask > span {
    display: block;
    transform: translateY(105%);
    transition: transform 1.1s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

.is-visible .reveal-mask > span,
.reveal-mask.is-visible > span { transform: none; }

/* Plasa de siguranta: fara JavaScript, nimeni nu adauga .is-visible,
   deci continutul ar ramane invizibil. Il aratam integral. */
@media (scripting: none) {
    [data-reveal],
    .reveal-mask > span {
        opacity: 1;
        transform: none;
    }
}

/* Respecta preferinta de miscare redusa a utilizatorului. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    [data-reveal],
    .reveal-mask > span { opacity: 1 !important; transform: none !important; }

    .hero-media .photo,
    .hero-content { transform: none !important; opacity: 1 !important; }
}

/* ---------------------------------------------------------------------
   17. Utilitare
   --------------------------------------------------------------------- */
.stack-sm > * + * { margin-top: .75rem; }
.stack > * + *    { margin-top: 1.5rem; }
.stack-lg > * + * { margin-top: 3rem; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -60px;
    left: 1rem;
    z-index: var(--z-loader);
    padding: .75rem 1.25rem;
    border-radius: 0 0 10px 10px;
    background: var(--gold-400);
    color: var(--ink-950);
    font-weight: 600;
    transition: top .25s var(--ease-out);
}

.skip-link:focus { top: 0; color: var(--ink-950); }

   18. Loader (ecran de incarcare)
   --------------------------------------------------------------------- */
body.is-loading { overflow: hidden; }

.loader {
    position: fixed;
    inset: 0;
    z-index: var(--z-loader);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--ink-950);
    transition: opacity .7s var(--ease-out), visibility 0s linear .7s;
}

.loader::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(46rem 34rem at 50% 38%, rgba(160, 122, 52, .22), transparent 65%),
        radial-gradient(38rem 30rem at 50% 68%, rgba(201, 160, 82, .16), transparent 60%);
    pointer-events: none;
}

.loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .5s var(--ease-out), visibility 0s linear .5s;
}

/* Particule ambientale, in spatele scenei 3D — senzatie de profunzime. */
.loader-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.loader-particles span {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--gold-400);
    box-shadow: 0 0 8px 1px rgba(201, 160, 82, .8);
    opacity: 0;
    animation: loader-particle-drift 5.5s ease-in-out infinite;
}

.loader-particles span:nth-child(1) { top: 28%; left: 22%; animation-delay: 0s;    background: var(--gold-400); }
.loader-particles span:nth-child(2) { top: 68%; left: 18%; animation-delay: .8s;  background: var(--gold-600); }
.loader-particles span:nth-child(3) { top: 20%; left: 76%; animation-delay: 1.6s; background: var(--gold-200); }
.loader-particles span:nth-child(4) { top: 74%; left: 80%; animation-delay: 2.4s; background: var(--gold-300); }
.loader-particles span:nth-child(5) { top: 46%; left: 10%; animation-delay: 3.2s; background: var(--gold-600); }
.loader-particles span:nth-child(6) { top: 50%; left: 88%; animation-delay: 4s;   background: var(--gold-200); }

@keyframes loader-particle-drift {
    0%   { opacity: 0;   transform: translateY(0) scale(.6); }
    50%  { opacity: 1;   transform: translateY(-22px) scale(1.3); }
    100% { opacity: 0;   transform: translateY(-44px) scale(.6); }
}

/* Scena 3D: un giroscop de inele tilt-uite, care se rotesc independent
   in jurul unui nucleu luminos — pur CSS, fara librarii/WebGL. */
.loader-stage {
    position: relative;
    width: clamp(140px, 20vw, 190px);
    height: clamp(140px, 20vw, 190px);
    perspective: 900px;
}

.loader-gyro {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: loader-wobble 6s var(--ease-in-out) infinite;
}

.loader-orbit {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid transparent;
    transform-style: preserve-3d;
}

.loader-orbit--a {
    border-top-color: var(--gold-400);
    border-right-color: rgba(201, 160, 82, .3);
    box-shadow: 0 0 22px -6px rgba(201, 160, 82, .55);
    animation: loader-orbit-a 3.2s linear infinite;
}

.loader-orbit--b {
    border-top-color: var(--gold-600);
    border-left-color: rgba(160, 122, 52, .3);
    box-shadow: 0 0 22px -6px rgba(160, 122, 52, .55);
    animation: loader-orbit-b 4.4s linear infinite;
}

.loader-orbit--c {
    border-top-color: var(--gold-200);
    border-bottom-color: rgba(238, 219, 174, .3);
    box-shadow: 0 0 22px -6px rgba(238, 219, 174, .45);
    animation: loader-orbit-c 5.6s linear infinite reverse;
}

@keyframes loader-orbit-a {
    from { transform: rotateX(68deg) rotateZ(0deg); }
    to   { transform: rotateX(68deg) rotateZ(360deg); }
}

@keyframes loader-orbit-b {
    from { transform: rotateX(68deg) rotateY(60deg) rotateZ(0deg); }
    to   { transform: rotateX(68deg) rotateY(60deg) rotateZ(360deg); }
}

@keyframes loader-orbit-c {
    from { transform: rotateX(68deg) rotateY(-60deg) rotateZ(0deg); }
    to   { transform: rotateX(68deg) rotateY(-60deg) rotateZ(360deg); }
}

@keyframes loader-wobble {
    0%, 100% { transform: rotateX(-6deg) rotateY(-10deg); }
    50%      { transform: rotateX(6deg)  rotateY(10deg); }
}

.loader-core-sphere {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 34%;
    height: 34%;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: visible;
    background: rgba(0, 0, 0, .4);
    box-shadow: 0 0 34px 4px rgba(201, 160, 82, .5);
    animation: loader-pulse 2.4s var(--ease-in-out) infinite;
    transform: translateZ(20px);
}

.loader-core-mark {
    width: 165%;
    height: 165%;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(201, 160, 82, .55));
}

@keyframes loader-pulse {
    0%, 100% { box-shadow: 0 0 34px 4px rgba(201, 160, 82, .5); transform: translateZ(20px) scale(1); }
    50%      { box-shadow: 0 0 46px 10px rgba(201, 160, 82, .7); transform: translateZ(20px) scale(1.08); }
}

.loader-bar {
    width: clamp(150px, 20vw, 210px);
    height: 2px;
    border-radius: 999px;
    background: var(--hairline);
    overflow: hidden;
}

.loader-bar-fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gold-500), var(--gold-600));
    transition: width .35s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
    .loader-gyro, .loader-orbit--a, .loader-orbit--b, .loader-orbit--c,
    .loader-core-sphere, .loader-particles span { animation: none; }
    .loader-particles span { opacity: .5; }
    .loader { transition: opacity .2s linear, visibility 0s linear .2s; }
}

/* =====================================================================
   Votul publicului, contestatii, istoric, premii speciale
   ===================================================================== */
.vote-page { max-width: 560px; margin: 0 auto; padding: 1.5rem 0 3rem; }
.vote-page__head { text-align: center; margin-bottom: 1.5rem; }
.vote-page__eyebrow { margin: .6rem 0 0; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-500); }
.vote-page__title { margin: .2rem 0 0; font-family: var(--font-display); font-size: clamp(2rem, 8vw, 2.8rem); color: var(--text-100); }
.vote-page__title em { color: var(--gold-400); }
.vote-page__done { padding: 1.4rem; border: 1px solid var(--hairline); border-radius: 14px; background: var(--glass); text-align: center; }
.vote-page__check {
    display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; margin-bottom: .7rem; border-radius: 50%;
    background: rgba(127, 203, 156, .14); color: var(--success); font-size: 1.5rem;
}
.vote-form__group { margin: 0 0 1.2rem; padding: 0; border: 0; }
.vote-form__group legend { margin-bottom: .5rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-400); }
.vote-option {
    display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; margin-bottom: .45rem;
    border: 1px solid var(--hairline); border-radius: 12px; background: var(--glass); cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.vote-option:active { transform: scale(.985); }
.vote-option input { accent-color: var(--gold-500); width: 1.2rem; height: 1.2rem; flex: none; }
.vote-option:has(input:checked) { border-color: var(--gold-500); background: rgba(201, 160, 82, .1); }
.vote-option__no { flex: none; font-size: .75rem; color: var(--text-500); font-variant-numeric: tabular-nums; }
.vote-option__name { display: flex; flex-direction: column; color: var(--text-100); font-weight: 500; min-width: 0; }
.vote-option__name small { font-weight: 400; color: var(--text-500); }
.vote-form__submit { position: sticky; bottom: 1rem; margin-top: .5rem; min-height: 3.2rem; }

.appeal-card__body {
    margin: .4rem 0 .9rem; padding: .75rem 1rem; border-left: 2px solid var(--gold-600);
    background: var(--glass); border-radius: 0 6px 6px 0; color: var(--text-300);
}
.appeal-card__answer { margin-bottom: .8rem; padding: .75rem 1rem; border-radius: 6px; background: rgba(127, 203, 156, .07); }

.awards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.award-tile { padding: 1.2rem 1.3rem; border: 1px solid rgba(201, 160, 82, .35); border-radius: 14px; background: linear-gradient(160deg, rgba(201, 160, 82, .1), transparent 70%); }
.award-tile__name { margin: 0 0 .5rem; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-400); }
.award-tile__winner { margin: 0; font-family: var(--font-display); font-size: 1.35rem; color: var(--text-100); line-height: 1.2; }
.award-tile__club { margin: .25rem 0 0; font-size: .85rem; color: var(--text-500); }

.medals-table { width: 100%; border-collapse: collapse; }
.medals-table th, .medals-table td { padding: .7rem .9rem; border-bottom: 1px solid var(--hairline-soft); color: var(--text-300); }
.medals-table th { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-500); text-align: left; }
.medals-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.medal {
    display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
    font-size: .72rem; font-weight: 700; color: #1D1B18;
}
.medal--gold { background: linear-gradient(140deg, #F6E3A9, #C9A052); }
.medal--silver { background: linear-gradient(140deg, #E9E6DF, #9C978D); }
.medal--bronze { background: linear-gradient(140deg, #E8B98F, #9A6238); }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* =====================================================================
   Siguranta: cod de conectare, jurnal verificabil, scene, backup
   ===================================================================== */
.code-chip {
    display: inline-block; margin: 0 0 1rem; padding: .55rem 1rem; border-radius: 10px;
    border: 1px dashed rgba(201, 160, 82, .55); background: rgba(201, 160, 82, .08);
    font-family: var(--font-mono, ui-monospace, monospace); font-size: 1.25rem; letter-spacing: .12em; color: var(--gold-300);
}
.code-login summary { cursor: pointer; color: var(--text-300); font-size: .9rem; }
.code-login .input { text-transform: uppercase; letter-spacing: .1em; font-family: var(--font-mono, ui-monospace, monospace); }

.stage-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.stage-tabs__tab {
    padding: .5rem 1.1rem; border-radius: 999px; border: 1px solid var(--hairline);
    color: var(--text-300); text-decoration: none; font-weight: 500; transition: background .2s ease, border-color .2s ease;
}
.stage-tabs__tab:hover { border-color: var(--gold-600); color: var(--text-100); }
.stage-tabs__tab.is-active { background: var(--gold-500); border-color: var(--gold-500); color: #1D1B18; }
.stage-tabs__screen { margin-left: auto; font-size: .85rem; color: var(--text-500); }

.audit-chain.is-ok { border-color: rgba(127, 203, 156, .4); }
.audit-chain.is-broken { border-color: rgba(224, 89, 76, .55); background: rgba(224, 89, 76, .06); }
.audit-chain__ok { color: var(--success); }
.audit-chain__bad { color: #F2A79E; }
.audit-chain__hash {
    display: block; margin-top: .4rem; padding: .5rem .7rem; border-radius: 6px; background: var(--glass);
    font-size: .78rem; color: var(--gold-300); word-break: break-all;
}