/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* Glitch Effect for Text */
.glitch-container {
    position: relative;
    display: inline-block;
}

.glitch {
    position: relative;
    color: white;
    animation: glitch-anim 2.5s infinite linear alternate-reverse;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0a0c; /* Match body background */
    overflow: hidden;
}

.glitch::before {
    left: 2px;
    text-shadow: -2px 0 #ff00c1;
    clip-path: inset(25% 0 55% 0);
    animation: glitch-anim-2 2.5s infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
    clip-path: inset(65% 0 15% 0);
    animation: glitch-anim-3 2.5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% { transform: translate(0); }
    20% { transform: translate(-3px, 3px); }
    40% { transform: translate(-3px, -3px); }
    60% { transform: translate(3px, 3px); }
    80% { transform: translate(3px, -3px); }
    100% { transform: translate(0); }
}
@keyframes glitch-anim-2 {
    0% { clip-path: inset(25% 0 55% 0); }
    20% { clip-path: inset(5% 0 95% 0); }
    40% { clip-path: inset(50% 0 20% 0); }
    60% { clip-path: inset(90% 0 5% 0); }
    80% { clip-path: inset(15% 0 75% 0); }
    100% { clip-path: inset(25% 0 55% 0); }
}
@keyframes glitch-anim-3 {
    0% { clip-path: inset(65% 0 15% 0); }
    20% { clip-path: inset(85% 0 5% 0); }
    40% { clip-path: inset(30% 0 50% 0); }
    60% { clip-path: inset(70% 0 10% 0); }
    80% { clip-path: inset(45% 0 45% 0); }
    100% { clip-path: inset(65% 0 15% 0); }
}


/* Glitch Effect for Images - REBUILT V7 (Immediate Start Option) */
.glitch-image-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

/* --- LOGIC ---
1. By default, all glitches are CONTINUOUS.
2. JS detects `data-glitch-time` and adds `.glitch-periodic-time`, which switches to the PERIODIC (pause-then-glitch) animations.
3. JS detects `data-glitch-start="immediate"` and adds `.glitch-immediate-start`, which switches to the IMMEDIATE (glitch-then-pause) animations.
*/

/* --- DEFAULT: CONTINUOUS GLITCH --- */
.glitch-image-container .glitch-image {
    position: relative;
    z-index: 1;
    animation: glitch-image-main-continuous 0.8s infinite linear alternate;
}

.glitch-image-container::before,
.glitch-image-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    background-image: var(--mask-url);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: static-flicker-clip-continuous 0.15s infinite linear;
}

/* --- OVERRIDE 1: PERIODIC GLITCH (Pause -> Glitch) --- */
.glitch-image-container.glitch-periodic-time .glitch-image {
    animation-name: glitch-image-main-periodic;
    animation-duration: var(--glitch-duration);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.glitch-image-container.glitch-periodic-time::before,
.glitch-image-container.glitch-periodic-time::after {
    animation-name: static-flicker-clip-periodic;
    animation-duration: var(--glitch-duration);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* --- OVERRIDE 2: IMMEDIATE GLITCH (Glitch -> Pause) --- */
.glitch-image-container.glitch-immediate-start .glitch-image {
    animation-name: glitch-image-main-immediate;
}

.glitch-image-container.glitch-immediate-start::before,
.glitch-image-container.glitch-immediate-start::after {
    animation-name: static-flicker-clip-immediate;
}


/* --- SHARED STYLES --- */
.glitch-image-container::before {
    background-color: #b1b1b1;
    background-blend-mode: difference;
    opacity: 0.5;
}

.glitch-image-container::after {
    background-color: #4a4a4a;
    background-blend-mode: difference;
    opacity: 0.3;
    animation-delay: -0.08s;
}

.glitch-image-container.no-static::before,
.glitch-image-container.no-static::after {
    display: none;
}


/* --- KEYFRAME SETS --- */

/* 1. Keyframes for PERIODIC static flicker (Pause -> Glitch) */
@keyframes static-flicker-clip-periodic {
    0%, 83% { clip-path: inset(50% 0 50% 0); }
    84% { clip-path: inset(98% 0 1% 0); }
    86% { clip-path: inset(2% 0 97% 0); }
    88% { clip-path: inset(85% 0 10% 0); }
    90% { clip-path: inset(12% 0 85% 0); }
    92% { clip-path: inset(99% 0 0% 0); }
    94% { clip-path: inset(45% 0 53% 0); }
    96% { clip-path: inset(50% 0 48% 0); }
    98% { clip-path: inset(1% 0 98% 0); }
    100% { clip-path: inset(75% 0 20% 0); }
}

/* 2. Keyframes for PERIODIC main image distortion (Pause -> Glitch) */
@keyframes glitch-image-main-periodic {
    0%, 83% {
        transform: translate(0, 0);
        filter: blur(0) hue-rotate(0deg) contrast(100%) saturate(100%);
    }
    85% {
        transform: translate(4px, -1px);
        filter: blur(1.2px) hue-rotate(20deg) contrast(150%) saturate(120%);
    }
    88% {
        transform: translate(-1px, 1px);
        filter: blur(0) hue-rotate(-10deg) contrast(100%) saturate(100%);
    }
    91% {
        transform: translate(1px, -4px);
        filter: blur(3.5px) hue-rotate(40deg) contrast(200%) saturate(150%);
    }
    94% {
        transform: translate(-2px, 1px);
        filter: blur(0.2px) hue-rotate(-30deg) contrast(120%) saturate(110%);
    }
    97% {
        transform: translate(1px, 3px);
        filter: blur(0) hue-rotate(5deg) contrast(100%) saturate(100%);
    }
    100% {
        transform: translate(-1px, -1px);
        filter: blur(4.8px) hue-rotate(-60deg) contrast(250%) saturate(180%);
    }
}

/* 3. Keyframes for CONTINUOUS static flicker (DEFAULT) */
@keyframes static-flicker-clip-continuous {
    0%, 100% { clip-path: inset(98% 0 1% 0); }
    10% { clip-path: inset(2% 0 97% 0); }
    20% { clip-path: inset(85% 0 10% 0); }
    30% { clip-path: inset(12% 0 85% 0); }
    40% { clip-path: inset(99% 0 0% 0); }
    50% { clip-path: inset(45% 0 53% 0); }
    60% { clip-path: inset(50% 0 48% 0); }
    70% { clip-path: inset(1% 0 98% 0); }
    80% { clip-path: inset(75% 0 20% 0); }
    90% { clip-path: inset(30% 0 68% 0); }
}

/* 4. Keyframes for CONTINUOUS main image distortion (DEFAULT) */
@keyframes glitch-image-main-continuous {
    0%, 100% {
        transform: translate(0, 0);
        filter: blur(0) hue-rotate(0deg) contrast(100%) saturate(100%);
    }
    15% {
        transform: translate(2px, -1px);
        filter: blur(1.2px) hue-rotate(20deg) contrast(150%) saturate(120%);
    }
    30% {
        transform: translate(-1px, 1px);
        filter: blur(0) hue-rotate(-10deg) contrast(100%) saturate(100%);
    }
    45% {
        transform: translate(1px, -2px);
        filter: blur(3.5px) hue-rotate(40deg) contrast(200%) saturate(150%);
    }
    60% {
        transform: translate(-2px, 1px);
        filter: blur(0.2px) hue-rotate(-30deg) contrast(120%) saturate(110%);
    }
    75% {
        transform: translate(1px, 2px);
        filter: blur(0) hue-rotate(5deg) contrast(100%) saturate(100%);
    }
    90% {
        transform: translate(-1px, -1px);
        filter: blur(4.8px) hue-rotate(-60deg) contrast(250%) saturate(180%);
    }
}

/* 5. Keyframes for IMMEDIATE static flicker (Glitch -> Pause) */
@keyframes static-flicker-clip-immediate {
    0% { clip-path: inset(98% 0 1% 0); }
    2% { clip-path: inset(2% 0 97% 0); }
    4% { clip-path: inset(85% 0 10% 0); }
    6% { clip-path: inset(12% 0 85% 0); }
    8% { clip-path: inset(99% 0 0% 0); }
    10% { clip-path: inset(45% 0 53% 0); }
    12% { clip-path: inset(50% 0 48% 0); }
    14% { clip-path: inset(1% 0 98% 0); }
    16% { clip-path: inset(75% 0 20% 0); }
    17%, 100% { clip-path: inset(50% 0 50% 0); } /* Pause */
}

/* 6. Keyframes for IMMEDIATE main image distortion (Glitch -> Pause) */
@keyframes glitch-image-main-immediate {
    0% {
        transform: translate(0, 0);
        filter: blur(0) hue-rotate(0deg) contrast(100%) saturate(100%);
    }
    2% {
        transform: translate(4px, -1px);
        filter: blur(1.2px) hue-rotate(20deg) contrast(150%) saturate(120%);
    }
    5% {
        transform: translate(-1px, 1px);
        filter: blur(0) hue-rotate(-10deg) contrast(100%) saturate(100%);
    }
    8% {
        transform: translate(1px, -4px);
        filter: blur(3.5px) hue-rotate(40deg) contrast(200%) saturate(150%);
    }
    11% {
        transform: translate(-2px, 1px);
        filter: blur(0.2px) hue-rotate(-30deg) contrast(120%) saturate(110%);
    }
    14% {
        transform: translate(1px, 3px);
        filter: blur(0) hue-rotate(5deg) contrast(100%) saturate(100%);
    }
    17% {
        transform: translate(-1px, -1px);
        filter: blur(4.8px) hue-rotate(-60deg) contrast(250%) saturate(180%);
    }
    18%, 100% { /* Pause */
        transform: translate(0, 0);
        filter: blur(0) hue-rotate(0deg) contrast(100%) saturate(100%);
    }
}

/* Button Border Fix */
.button.button-border:not(:hover) {
    border-color: #555 !important;
    background-color: #333 !important;
    color: #FFF !important;
}

/* Tavenend Header Styling */
.tavenend-header {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: clamp(36px, 8vw, 80px); /* min 24px, scale with viewport, max 80pt */
    color: #f5f5f5;
    -webkit-text-stroke: 1px #664c36;
    text-stroke: 1px #664c36;
    /* Combined text-shadow for glow and drop shadow */
    text-shadow:
        /* Outer Glow */
            0 0 8px rgba(102, 76, 54, 0.7),
            0 0 12px rgba(102, 76, 54, 0.5),
                /* Drop Shadow: x-offset, y-offset, blur, color */
            -3px 5px 5px rgba(0, 0, 0, 0.77);
    margin-top: 0;
    margin-bottom: 0;
}

/* Tavenend Header Styling */
.tavenend-header-card {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: clamp(24px, 5cqw, 48px); /* min 24px, scale with viewport, max 80pt */
    color: #f5f5f5;
    -webkit-text-stroke: 1px #664c36;
    text-stroke: 1px #664c36;
    /* Combined text-shadow for glow and drop shadow */
    text-shadow:
        /* Outer Glow */
            0 0 8px rgba(102, 76, 54, 0.7),
            0 0 12px rgba(102, 76, 54, 0.5),
                /* Drop Shadow: x-offset, y-offset, blur, color */
            -3px 5px 5px rgba(0, 0, 0, 0.77);
    margin-top: 0;
    margin-bottom: 0;
}

/* Responsive sizes for Listen Now Header */
/*@media (max-width: 767px) {*/
/*    .tavenend-header {*/
/*        font-size: 50pt;*/
/*    }*/
/*}*/

/*@media (max-width: 480px) {*/
/*    .tavenend-header {*/
/*        font-size: 36pt;*/
/*    }*/
/*}*/

/* Section overrides*/
.section,
.page-section {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Episode Cards*/
.block-card-9 .grid-inner .btn-hover {
    opacity: 0;
    display: block;
    transition: opacity .3s ease, transform .3s .1s ease;
    margin-top: 15px;
    position: absolute;
    transform: translateY(0);
}
.block-card-9 .grid-inner:hover .btn-hover {
    opacity: 1;
    transform: translateY(-5px);
}

.block-card-9 .grid-inner .grid-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
}

.block-card-9 .grid-inner:hover .grid-image {
    -webkit-animation: kenburns 20s ease-out both;
    animation: kenburns 20s ease-out both;
}

.block-card-9 .grid-inner .grid-icon,
.block-card-9 .grid-inner .grid-content {
    transition: transform .3s ease;
}

.block-card-9 .grid-inner:hover .grid-content { transform: translateY(-45px); }
.block-card-9 .grid-inner:hover .grid-icon { transform: translateY(-5px); }

@-webkit-keyframes kenburns {
    0% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0);
        -webkit-transform-origin: 84% 84%;
        transform-origin: 84% 84%;
    }
    100% {
        -webkit-transform: scale(1.25) translate(20px, 15px);
        transform: scale(1.25) translate(20px, 15px);
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
    }
}
@keyframes kenburns {
    0% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0);
        -webkit-transform-origin: 84% 84%;
        transform-origin: 84% 84%;
    }
    100% {
        -webkit-transform: scale(1.25) translate(20px, 15px);
        transform: scale(1.25) translate(20px, 15px);
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
    }
}

/* Links Page Styling */
.link-page-container {
    max-width: 680px;
    padding-top: 40px;
    padding-bottom: 40px;
}

.link-section-header {
    color: #888;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    margin-top: 40px;
    margin-bottom: 20px;
    text-align: center;
}

.link-btn {
    display: block;
    background-color: #222;
    color: #fff;
    padding: 15px 20px;
    margin-bottom: 15px;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    transition: background-color .3s ease, transform .2s ease;
}

.link-btn:hover {
    background-color: #9a4f1d;
    transform: scale(1.02);
    color: #fff;
}

.link-btn i {
    margin-right: 10px;
    font-size: 18px;
    width: 20px;
    text-align: center;
}

.social-icon-link {
    font-size: 28px;
    color: #888;
    margin: 0 15px;
    transition: color .3s ease, transform .2s ease;
}

.social-icon-link:hover {
    color: #9a4f1d;
    transform: scale(1.1);
}

/* Make the container a stacking context */
.links-bg {
    position: relative;
    z-index: 0;
}

/* Fixed background layer */
.links-bg::before {
    content: "";
    position: fixed;      /* fixed to the viewport */
    inset: 0;             /* full screen */
    background-image: url('/content/images/logos/general/tavenend-header-no-text.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;          /* sits behind your content */
    pointer-events: none; /* don't block clicks */
}

/* Make the container a stacking context */
.tapes-bg {
    position: relative;
    z-index: 0;
}

/* Fixed background layer */
.tapes-bg::before {
    content: "";
    position: fixed;      /* fixed to the viewport */
    inset: 0;             /* full screen */
    background-image: url('/content/images/logos/tapes/tavenend-tapes-header-no-text.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;          /* sits behind your content */
    pointer-events: none; /* don't block clicks */
}

.mfp-ajax-holder .mfp-content {
    max-width: 1500px; /* Adjust this value as needed */
    margin: 60px auto; /* Keeps it centered */
}

#header-wrap.sticky-header {
    position: relative !important;
}

/* Custom Sign-Off Block */
.sign-off {
    font-size: 28px;
    font-variant: small-caps;
    font-weight: bold;
    font-style: italic;
    text-align: left; 
    margin-top: 10px;  
    margin-bottom: 10px;
}

/* This new rule targets the second line specifically */
.sign-off-name {
    font-variant: none;
    font-weight: normal;
    font-size: 48px;
    font-family: "Brush Script MT", "Lucida Handwriting", cursive;
    padding-left: 50px;
    margin-top: -10px;

    display: inline-block;
    transform: rotate(-5deg);
}

/* 2. Media Query for desktop screens */
@media (min-width: 768px) {
    .sign-off-name {
        /* This style will ONLY apply when the screen is 768px or wider */
        padding-left: 100px;
    }
}

#newsletter-embed-container .formkit-form {
    margin: 0 auto !important; /* This forces the horizontal centering */
    width: 100% !important;
    max-width: 900px !important; /* You can adjust this value to control the max width */
}

/*For sub pages secondary header*/
.logo-image {
    max-height: 80px;
    filter: brightness(0.6);
    border: 2px solid #333;              /* dark grey border */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); /* shadow for depth */
    border-radius: 0;                    /* square corners */
}

.tv-now-next-previous-button {
    width: 160px;
    text-align: center;
}