/* ═══════════════════════════════════════
   TGM Animation Studio — Frontend Styles
   ═══════════════════════════════════════ */

/* ─── Shape Divider ─── */
.tgms-divider {
    line-height: 0;
    overflow: visible;
    width: 100%;
    position: relative;
}
.tgms-divider svg {
    display: block;
    width: 100%;
}
.tgms-flip {
    transform: scaleY(-1);
}
.tgms-divider--top {
    margin-bottom: -1px;
}
.tgms-divider--bottom {
    margin-top: -1px;
}

/* ─── GSAP Animation ─── */
.tgms-animation {
    position: relative;
    overflow: hidden;
}
/* Garnish mode: no overflow clip, no layout impact. */
.tgms-animation.tgms-garnish {
    overflow: visible;
    line-height: 0;
}
.tgms-animation.tgms-garnish .tgms-scene-el {
    /* In garnish mode, allow SVG to size naturally. */
    position: relative;
    left: auto;
    margin-left: 0;
    bottom: auto;
}

/* ─── Responsive hide ─── */
@media (max-width: 767px) {
    .tgms-hide-mobile { display: none !important; }
}
@media (max-width: 1023px) {
    .tgms-hide-tablet { display: none !important; }
}
.tgms-scene-el {
    position: absolute;
    line-height: 0;
}
.tgms-scene-el svg {
    display: block;
    width: 100%;
}
.tgms-scene-el img {
    display: block;
    width: 100%;
}

/* ─── CSS Effects ─── */
.tgms-effect {
    overflow: hidden;
}

/* ─── Headlines ─── */
.tgms-headline {
    overflow: hidden;
    padding: 0;
    line-height: 0;
}
.tgms-headline svg {
    display: block;
    max-width: 100%;
    height: auto;
}
/* Tight mode: use on headline container to reduce SVG built-in padding */
.tgms-headline-tight,
.tgms-acc-open-title .tgms-headline {
    margin-top: -0.2em;
    margin-bottom: -0.2em;
    overflow: visible;  /* allow negative margin content to show */
}

/* ─── Accordion ─── */
.tgms-accordion {
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 0;
    padding: 0;
}
/* Hide stray <br> tags injected by WPBakery between accordion items */
.tgms-accordion > br {
    display: none;
}
.tgms-acc-item {
    border-bottom: 1px solid #ddd;
    position: relative;
}
.tgms-acc-item:last-child {
    border-bottom: none;
}
.tgms-acc-header {
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    font-size: 15px;
    background: #f9f9f9;
    transition: background 0.2s;
    position: relative;
    overflow: visible;
}
.tgms-acc-header:hover {
    background: #f0f0f0;
}
.tgms-acc-icon {
    font-size: 18px;
    font-weight: 400;
    color: #999;
    transition: transform 0.3s;
}
.tgms-acc-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.tgms-acc--open .tgms-acc-content {
    max-height: 2000px;
}
.tgms-acc-inner {
    padding: 16px 18px;
    line-height: 1.6;
}

/* ─── Accordion: Open Title (animated headline swap) ─── */
.tgms-acc-open-title {
    display: none;
    position: relative;
    z-index: 10;
    overflow: visible;
    flex: 1;
    min-width: 0;
}
.tgms-acc-open-title .tgms-headline {
    padding: 0 !important;
    margin: 0;
    overflow: visible;
}
.tgms-acc-open-title .tgms-headline svg {
    display: block;
    max-height: 80px;
    width: auto;
    margin: 0 auto;
}
.tgms-acc-closed-title {
    flex: 1;
}
.tgms-acc--open .tgms-acc-closed-title {
    display: none !important;
}
.tgms-acc--open .tgms-acc-open-title {
    display: block !important;
    overflow: visible;
}
/* When open with headline, let headline use full width; icon overlays */
.tgms-acc--open:has(.tgms-acc-open-title) .tgms-acc-header {
    position: relative;
    overflow: visible;
}
.tgms-acc--open:has(.tgms-acc-open-title) .tgms-acc-icon {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
}
/* Ensure the item allows overflow for animated headlines */
.tgms-acc-item:has(.tgms-acc-open-title) {
    overflow: visible;
    z-index: 5;
}
.tgms-acc--open:has(.tgms-acc-open-title) {
    z-index: 10;
}

/* ═══ Parade Travelers ═══ */
.tgms-parade-traveler {
    pointer-events: none;
    will-change: transform;
}
/* Dividers WITHOUT a parade: clip horizontal overflow to prevent scrollbar. */
.tgms-divider:not(.tgms-divider--has-parade) {
    overflow-x: clip !important;
}
/* Dividers WITH a parade: must allow visible overflow so travelers can cross. */
.tgms-divider.tgms-divider--has-parade {
    overflow: visible !important;
}

/* Prevent horizontal scrollbar from animated divider layers */
.tgms-divider .anim-layer {
    will-change: transform;
}
body:has(.tgms-divider) {
    overflow-x: hidden;
}

/* ─── Tablet: contain parade overflow and scale headlines ─── */
@media (max-width: 1024px) {
    /* Ensure no horizontal scroll from parade travelers */
    html, body {
        overflow-x: hidden !important;
    }

    /* Parade divider: clip travelers at viewport edge */
    .tgms-divider--has-parade {
        max-width: 100vw;
    }

    /* Headlines: ensure SVGs scale well on tablet */
    .tgms-headline svg {
        max-width: 90vw;
    }
}

@media (max-width: 768px) {
    /* Headlines: give more room on smaller tablets / large phones */
    .tgms-headline svg {
        max-width: 95vw;
    }
}

/* ═══ TGM Animated Textbox ═══ */

.tgms-textbox-wrap {
    box-sizing: border-box;
    overflow: visible; /* ensures drop-shadow filter isn't clipped by parent wrappers */
}

.tgms-textbox {
    box-sizing: border-box;
    position: relative;
    /* Reset any clip-path inherited from theme or other plugins.
       Scoped #id rules from the shortcode will override this as needed. */
    clip-path: none;
}

.tgms-textbox-content {
    box-sizing: border-box;
}

/* Linked-box cursor */
.tgms-textbox-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Entrance — base hidden state handled inline by JS,
   but we declare the pending class here for safety. */
.tgms-entrance-pending {
    opacity: 0;
}

.tgms-entrance-done {
    opacity: 1;
    transform: none;
}

/* ═══ Textillate / Morphed — CSS3 Animation Keyframes ═══ */

.tgms-textillate { display: inline; }
.tgms-textillate .tgms-char,
.tgms-textillate .tgms-word {
    display: inline-block;
    opacity: 0;
}

/* Entrance animations */
@keyframes tgms-bounceIn {
    0%   { opacity:0; transform:scale(0.3); }
    50%  { opacity:1; transform:scale(1.05); }
    70%  { transform:scale(0.9); }
    100% { opacity:1; transform:scale(1); }
}
@keyframes tgms-fadeIn {
    0%   { opacity:0; }
    100% { opacity:1; }
}
@keyframes tgms-fadeInUp {
    0%   { opacity:0; transform:translateY(20px); }
    100% { opacity:1; transform:translateY(0); }
}
@keyframes tgms-fadeInDown {
    0%   { opacity:0; transform:translateY(-20px); }
    100% { opacity:1; transform:translateY(0); }
}
@keyframes tgms-fadeInLeft {
    0%   { opacity:0; transform:translateX(-20px); }
    100% { opacity:1; transform:translateX(0); }
}
@keyframes tgms-fadeInRight {
    0%   { opacity:0; transform:translateX(20px); }
    100% { opacity:1; transform:translateX(0); }
}
@keyframes tgms-flipInX {
    0%   { opacity:0; transform:perspective(400px) rotateX(90deg); }
    40%  { transform:perspective(400px) rotateX(-10deg); }
    70%  { transform:perspective(400px) rotateX(10deg); }
    100% { opacity:1; transform:perspective(400px) rotateX(0); }
}
@keyframes tgms-flipInY {
    0%   { opacity:0; transform:perspective(400px) rotateY(90deg); }
    40%  { transform:perspective(400px) rotateY(-10deg); }
    70%  { transform:perspective(400px) rotateY(10deg); }
    100% { opacity:1; transform:perspective(400px) rotateY(0); }
}
@keyframes tgms-rollIn {
    0%   { opacity:0; transform:translateX(-100%) rotate(-120deg); }
    100% { opacity:1; transform:translateX(0) rotate(0); }
}
@keyframes tgms-zoomIn {
    0%   { opacity:0; transform:scale(0); }
    100% { opacity:1; transform:scale(1); }
}
@keyframes tgms-slideInUp {
    0%   { opacity:0; transform:translateY(100%); }
    100% { opacity:1; transform:translateY(0); }
}
@keyframes tgms-slideInDown {
    0%   { opacity:0; transform:translateY(-100%); }
    100% { opacity:1; transform:translateY(0); }
}
@keyframes tgms-rotateIn {
    0%   { opacity:0; transform:rotate(-200deg); }
    100% { opacity:1; transform:rotate(0); }
}
@keyframes tgms-swing {
    20%  { transform:rotate(15deg); }
    40%  { transform:rotate(-10deg); }
    60%  { transform:rotate(5deg); }
    80%  { transform:rotate(-5deg); }
    100% { opacity:1; transform:rotate(0); }
}
@keyframes tgms-tada {
    0%   { transform:scale(1); }
    10%,20% { transform:scale(0.9) rotate(-3deg); }
    30%,50%,70%,90% { transform:scale(1.1) rotate(3deg); }
    40%,60%,80% { transform:scale(1.1) rotate(-3deg); }
    100% { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes tgms-wobble {
    0%   { transform:translateX(0); }
    15%  { transform:translateX(-25%) rotate(-5deg); }
    30%  { transform:translateX(20%) rotate(3deg); }
    45%  { transform:translateX(-15%) rotate(-3deg); }
    60%  { transform:translateX(10%) rotate(2deg); }
    75%  { transform:translateX(-5%) rotate(-1deg); }
    100% { opacity:1; transform:translateX(0); }
}
@keyframes tgms-pulse {
    0%   { transform:scale(1); opacity:1; }
    50%  { transform:scale(1.1); }
    100% { transform:scale(1); opacity:1; }
}
@keyframes tgms-rubberBand {
    0%   { transform:scaleX(1) scaleY(1); }
    30%  { transform:scaleX(1.25) scaleY(0.75); }
    40%  { transform:scaleX(0.75) scaleY(1.25); }
    50%  { transform:scaleX(1.15) scaleY(0.85); }
    65%  { transform:scaleX(0.95) scaleY(1.05); }
    75%  { transform:scaleX(1.05) scaleY(0.95); }
    100% { opacity:1; transform:scaleX(1) scaleY(1); }
}
@keyframes tgms-jello {
    0%,100% { transform:none; opacity:1; }
    11.1%  { transform:skewX(-12.5deg) skewY(-12.5deg); }
    22.2%  { transform:skewX(6.25deg) skewY(6.25deg); }
    33.3%  { transform:skewX(-3.125deg) skewY(-3.125deg); }
    44.4%  { transform:skewX(1.5625deg) skewY(1.5625deg); }
    55.5%  { transform:skewX(-0.78125deg) skewY(-0.78125deg); }
    66.6%  { transform:skewX(0.390625deg) skewY(0.390625deg); }
    77.7%  { transform:skewX(-0.1953125deg) skewY(-0.1953125deg); }
}

/* Exit animations */
@keyframes tgms-fadeOut {
    0%   { opacity:1; }
    100% { opacity:0; }
}
@keyframes tgms-fadeOutUp {
    0%   { opacity:1; transform:translateY(0); }
    100% { opacity:0; transform:translateY(-20px); }
}
@keyframes tgms-fadeOutDown {
    0%   { opacity:1; transform:translateY(0); }
    100% { opacity:0; transform:translateY(20px); }
}
@keyframes tgms-fadeOutLeft {
    0%   { opacity:1; transform:translateX(0); }
    100% { opacity:0; transform:translateX(-20px); }
}
@keyframes tgms-fadeOutRight {
    0%   { opacity:1; transform:translateX(0); }
    100% { opacity:0; transform:translateX(20px); }
}
@keyframes tgms-bounceOut {
    0%   { opacity:1; transform:scale(1); }
    25%  { transform:scale(0.95); }
    50%  { opacity:1; transform:scale(1.1); }
    100% { opacity:0; transform:scale(0.3); }
}
@keyframes tgms-zoomOut {
    0%   { opacity:1; transform:scale(1); }
    50%  { opacity:0; transform:scale(0.3); }
    100% { opacity:0; }
}
@keyframes tgms-flipOutX {
    0%   { opacity:1; transform:perspective(400px) rotateX(0); }
    30%  { opacity:1; transform:perspective(400px) rotateX(-20deg); }
    100% { opacity:0; transform:perspective(400px) rotateX(90deg); }
}
@keyframes tgms-flipOutY {
    0%   { opacity:1; transform:perspective(400px) rotateY(0); }
    30%  { opacity:1; transform:perspective(400px) rotateY(-15deg); }
    100% { opacity:0; transform:perspective(400px) rotateY(90deg); }
}
@keyframes tgms-rollOut {
    0%   { opacity:1; transform:translateX(0) rotate(0); }
    100% { opacity:0; transform:translateX(100%) rotate(120deg); }
}
@keyframes tgms-slideOutUp {
    0%   { opacity:1; transform:translateY(0); }
    100% { opacity:0; transform:translateY(-100%); }
}
@keyframes tgms-slideOutDown {
    0%   { opacity:1; transform:translateY(0); }
    100% { opacity:0; transform:translateY(100%); }
}

/* ═══ Typed — Typewriter Effect ═══ */

.tgms-typed-wrap { display: inline; }
.tgms-typed-cursor {
    display: inline-block;
    animation: tgms-blink 0.7s infinite;
}
@keyframes tgms-blink {
    0%,100% { opacity:1; }
    50%     { opacity:0; }
}

/* ═══ Morphed — Headline Rotator ═══ */

.tgms-morphed { display: inline-block; position: relative; }
.tgms-morphed-item {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    white-space: nowrap;
}
.tgms-morphed-item.tgms-morphed-active {
    position: relative;
    opacity: 1;
}