/* ==========================================================================
   FESTIVAL SHARED VISUAL LANGUAGE
   --------------------------------------------------------------------------
   Reusable classes shared between the festival attendee-facing pages -
   Join.razor (voting/reveal, a full-bleed cinematic "stage") and
   FestivalPassport.razor (the whole-festival explorer, previously a much
   flatter MudBlazor dashboard). Component-scoped .razor.css files cannot
   share rules across components (Blazor's CSS isolation attribute-scopes
   every rule to its own component), so anything both pages need to look
   identical - the glowing "reveal" card treatment, the small-caps eyebrow
   label, the gold accent underline, and a soft page-entrance fade - lives
   here instead, loaded globally the same way css/components.css is.

   Only reference existing design tokens from wwwroot/app.css's :root block
   (enforced by CssColorCentralizationTests) - no raw color literals here.
   ========================================================================== */

/* ── Eyebrow label: small-caps, letter-spaced, with a glowing dot ────────── */
.tp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    margin-bottom: 10px;
}

.tp-eyebrow__dot {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-gold);
    box-shadow: 0 0 10px rgba(var(--c-gold-rgb), 0.7);
    flex-shrink: 0;
}

.tp-eyebrow__dot--pulse::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid rgba(var(--c-gold-rgb), 0.55);
    animation: tpEyebrowPulse 1.8s ease-out infinite;
}

@keyframes tpEyebrowPulse {
    0%   { transform: scale(0.6); opacity: 0.85; }
    80%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* ── Small gold accent underline used beneath eyebrow/heading pairs ──────── */
.tp-accent-bar {
    width: 56px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--c-gold), rgba(var(--c-gold-rgb), 0.3));
}

/* ── Glow card: the "reveal card" treatment, generalised for reuse ───────── */
.tp-glow-card {
    position: relative;
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%);
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.18);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 30px 60px -20px rgba(var(--c-black-rgb), 0.6),
        0 0 80px rgba(var(--c-gold-rgb), 0.08),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
    overflow: hidden;
}

.tp-glow-card > * {
    position: relative;
    z-index: 1;
}

.tp-glow-card__halo {
    position: absolute;
    inset: -50% -50% -40% -50%;
    background:
        radial-gradient(ellipse 50% 45% at 50% 30%, rgba(var(--c-gold-rgb), 0.20) 0%, rgba(var(--c-gold-rgb), 0.10) 28%, rgba(var(--c-gold-rgb), 0.03) 55%, transparent 100%),
        radial-gradient(ellipse 60% 55% at 50% 80%, rgba(var(--c-parchment-rgb), 0.10) 0%, rgba(var(--c-parchment-rgb), 0.03) 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    filter: blur(28px);
}

/* One-shot diagonal sweep that runs on entrance - the "curtain pulled back" feel. */
.tp-glow-card__sweep {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(var(--c-gold-rgb), 0.18) 50%, transparent 65%);
    opacity: 0;
    animation: tpCardSweep 1100ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both;
}

@keyframes tpCardSweep {
    0%   { transform: translateX(-30%); opacity: 0; }
    25%  { opacity: 1; }
    100% { transform: translateX(30%); opacity: 0; }
}

/* Smaller, subtler variant for compact cards (stat tiles, context bars) where
   the full-size reveal-card glow would be too heavy. */
.tp-glow-card--compact {
    border-radius: 14px;
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    box-shadow:
        0 12px 28px -12px rgba(var(--c-black-rgb), 0.5),
        0 0 32px rgba(var(--c-gold-rgb), 0.06),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.06);
}

/* ── Page entrance fade: applied to each page's outer stage wrapper so
   navigating between Join and FestivalPassport feels like a soft
   continuation rather than an abrupt swap, even though Blazor Server
   renders them as two fully separate pages. ─────────────────────────────── */
.tp-page-fade-in {
    animation: tpPageFadeIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

@media (prefers-reduced-motion: reduce) {
    .tp-eyebrow__dot--pulse::before,
    .tp-glow-card__sweep,
    .tp-page-fade-in {
        animation: none;
    }
}