/* ============================================================
   TOUR BANNER — "The Life Without Punishment Tour" component
   Cascade gradient text + sparkle-veil orbs + ground wash.

   Markup:
     <div class="sparkle-veil-wrapper tour-banner-wrap [tour-banner--light]">
         <span class="tour-banner"><span class="tour-shine">The Life Without Punishment Tour</span></span>
     </div>
     <p class="tour-banner-sub">optional support line</p>

   Requires: assets/js/particle-presets/sparkle-veil.js
   Default = dark ground (pool of golden light behind the text).
   .tour-banner--light (on the wrapper) = for cream/light pages:
   a dark aurora pool gives the banner its own night sky, so the
   dark-ground magic (cascade + plus-lighter orbs) works anywhere.

   Born on the homepage band 2026-07-18. Used on: index.html,
   landing/life-without-punishment.html, life-without-punishment.html.
   ============================================================ */

.tour-banner-wrap { position: relative; display: inline-block; }
.tour-banner-wrap .particle-canvas-back { position: absolute; top: -42px; left: -64px; pointer-events: none; z-index: 0; mix-blend-mode: screen; }
.tour-banner-wrap .particle-canvas-front { position: absolute; top: -42px; left: -64px; pointer-events: none; z-index: 3; mix-blend-mode: plus-lighter; }

.tour-banner {
    position: relative; z-index: 1; display: inline-block;
    font-family: 'Abhaya Libre', serif; font-weight: 700;
    font-size: clamp(1.35rem, 2.8vw, 2rem);
    letter-spacing: 0.14em; text-transform: uppercase;
    line-height: 1.2;
}

/* Ground wash behind the text — dark-ground default: a wide pool of light */
.tour-banner::before {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    left: -70%; right: -70%; top: 50%; height: 240%; transform: translateY(-50%);
    background: radial-gradient(ellipse 50% 50% at 50% 50%,
        rgba(255, 244, 210, 0.34) 0%,
        rgba(240, 220, 150, 0.20) 40%,
        rgba(232, 212, 138, 0.08) 60%,
        rgba(232, 212, 138, 0) 76%);
}

/* Light-ground variant: dark aurora pool (plum → magenta tint → nothing) */
.tour-banner--light .tour-banner::before {
    background: radial-gradient(ellipse 50% 50% at 50% 50%,
        rgba(18, 10, 38, 0.94) 0%,
        rgba(34, 14, 52, 0.88) 34%,
        rgba(74, 22, 64, 0.55) 56%,
        rgba(110, 36, 84, 0.22) 70%,
        rgba(18, 10, 38, 0) 82%);
}

/* The cascade — a slow color tide through the letters */
.tour-shine {
    background: linear-gradient(115deg,
        #e8d48a 0%, #fff6d8 12%, var(--gold, #c9a227) 26%,
        #ff6ba0 40%, var(--magenta, #ff0f63) 48%, #ff6ba0 56%,
        var(--gold, #c9a227) 70%, #fff6d8 86%, #e8d48a 100%);
    background-size: 320% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: tour-cascade 28s linear infinite;
    filter: drop-shadow(0 2px 16px rgba(201, 162, 39, 0.35));
}
@keyframes tour-cascade { 0% { background-position: 0% center; } 100% { background-position: -320% center; } }

/* Optional support line beneath the banner */
.tour-banner-sub {
    font-size: 0.8rem; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--gold-dark, #a3831c); font-weight: 600; margin: 10px 0 0;
}

/* Context: the movement-page hero — full announcement scale */
.osl-hero .tour-banner-wrap { margin-bottom: 68px; }
.osl-hero .tour-banner { font-size: clamp(1.7rem, 3.8vw, 2.7rem); }
.osl-hero .tour-banner-sub { margin-bottom: 22px; }

/* Context: the homepage band */
.os-live-band .tour-banner-wrap { margin-bottom: 14px; }

@media (prefers-reduced-motion: reduce) {
    .tour-shine { animation: none; }
}

/* Aurora-bar variant (light pages): full-bleed night ribbon behind the banner —
   feathered top/bottom, magenta heart. Markup adds <div class="tour-banner-bar"></div>
   as the wrapper's first child; wrapper class: tour-banner--aurora */
.tour-banner-bar {
    position: absolute; top: 50%; left: 50%; width: 100vw; height: calc(100% + 88px);
    transform: translate(-50%, -50%); z-index: 0; pointer-events: none;
    /* Fully OPAQUE layers only: plus-lighter orbs add alpha, so any semi-
       transparent dark ground gets "densified" into a dark smudge around each
       orb. Cream show-through is pre-mixed into the plum values, and the
       top/bottom feather is painted with cream gradients instead of a mask. */
    background:
        linear-gradient(180deg, #fffdf8 0%, rgba(255, 253, 248, 0) 26%, rgba(254, 249, 240, 0) 74%, #fef9f0 100%),
        linear-gradient(90deg,
            rgb(50, 38, 70) 0%, rgb(33, 22, 55) 26%,
            rgb(76, 27, 70) 50%,
            rgb(33, 22, 55) 74%, rgb(50, 38, 70) 100%);
}
.tour-banner--aurora .tour-banner::before { display: none; }
.tour-banner--aurora .particle-canvas-back { z-index: 1; }   /* soft glows ride ON the ribbon */
.tour-banner--aurora .tour-banner { z-index: 2; }