/* ==========================================================================
   TechBiz Security — animations.css
   Loading screen, scroll-reveal, hero, typing caret, misc keyframes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Loading screen
   -------------------------------------------------------------------------- */
.tbs-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-content: center;
    gap: 1.5rem;
    background: var(--bg);
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.tbs-loader.is-hidden { opacity: 0; visibility: hidden; }
.tbs-loader__logo svg { width: 72px; height: 72px; animation: pulse-glow 1.5s ease-in-out infinite; }
.tbs-loader__bar {
    width: 200px; height: 4px;
    background: var(--surface);
    border-radius: 999px;
    overflow: hidden;
}
.tbs-loader__bar span {
    display: block; height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    animation: loader-fill 1.5s ease forwards;
}
@keyframes loader-fill { to { width: 100%; } }
@keyframes pulse-glow {
    0%, 100% { filter: drop-shadow(0 0 4px var(--glow)); transform: scale(1); }
    50%      { filter: drop-shadow(0 0 16px var(--glow)); transform: scale(1.06); }
}

/* --------------------------------------------------------------------------
   Scroll reveal (Intersection Observer adds .is-visible)
   -------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-reveal="left"]  { transform: translateX(-36px); }
.reveal[data-reveal="right"] { transform: translateX(36px); }
.reveal[data-reveal="scale"] { transform: scale(0.94); }
.reveal.is-visible[data-reveal] { transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"] { transition-delay: 0.4s; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: clamp(540px, 78vh, 760px);
    display: grid;
    align-items: center;
    padding-block: clamp(2.5rem, 6vh, 4.5rem);
    overflow: hidden;
    background: var(--hero-gradient);
}
#particles-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero__inner { position: relative; z-index: 2; }

.typing { color: var(--accent); }
.typing__caret {
    display: inline-block;
    width: 3px;
    margin-left: 2px;
    background: var(--accent-2);
    animation: caret-blink 1s steps(1) infinite;
    vertical-align: baseline;
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* Animated gradient text/border helpers */
@keyframes gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.animated-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 6s ease infinite;
}

/* Floating shield */
@keyframes float-y {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}
.float { animation: float-y 5s ease-in-out infinite; }

/* Counter strip subtle entrance handled by .reveal */

/* Marquee / horizontal scroll for case studies */
.hscroll {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-2);
    scrollbar-width: thin;
}
.hscroll > * { scroll-snap-align: start; flex: 0 0 min(360px, 85%); }

/* Fade-in keyframe (utility) */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fade-in 0.6s ease forwards; }