@font-face {
    font-family: "BreveSlabTitle";
    src: url("/wp-content/uploads/fonts/BreveSlabTitle-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "BreveSlabTitle";
    src: url("/wp-content/uploads/fonts/BreveSlabTitle-Book.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --active-state-color: #d07e8e;
}

.tc-animation-container {
    position: relative;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    background: transparent;
    transition: background 0.3s ease;
}

.tc-animation-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 62.5%;
    transform: scale(0.2);
    transform-origin: center center;
    transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease;
}

.tc-animation-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.tc-local-global-banner {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    user-select: none;
    cursor: grab;
}

.tc-local-global-banner:active {
    cursor: grabbing;
}

.tc-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.tc-bg-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #D50F36 0%, #8E1537 100%);
}

.tc-mountains-layer {
    position: absolute;
    top: 120%;
    left: 0;
    width: 100%;
    height: 545px;
    z-index: 4;
    transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tc-mountains {
    position: relative;
    width: 100%;
    height: 100%;
    background: url('assets/mountains.png') no-repeat center top;
    background-size: contain;
}

.tc-map-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    mix-blend-mode: luminosity;
}

.tc-map {
    position: absolute;
    max-width: 55%;
    height: auto;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.5s ease-in-out, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    bottom: 20%;
}

.tc-map svg{
    filter: drop-shadow(-5px 10px 0px #b01e42);
}

.state path{
    transition: fill 0.5s ease;
}

.tc-map.is-visible {
    opacity: 1;
    transform: scale(1);
}

.tc-map.tc-map-1 {
    width: 55%;
}

.tc-map.tc-planet-1 {
    right: 0;
    max-width: unset;
    height: 130%;
    top: 0;
    transform: translate(45%, -8%);
}

.tc-map.tc-planet-2 {
    right: -2%;
    top: -2%;
    max-width: unset;
    width: 65%;
}

.tc-text-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    overflow: hidden;
    display: block;
    color: white;
}

.tc-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 120%;
    margin: 0;
    color: #fff;
    text-align: center;
    transition: top 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease-in-out, font-size 0.5s ease-in-out;
    opacity: 0;
    font-size: clamp(24px, 3.2vw, 70px);
    display: flex;   
    font-family: "BreveSlabTitle", serif;
    font-weight: 700;
    line-height: 1.2;       
    width: inherit;    
    box-sizing: border-box;
    justify-content: center;
}

.tc-title.ai-c {
    align-items: center;
}

.tc-title.ai-s {
    align-items: start;
}

.tc-title.jc-s {
    justify-content: start;
}

.tc-title.fd-c .tc-left{
    flex-direction: column;
}

h1.tc-title {
    font-size: clamp(36px, 7vw, 90px);
    line-height: 1.25;
}

h2.tc-title {
    font-size: clamp(20px, 5vw, 70px);
    padding: 0 8%;
}

h3.tc-title {
    font-size: clamp(16px, 4vw, 60px);
    justify-content: space-between;
    padding: 0 8%;
    text-shadow: 0 9px 12px #8E1537;
}

h3.tc-title.big {
    padding-right: 10%;   
}

h3.tc-title.big .tc-right {
    font-size: clamp(36px, 8vw, 120px);
}

h3.tc-title.big sup {
    font-size: clamp(18px, 4vw, 60px);
    line-height: 1.2;
    top: 0;
}

.tc-title span {
    display: flex;
}

.tc-title .sub-text {
    font-size: clamp(12px, 2vw, 22px);
    font-weight: normal;
    margin-top: 10px;
}

.tc-title .sub-text {
    font-size: clamp(12px, 3vw, 36px);
    font-weight: normal;
    margin-top: 10px;
}


.tc-title .tc-left {
    width: 50%;
    text-align: left;
}

.tc-title .tc-right {
    text-align: left;
}

.tc-stat-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2rem 0;
    padding: 0 2rem;
}

.tc-stat-text {
    font-size: clamp(1.2rem, 3vw, 2rem);
    font-weight: 600;
    flex: 1;
    text-align: left;
}

.tc-stat-number {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 800;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.tc-percent {
    font-size: 0.7em;
    vertical-align: super;
}

.tc-stat-prev {
    opacity: 0.6;
}

.tc-stat-current {
    opacity: 1;
}

.tc-states-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.tc-state-item {
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out forwards;
}

.tc-state-item:nth-child(1) { animation-delay: 0.1s; }
.tc-state-item:nth-child(2) { animation-delay: 0.2s; }
.tc-state-item:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tc-local-global-banner[data-step="1"] .tc-mountains-layer { top: 35%; }
.tc-local-global-banner[data-step="1"] .tc-title-1 { top: 23%; opacity: 1; }

.tc-local-global-banner[data-step="2"] .tc-mountains-layer { top: 50%; }
.tc-local-global-banner[data-step="2"] .tc-title-1 { top: 5%; font-size: clamp(20px, 4vw, 56px); opacity: 0.5; }
.tc-local-global-banner[data-step="2"] .tc-title-2 { top: 20%; opacity: 1; }

.tc-local-global-banner[data-step="3"] .tc-mountains-layer { top: 87%; }
.tc-local-global-banner[data-step="3"] .tc-map-layer { opacity: 1; }
.tc-local-global-banner[data-step="3"] .tc-map-1 { opacity: 1; transform: scale(1); }
.tc-local-global-banner[data-step="3"] .tc-map-1 .state path { fill: var(--active-state-color)}
.tc-local-global-banner[data-step="3"] .tc-map-1 .dc { fill: var(--active-state-color)}
.tc-local-global-banner[data-step="3"] .tc-title-1 { top: -20%; font-size: clamp(20px, 4vw, 56px);}
.tc-local-global-banner[data-step="3"] .tc-title-2 { top: 12%; opacity: 1; }
.tc-local-global-banner[data-step="3"] .tc-title-3 { top: 30%; opacity: 1; }

.tc-local-global-banner[data-step="4"] .tc-mountains-layer { top: 120%; }
.tc-local-global-banner[data-step="4"] .tc-map-layer { opacity: 1; }
.tc-local-global-banner[data-step="4"] .tc-map-1 { opacity: 1; transform: scale(1); }
.tc-local-global-banner[data-step="4"] .tc-map-1 .co { fill: var(--active-state-color)}
.tc-local-global-banner[data-step="4"] .tc-title-1 { top: -20%; font-size: clamp(20px, 4vw, 56px);}
.tc-local-global-banner[data-step="4"] .tc-title-2 { top: -20%;}
.tc-local-global-banner[data-step="4"] .tc-title-3 { top: 5%; opacity: 0.5;}
.tc-local-global-banner[data-step="4"] .tc-title-4 { top: 35%; opacity: 1; }

.tc-local-global-banner[data-step="5"] .tc-mountains-layer { top: 120%; }
.tc-local-global-banner[data-step="5"] .tc-map-layer { opacity: 1; }
.tc-local-global-banner[data-step="5"] .tc-map-1 { opacity: 1; transform: scale(1); }
.tc-local-global-banner[data-step="5"] .tc-map-1 .dc { fill: var(--active-state-color)}
.tc-local-global-banner[data-step="5"] .tc-title-1 { top: -20%; font-size: clamp(20px, 4vw, 56px);}
.tc-local-global-banner[data-step="5"] .tc-title-2 { top: -20%;}
.tc-local-global-banner[data-step="5"] .tc-title-3 { top: -20%;}
.tc-local-global-banner[data-step="5"] .tc-title-4 { top: 5%; opacity: 0.5;}
.tc-local-global-banner[data-step="5"] .tc-title-4-2 { top: 35%; opacity: 1; }

.tc-local-global-banner[data-step="6"] .tc-mountains-layer { top: 120%; }
.tc-local-global-banner[data-step="6"] .tc-map-layer { opacity: 1; }
.tc-local-global-banner[data-step="6"] .tc-map-1 { opacity: 1; transform: scale(1); }
.tc-local-global-banner[data-step="6"] .tc-map-1 .active-state { fill: var(--active-state-color)}
.tc-local-global-banner[data-step="6"] .tc-title-1 { top: -20%; font-size: clamp(20px, 4vw, 56px);}
.tc-local-global-banner[data-step="6"] .tc-title-2 { top: -20%;}
.tc-local-global-banner[data-step="6"] .tc-title-3 { top: -20%;}
.tc-local-global-banner[data-step="6"] .tc-title-4 { top: -20%;}
.tc-local-global-banner[data-step="6"] .tc-title-4-2 { top: 5%; opacity: 0.5;}
.tc-local-global-banner[data-step="6"] .tc-title-4-3 { top: 35%; opacity: 1; }

.tc-local-global-banner[data-step="7"] .tc-mountains-layer { top: 120%; }
.tc-local-global-banner[data-step="7"] .tc-map-layer { opacity: 1; }
.tc-local-global-banner[data-step="7"] .tc-map-1 { opacity: 1; transform: scale(1); }
.tc-local-global-banner[data-step="7"] .tc-title-1 { top: -20%; font-size: clamp(20px, 4vw, 56px);}
.tc-local-global-banner[data-step="7"] .tc-title-2 { top: -20%;}
.tc-local-global-banner[data-step="7"] .tc-title-3 { top: -20%;}
.tc-local-global-banner[data-step="7"] .tc-title-4 { top: -20%;}
.tc-local-global-banner[data-step="7"] .tc-title-4-2 { top: -20%;}
.tc-local-global-banner[data-step="7"] .tc-title-4-3 { top: 5%; opacity: 0.5;}
.tc-local-global-banner[data-step="7"] .tc-title-5 { top: 50%; opacity: 1; }

.tc-local-global-banner[data-step="8"] .tc-mountains-layer { top: 120%; }
.tc-local-global-banner[data-step="8"] .tc-bg-gradient { transform: rotate(180deg); }
.tc-local-global-banner[data-step="8"] .tc-map-layer { opacity: 1; }
.tc-local-global-banner[data-step="8"] .tc-planet-1 { opacity: 1; }
.tc-local-global-banner[data-step="8"] .tc-title-1 { top: -20%; font-size: clamp(20px, 4vw, 56px);}
.tc-local-global-banner[data-step="8"] .tc-title-2 { top: -20%;}
.tc-local-global-banner[data-step="8"] .tc-title-3 { top: -20%;}
.tc-local-global-banner[data-step="8"] .tc-title-4 { top: -20%;}
.tc-local-global-banner[data-step="8"] .tc-title-4-2 { top: -20%;}
.tc-local-global-banner[data-step="8"] .tc-title-4-3 { top: -50%;}
.tc-local-global-banner[data-step="8"] .tc-title-5 { top: -20%;}
.tc-local-global-banner[data-step="8"] .tc-title-6 { top: 35%; opacity: 1;}

.tc-local-global-banner[data-step="9"] .tc-mountains-layer { top: 120%; }
.tc-local-global-banner[data-step="9"] .tc-bg-gradient { transform: rotate(180deg); }
.tc-local-global-banner[data-step="9"] .tc-map-layer { opacity: 1; }
.tc-local-global-banner[data-step="9"] .tc-planet-2 { opacity: 1;}
.tc-local-global-banner[data-step="9"] .tc-title-1 { top: -20%; font-size: clamp(20px, 4vw, 56px);}
.tc-local-global-banner[data-step="9"] .tc-title-2 { top: -20%;}
.tc-local-global-banner[data-step="9"] .tc-title-3 { top: -20%;}
.tc-local-global-banner[data-step="9"] .tc-title-4 { top: -20%;}
.tc-local-global-banner[data-step="9"] .tc-title-4-2 { top: -20%;}
.tc-local-global-banner[data-step="9"] .tc-title-4-3 { top: -20%;}
.tc-local-global-banner[data-step="9"] .tc-title-5 { top: -20%;}
.tc-local-global-banner[data-step="9"] .tc-title-5 { top: -20%;}
.tc-local-global-banner[data-step="9"] .tc-title-6 { top: 35%; opacity: 1;}

.tc-step-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -36px;
    height: 28px;
    padding: 0 8px;
    z-index: 10;
}
.tc-step-controls .tc-track {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 50%;
    height: 2px;
    background: #dee2e6;
    transform: translateY(-50%);
}
.tc-step-controls .tc-progress {
    position: absolute;
    left: 8px;
    top: 50%;
    height: 2px;
    background: #d7b20a;
    transform: translateY(-50%);
    width: 0;
    transition: width 0.3s ease;
}
.tc-step-controls .tc-dots {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.tc-step-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #cfcfcf;
    position: relative;
    cursor: pointer;
}
.tc-step-dot.active {
    background: #d7b20a;
}
.tc-step-dot.active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 26px;
    border: 2px solid #d7b20a;
    border-radius: 50%;
}

.tc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    background: rgba(150, 20, 55, 0.26);
    color: #fff;    
    border: 1px solid #ffffff;
    padding: 0;
    margin: 0;
}
.tc-arrow:hover {
    background: #ffffff26;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-50%) scale(1.1);
}
.tc-arrow-prev {
    left: 2%;
}
.tc-arrow-next {
    right: 2%;
}
.tc-arrow svg {
    width: 50%;
    height: 50%;
    display: block;
}

.tc-fullscreen-btn {
    position: absolute;
    bottom: 5px;
    right: 45px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 15;
    padding: 0;
    margin: 0;
    border: #ffffff70 1px solid;
    border-radius: 8px;
}
.tc-fullscreen-btn svg {
    width: 24px;
    height: 24px;
    display: block;
}
svg.tc-fullscreen-exit {
    display: none;
}
.tc-animation-container.tc-fullscreen .tc-fullscreen-enter {
    display: none;
}
.tc-animation-container.tc-fullscreen .tc-fullscreen-exit {
    display: block;
}

.tc-animation-container.tc-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    margin: 0 !important;
    z-index: 99999 !important;
    background: #000;
}
.tc-animation-container.tc-fullscreen .tc-animation-wrapper {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100vw !important;
    height: 62.5vw !important;
    max-width: 160vh !important;
    max-height: 100vh !important;
    padding-bottom: 0 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}
.tc-animation-container.tc-fullscreen .tc-animation-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.tc-animation-container.tc-fullscreen.tc-portrait .tc-animation-wrapper {
    width: 100vh !important;
    height: 62.5vh !important;
    max-width: 160vw !important;
    max-height: 100vw !important;
    transform: translate(-50%, -50%) rotate(90deg) scale(1) !important;
}
.tc-animation-container.tc-fullscreen .tc-fullscreen-btn {
    position: fixed;
    bottom: 40px;
    right: 50px;
    width: 48px;
    height: 48px;
    z-index: 100000;
}
.tc-animation-container.tc-fullscreen .tc-step-controls {
    bottom: 10px;
    left: 40px;
    right: 40px;
}
.tc-animation-container.tc-fullscreen .tc-step-dot {
    background: rgba(255, 255, 255, 0.5);
}
.tc-animation-container.tc-fullscreen .tc-step-dot.active {
    background: #fff;
}
.tc-animation-container.tc-fullscreen .tc-step-dot.active::after {
    border-color: #fff;
}
.tc-animation-container.tc-fullscreen .tc-step-controls .tc-track {
    background: rgba(255, 255, 255, 0.3);
}
.tc-animation-container.tc-fullscreen .tc-step-controls .tc-progress {
    background: #fff;
}

.tc-compact-arrows .tc-arrow {
    height: 100%;
    border-radius: unset;
    border: none;
}
.tc-compact-arrows .tc-arrow:hover {
    background: #ffffff17;
    transform: translateY(-50%);
}
.tc-compact-arrows .tc-arrow-prev {
    left: 0;
    border-right: #ffffff70 1px solid;
}
.tc-compact-arrows .tc-arrow-next {
    right: 0;
    border-left: #ffffff70 1px solid;
}

@media (max-width: 992px) {
    .tc-arrow {
        width: 40px;
        height: 40px;
    }

    h2.tc-title,
    h3.tc-title {
        padding: 0 14% !important;
    }
}

@media (max-width: 768px) {
    .tc-test-mode .tc-fullscreen-btn {
        display: flex;
    }
    
    .tc-stat-block {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .tc-stat-text {
        text-align: center;
    }
}