/* =========================================================
   Halloween Smoke — orange smoke theme (client option B).
   Only enqueued on the pages set in uv_halloween_themes()
   (urvenue-styles.php) or with ?testseason=halloween-smoke.
   The smoke is generated in the browser (SVG fractal noise +
   gradients) instead of a background video: a few hundred bytes,
   rasterized once, and the optional drift only animates transform.
   ========================================================= */
.uv-halloween-smoke {
    --uv-hs-base: #160602;
    --uv-hs-ink: #f8f1e6;
    --uv-hs-ink-soft: rgba(248, 241, 230, 0.86);
    --uv-hs-gold: #e6c788;
    --uv-hs-btn: #82754a;
}

.uv-halloween-smoke body {
    background-color: var(--uv-hs-base);
}

/* =========================================================
   Smoke (fixed, behind #content)
   ========================================================= */
.uv-hs-smoke {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(70% 45% at 50% 25%, #94400a 0%, rgba(148, 64, 10, 0) 72%),
        linear-gradient(180deg, rgba(46, 8, 2, 0) 55%, rgba(46, 8, 2, 0.85) 100%),
        radial-gradient(120% 90% at 50% 40%, #5e2206 0%, #3a1004 55%, #170402 100%);
}

/* Two noise layers drift against each other: amber wisps (a) and dark smoke (b).
   Seamless tiles need both: the filter region equal to the tile (x/y/width/height,
   otherwise it gets a 10% margin) and baseFrequency × tile size as a whole number
   (900 × 0.003333 = 3, 900 × 0.006667 = 6, 1400 × 0.002143 = 3, 1400 × 0.004286 = 6). */
.uv-hs-smoke__layer {
    position: absolute;
    inset: -20%;
    background-repeat: repeat;
}

.uv-hs-smoke__layer--a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003333 0.006667' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.92 0 0 0 0 0.36 0 0 0 0 0.04 0 0 0 2.6 -1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 900px 900px;
    opacity: 0.6;
}

.uv-hs-smoke__layer--b {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='1400'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.002143 0.004286' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.012 0 0 0 0 0 0 0 0 2.4 -0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 1400px 1400px;
    opacity: 0.55;
}

/* Rising smoke: a strip one tile taller than the screen that moves up exactly one tile
   per loop, so it repeats seamlessly (900 × 0.002222 = 2, 900 × 0.004444 = 4) */
.uv-hs-smoke__rise {
    position: absolute;
    top: 0;
    left: -10%;
    right: -10%;
    height: calc(100% + 900px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.002222 0.004444' numOctaves='4' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.55 0 0 0 0 0.18 0 0 0 2.4 -1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 900px 900px;
    opacity: 0.35;
    mix-blend-mode: screen;
}

/* Warm glow behind the content column and dark edges */
.uv-hs-smoke__glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(45% 35% at 50% 38%, rgba(255, 140, 40, 0.18), rgba(255, 140, 40, 0) 70%),
        radial-gradient(130% 100% at 50% 40%, rgba(0, 0, 0, 0) 55%, rgba(8, 2, 0, 0.75) 100%);
}

/* Motion (optional, see `animate` in halloween-smoke.js) */
.uv-hs-animated .uv-hs-smoke__layer--a {
    animation: uvHsDriftA 26s ease-in-out infinite alternate;
}

.uv-hs-animated .uv-hs-smoke__layer--b {
    animation: uvHsDriftB 34s ease-in-out infinite alternate;
}

.uv-hs-animated .uv-hs-smoke__rise {
    animation: uvHsRise 30s linear infinite;
}

/* =========================================================
   Page content
   ========================================================= */
.uv-halloween-smoke #content {
    position: relative;
    z-index: 1;
    background-color: transparent;
    color: var(--uv-hs-ink);
}

.uv-halloween-smoke #content p,
.uv-halloween-smoke #content li,
.uv-halloween-smoke #content .titleSmall,
.uv-halloween-smoke #content .cardTitle,
.uv-halloween-smoke #content .boldBody,
.uv-halloween-smoke #content .smallBody {
    color: var(--uv-hs-ink);
}

.uv-halloween-smoke #content a:not(.primary--btn) {
    color: var(--uv-hs-ink);
}

.uv-halloween-smoke #content .smallHeading,
.uv-halloween-smoke #content .colorGold,
.uv-halloween-smoke #content .mediumHeading-2 {
    color: var(--uv-hs-gold);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.uv-halloween-smoke #content .titleSmall,
.uv-halloween-smoke #content .cardTitle {
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

.uv-halloween-smoke #content .cta::after {
    color: var(--uv-hs-gold);
}

.uv-halloween-smoke #content .threeCardBooking__inner {
    background-color: transparent;
}

/* Hero melts into the smoke (span added by JS) */
.uv-hs-hero-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 28%;
    pointer-events: none;
    background: linear-gradient(rgba(22, 6, 2, 0), rgba(22, 6, 2, 0.85));
}

/* Buttons keep the brand gold, with an ember glow on hover */
.uv-halloween-smoke #content .primary--btn {
    position: relative;
    background-color: var(--uv-hs-btn);
    border-color: var(--uv-hs-btn);
    color: #ffffff;
    box-shadow: 0 0 14px rgba(255, 140, 40, 0.18);
    transition: background-color 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s;
}

.uv-halloween-smoke #content .primary--btn:hover,
.uv-halloween-smoke #content .primary--btn:focus-visible {
    background-color: transparent;
    border-color: var(--uv-hs-gold);
    color: var(--uv-hs-gold);
    box-shadow: 0 0 22px rgba(255, 140, 40, 0.45);
}

/* =========================================================
   Image wrappers (decorated by JS): amber grade and vignette
   ========================================================= */
.uv-hs-relative {
    position: relative;
}

picture.uv-hs-relative {
    display: block;
}

.uv-hs-tint img {
    filter: contrast(1.08) saturate(1.05) sepia(0.12);
}

.uv-hs-grade {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(90% 70% at 85% 0%, rgba(255, 140, 40, 0.5), rgba(255, 140, 40, 0) 60%),
        radial-gradient(120% 90% at 50% 40%, rgba(20, 5, 0, 0) 50%, rgba(20, 5, 0, 0.6) 100%);
    mix-blend-mode: soft-light;
}

/* Footer stays independent: solid, original colors, above the smoke */
.uv-halloween-smoke .mainFooter {
    position: relative;
    z-index: 2;
    background-color: #ffffff;
}

/* =========================================================
   Keyframes
   ========================================================= */
/* Translate only: scaling/rotating a tiled layer makes the browser re-rasterize it
   and hairline seams show between tiles */
@keyframes uvHsDriftA {
    from { transform: translate3d(-9%, 4%, 0); }
    to { transform: translate3d(9%, -6%, 0); }
}

@keyframes uvHsDriftB {
    from { transform: translate3d(10%, -4%, 0); }
    to { transform: translate3d(-10%, 6%, 0); }
}

/* Moves exactly one tile (the tile size on desktop) so the loop has no jump */
@keyframes uvHsRise {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, -900px, 0); }
}

@keyframes uvHsRiseMobile {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, -600px, 0); }
}

/* =========================================================
   Responsive / motion
   ========================================================= */
@media (max-width: 767px) {
    .uv-hs-smoke__layer--a {
        background-size: 600px 600px;
    }

    .uv-hs-smoke__layer--b {
        background-size: 900px 900px;
    }

    .uv-hs-smoke__rise {
        height: calc(100% + 600px);
        background-size: 600px 600px;
    }

    .uv-hs-animated .uv-hs-smoke__rise {
        animation-name: uvHsRiseMobile;
    }
}

@media (prefers-reduced-motion: reduce) {
    .uv-hs-smoke * {
        animation: none !important;
    }
}