/*
 Theme Name:   Ternet Ninja
 Description:  Child theme til Lion Musicals - custom CSS og JS overrides
 Template:     lionmusicals
 Version:      1.2.9
 Text Domain:  ternet-ninja
*/

/* ==========================================================================
   Hero - Ternet Ninja Overrides
   ========================================================================== */

.tn-hero {
    max-height: 100dvh;
    overflow: hidden;
}

/* No ScrollSmoother (touch devices) — reset any inline transform on hero bg */
body:not(.has-smooth-scroll) .tn-hero .lm-hero__background {
    transform: none !important;
}

.tn-hero .lm-hero__content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    z-index: 4;
}

/* ==========================================================================
   Ninja Character — absolute, centered, pushed towards top
   ========================================================================== */

.tn-hero-character {
    position: absolute;
    width: min(125vw, 95vh, 950px);
    z-index: 0;
    pointer-events: none;
}

.tn-hero-character__img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20%;
    animation: tn-float 3.5s ease-in-out infinite;
}

@keyframes tn-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* ==========================================================================
   Logo Wrap — absolute, dead center, rotated
   ========================================================================== */

.tn-hero .lm-hero__logo-wrap {
    position: absolute;
    /*top: 40%;*/
    /*left: 50%;*/
    /*transform: translate(-50%, -50%) rotate(-3deg);*/
    z-index: 1;
    display: inline-block;
    width: auto;
    margin: 0;
}

.tn-hero .lm-hero__logo {
    display: block;
    margin: 0 auto;
    max-width: clamp(400px, 95vw, 900px);
	margin-bottom: 12%;
    opacity: 0; /* hidden until entrance animation fires */
}

.tn-hero-bottom {
    opacity: 0; /* hidden until entrance animation fires */
}

/* ==========================================================================
   Bottom group — single container, flexbox with equal gap
   ========================================================================== */

.tn-hero-bottom {
    position: absolute;
    bottom: 0.8vw;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: min(2vw, 1.8vh, 24px);
}

.tn-hero .lm-hero__cta {
    white-space: nowrap;
}

.tn-hero .lm-hero__subtitle {
    white-space: nowrap;
    color: #c0392b;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(2vw, 4.2vh, 3.2rem);
    letter-spacing: 0.05em;
    margin: 0;
}
.tn-hero .lm-hero__subtitle br {
    display: none;
}

/* --- Screen-reader-only (keeps h1 for SEO, hidden visually) --- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Headline image --- */
.tn-hero-headline {
    width: clamp(30vw, 80vh, 800px);
    height: auto;
    display: block;
}

/* --- Override overlay (remove dark gradient) --- */
.tn-hero .lm-hero__overlay {
    background: none;
}

/* ==========================================================================
   Hero Frame (art-deco corners — one image, CSS rotated)
   ========================================================================== */

.tn-hero-frame {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.tn-hero-frame__corner {
    --corner-offset: 30px;
    --corner-offset-top: calc(35px + var(--corner-offset));
    position: absolute;
    width: clamp(100px, 13vw, 300px);
    height: auto;
    display: block;
}

.tn-hero-frame__corner--tl {
    top: var(--corner-offset-top);
    left: var(--corner-offset);
}

.tn-hero-frame__corner--tr {
    top: var(--corner-offset-top);
    right: var(--corner-offset);
    transform: scaleX(-1);
}

.tn-hero-frame__corner--bl {
    bottom: var(--corner-offset);
    left: var(--corner-offset);
    transform: scaleY(-1);
}

.tn-hero-frame__corner--br {
    bottom: var(--corner-offset);
    right: var(--corner-offset);
    transform: scale(-1, -1);
}

/* ==========================================================================
   Ninja Silhouettes (bottom)
   ========================================================================== */

.tn-hero-ninjas {
    position: absolute;
    bottom: -15vw;
    width: 85%;
    min-width: 1560px;
    z-index: 2;
    pointer-events: none;
    line-height: 0;
}

.tn-hero-ninjas img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   Ternet Ninja — CSS Variables (palette)
   ========================================================================== */

:root {
    --tn-red-deep: #5c0c0c;
    --tn-red-mid: #8b1a1a;
    --tn-red-bright: #c62828;
    --tn-red-glow: #e53935;
    --tn-gold-dark: #8b6914;
    --tn-gold-mid: #d4af37;
    --tn-gold-light: #f5d060;
    --tn-gold-pale: #ffe88a;
    --tn-cream: #f5e6c8;
    --tn-dark: #111118;
    --tn-dark-red: #1a0505;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar-track {
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: var(--tn-red-mid);
    border-color: #000;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--tn-red-bright);
}

* {
    scrollbar-color: var(--tn-red-mid) #000;
}

/* ─── Global text overrides for dark backgrounds ─── */
.lm-section__content,
.lm-section__content p,
.lm-columns__text,
.lm-columns__text p {
    color: rgba(245, 230, 200, 0.7);
}

.lm-section__content strong,
.lm-columns__text strong {
    color: var(--tn-cream);
}

/* Page hero text */
.lm-page-hero h1 {
    color: var(--tn-cream);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

/* Date cards, price cards, presale on dark bg */
.lm-date-card__date {
    color: var(--tn-cream);
}

/* Footer */
.lm-footer {
    background: radial-gradient(ellipse at center, #1a1a1a 0%, #0d0d0d 60%, #000 100%) !important;
}

.lm-newsletter__title,
.lm-newsletter__show-name {
    color: var(--tn-cream);
}

.lm-newsletter__form .lm-btn {
    padding-inline: 2rem;
}

/* ==========================================================================
   Section Dividers — Gold gradient fading to edges
   ========================================================================== */

.lm-section + .lm-section,
section[id] + section[id],
.lm-footer {
    position: relative;
}

.lm-section::before,
section[id] + section[id]::before,
.lm-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg,
        transparent,
        var(--tn-gold-dark) 15%,
        var(--tn-gold-mid) 30%,
        var(--tn-gold-light) 50%,
        var(--tn-gold-mid) 70%,
        var(--tn-gold-dark) 85%,
        transparent
    );
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    z-index: 1;
}

/* ==========================================================================
   Buttons — Primary (Red + Gold) & Secondary (Gold outline)
   ========================================================================== */

/* ---- Primary ---- */
.lm-btn-primary {
    background: linear-gradient(135deg, var(--tn-red-mid) 0%, var(--tn-red-bright) 50%, var(--tn-red-mid) 100%);
    color: var(--tn-cream);
    border: 2px solid var(--tn-gold-mid);
    border-radius: var(--lm-radius);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow:
        0 0 0 1px rgba(139, 105, 20, 0.3),
        0 4px 16px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 200, 100, 0.15);
    z-index: 1;
}

/* Shimmer animation */
.lm-btn-primary::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -100%;
    width: 60%;
    height: calc(100% + 4px);
    background: linear-gradient(90deg,
        transparent,
        rgba(212, 175, 55, 0.15),
        rgba(255, 232, 138, 0.25),
        rgba(212, 175, 55, 0.15),
        transparent
    );
    transform: skewX(-20deg);
    animation: tn-btn-shimmer 3.5s ease-in-out infinite;
    z-index: 2;
    pointer-events: none;
}

@keyframes tn-btn-shimmer {
    0%  { left: -100%; }
    40% { left: 140%; }
    100% { left: 140%; }
}

/* Gold corner flares */
.lm-btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--lm-radius);
    box-shadow:
        inset 2px 2px 0 rgba(212, 175, 55, 0.2),
        inset -2px -2px 0 rgba(212, 175, 55, 0.2);
    transition: all 0.4s ease;
    pointer-events: none;
}

.lm-btn-primary:hover {
    background: linear-gradient(135deg, var(--tn-red-bright) 0%, #d32f2f 50%, var(--tn-red-bright) 100%);
    border-color: var(--tn-gold-light);
    color: #fff;
    box-shadow:
        0 0 0 1px rgba(139, 105, 20, 0.5),
        0 0 25px rgba(212, 175, 55, 0.25),
        0 0 50px rgba(139, 26, 26, 0.3),
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 200, 100, 0.25);
    transform: translateY(-2px);
}

.lm-btn-primary:hover::after {
    box-shadow:
        inset 3px 3px 0 rgba(212, 175, 55, 0.35),
        inset -3px -3px 0 rgba(212, 175, 55, 0.35);
}

.lm-btn-primary:active {
    transform: translateY(0);
}

/* ---- Secondary (Gold outline) ---- */
.lm-btn-secondary {
    background: transparent;
    color: var(--tn-gold-mid);
    border: 2px solid var(--tn-gold-mid);
    border-radius: var(--lm-radius);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* Rotating border glow */
.lm-btn-secondary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(212, 175, 55, 0.4) 60deg, transparent 120deg);
    animation: tn-btn-rotate 4s linear infinite;
    transform-origin: center;
    z-index: -1;
    pointer-events: none;
    opacity: 0.5;
}

@keyframes tn-btn-rotate {
    0%   { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Inner background clips the rotating gradient */
.lm-btn-secondary::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: var(--lm-primary, var(--tn-dark));
    border-radius: calc(var(--lm-radius) - 2px);
    z-index: -1;
    transition: background 0.4s ease;
}

.lm-btn-secondary:hover {
    color: var(--tn-dark);
    border-color: var(--tn-gold-light);
    box-shadow:
        0 0 20px rgba(212, 175, 55, 0.35),
        0 8px 32px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

.lm-btn-secondary:hover::after {
    background: linear-gradient(135deg, var(--tn-gold-mid) 0%, var(--tn-gold-light) 50%, var(--tn-gold-mid) 100%);
}

.lm-btn-secondary:hover::before {
    opacity: 0;
}

.lm-btn-secondary:active {
    transform: translateY(0);
}

/* ---- Outline (Gold border variant) ---- */
.lm-btn-outline {
    border-color: var(--tn-gold-mid);
    color: var(--tn-gold-mid);
}

.lm-btn-outline:hover {
    background: var(--tn-gold-mid);
    color: var(--tn-dark);
    border-color: var(--tn-gold-mid);
}

/* ==========================================================================
   Show Dates (Copenhagen) — Compact datelist design override
   ========================================================================== */

.lm-dates-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.lm-date-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(212, 175, 55, 0.1);
    border-radius: var(--lm-radius);
    padding: 18px 22px;
    transition: all 0.35s ease;
    box-shadow: none;
    border-right-width: 1px;
}

.lm-date-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(212, 175, 55, 0.25);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Date column — big number + month */
.lm-date-card__day {
    flex-shrink: 0;
    width: 70px;
    text-align: center;
    padding: 10px 0;
    border-right: 2px solid rgba(212, 175, 55, 0.2);
    background: none;
    border-radius: 0;
}

.lm-date-card__day-number {
    font-size: 2rem;
    font-weight: 900;
    color: var(--tn-gold-mid);
    line-height: 1;
}

.lm-date-card__day-month {
    font-size: 0.6875rem;
    color: rgba(212, 175, 55, 0.6);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 4px;
}

/* Info column */
.lm-date-card__info {
    flex: 1;
    min-width: 0;
    padding: 0;
    gap: 2px;
}

.lm-date-card__date {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--tn-cream);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lm-date-card__time {
    font-size: 0.8125rem;
    color: rgba(245, 230, 200, 0.45);
    margin-top: 3px;
}

.lm-date-card__badge {
    background: rgba(212, 175, 55, 0.15);
    color: var(--tn-gold-mid);
}

/* Action column — keep status-aware colors */
.lm-date-card__action {
    flex-shrink: 0;
    padding: 0;
}

.lm-date-card__btn {
    padding: 10px 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: var(--lm-radius);
    white-space: nowrap;
    transition: all 0.3s ease;
}

.lm-date-card__btn--available {
    background: linear-gradient(135deg, #2e7d32, #43a047);
    color: #fff;
    box-shadow: 0 2px 10px rgba(46, 125, 50, 0.3);
}

.lm-date-card__btn--available:hover {
    background: linear-gradient(135deg, #43a047, #66bb6a);
    box-shadow: 0 0 20px rgba(102, 187, 106, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.lm-date-card__btn--few {
    background: linear-gradient(135deg, #e65100, #f57c00);
    color: #fff;
    box-shadow: 0 2px 10px rgba(230, 81, 0, 0.3);
}

.lm-date-card__btn--soldout {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(245, 230, 200, 0.4);
    cursor: not-allowed;
}

/* Legend dots — match new palette */
.lm-dates-legend__dot--available { background-color: #43a047; }
.lm-dates-legend__dot--few       { background-color: #f57c00; }
.lm-dates-legend__dot--soldout   { background-color: #ef4444; }
.lm-dates-legend__item { color: var(--tn-cream); }

@media (max-width: 768px) {
    .lm-dates-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Other Cities — Card design overrides (Ternet Ninja palette)
   ========================================================================== */

.lm-city-card {
    background: rgba(30, 8, 8, 0.8);
    border: 1px solid rgba(212, 175, 55, 0.15);
    position: relative;
    overflow: hidden;
    text-align: center;

    background: radial-gradient(ellipse at center, #1a1a1a 0%, #0d0d0d 60%, #000 100%);
}

.lm-city-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--tn-gold-dark), var(--tn-gold-light), var(--tn-gold-dark));
    opacity: 0.6;
    transition: opacity 0.4s ease;
}

.lm-city-card:hover {
    border-color: rgba(212, 175, 55, 0.35);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(212, 175, 55, 0.08);
    transform: translateY(-4px);
}

.lm-city-card:hover::before {
    opacity: 1;
}

.lm-city-card__city {
    color: var(--tn-cream);
}

.lm-city-card__venue {
    color: rgba(212, 175, 55, 0.6);
    letter-spacing: 0.08em;
}

.lm-city-card__dates {
    color: rgba(245, 230, 200, 0.65);
}

.lm-city-card .lm-btn--small {
    align-self: center;
}

/* ==========================================================================
   Ninja Scroll — Section pinned scroll reveal
   ========================================================================== */

.tn-ninja-scroll {
    background: #000000;
    overflow: hidden;
    position: relative;
    padding: 0 !important;
}

.tn-ninja-scroll .container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 0;
    position: relative;
    z-index: 10;
}

.tn-ninja-scroll .lm-section__headings,
.tn-ninja-scroll .lm-section__content,
.tn-ninja-scroll .lm-section__cta {
    display: none;
}

.tn-scroll-pin-wrapper {
    width: 100%;
    max-width: 930px;
    padding: 0 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tn-scroll-roll {
    width: 100%;
    max-width: 930px;
    height: 48px;
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    filter: drop-shadow(0px 2px 20px rgb(0 0 0 / 30%));
}

.tn-scroll-roll.top    { margin-bottom: -4px; z-index: 21; }
.tn-scroll-roll.bottom { margin-top: -4px; }

.tn-roll-body {
    position: absolute;
    left: 28px;
    right: 28px;
    top: 4px;
    bottom: 4px;
    background: linear-gradient(180deg, #5a0a0a 0%, var(--tn-red-mid) 15%, var(--tn-red-bright) 35%, var(--tn-red-glow) 50%, var(--tn-red-bright) 65%, var(--tn-red-mid) 85%, #5a0a0a 100%);
    box-shadow: inset 0 2px 6px rgba(255, 200, 100, 0.2), inset 0 -2px 6px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.tn-roll-body::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0px, transparent 18px, rgba(212, 175, 55, 0.22) 18px, rgba(212, 175, 55, 0.22) 20px, transparent 20px, transparent 28px, rgba(212, 175, 55, 0.12) 28px, rgba(212, 175, 55, 0.12) 29px);
}

.tn-roll-body::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0px, transparent 54px, rgba(212, 175, 55, 0.3) 54px, rgba(212, 175, 55, 0.3) 58px);
}

.tn-roll-pattern {
    position: absolute;
    left: 28px;
    right: 28px;
    top: 4px;
    bottom: 4px;
    border-radius: 20px;
    overflow: hidden;
    pointer-events: none;
}

.tn-roll-pattern::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(212, 175, 55, 0.18) 2.5px, transparent 2.5px);
    background-size: 36px 20px;
    background-position: 0 5px;
}

.tn-roll-cap {
    position: absolute;
    z-index: 1;
    top: -2px;
    width: 34px;
    height: 52px;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--tn-gold-dark) 0%, var(--tn-gold-mid) 20%, var(--tn-gold-light) 45%, var(--tn-gold-mid) 70%, var(--tn-gold-dark) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 240, 180, 0.4), inset 0 -2px 4px rgba(100, 70, 10, 0.3);
}

.tn-roll-cap::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 28px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--tn-gold-dark), var(--tn-gold-light), var(--tn-gold-dark));
}

.tn-roll-cap.left  { left: 0; }
.tn-roll-cap.right { right: 0; }

/* Paper wrapper — animated height */
.tn-scroll-paper-wrapper {
    width: calc(100% - 56px);
    max-width: 800px;
    overflow: hidden;
    height: 0;
    position: relative;
    z-index: 10;
}

.tn-scroll-paper {
    width: 100%;
    min-height: 100px;
    background: var(--tn-cream);
    background-image: repeating-linear-gradient(90deg, transparent, transparent 28px, rgba(180, 150, 100, 0.06) 28px, rgba(180, 150, 100, 0.06) 29px);
    border-left: 3px solid #d4b896;
    border-right: 3px solid #d4b896;
    box-shadow: inset 4px 0 12px rgba(120, 80, 30, 0.12), inset -4px 0 12px rgba(120, 80, 30, 0.12), 6px 0 20px rgba(0, 0, 0, 0.2), -6px 0 20px rgba(0, 0, 0, 0.2);
    position: relative;
}

.tn-scroll-paper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.07), transparent);
    pointer-events: none;
    z-index: 5;
}

.tn-scroll-paper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.07), transparent);
    pointer-events: none;
    z-index: 5;
}

.tn-paper-texture {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 25% 20%, rgba(180, 140, 80, 0.07) 0%, transparent 50%),
                radial-gradient(ellipse at 75% 80%, rgba(160, 120, 60, 0.07) 0%, transparent 50%);
    pointer-events: none;
}

.tn-paper-watermark {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(100px, 25vw, 180px);
    color: rgba(180, 140, 80, 0.055);
    font-weight: 900;
    pointer-events: none;
    z-index: 1;
    line-height: 1;
    user-select: none;
}

.tn-paper-content {
    padding: clamp(24px, 6vw, 45px);
    position: relative;
    z-index: 2;
    color: #2c1810;
    font-size: clamp(14px, 2.5vw, 17px);
    line-height: 1.9;
    letter-spacing: 0.02em;
}

.tn-paper-content h2 {
    font-size: clamp(20px, 4vw, 28px);
    font-weight: 900;
    margin-bottom: 18px;
    color: var(--tn-red-mid);
    letter-spacing: 0.08em;
    text-shadow: 1px 1px 0 rgba(200, 160, 80, 0.3);
}

.tn-paper-content .tn-paper-subheading {
    font-size: clamp(11px, 2vw, 14px);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(44, 24, 16, 0.5);
    margin-bottom: 16px;
}

.tn-paper-content .tn-paper-divider {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c6a355, transparent);
    margin: 22px auto;
    border: none;
}

.tn-paper-content p {
    margin-bottom: 12px;
}

/* ==========================================================================
   Header — Logo size + CTA fixes
   ========================================================================== */

/* Subpages: show header background immediately (no transparent start) */
body:not(.home) .lm-header {
    background: radial-gradient(ellipse at center, #1a1a1a 0%, #0d0d0d 60%, #000 100%);
    backdrop-filter: blur(10px);
}

/* Header scrolled state — radial gradient instead of flat black */
.lm-header.is-scrolled {
    background: radial-gradient(ellipse at center, #1a1a1a 0%, #0d0d0d 60%, #000 100%) !important;
    backdrop-filter: blur(10px);
}

.lm-header__logo img,
.lm-header__logo svg {
    height: 65px;
    filter: drop-shadow(0px 4px 20px black);
}

@media (min-width: 992px) {
    .lm-header__logo img,
    .lm-header__logo svg {
        height: 80px;
    }
}

/* Header CTA — keep white text on hover, no dark border */
.lm-nav__cta.lm-btn-primary {
    border-color: var(--tn-gold-mid);
}

.lm-nav__cta.lm-btn-primary:hover {
    background: linear-gradient(135deg, var(--tn-red-bright) 0%, #d32f2f 50%, var(--tn-red-bright) 100%);
    color: #fff;
    border-color: var(--tn-gold-light);
}

/* ==========================================================================
   Global Section Headings — Ternet Ninja overrides
   ========================================================================== */

.lm-section__heading {
    color: var(--tn-cream);
}

.lm-section__subheading {
    color: var(--tn-gold-mid);
    font-size: 0.6875rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    border: 1px solid rgba(212, 175, 55, 0.3);
    padding: 5px 14px;
    display: inline-flex;
    border-radius: 2px;
    align-items: center;
    white-space-collapse: preserve;
}

.lm-section__subheading i {
    font-size: 1rem;
    font-weight: 700;
}

/* ==========================================================================
   Dates Featured (Spillebyer) — Forsiden
   Section class is .lm-section--dates (not dates-featured)
   ========================================================================== */

/* Section background: dark with subtle red vignette */
.lm-section--dates {
    background: radial-gradient(ellipse at center, var(--tn-dark) 0%, #0a0208 100%) !important;
    color: var(--tn-cream);
    overflow: hidden;
}

/* Heading */
.lm-section--dates .lm-section__heading {
    color: var(--tn-cream);
    font-size: clamp(1.2rem, 5vw, 2.5rem);
    font-weight: 400;
    letter-spacing: 0.04em;
    margin-bottom: 0.25em;
}

/* Subheading tag */
.lm-section--dates .lm-section__subheading {
    color: var(--tn-gold-mid);
    border-color: rgba(212, 175, 55, 0.4);
    margin-bottom: var(--lm-spacing-md);
}

/* Gold decorative line under headings */
.lm-section--dates .lm-section__headings::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    margin: var(--lm-spacing-md) auto 0;
    background: linear-gradient(90deg, transparent, var(--tn-gold-mid), transparent);
}

/* Top separator icon */
.lm-section--dates .lm-dates-featured__separator-icon {
    color: var(--tn-gold-mid);
}

.lm-dates-featured__separator {
    display: none;
}

/* Inline icons between city/venue/date */
.lm-section--dates .lm-dates-featured__icon {
    color: var(--tn-gold-mid);
    opacity: 0.5;
}

/* Container wider for this section */
.lm-section--dates .lm-dates-featured {
    max-width: 900px;
}

/* Row styling with gold divider */
.lm-dates-featured__row {
    padding-block: 0.6rem;
    border-bottom: 1px solid rgba(212, 175, 55, 0.12);
    gap: 10px;
    margin: 0;
}

.lm-dates-featured__row:last-child {
    border-bottom: none;
}

/* City name — gold, bold */
.lm-section--dates .lm-dates-featured__city {
    color: var(--tn-gold-light);
    font-size: clamp(1.1rem, 3vw, 1.6rem);
    letter-spacing: 0.02em;
}

/* Venue — cream, uppercase, spaced */
.lm-section--dates .lm-dates-featured__venue {
    color: rgba(245, 230, 200, 0.5);
    font-size: clamp(0.8rem, 2vw, 1rem);
    letter-spacing: 0.15em;
}

/* Date range — cream italic */
.lm-section--dates .lm-dates-featured__daterange {
    color: var(--tn-cream);
    font-size: clamp(0.875rem, 2.5vw, 1.15rem);
}

/* CTA buttons */
.lm-section--dates .lm-section__cta {
    margin-top: var(--lm-spacing-xl);
}

/* ---- Mobile: stack rows vertically ---- */
@media (max-width: 575.98px) {
    .lm-dates-featured__row {
        flex-direction: column;
        gap: 0;
        text-align: center;
        padding-block: 8px;
    }

    .lm-dates-featured__icon {
        display: none;
    }

    .lm-section--dates .lm-dates-featured__daterange {
        font-size: 0.8125rem;
        opacity: 0.6;
    }
}

/* ==========================================================================
   Red Background Pattern — Shared class for video sections
   ========================================================================== */

/* ==========================================================================
   Global Background Overrides — No white sections
   ========================================================================== */

/* Page title hero on subpages */
.lm-page-hero {
    background: var(--tn-dark) url('/ternetninja/wp-content/uploads/ternet_hero_bg.jpg') center / cover no-repeat !important;
    position: relative;
    overflow: visible;
    z-index: 1;
}

/* Gold divider at bottom of page hero */
/*.lm-page-hero::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg,
        transparent,
        var(--tn-gold-dark) 15%,
        var(--tn-gold-mid) 30%,
        var(--tn-gold-light) 50%,
        var(--tn-gold-mid) 70%,
        var(--tn-gold-dark) 85%,
        transparent
    );
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    z-index: 1;
}*/

/* Dark top-down overlay */
.lm-page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 10%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.lm-page-hero > .lm-container {
    position: relative;
    z-index: 1;
}

/* Billetside sektioner — ingen hvid */
.lm-section--with-splash,
.lm-section--splash-ticket_prices,
.lm-section--splash-show_dates {
    background-color: var(--tn-dark);
    background-image: url('./ternet_bg.jpg');
    background-size: cover;
    background-position: center;
}

/* Video sections — red texture */
.tn-red-bg,
.tn-video-section,
.tn-interview-section,
.lm-section--credits,
.lm-section--columns,
section#andre-byer,
section#spilledatoer,
.page-template-page-medvirkende .lm-section {
    background-color: var(--tn-red-deep);
    background-image: repeating-linear-gradient(45deg, transparent 0px, transparent 22px, rgba(212, 175, 55, 0.035) 22px, rgba(212, 175, 55, 0.035) 23px), repeating-linear-gradient(-45deg, transparent 0px, transparent 22px, rgba(212, 175, 55, 0.035) 22px, rgba(212, 175, 55, 0.035) 23px), radial-gradient(ellipse at center, rgba(92, 12, 12, 0) 30%, rgba(20, 3, 3, 0.5) 100%);
    background-size: 30px 30px, 30px 30px, 100% 100%;
    position: relative;
    overflow: hidden;
}

section#spilledatoer {
    background: #090909;
}

section#andre-byer p,
section#spilledatoer p {
    color: var(--tn-cream);
}

/* Gold divider lines top/bottom */
/*.tn-video-section::before,
.tn-interview-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--tn-gold-dark) 15%, var(--tn-gold-mid) 30%, var(--tn-gold-light) 50%, var(--tn-gold-mid) 70%, var(--tn-gold-dark) 85%, transparent);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    z-index: 1;
}

.tn-video-section::after,
.tn-interview-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--tn-gold-dark) 15%, var(--tn-gold-mid) 30%, var(--tn-gold-light) 50%, var(--tn-gold-mid) 70%, var(--tn-gold-dark) 85%, transparent);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    z-index: 1;
}*/

/* Text content styling */
.tn-video-section .lm-image-media__text {
    color: rgba(245, 230, 200, 0.7);
    font-size: clamp(14px, 1.8vw, 17px);
    line-height: 1.85;
}

/* ─── Ornamental Video Frame (shared) ─── */
.tn-video-section .lm-image-media__media,
.tn-interview-section .lm-image-media__media {
    position: relative;
}

/* Gold border frame */
.tn-video-section .lm-image-media__media::before,
.tn-interview-section .lm-image-media__media::before {
    content: '';
    position: absolute;
    inset: -5px;
    border: 5px solid;
    border-image: linear-gradient(180deg, var(--tn-gold-dark) 0%, var(--tn-gold-mid) 15%, var(--tn-gold-light) 30%, var(--tn-gold-pale) 50%, var(--tn-gold-light) 70%, var(--tn-gold-mid) 85%, var(--tn-gold-dark) 100%) 1;
    box-shadow: 0 0 0 1px rgba(139, 105, 20, 0.6), 0 0 30px rgba(212, 175, 55, 0.15), 0 0 60px rgba(139, 26, 26, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.2);
    z-index: 2;
    pointer-events: none;
}

/* Inner border line */
.tn-video-section .lm-image-media__media::after,
.tn-interview-section .lm-image-media__media::after {
    content: '';
    position: absolute;
    inset: 7px;
    border: 2px solid rgba(212, 175, 55, 0.35);
    pointer-events: none;
    z-index: 3;
}

.tn-video-section video,
.tn-interview-section video {
    border-radius: 0 !important;
}

/* ==========================================================================
   Interview Video Section — Centered, no text
   ========================================================================== */

.tn-interview-section .lm-image-media {
    justify-content: center;
}

.tn-interview-section .lm-image-media__media {
    max-width: 900px;
    margin: 0 auto;
}

/* ==========================================================================
   Køb billet — Headings, cards, and section overrides
   ========================================================================== */

/* Section headings on ticket page — h2 and subheaders */
section[id] h2 {
    color: var(--tn-cream);
}

.lm-section__subheader {
    color: var(--tn-gold-mid);
    font-size: 0.6875rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    border: 1px solid rgba(212, 175, 55, 0.3);
    padding: 5px 14px;
    display: inline-block;
    border-radius: 2px;
}

/* Center the inline-block subheader */
.lm-section__subheader.text-center {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.lm-page-intro__text {
    color: rgba(245, 230, 200, 0.7);
}

.lm-dates-group__heading {
    color: var(--tn-cream);
}

/* Backdrop blur glass effect on cards */
.lm-date-card,
.lm-vip-card,
.lm-price-card {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(212, 175, 55, 0.12);
}

.lm-date-card:hover,
.lm-vip-card:hover,
.lm-price-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(212, 175, 55, 0.25);
}

/* Price card text for dark bg */
.lm-price-card__title {
    color: var(--tn-cream);
}

.lm-price-card__label {
    color: rgba(245, 230, 200, 0.5);
}

.lm-price-card__price {
    color: var(--tn-gold-mid);
}

.lm-price-card__sale {
    color: var(--tn-red-glow);
}

.lm-price-card__original {
    color: rgba(245, 230, 200, 0.4);
}

/* ==========================================================================
   VIP Pakker — v2 Card Design
   ========================================================================== */

section#vip {
    background: #000000 !important;
    overflow: hidden;
}

section#vip .lm-container {
    max-width: 1050px;
}

section#vip .lm-section__header {
    margin-bottom: 80px;
}

/* Row needs overflow visible for ninja images + more gap */
section#vip .row {
    overflow: visible;
    --bs-gutter-x: 2.5rem;
    row-gap: 2.5rem;
}

section#vip p {
    color: rgba(245, 230, 200, 0.78);
}

/* ─── Card — dark glass with gold border ─── */
.lm-vip-card {
    position: relative;
    padding-top: 40px;
    background: linear-gradient(160deg, rgba(26, 5, 5, 0.85) 0%, rgba(10, 2, 4, 0.95) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(212, 175, 55, 0.15);
    text-align: left;
    overflow: visible;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.lm-vip-card:hover {
    border-color: rgba(212, 175, 55, 0.35);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(212, 175, 55, 0.08);
}

/* Subtle glow behind card on hover */
.col-md-6:has(.lm-vip-card)::after {
    content: "";
    position: absolute;
    inset: 60px -20px -30px;
    background: radial-gradient(ellipse at 70% 100%, rgba(139, 26, 26, 0.2) 0%, transparent 65%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.col-md-6:has(.lm-vip-card):hover::after {
    opacity: 1;
}

/* ─── Ninja image — floating, top-right ─── */
.lm-vip-card__image {
    position: absolute;
    top: -60px;
    right: -50px;
    width: 200px;
    margin: 0;
    pointer-events: none;
    z-index: 10;
    filter: drop-shadow(-6px 0 30px rgba(139, 26, 26, 0.25));
    transition: filter 0.4s ease;
}

.lm-vip-card:hover .lm-vip-card__image {
    filter: drop-shadow(-6px 0 55px rgba(139, 26, 26, 0.5));
}

.lm-vip-card__image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    object-fit: contain;
    animation: tn-float 3.5s ease-in-out infinite;
}

/* Offset second card's float animation */
.col-md-6:nth-child(2) .lm-vip-card__image img {
    animation-delay: -1.75s;
}

/* Second card: gold shadow variant */
.col-md-6:nth-child(2) .lm-vip-card__image {
    filter: drop-shadow(-6px 0 30px rgba(212, 175, 55, 0.2));
}

.col-md-6:nth-child(2) .lm-vip-card:hover .lm-vip-card__image {
    filter: drop-shadow(-6px 0 55px rgba(212, 175, 55, 0.4));
}

/* ─── Title area — padding-right avoids ninja overlap ─── */
.lm-vip-card__title {
    font-size: clamp(1.75rem, 4vw, 2.2rem);
    color: var(--tn-cream);
    padding-right: 90px;
    margin-bottom: 14px;
}

/* Subtitle — badge/pill style like our subheadings */
.lm-vip-card__subtitle {
    width: fit-content;
    color: var(--tn-gold-mid);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid rgba(212, 175, 55, 0.3);
    padding: 5px 14px;
    display: inline-block;
    border-radius: 2px;
    opacity: 1;
    margin-bottom: 14px;
    padding-right: 14px;
}

/* Description — italic intro with left border */
.lm-vip-card__description {
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(245, 230, 200, 0.6);
    font-style: italic;
    border-left: 2px solid rgba(139, 26, 26, 0.45);
    padding-left: 14px;
    padding-right: 100px;
    margin-bottom: 24px;
}

.lm-vip-card__description p {
    margin: 0;
}

/* ─── Divider before features ─── */
.lm-vip-card__features {
    border-top: 1px solid rgba(212, 175, 55, 0.12);
    padding-top: 20px;
    margin-top: auto;
    margin-bottom: 24px;
}

/* Feature icon — filled, gold-mid color */
.lm-vip-card__feature-icon {
    color: var(--tn-gold-mid);
}

.lm-vip-card__feature-icon svg {
    fill: currentColor;
    stroke: none;
}

/* Feature text — cream */
.lm-vip-card__feature-text {
    color: rgba(245, 230, 200, 0.78);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Feature default checkmark color */
.lm-vip-card__features li::before {
    color: var(--tn-gold-mid);
}

/* ─── Prices — side by side, gold highlight ─── */
.lm-vip-card__prices {
    border-top: 1px solid rgba(212, 175, 55, 0.12);
    border-bottom: 1px solid rgba(212, 175, 55, 0.12);
    padding: 18px 0;
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
    gap: var(--lm-spacing-xl);
}

.lm-vip-card__price-item {
    text-align: left;
}

.lm-vip-card__price-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(245, 230, 200, 0.4);
    display: block;
    margin-bottom: 2px;
}

.lm-vip-card__price-value {
    font-family: var(--lm-font-headline);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--tn-gold-light);
    line-height: 1;
    display: block;
}

.lm-vip-card__price-sale {
    color: var(--tn-red-glow);
}

.lm-vip-card__price-original {
    font-size: 0.875rem;
    color: rgba(245, 230, 200, 0.4);
}

.lm-vip-card .lm-btn {
    width: 100%;
}


/* Second card — gold accent variant */
.col-md-6:nth-child(2) .lm-vip-card__description {
    border-left-color: rgba(212, 175, 55, 0.35);
}

.col-md-6:nth-child(2) .lm-vip-card:hover {
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow: 0 20px 60px rgba(180, 130, 20, 0.18), inset 0 1px 0 rgba(212, 175, 55, 0.08);
}

.col-md-6:nth-child(2):has(.lm-vip-card)::after {
    background: radial-gradient(ellipse at 70% 100%, rgba(180, 130, 20, 0.2) 0%, transparent 65%);
}

/* ─── VIP Responsive — tablet ─── */
@media (max-width: 991.98px) {
    section#vip .lm-section__header {
        margin-bottom: 60px;
    }

    .lm-vip-card__image {
        width: 170px;
        top: -50px;
        right: -30px;
    }

    .lm-vip-card__title {
        padding-right: 80px;
    }

    .lm-vip-card__description {
        padding-right: 80px;
    }
}

/* ─── VIP Responsive — mobile (stacked) ─── */
@media (max-width: 767.98px) {
    section#vip .lm-section__header {
        margin-bottom: 50px;
    }

    section#vip .row {
        row-gap: 3rem;
    }

    .lm-vip-card {
        padding-top: 35px;
    }

    .lm-vip-card__image {
        width: 150px;
        top: -45px;
        right: -16px;
    }

    .lm-vip-card__title {
        padding-right: 70px;
    }

    .lm-vip-card__description {
        padding-right: 60px;
    }

    .lm-vip-card__prices {
        gap: var(--lm-spacing-lg);
    }
}

@media (max-width: 575.98px) {
    .lm-vip-card {
        padding-top: 30px;
    }

    .lm-vip-card__image {
        width: 120px;
        top: -35px;
        right: -8px;
    }

    .lm-vip-card__title {
        padding-right: 55px;
        font-size: 1.4rem;
    }

    .lm-vip-card__description {
        padding-right: 50px;
        font-size: 0.8125rem;
    }

    .lm-vip-card__feature-text {
        font-size: 0.8125rem;
    }
}

/* Legend on dark bg */
.lm-dates-legend {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(212, 175, 55, 0.1);
}

/* ==========================================================================
   Credits Page — Ornate framed card
   ========================================================================== */

/* Section background — dark texture with overlay */
.lm-section--credits {
    position: relative;
    padding: 80px 0 100px;
    overflow: hidden;
}

/* Dark overlay for readability */
.lm-section--credits > .lm-container {
    position: relative;
    z-index: 1;
}

/* Main credits container — glass card */
.lm-credits {
    max-width: 950px;
    margin: 0 auto;
    position: relative;
    background: rgba(26, 5, 5, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgba(212, 175, 55, 0.2);
    padding: 70px 50px 60px;
    box-shadow:
        0 20px 80px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(212, 175, 55, 0.1),
        inset 0 -1px 0 rgba(212, 175, 55, 0.05);
}

/* Gold gradient glow along top edge */
.lm-credits::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--tn-gold-dark) 15%, var(--tn-gold-mid) 30%, var(--tn-gold-light) 50%, var(--tn-gold-mid) 70%, var(--tn-gold-dark) 85%, transparent);
    border-radius: 3px;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
    z-index: 3;
}

/* ─── Corner images ─── */
.tn-credits-corners {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.tn-credits-corners__img {
    position: absolute;
    width: clamp(55px, 9vw, 110px);
    height: auto;
    opacity: 0.65;
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.2));
}

.tn-credits-corners__img--tl { top: 10px; left: 10px; }
.tn-credits-corners__img--tr { top: 10px; right: 10px; transform: scaleX(-1); }
.tn-credits-corners__img--bl { bottom: 10px; left: 10px; transform: scaleY(-1); }
.tn-credits-corners__img--br { bottom: 10px; right: 10px; transform: scale(-1, -1); }

/* ─── Row styling ─── */
.lm-credits__row {
    gap: 28px 48px;
    margin-bottom: 0;
    padding: 28px 0;
}

/* ─── Person styling ─── */
.lm-credits__person {
    min-width: 180px;
}

/* Title — gold badge style */
.lm-credits__title {
    font-size: 0.65rem;
    color: var(--tn-gold-mid);
    opacity: 1;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: rgba(212, 175, 55, 0.06);
    border: 1px solid rgba(212, 175, 55, 0.2);
    padding: 3px 12px;
    border-radius: 2px;
    display: inline-block;
    margin-bottom: 10px;
    align-self: center;
}

/* 3rd row — strip badge from titles */
.lm-credits__row:nth-child(2) {
    padding-bottom: 10px;
}

.lm-credits__row:nth-child(3) {
    padding-top: 0;
}

.lm-credits__row:nth-child(3) .lm-credits__title {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
}

/* Name — larger, cream text */
.lm-credits__name {
    color: var(--tn-cream);
    font-size: clamp(1.1rem, 2.5vw, 1.2rem);
    letter-spacing: 0.02em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Highlighted names — gold glow */
.lm-credits__person--highlighted .lm-credits__name {
    color: var(--tn-gold-light);
    font-size: clamp(1.4rem, 3.5vw, 2.2rem);
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.25), 0 2px 6px rgba(0, 0, 0, 0.4);
}

.lm-credits__person--highlighted .lm-credits__title {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.35);
}

/* ─── Ninja figures flanking the credits box ─── */
.tn-credits-ninjas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    max-width: 1050px;
    margin: 0 auto;
}

.tn-credits-ninja {
    position: absolute;
    bottom: 180px;
    height: clamp(320px, 45vw, 550px);
    width: auto;
    filter: drop-shadow(0 4px 30px rgba(0, 0, 0, 0.6));
}

.tn-credits-ninja--left {
    left: 0;
    transform: translateX(-30%);
}

.tn-credits-ninja--right {
    right: 0;
    transform: translateX(30%);
}

/* ─── Scroll reveal — initial hidden state, GSAP ScrollTrigger reveals ─── */
.lm-credits__row {
    opacity: 0;
    transform: translateY(24px);
}

/* ─── Page intro text on credits ─── */
.lm-section--credits ~ .lm-section .lm-page-intro__text,
.lm-section--credits .lm-page-intro__text {
    color: rgba(245, 230, 200, 0.7);
}

/* ─── Responsive ─── */
@media (max-width: 767.98px) {
    .lm-section--credits {
        padding: 50px 0 60px;
    }

    .lm-credits {
        padding: 50px 20px 40px;
    }

    .tn-credits-corners__img {
        width: clamp(40px, 12vw, 70px);
    }

    /* Ninjas: smaller + more cropped on tablet */
    .tn-credits-ninja {
        height: clamp(250px, 38vw, 380px);
    }

    .lm-credits__person {
        min-width: 140px;
    }

    .lm-credits__row {
        gap: 20px 30px;
        padding: 20px 0;
    }

}

@media (max-width: 575.98px) {
    .lm-credits {
        padding: 40px 16px 32px;
        border-radius: 6px;
    }

    .tn-credits-corners__img {
        width: 38px;
        opacity: 0.5;
    }

    /* Hide ninjas on mobile — would be cropped > 40% */
    .tn-credits-ninja {
        display: none;
    }

    .lm-credits__person {
        min-width: 120px;
    }

    .lm-credits__name {
        font-size: 1rem;
    }

}

/* ==========================================================================
   Om Forestillingen — Columns section with glass cards + corners
   ========================================================================== */

/* Section background — dark texture, matching credits page */
.lm-section--columns {
    position: relative;
    overflow: hidden;
}

.lm-section--columns .container {
    z-index: 1;
    position: relative;
}

/* Heading */
.lm-section--columns .lm-section__heading {
    color: var(--tn-cream);
    font-size: clamp(2rem, 5vw, 3.5rem);
    letter-spacing: 0.04em;
    margin-bottom: 0.25em;
}

/* Subheading */
.lm-section--columns .lm-section__subheading {
    color: var(--tn-gold-mid);
    border-color: rgba(212, 175, 55, 0.4);
}

/* Gold decorative line under headings */
.lm-section--columns > .lm-container > .lm-section__headings::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    margin: var(--lm-spacing-md) auto 0;
    background: linear-gradient(90deg, transparent, var(--tn-gold-mid), transparent);
}

/* ─── Glass card for each column ─── */
.lm-section--columns .lm-columns__item {
    position: relative;
    background: rgba(26, 5, 5, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 2px solid rgba(212, 175, 55, 0.18);
    padding: 55px 40px 45px;
    box-shadow:
        0 15px 60px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(212, 175, 55, 0.08),
        inset 0 -1px 0 rgba(212, 175, 55, 0.04);
}

/* Gold gradient glow along top edge of each card */
.lm-section--columns .lm-columns__item::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tn-gold-dark) 20%, var(--tn-gold-mid) 50%, var(--tn-gold-dark) 80%, transparent);
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.25);
    z-index: 3;
}

/* Column heading inside card */
.lm-section--columns .lm-columns__item .lm-section__heading {
    color: var(--tn-gold-light);
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    letter-spacing: 0.03em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Column text */
.lm-section--columns .lm-columns__text {
    color: rgba(245, 230, 200, 0.7);
    line-height: 1.85;
    font-size: clamp(0.875rem, 1.6vw, 1rem);
}

.lm-section--columns .lm-columns__text p {
    margin-bottom: 1em;
}

.lm-section--columns .lm-columns__text p:last-child {
    margin-bottom: 0;
}

/* ─── Corner images for column cards ─── */
.tn-col-corners {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.tn-col-corners__img {
    position: absolute;
    width: clamp(40px, 7vw, 80px);
    height: auto;
    opacity: 0.55;
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.15));
}

.tn-col-corners__img--tl { top: 8px; left: 8px; }
.tn-col-corners__img--tr { top: 8px; right: 8px; transform: scaleX(-1); }
.tn-col-corners__img--bl { bottom: 8px; left: 8px; transform: scaleY(-1); }
.tn-col-corners__img--br { bottom: 8px; right: 8px; transform: scale(-1, -1); }

/* ─── Responsive — tablet ─── */
@media (max-width: 767.98px) {
    .lm-section--columns .lm-columns__item {
        padding: 45px 24px 35px;
    }

    .tn-col-corners__img {
        width: clamp(32px, 10vw, 55px);
    }
}

/* ─── Responsive — mobile ─── */
@media (max-width: 575.98px) {
    .lm-section--columns .lm-columns__item {
        padding: 38px 18px 28px;
    }

    .tn-col-corners__img {
        width: 30px;
        opacity: 0.4;
    }
}

/* ==========================================================================
   Om Forestillingen — Cream parchment "About" section (.tn-about)
   ========================================================================== */

/* Section background — cream with paper-line texture (matches ninja scroll) */
.tn-about {
    background: var(--tn-cream);
    background-image: repeating-linear-gradient(90deg,
        transparent, transparent 28px,
        rgba(180, 150, 100, 0.06) 28px, rgba(180, 150, 100, 0.06) 29px);
    position: relative;
    overflow: hidden;
}

/* Paper texture overlay — aged warmth */
.tn-about::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(180, 140, 80, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(160, 120, 60, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.tn-about > .container {
    position: relative;
    z-index: 2;
}

/* ─── Fade transitions top/bottom ─── */
.tn-about-fade-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, rgba(17, 17, 24, 0.15), transparent);
    pointer-events: none;
    z-index: 1;
}

.tn-about-fade-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, rgba(17, 17, 24, 0.12), transparent);
    pointer-events: none;
    z-index: 1;
}

/* ─── Typography — inverted for light background ─── */

/* Heading — deep red */
.tn-about .lm-section__heading {
    color: var(--tn-red-mid);
    text-shadow: 1px 1px 0 rgba(200, 160, 80, 0.25);
}

/* Subheading badge — dark red accent */
.tn-about .lm-section__subheading {
    color: var(--tn-red-deep);
    border-color: rgba(139, 26, 26, 0.3);
    background: rgba(139, 26, 26, 0.05);
}

/* Gold decorative line under headings */
.tn-about .lm-section__headings::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    margin: var(--lm-spacing-md) auto 0;
    background: linear-gradient(90deg, transparent, var(--tn-gold-mid), transparent);
}

/* Body text — dark brown, matching ninja scroll paper */
.tn-about .lm-image-media__text,
.tn-about .lm-image-media__text p {
    color: #2c1810;
    font-size: clamp(14px, 2.5vw, 17px);
    line-height: 1.9;
    letter-spacing: 0.02em;
}

/* Bold text in red */
.tn-about .lm-image-media__text strong {
    color: var(--tn-red-mid);
}

/* Italic text in gold */
.tn-about .lm-image-media__text em {
    color: var(--tn-gold-dark);
}

/* ─── ninja3.png — natural proportions + decorative effect ─── */

.tn-about .lm-image-media__media {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tn-about .lm-image-media__media img {
    width: auto;
    max-width: 100%;
    max-height: 900px;
    object-fit: contain;
    border-radius: 0;
    filter: drop-shadow(0 8px 30px rgba(92, 12, 12, 0.25))
            drop-shadow(0 4px 15px rgba(212, 175, 55, 0.15));
    margin-bottom: -350px;
}

/* ─── Kanji watermark ─── */
.tn-about-watermark {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(150px, 25vw, 300px);
    color: rgba(180, 140, 80, 0.2);
    font-weight: 900;
    pointer-events: none;
    z-index: 1;
    line-height: 1;
    user-select: none;
}

/* ─── Corner decorations ─── */
.tn-about-corners {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.tn-about-corners__img {
    position: absolute;
    width: clamp(50px, 8vw, 100px);
    height: auto;
    opacity: 0.35;
    filter: drop-shadow(0 0 6px rgba(139, 105, 20, 0.15))
            sepia(0.4) saturate(0.5) brightness(0.8);
}

.tn-about-corners__img--tl { top: 12px; left: 12px; }
.tn-about-corners__img--tr { top: 12px; right: 12px; transform: scaleX(-1); }
.tn-about-corners__img--bl { bottom: 12px; left: 12px; transform: scaleY(-1); }
.tn-about-corners__img--br { bottom: 12px; right: 12px; transform: scale(-1, -1); }

/* ─── GSAP initial hidden state ─── */
.tn-about .lm-section__headings {
    opacity: 0;
    transform: translateY(20px);
}

.tn-about .lm-image-media__text {
    opacity: 0;
    transform: translateX(-30px);
}

.tn-about .lm-image-media__media {
    opacity: 0;
    transform: translateX(30px) scale(0.92);
}

/* ─── Responsive — mobile ─── */
@media (max-width: 767.98px) {
    .tn-about .lm-image-media__media img {
        max-height: 650px;
    }

    .tn-about-watermark {
        font-size: clamp(80px, 30vw, 150px);
        color: rgba(180, 140, 80, 0.03);
    }

    .tn-about-corners__img {
        width: clamp(35px, 10vw, 55px);
        opacity: 0.25;
    }

    /* Vertical animation instead of horizontal on mobile */
    .tn-about .lm-image-media__text {
        transform: translateY(20px);
    }

    .tn-about .lm-image-media__media {
        transform: translateY(20px) scale(0.95);
    }
}

@media (max-width: 575.98px) {
    .tn-about-corners__img {
        width: 30px;
        opacity: 0.2;
    }
}

/* ==========================================================================
   Preloader — Shuriken spinner, black bg, white text
   ========================================================================== */

.lm-preloader {
    background: #000 !important;
}

.lm-preloader__text {
    color: #fff !important;
}

.lm-preloader__bar-track {
    background: rgba(255, 255, 255, 0.15) !important;
}

.lm-preloader__bar {
    background: var(--tn-gold-mid) !important;
}

.tn-preloader-shuriken {
    width: 80px;
    height: 80px;
    animation: tn-spin 0.8s linear infinite;
}

@keyframes tn-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ==========================================================================
   Responsive — Tablet & Mobile
   ========================================================================== */

@media (max-width: 767.98px) {
    /* Ninja Scroll — scale down for mobile */
    .tn-scroll-pin-wrapper {
        max-width: 100%;
        padding: 0 12px;
    }

    .tn-scroll-roll {
        max-width: 100%;
        height: 36px;
    }

    .tn-roll-cap {
        width: 26px;
        height: 40px;
        top: -2px;
    }

    .tn-roll-cap::after {
        width: 4px;
        height: 20px;
    }

    .tn-roll-body,
    .tn-roll-pattern {
        left: 20px;
        right: 20px;
    }

    .tn-scroll-paper-wrapper {
        width: calc(100% - 40px);
        max-width: 100%;
    }

    .tn-paper-content {
        padding: clamp(16px, 5vw, 30px);
    }

    .tn-paper-watermark {
        font-size: clamp(60px, 20vw, 120px);
    }

}

@media (max-width: 575.98px) {
    .lm-topbar {
        font-size: 0.7rem;
    }

    .tn-hero-bottom {
        bottom: 50px;
    }

    .tn-scroll-roll {
        height: 30px;
    }

    .tn-roll-cap {
        width: 22px;
        height: 34px;
    }

    .tn-roll-body,
    .tn-roll-pattern {
        left: 16px;
        right: 16px;
        border-radius: 14px;
    }

    .tn-scroll-paper-wrapper {
        width: calc(100% - 32px);
    }

    .tn-scroll-paper {
        border-left-width: 2px;
        border-right-width: 2px;
    }

    .lm-vip-card {
        padding: var(--lm-spacing-md);
    }
}

/* ==========================================================================
   3D Decorative Shurikens — Three.js canvases
   ========================================================================== */

.tn-shuriken-canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
    z-index: 0;
}

/* Hero canvas extends below section into next section */
.lm-page-hero .tn-shuriken-canvas {
    bottom: -250px;
    height: calc(100% + 250px) !important;
}

/* Footer needs positioning context for canvas */
.lm-footer {
    position: relative;
    overflow: hidden;
}

/* GSAP animation safety */
.gsap-animated {
    transition: none !important;
}


/* ==========================================================================
   Medvirkende — Cast Cards (Ninja themed)
   ========================================================================== */

/* Override ensemble bg-light to match dark theme */
#ensemble.bg-light {
    background: transparent !important;
}

/* Card — dark frame with gold border */
.lm-person-card {
    background: rgba(17, 17, 24, 0.6);
    border: 2px solid rgba(212, 175, 55, 0.25);
    position: relative;
    transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

.lm-person-card:hover {
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow:
        0 0 25px rgba(212, 175, 55, 0.12),
        0 20px 40px rgba(0, 0, 0, 0.4);
    transform: translateY(-6px);
}

/* Content — overlay on image with gradient fade */
.lm-person-card .lm-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 50px 16px 20px;
    background: linear-gradient(to top,
        rgba(17, 17, 24, 0.95) 0%,
        rgba(17, 17, 24, 0.6) 50%,
        transparent 100%);
    z-index: 2;
    text-align: center;
}

/* Gold accent line above name */
.lm-person-card .lm-card__content::before {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    margin: 0 auto 12px;
    background: linear-gradient(90deg, transparent, var(--tn-gold-mid), transparent);
}

/* Name — cream with text shadow */
.lm-person-card__name {
    color: var(--tn-cream);
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    margin-bottom: 4px;
}

/* Role — gold accent */
.lm-person-card__role {
    color: var(--tn-gold-mid);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Image zoom on hover */
.lm-person-card:hover .lm-card__media img {
    transform: scale(1.08);
}

/* Info indicator — gold themed */
.lm-person-card__indicator {
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--tn-gold-mid);
}

.lm-person-card__indicator:hover {
    background: rgba(212, 175, 55, 0.4);
}

/* Corner decorations on cards */
.tn-card-corners {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.tn-card-corners__img {
    position: absolute;
    width: clamp(28px, 5vw, 45px);
    height: auto;
}

.tn-card-corners__img--tl { top: 6px; left: 6px; }
.tn-card-corners__img--tr { top: 6px; right: 6px; transform: scaleX(-1); }
.tn-card-corners__img--bl { bottom: 6px; left: 6px; transform: scaleY(-1); }
.tn-card-corners__img--br { bottom: 6px; right: 6px; transform: scale(-1, -1); }

/* GSAP initial states for scroll reveal */
#hovedroller .lm-person-card,
#ensemble .lm-person-card {
    opacity: 0;
    transform: translateY(30px);
}

/* Responsive */
@media (max-width: 767.98px) {
    .tn-card-corners__img {
        width: 22px;
    }
    .lm-person-card .lm-card__content {
        padding: 40px 12px 16px;
    }
}

@media (max-width: 575.98px) {
    .tn-card-corners__img {
        width: 18px;
    }
}


/* ==========================================================================
   Presale — Hero, Countdown & Dates (Ninja themed)
   ========================================================================== */

/* ─── Hero — background image with dark overlay ─── */

.lm-presale-hero {
    background: var(--tn-dark) url('/ternetninja/wp-content/uploads/ternet_hero_bg.jpg') center / cover no-repeat !important;
    position: relative;
    padding: 60px 0 80px !important;
    overflow: hidden;
}

.lm-presale-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.75) 0%,
            rgba(0, 0, 0, 0.45) 40%,
            rgba(0, 0, 0, 0.75) 100%);
    pointer-events: none;
    z-index: 0;
}

.lm-presale-hero > .lm-container {
    position: relative;
    z-index: 2;
}

/* Logo — smaller on large screens */
.lm-presale-hero__logo--hero img {
    max-width: 700px;
}

/* Heading — cream with glow */
.lm-presale-hero h1 {
    color: var(--tn-cream);
    text-shadow: 0 2px 20px rgba(212, 175, 55, 0.3), 0 2px 8px rgba(0, 0, 0, 0.6);
    font-size: clamp(1.6rem, 4vw, 2.8rem) !important;
    letter-spacing: 0.08em;
}

/* ─── Countdown — styled number cards ─── */

.lm-presale-hero .lm-countdown {
    gap: 12px;
}

.lm-presale-hero .lm-countdown__item {
    background: rgba(17, 17, 24, 0.7);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    padding: 16px 20px 12px;
    min-width: 90px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.lm-presale-hero .lm-countdown__number {
    color: var(--tn-cream);
    text-shadow: 0 0 25px rgba(212, 175, 55, 0.3);
    font-size: clamp(2.5rem, 6vw, 4rem);
}

.lm-presale-hero .lm-countdown__label {
    color: var(--tn-gold-mid);
    font-weight: 600;
    letter-spacing: 0.1em;
    opacity: 1;
}

.lm-presale-hero .lm-countdown__separator {
    color: var(--tn-gold-mid);
    font-size: clamp(1.8rem, 4vw, 3rem);
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.25);
    opacity: 1;
    margin-top: -8px;
}

/* ─── Presale hero corners ─── */

.tn-presale-corners {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.tn-presale-corners__img {
    position: absolute;
    width: clamp(45px, 8vw, 90px);
    height: auto;
}

.tn-presale-corners__img--tl { top: 16px; left: 16px; }
.tn-presale-corners__img--tr { top: 16px; right: 16px; transform: scaleX(-1); }
.tn-presale-corners__img--bl { bottom: 16px; left: 16px; transform: scaleY(-1); }
.tn-presale-corners__img--br { bottom: 16px; right: 16px; transform: scale(-1, -1); }

/* ─── Dates section — red background with pattern ─── */

.lm-presale-hero ~ .bg-light {
    background:
        radial-gradient(circle, rgba(255, 200, 100, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, var(--tn-red-deep) 0%, var(--tn-dark-red) 100%) !important;
    background-size: 20px 20px, 100% 100% !important;
    position: relative;
}

/* Dates heading — cream on red */
.lm-presale-hero ~ .bg-light h2 {
    color: var(--tn-cream);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Date cards — dark with gold border */
.lm-presale-date {
    background: rgba(17, 17, 24, 0.8) !important;
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 8px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.lm-presale-date:hover {
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.lm-presale-date__city {
    color: var(--tn-cream) !important;
}

.lm-presale-date__venue {
    color: rgba(245, 230, 200, 0.5) !important;
}

.lm-presale-date__range {
    color: var(--tn-gold-mid) !important;
}

.lm-presale-date__icon {
    opacity: 0.8;
    color: var(--tn-gold-mid);
}

.lm-presale-date__icon path,
.lm-presale-date__icon {
    fill: var(--tn-gold-mid);
    stroke: var(--tn-gold-mid);
}

/* ─── Presale responsive ─── */

@media (max-width: 767.98px) {
    .lm-presale-hero {
        padding: 40px 0 60px !important;
    }
    .lm-presale-hero .lm-countdown__item {
        padding: 12px 14px 10px;
        min-width: 70px;
    }
    .tn-presale-corners__img {
        width: clamp(35px, 10vw, 50px);
    }

    /* Dates — stack to 2 rows */
    .lm-presale-dates {
        grid-template-columns: 1fr !important;
    }
    .lm-presale-date {
        display: flex !important;
        flex-wrap: wrap;
        gap: var(--lm-spacing-sm) var(--lm-spacing-md);
        padding: var(--lm-spacing-md) !important;
    }
    .lm-presale-date__city {
        white-space: normal;
    }
    .lm-presale-date__venue {
        white-space: normal;
        flex: 1;
    }
    .lm-presale-date__range {
        width: 100%;
        justify-content: flex-start;
    }
    .lm-presale-date .lm-btn--small {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .lm-presale-hero .lm-countdown {
        gap: 8px;
    }
    .lm-presale-hero .lm-countdown__item {
        padding: 10px 10px 8px;
        min-width: 60px;
    }
    .lm-presale-hero .lm-countdown__separator {
        margin-top: -4px;
    }
    .tn-presale-corners__img {
        width: 30px;
    }
    .tn-presale-corners__img--tl { top: 10px; left: 10px; }
    .tn-presale-corners__img--tr { top: 10px; right: 10px; }
    .tn-presale-corners__img--bl { bottom: 10px; left: 10px; }
    .tn-presale-corners__img--br { bottom: 10px; right: 10px; }

    .lm-topbar {
        font-size: 0.55rem;
        letter-spacing: .1em;
    }
    .lm-header__logo img, .lm-header__logo svg {
        height: 44px;
    }
}


@media screen and (max-height: 1080px) {
    .tn-hero .lm-hero__logo {
        max-width: clamp(400px, 95vw, 750px);
    }
}

@media screen and (max-width: 2000px) {
    .tn-hero-frame__corner {
        width: clamp(100px, 7vw, 300px);
    }
}

@media screen and (max-width: 1700px) {
    .tn-hero-frame__corner--tr,
    .tn-hero-frame__corner--tl {
        display: none;
    }
}

@media screen and (max-width: 1450px) {
    .tn-hero .lm-hero__subtitle {
        white-space: break-spaces;
        line-height: 1;
    }

    .tn-hero-bottom {
        position: absolute;
        bottom: 2vw;
    }

    .tn-hero-ninjas {
        bottom: -12vw;
        width: 85%;
        min-width: 1180px;
    }
}
@media screen and (max-width: 991px) {
    .tn-hero-headline {
        width: 75vw;
    }
    .tn-hero .lm-hero__subtitle {
        font-size: 5vw;
    }
    .tn-hero-bottom {
        bottom: 10vw;
    }
    .tn-hero-character__img {
        margin-bottom: 10%;
    }
	
	.tn-hero .lm-hero__subtitle br {
        display: block;
    }
	.tn-hero .lm-hero__subtitle span {
        display: none;
    }
}

.lm-header__menu-label {
    opacity: 1 !important;
}