/* =========================================================
   ZT BRAND STUDIO — PREMIUM PRELOADER v3
   2-second lifecycle · Local/theme font only · Responsive
========================================================= */

#zt-preloader {
    --ztp-black: #000000;
    --ztp-black-2: #060606;
    --ztp-gold: #EDB126;
    --ztp-gold-light: #FFD66B;
    --ztp-gold-pale: #FFF1C4;
    --ztp-gold-dark: #9B6C13;
    --ztp-white: #FFF8E8;
    --ztp-muted: rgba(255, 248, 232, .64);
    --ztp-soft: rgba(255, 248, 232, .36);

    position: fixed;
    z-index: 2147483000;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(24px, 4vw, 64px);

    color: var(--ztp-white);
    background:
        radial-gradient(circle at 50% 44%, rgba(237, 177, 38, .16), transparent 25%),
        radial-gradient(circle at 12% 18%, rgba(237, 177, 38, .08), transparent 25%),
        radial-gradient(circle at 88% 82%, rgba(237, 177, 38, .06), transparent 27%),
        linear-gradient(145deg, #080706 0%, #020202 50%, #000 100%);

    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateZ(0);

    transition:
        opacity 420ms cubic-bezier(.22,.61,.36,1),
        visibility 420ms linear,
        transform 420ms cubic-bezier(.22,.61,.36,1);

    /* Important: only inherit the font already loaded by the site/theme. */
    font-family: inherit !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

#zt-preloader,
#zt-preloader *,
#zt-preloader *::before,
#zt-preloader *::after {
    box-sizing: border-box;
    font-family: inherit !important;
}

html.zt-preloader-active,
html.zt-preloader-active body {
    overflow: hidden !important;
    overscroll-behavior: none;
}

html.zt-elementor-editing #zt-preloader,
body.elementor-editor-active #zt-preloader,
body.elementor-edit-mode #zt-preloader,
body.elementor-editor-preview #zt-preloader,
html.zt-preloader-finished #zt-preloader {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* =========================================================
   FIRST-PAINT / ANTI-FOUC HARDENING
   The truly critical copy is also printed inline by functions.php.
   This copy keeps behavior consistent after the main stylesheet loads.
========================================================= */

html.zt-preloader-active,
html.zt-preloader-active body {
    background: #020202 !important;
}

html.zt-preloader-active body {
    overflow: hidden !important;
}

html.zt-preloader-active::before {
    position: fixed;
    z-index: 2147482998;
    inset: 0;
    content: "";
    display: block;
    pointer-events: auto;
    background:
        radial-gradient(circle at 50% 46%, rgba(237, 177, 38, .10), transparent 28%),
        #020202;
}

html.zt-preloader-finished::before,
html.zt-elementor-editing::before {
    display: none !important;
    content: none !important;
}


#zt-preloader button,
#zt-preloader input,
#zt-preloader select,
#zt-preloader textarea {
    font-family: inherit !important;
}

/* ---------- Background system ---------- */
.ztp-grid {
    position: absolute;
    z-index: -5;
    left: 50%;
    bottom: -42vh;
    width: 165vw;
    height: 100vh;
    opacity: .15;
    pointer-events: none;
    /* Clip only the decorative grid's overscan, not page content. */
    overflow: hidden;
    background-size: clamp(48px, 4vw, 72px) clamp(48px, 4vw, 72px);
    transform-origin: center;
    transform: translateX(-50%) perspective(760px) rotateX(67deg);
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 28%, #000 70%, transparent 100%);
    mask-image: linear-gradient(to top, transparent 0%, #000 28%, #000 70%, transparent 100%);
}

/* Move the two grid layers separately without repainting their gradients. */
.ztp-grid::before,
.ztp-grid::after {
    position: absolute;
    inset: -72px;
    content: "";
    pointer-events: none;
    background-size: inherit;
    background-position: 72px 72px;
    animation: ztpGridMove 9s linear infinite;
}

.ztp-grid::before {
    --ztp-grid-x: 0px;
    --ztp-grid-y: 72px;
    background-image: linear-gradient(rgba(255, 214, 107, .11) 1px, transparent 1px);
}

.ztp-grid::after {
    --ztp-grid-x: 72px;
    --ztp-grid-y: 0px;
    background-image: linear-gradient(90deg, rgba(255, 214, 107, .11) 1px, transparent 1px);
}

.ztp-aura {
    position: absolute;
    z-index: -4;
    top: 50%;
    left: 50%;
    width: min(880px, 92vw);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(237, 177, 38, .14) 0%, rgba(237, 177, 38, .045) 34%, transparent 68%);
    transform: translate(-50%, -50%);
    animation: ztpAura 2.7s ease-in-out infinite;
}

.ztp-orbit-bg,
.ztp-orbit-bg::before,
.ztp-orbit-bg::after {
    position: absolute;
    z-index: -3;
    content: "";
    border: 1px solid rgba(255, 214, 107, .09);
    border-radius: 50%;
    pointer-events: none;
}

.ztp-orbit-bg {
    top: 50%;
    left: 50%;
    width: min(760px, 76vw);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
}

.ztp-orbit-bg::before { inset: 8%; }
.ztp-orbit-bg::after  { inset: 18%; }

.ztp-sweep {
    position: absolute;
    z-index: -2;
    top: -15%;
    bottom: -15%;
    left: -40%;
    width: 24%;
    opacity: .26;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 214, 107, .04), rgba(255, 241, 196, .18), rgba(255, 214, 107, .04), transparent);
    transform: skewX(-18deg);
    animation: ztpSweep 2.8s ease-in-out infinite;
}

.ztp-vignette {
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at center, transparent 28%, rgba(0,0,0,.68) 100%);
}

/* ---------- Main composition ---------- */
.ztp-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min(720px, 100%);
    text-align: center;
    transition:
        transform 420ms cubic-bezier(.22,.61,.36,1),
        opacity 420ms ease;
}

.ztp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 clamp(24px, 3vh, 36px);
    color: var(--ztp-gold-light);
    font-size: clamp(11px, .85vw, 14px);
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1.2;
    text-transform: uppercase;
}

.ztp-eyebrow::before,
.ztp-eyebrow::after {
    width: clamp(34px, 5vw, 68px);
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--ztp-gold-light));
    box-shadow: 0 0 12px rgba(237,177,38,.35);
}

.ztp-eyebrow::after {
    background: linear-gradient(90deg, var(--ztp-gold-light), transparent);
}

.ztp-emblem {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(230px, 21vw, 320px);
    aspect-ratio: 1;
    margin-bottom: clamp(28px, 3.5vh, 42px);
}

.ztp-ring,
.ztp-ring::before,
.ztp-ring::after {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.ztp-ring {
    background: conic-gradient(
        from 12deg,
        transparent 0deg 35deg,
        rgba(237,177,38,.28) 36deg 62deg,
        var(--ztp-gold-light) 63deg 78deg,
        transparent 79deg 156deg,
        rgba(237,177,38,.84) 157deg 205deg,
        transparent 206deg 284deg,
        rgba(255,241,196,.72) 285deg 315deg,
        transparent 316deg 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
    filter: drop-shadow(0 0 12px rgba(237,177,38,.34));
    animation: ztpRing 5.8s linear infinite;
}

.ztp-ring::before {
    inset: 9%;
    background: conic-gradient(from 220deg, transparent 0 55deg, rgba(255,214,107,.92) 56deg 80deg, transparent 81deg 190deg, rgba(155,108,19,.74) 191deg 230deg, transparent 231deg 316deg, rgba(255,214,107,.48) 317deg 344deg, transparent 345deg 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 0);
    animation: ztpRingReverse 4.3s linear infinite;
}

.ztp-ring::after {
    inset: 18%;
    border: 1px solid rgba(255,214,107,.11);
}

.ztp-particle {
    position: absolute;
    z-index: 5;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ztp-gold-pale);
    box-shadow: 0 0 8px var(--ztp-gold-light), 0 0 24px rgba(237,177,38,.8);
    animation: ztpParticle 2.1s ease-in-out infinite;
}

.ztp-particle.p1 { top: 14%; right: 20%; }
.ztp-particle.p2 { bottom: 21%; left: 10%; width: 4px; height: 4px; animation-delay: .55s; }
.ztp-particle.p3 { top: 47%; left: 1%; width: 4px; height: 4px; animation-delay: 1s; }

.ztp-logo-frame {
    position: relative;
    z-index: 4;
    display: grid;
    place-items: center;
    width: clamp(156px, 14vw, 202px);
    aspect-ratio: 1;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,241,196,.95), rgba(237,177,38,.25) 36%, rgba(237,177,38,.05) 65%, rgba(237,177,38,.88));
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
    filter: drop-shadow(0 25px 52px rgba(0,0,0,.66));
    animation: ztpLogoFloat 2.4s ease-in-out infinite;
}

.ztp-logo-surface {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    clip-path: inherit;
    background:
        linear-gradient(135deg, rgba(255,241,196,.045), transparent 42%),
        #050505;
    box-shadow: inset 0 0 44px rgba(237,177,38,.055);
}

.ztp-logo {
    position: relative;
    z-index: 2;
    display: block;
    width: 72%;
    height: 72%;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,.62)) drop-shadow(0 0 16px rgba(237,177,38,.18));
    animation: ztpLogoBreath 2.2s ease-in-out infinite;
}

.ztp-logo-fallback {
    position: absolute;
    z-index: 1;
    color: var(--ztp-gold-light);
    font-size: clamp(42px, 5vw, 74px);
    font-weight: 900;
    letter-spacing: -.08em;
    opacity: 0;
}

#zt-preloader.is-logo-fallback .ztp-logo { opacity: 0; }
#zt-preloader.is-logo-fallback .ztp-logo-fallback { opacity: 1; }

.ztp-logo-surface::after {
    position: absolute;
    z-index: 3;
    top: -25%;
    bottom: -25%;
    left: -55%;
    width: 24%;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), rgba(255,241,196,.34), rgba(255,255,255,.05), transparent);
    transform: skewX(-18deg);
    animation: ztpLogoShine 2.3s ease-in-out infinite;
}

.ztp-corner {
    position: absolute;
    z-index: 5;
    width: 18px;
    height: 18px;
    border-color: var(--ztp-gold-light);
    border-style: solid;
    opacity: .9;
}

.ztp-corner.c1 { top: -6px; right: -6px; border-width: 1px 1px 0 0; }
.ztp-corner.c2 { bottom: -6px; left: -6px; border-width: 0 0 1px 1px; }

.ztp-brand {
    margin: 0;
    color: var(--ztp-white);
    font-size: clamp(26px, 2.35vw, 40px);
    font-weight: 900;
    letter-spacing: -.025em;
    line-height: 1.08;
}

.ztp-brand span {
    color: var(--ztp-gold-light);
}

.ztp-tagline {
    max-width: 620px;
    margin: clamp(12px, 1.4vh, 17px) 0 0;
    color: var(--ztp-muted);
    font-size: clamp(13px, 1vw, 16px);
    font-weight: 650;
    letter-spacing: .08em;
    line-height: 1.5;
    text-transform: uppercase;
}

.ztp-progress-wrap {
    width: min(440px, 78vw);
    margin-top: clamp(28px, 3.4vh, 42px);
}

.ztp-progress {
    position: relative;
    width: 100%;
    height: 3px;
    overflow: hidden;
    background: rgba(255,241,196,.10);
    border-radius: 999px;
}

.ztp-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ztp-gold-dark), var(--ztp-gold), var(--ztp-gold-light), var(--ztp-gold-pale));
    box-shadow: 0 0 11px rgba(255,214,107,.72), 0 0 24px rgba(237,177,38,.35);
    animation: ztpProgress 1.55s cubic-bezier(.2,.72,.2,1) forwards;
}

.ztp-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 12px;
    color: var(--ztp-soft);
    font-size: clamp(10px, .72vw, 12px);
    font-weight: 750;
    letter-spacing: .11em;
    line-height: 1.35;
    text-transform: uppercase;
}

.ztp-status {
    color: var(--ztp-muted);
    transition: opacity .2s ease;
}

.ztp-percent {
    color: var(--ztp-gold-light);
    font-variant-numeric: tabular-nums;
}

/* ---------- Exit ---------- */
html.zt-preloader-leaving #zt-preloader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(1.012);
}

html.zt-preloader-leaving #zt-preloader .ztp-shell {
    opacity: .25;
    transform: scale(1.055);
}

/* ---------- Animations ---------- */
@keyframes ztpGridMove {
    from { transform: translate(0, 0); }
    to   { transform: translate(var(--ztp-grid-x), var(--ztp-grid-y)); }
}

@keyframes ztpAura {
    0%, 100% { opacity: .68; transform: translate(-50%, -50%) scale(.96); }
    50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.035); }
}

@keyframes ztpSweep {
    0%, 18%  { transform: translateX(0) skewX(-18deg); opacity: 0; }
    42%      { opacity: .28; }
    76%,100% { transform: translateX(708.3333333333%) skewX(-18deg); opacity: 0; }
}

@keyframes ztpRing { to { transform: rotate(360deg); } }
@keyframes ztpRingReverse { to { transform: rotate(-360deg); } }

@keyframes ztpParticle {
    0%,100% { opacity: .34; transform: scale(.72); }
    50%     { opacity: 1; transform: scale(1.3); }
}

@keyframes ztpLogoFloat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-5px); }
}

@keyframes ztpLogoBreath {
    0%,100% { transform: scale(.985); }
    50%     { transform: scale(1.025); }
}

@keyframes ztpLogoShine {
    0%,20% { transform: translateX(0) skewX(-18deg); opacity: 0; }
    42%    { opacity: .92; }
    68%,100% { transform: translateX(833.3333333333%) skewX(-18deg); opacity: 0; }
}

@keyframes ztpProgress {
    0%   { transform: scaleX(0); }
    55%  { transform: scaleX(.68); }
    82%  { transform: scaleX(.91); }
    100% { transform: scaleX(1); }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    #zt-preloader { padding: 24px 18px; }

    .ztp-eyebrow {
        margin-bottom: 22px;
        font-size: 10px;
        letter-spacing: .12em;
    }

    .ztp-eyebrow::before,
    .ztp-eyebrow::after { width: 28px; }

    .ztp-emblem {
        width: min(250px, 72vw);
        margin-bottom: 26px;
    }

    .ztp-logo-frame { width: min(166px, 47vw); }
    .ztp-brand { font-size: clamp(25px, 8vw, 34px); }
    .ztp-tagline { font-size: 11px; letter-spacing: .055em; }
    .ztp-progress-wrap { width: min(360px, 84vw); margin-top: 28px; }
    .ztp-meta { font-size: 9px; }
    .ztp-grid { opacity: .10; }
}

@media (max-height: 700px) and (min-width: 641px) {
    .ztp-eyebrow { margin-bottom: 14px; }
    .ztp-emblem { width: 210px; margin-bottom: 18px; }
    .ztp-logo-frame { width: 146px; }
    .ztp-progress-wrap { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    #zt-preloader *,
    #zt-preloader *::before,
    #zt-preloader *::after {
        animation: none !important;
    }

    .ztp-progress-fill { width: 100%; transform: scaleX(1); }

    #zt-preloader,
    .ztp-shell {
        transition-duration: 160ms !important;
    }
}

/* Keep visible content inside narrow/short viewports without hiding progress. */
#zt-preloader .ztp-shell {min-width:0;max-width:100%;}
#zt-preloader :is(.ztp-eyebrow,.ztp-brand,.ztp-tagline,.ztp-status){max-width:100%;overflow-wrap:anywhere;}
#zt-preloader .ztp-meta{min-width:0;gap:12px;}
#zt-preloader .ztp-status{min-width:0;flex:1 1 auto;}
#zt-preloader .ztp-percent{flex:0 0 auto;white-space:nowrap;color:#EDB126;}
@media(max-width:640px){
  #zt-preloader .ztp-ring,
  #zt-preloader .ztp-logo-frame,
  #zt-preloader .ztp-logo{filter:none;}
  #zt-preloader .ztp-meta{font-size:10px;}
}
@media(max-height:480px){
  #zt-preloader{padding:12px 16px;}
  #zt-preloader .ztp-eyebrow{margin-bottom:10px;font-size:10px;gap:8px;letter-spacing:.08em;}
  #zt-preloader .ztp-emblem{width:min(100px,24vh);margin-bottom:10px;}
  #zt-preloader .ztp-logo-frame{width:68%;}
  #zt-preloader .ztp-brand{font-size:24px;line-height:1.1;margin-bottom:8px;}
  #zt-preloader .ztp-tagline{font-size:10px;line-height:1.3;letter-spacing:.03em;}
  #zt-preloader .ztp-progress-wrap{margin-top:12px;width:min(360px,100%);}
  #zt-preloader .ztp-meta{margin-top:8px;}
}
@media(prefers-reduced-motion:reduce){
  #zt-preloader,
  #zt-preloader *,
  #zt-preloader *::before,
  #zt-preloader *::after{animation:none!important;transition:none!important;}
  html.zt-preloader-leaving #zt-preloader,
  html.zt-preloader-leaving #zt-preloader .ztp-shell{transform:none!important;}
}


/* Zero To Trend — beneath the loader title without changing timing or motion. */
body #zt-preloader .zt-origin-signature {
  display: block !important;
  margin: 6px 0 0 !important;
  color: #EDB126 !important;
  font-family: inherit !important;
  font-size: clamp(12px, 1vw, 16px) !important;
  font-weight: 650 !important;
  line-height: 1.5 !important;
  letter-spacing: .16em !important;
  text-align: center;
  text-transform: none !important;
}

/* Adaptive lifecycle: all original artwork and responsive rules above are retained. */
#zt-preloader{transition-duration:180ms}
html.zt-preloader-leaving #zt-preloader{pointer-events:none!important}
html.zt-preloader-active::before{transition:opacity 180ms ease}
html.zt-preloader-leaving::before{opacity:0;pointer-events:none}
html.zt-preloader-finished #zt-preloader{display:none!important}
#zt-preloader .ztp-progress-fill{animation-duration:1.2s}
@media(prefers-reduced-motion:reduce){html.zt-preloader-active::before{transition:none}}