/*
   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;
    }
}