/*
   Tramps Like Us scroll-reveal engine
   Independent reveal classes only.
   Content remains visible unless JavaScript confirms an iPhone/iPad touch device
   and adds the page activation class.
*/

.tlu-reveal {
    opacity: 1;
    transform: none;
}

.tlu-reveal-active .tlu-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 650ms ease, transform 650ms ease;
    will-change: opacity, transform;
}

.tlu-reveal-active .tlu-reveal.tlu-reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Tall vertical poster reveal support.
   Used only when a large poster/image is manually marked with
   both tlu-reveal and tlu-reveal-tall-poster.
   Tall posters use a soft fade only. No clip-path, mask, wipe, or blinds effect.
*/
.tlu-reveal-active .tlu-reveal.tlu-reveal-tall-poster {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 1600ms ease, transform 1600ms ease;
    will-change: opacity, transform;
}

.tlu-reveal-active .tlu-reveal.tlu-reveal-tall-poster.tlu-reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .tlu-reveal-active .tlu-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}


/* TLU one-poster translucent top-to-bottom wipe test.
   Targets only the manually marked July 4 poster link.
   Keeps original JavaScript and all normal reveal timing unchanged.
   Uses a moving translucent overlay instead of a hard clip edge.
*/
.tlu-poster-translucent-wipe {
    display: inline-block;
    position: relative;
    max-width: 100%;
    line-height: 0;
    overflow: hidden;
    background: #000000;
}

.tlu-poster-translucent-wipe img {
    display: block;
    max-width: 100%;
    height: auto;
}

.tlu-reveal-active .tlu-reveal.tlu-poster-translucent-wipe {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
}

.tlu-reveal-active .tlu-reveal.tlu-poster-translucent-wipe img {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
}

.tlu-reveal-active .tlu-reveal.tlu-poster-translucent-wipe:before {
    content: "";
    position: absolute;
    z-index: 2;
    top: -340px;
    left: 0;
    right: 0;
    height: calc(100% + 340px);
    background: linear-gradient(to bottom,
        rgba(0,0,0,0.00) 0px,
        rgba(0,0,0,0.10) 55px,
        rgba(0,0,0,0.26) 115px,
        rgba(0,0,0,0.52) 185px,
        rgba(0,0,0,0.78) 255px,
        rgba(0,0,0,0.96) 330px,
        rgba(0,0,0,1.00) 340px,
        rgba(0,0,0,1.00) 100%);
    transform: translateY(0);
    transition: transform 2600ms cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
}

.tlu-reveal-active .tlu-reveal.tlu-poster-translucent-wipe.tlu-reveal-visible:before {
    transform: translateY(100%);
}

@media (prefers-reduced-motion: reduce) {
    .tlu-reveal-active .tlu-reveal.tlu-poster-translucent-wipe:before {
        display: none !important;
    }
}

/* TLU Contact page iPhone transparent-PNG wipe test.
   Separate from the Schedule poster wipe so the July 4 poster remains unchanged.
   Designed for the transparent TLUiphone.png image: no black wrapper background.
   Uses a soft moving mask on the image itself so transparent PNG areas stay transparent.
*/
.tlu-contact-phone-translucent-wipe {
    display: inline-block;
    position: relative;
    max-width: 100%;
    line-height: 0;
    overflow: hidden;
    background: transparent;
}

.tlu-contact-phone-translucent-wipe img {
    display: block;
    max-width: 100%;
    height: auto;
}

.tlu-reveal-active .tlu-reveal.tlu-contact-phone-translucent-wipe {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
    background: transparent;
}

.tlu-reveal-active .tlu-reveal.tlu-contact-phone-translucent-wipe img {
    opacity: 1;
    transform: none;
    transition:
        -webkit-mask-position 1800ms cubic-bezier(0.22, 0.61, 0.36, 1),
        mask-position 1800ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: -webkit-mask-position, mask-position;
    -webkit-mask-image: linear-gradient(to bottom,
        rgba(0,0,0,1.00) 0%,
        rgba(0,0,0,1.00) 58%,
        rgba(0,0,0,0.72) 62%,
        rgba(0,0,0,0.36) 66%,
        rgba(0,0,0,0.00) 70%,
        rgba(0,0,0,0.00) 100%);
    mask-image: linear-gradient(to bottom,
        rgba(0,0,0,1.00) 0%,
        rgba(0,0,0,1.00) 58%,
        rgba(0,0,0,0.72) 62%,
        rgba(0,0,0,0.36) 66%,
        rgba(0,0,0,0.00) 70%,
        rgba(0,0,0,0.00) 100%);
    -webkit-mask-size: 100% 300%;
    mask-size: 100% 300%;
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.tlu-reveal-active .tlu-reveal.tlu-contact-phone-translucent-wipe.tlu-reveal-visible img {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .tlu-reveal-active .tlu-reveal.tlu-contact-phone-translucent-wipe img {
        -webkit-mask-image: none !important;
        mask-image: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}

/* TLU OPTIONAL JULY 4 POSTER STAGE-LIGHT TEST - BLACK/WHITE TO FULL-COLOR VERSION.
   CSS-only special reveal for one manually marked poster.
   Triggered by existing tlu-reveal-visible class; no JavaScript/template changes.
   The poster stays full-size. It begins dark/desaturated, then the whole poster
   flashes/brightens and resolves into full color. Nothing changes size and
   nothing spills outside the poster box.
*/
.tlu-poster-stage-light {
    display: inline-block;
    position: relative;
    max-width: 100%;
    line-height: 0;
    overflow: hidden;
    background: #000000;
    isolation: isolate;
}

.tlu-poster-stage-light img {
    display: block;
    max-width: 100%;
    height: auto;
}

.tlu-reveal-active .tlu-reveal.tlu-poster-stage-light {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
}

.tlu-reveal-active .tlu-reveal.tlu-poster-stage-light img {
    opacity: 1;
    transform: none;
    filter: grayscale(1) saturate(0) brightness(0.24) contrast(1.28);
    transition: none;
    will-change: filter;
}

.tlu-reveal-active .tlu-reveal.tlu-poster-stage-light:before,
.tlu-reveal-active .tlu-reveal.tlu-poster-stage-light:after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}

.tlu-reveal-active .tlu-reveal.tlu-poster-stage-light:before {
    background:
        linear-gradient(to bottom,
            rgba(255,255,255,0.76) 0%,
            rgba(255,232,120,0.62) 22%,
            rgba(255,135,30,0.42) 50%,
            rgba(255,225,85,0.56) 76%,
            rgba(255,255,255,0.72) 100%),
        radial-gradient(ellipse at center,
            rgba(255,255,255,1.00) 0%,
            rgba(255,235,125,0.82) 34%,
            rgba(255,120,20,0.48) 66%,
            rgba(255,255,255,0.10) 100%);
    mix-blend-mode: screen;
}

.tlu-reveal-active .tlu-reveal.tlu-poster-stage-light:after {
    box-shadow:
        inset 0 0 90px rgba(255,255,255,1.00),
        inset 0 0 170px rgba(255,215,0,0.88),
        inset 0 0 260px rgba(220,35,0,0.48),
        0 0 22px rgba(255,215,0,0.52);
}

.tlu-reveal-active .tlu-reveal.tlu-poster-stage-light.tlu-reveal-visible img {
    animation: tluPosterStageLightBWToColor 2300ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.tlu-reveal-active .tlu-reveal.tlu-poster-stage-light.tlu-reveal-visible:before {
    animation: tluPosterStageLightFullFlash 2100ms ease-out forwards;
}

.tlu-reveal-active .tlu-reveal.tlu-poster-stage-light.tlu-reveal-visible:after {
    animation: tluPosterStageLightFullGlow 2100ms ease-out forwards;
}

@keyframes tluPosterStageLightBWToColor {
    0% {
        filter: grayscale(1) saturate(0) brightness(0.24) contrast(1.28);
    }
    18% {
        filter: grayscale(1) saturate(0) brightness(0.42) contrast(1.35);
    }
    34% {
        filter: grayscale(0.55) saturate(0.55) brightness(1.45) contrast(1.20);
    }
    52% {
        filter: grayscale(0.18) saturate(1.15) brightness(1.18) contrast(1.12);
    }
    100% {
        filter: grayscale(0) saturate(1.18) brightness(1.06) contrast(1.10);
    }
}

@keyframes tluPosterStageLightFullFlash {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    22% {
        opacity: 0.88;
    }
    48% {
        opacity: 0.42;
    }
    100% {
        opacity: 0;
    }
}

@keyframes tluPosterStageLightFullGlow {
    0% {
        opacity: 0;
    }
    12% {
        opacity: 1;
    }
    34% {
        opacity: 0.66;
    }
    100% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tlu-reveal-active .tlu-reveal.tlu-poster-stage-light,
    .tlu-reveal-active .tlu-reveal.tlu-poster-stage-light img {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        animation: none !important;
        will-change: auto !important;
    }

    .tlu-reveal-active .tlu-reveal.tlu-poster-stage-light:before,
    .tlu-reveal-active .tlu-reveal.tlu-poster-stage-light:after {
        display: none !important;
    }
}


/* TLU JULY 4 PERMANENT GOLD FRAME BACKUP.
   Same effect as the schedule.html critical CSS, kept here so the shared reveal CSS
   also carries the final permanent-frame behavior.
*/
.tlu-reveal-active .tlu-reveal.tlu-poster-stage-light.tlu-reveal-visible img.tlu-july4-permanent-gold-frame-img {
    outline: 8px solid rgba(255, 214, 0, 0.98) !important;
    outline-offset: -10px !important;
    box-shadow:
        0 0 0 3px rgba(255,255,255,0.95) !important,
        0 0 22px rgba(255,214,0,1.00) !important,
        0 0 44px rgba(255,235,150,0.95) !important,
        0 0 76px rgba(255,214,0,0.75) !important;
}

.tlu-reveal-active .tlu-reveal.tlu-poster-stage-light.tlu-reveal-visible:after {
    content: "" !important;
    position: absolute !important;
    z-index: 5 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    box-sizing: border-box !important;
    border: 9px solid rgba(255, 214, 0, 1.00) !important;
    border-radius: 6px !important;
    opacity: 1 !important;
    pointer-events: none !important;
    background: transparent !important;
    box-shadow:
        inset 0 0 0 3px rgba(255,255,255,0.95),
        inset 0 0 22px rgba(255,255,255,0.78),
        inset 0 0 46px rgba(255,214,0,0.98),
        inset 0 0 82px rgba(255,150,0,0.42),
        0 0 18px rgba(255,255,255,0.95),
        0 0 36px rgba(255,214,0,1.00),
        0 0 70px rgba(255,214,0,0.82) !important;
    animation: tluJuly4PermanentGoldFrame 1800ms ease-out forwards !important;
}

@keyframes tluJuly4PermanentGoldFrame {
    0% {
        opacity: 0;
        border-color: rgba(255,214,0,0.00);
        box-shadow:
            inset 0 0 0 rgba(255,255,255,0.00),
            inset 0 0 0 rgba(255,214,0,0.00),
            0 0 0 rgba(255,214,0,0.00);
    }
    38% {
        opacity: 1;
        border-color: rgba(255,246,190,1.00);
        box-shadow:
            inset 0 0 0 4px rgba(255,255,255,1.00),
            inset 0 0 30px rgba(255,255,255,0.95),
            inset 0 0 64px rgba(255,214,0,1.00),
            inset 0 0 100px rgba(255,150,0,0.58),
            0 0 28px rgba(255,255,255,1.00),
            0 0 58px rgba(255,214,0,1.00),
            0 0 98px rgba(255,214,0,0.92);
    }
    100% {
        opacity: 1;
        border-color: rgba(255,214,0,1.00);
        box-shadow:
            inset 0 0 0 3px rgba(255,255,255,0.95),
            inset 0 0 22px rgba(255,255,255,0.78),
            inset 0 0 46px rgba(255,214,0,0.98),
            inset 0 0 82px rgba(255,150,0,0.42),
            0 0 18px rgba(255,255,255,0.95),
            0 0 36px rgba(255,214,0,1.00),
            0 0 70px rgba(255,214,0,0.82);
    }
}