/* ═══════════════════════════════════════════════════════════
   RETRO HOME ANIMATIONS — System Boot Sequence
   ═══════════════════════════════════════════════════════════
   Concept: Each section "powers on" as you scroll — like a
   retro-futuristic command center initialising.

   Dependencies: retro-theme.css (--rt-* variables)
   Scoped to: body.hompg (home page via body class)

   FOUC prevention:
     <html> gets .rt-anim-ready via <script> in <head>
     <body>  gets .rt-anim     via JS after DOMContentLoaded
   ═══════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
   1. KEYFRAME DEFINITIONS
   ══════════════════════════════════════════════════════════ */

/* Grid background infinite drift */
@keyframes rt-grid-drift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(60px, 60px); }
}

/* CRT scan beam sweeps top→bottom */
@keyframes rt-scan-beam {
  0%   { top: -8px; opacity: 0; }
  8%   { opacity: 0.4; }
  92%  { opacity: 0.4; }
  100% { top: 100%; opacity: 0; }
}

/* Hero element boot — flickers in like a CRT powering on */
@keyframes rt-hero-boot {
  0%   { opacity: 0;   transform: translateY(36px); }
  30%  { opacity: 0.7; }
  35%  { opacity: 0.25; }
  42%  { opacity: 0.85; }
  50%  { opacity: 0.4; }
  60%  { opacity: 1;   transform: translateY(6px); }
  100% { opacity: 1;   transform: translateY(0); }
}

/* Hero image slides in from right with flicker */
@keyframes rt-hero-slide-right {
  0%   { opacity: 0;   transform: translateX(70px); }
  35%  { opacity: 0.6; }
  40%  { opacity: 0.15; }
  50%  { opacity: 0.8; }
  65%  { opacity: 1;   transform: translateX(8px); }
  100% { opacity: 1;   transform: translateX(0); }
}

/* Neon glow breathing pulse */
@keyframes rt-glow-breathe {
  0%, 100% { box-shadow: 0 0 8px var(--rt-neon-glow), 0 0 20px rgba(212,17,80,0.06); }
  50%      { box-shadow: 0 0 18px var(--rt-neon-glow), 0 0 50px rgba(212,17,80,0.14); }
}

/* Gentle float up-down */
@keyframes rt-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Pulsing ring (decorative hero circles) */
@keyframes rt-ring-pulse {
  0%, 100% { opacity: 0.12; transform: scale(1); }
  50%      { opacity: 0.3;  transform: scale(1.04); }
}

/* Status-dot blink */
@keyframes rt-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.15; }
}

/* CRT flicker-on for individual elements */
@keyframes rt-flicker-on {
  0%   { opacity: 0; }
  12%  { opacity: 0.75; }
  14%  { opacity: 0.2; }
  18%  { opacity: 0.9; }
  20%  { opacity: 0.35; }
  28%  { opacity: 1; }
  100% { opacity: 1; }
}

/* Card scan line sweeps top→bottom on hover */
@keyframes rt-scan-card {
  0%   { top: 0; }
  100% { top: 100%; }
}

/* Methodology number flash */
@keyframes rt-num-flash {
  0%   { box-shadow: 0 6px 18px var(--rt-neon-glow); }
  50%  { box-shadow: 0 6px 30px var(--rt-neon-glow), 0 0 50px rgba(212,17,80,0.25); }
  100% { box-shadow: 0 6px 18px var(--rt-neon-glow); }
}

/* Neon underline draw left→right */
@keyframes rt-line-draw {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* Scroll progress glow */
@keyframes rt-progress-glow {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.5); }
}


/* ══════════════════════════════════════════════════════════
   2. ATMOSPHERIC LAYERS  (created by JS, styled here)
   ══════════════════════════════════════════════════════════ */

/* Animated neon grid — subtle depth */
.rt-grid-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--rt-neon-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--rt-neon-faint) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: rt-grid-drift 25s linear infinite;
  opacity: 0.35;
}
.rt-grid-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 25% 15%, var(--rt-neon-soft) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 85%, var(--rt-cyan-soft) 0%, transparent 45%);
}

/* Scanline overlay — CRT texture */
.rt-scanlines {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.015) 2px,
    rgba(0,0,0,0.015) 4px
  );
}

/* Moving scan beam */
.rt-scan-beam {
  position: fixed;
  left: 0;
  right: 0;
  height: 6px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(212,17,80,0.05), transparent);
  animation: rt-scan-beam 8s linear infinite;
}

/* Scroll progress bar — neon accent at top */
.rt-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--rt-neon), var(--rt-neon-light));
  box-shadow: 0 0 12px var(--rt-neon-glow);
  z-index: 99999;
  pointer-events: none;
  transition: width 0.08s linear;
  animation: rt-progress-glow 3s ease-in-out infinite;
}


/* ══════════════════════════════════════════════════════════
   3. HERO SECTION — BOOT SEQUENCE
   CSS keyframes (NOT IntersectionObserver) so above-fold
   content animates immediately on page load.
   Scoped under html.rt-anim-ready to prevent FOUC.
   ══════════════════════════════════════════════════════════ */

/*
   fill-mode: both  →  applies 0% keyframe (opacity:0) DURING the delay,
   then 100% keyframe (opacity:1) AFTER the animation.
   No separate opacity:0 needed — if animation doesn't load, element stays visible.
*/
html.rt-anim-ready .home-banr-wrp .extrawrp .imgtop {
  animation: rt-hero-boot 0.9s 0.15s both;
}
html.rt-anim-ready .home-banr-wrp .extrawrp .txtwrp {
  animation: rt-hero-boot 0.9s 0.35s both;
}
html.rt-anim-ready .home-banr-wrp .extrawrp .btnwrp {
  animation: rt-hero-boot 0.9s 0.55s both;
}
html.rt-anim-ready .home-banr-wrp .hero-trust-line {
  animation: rt-hero-boot 0.9s 0.75s both;
}
html.rt-anim-ready .home-banr-wrp .btm-bnr-box {
  animation: rt-hero-boot 0.9s 0.95s both;
}
/* NOTE: .faxulbox .imgwrp is NOT animated — applying transform
   creates a new containing block, which breaks the absolutely-
   positioned hero image inside (style.css:7317).               */

/* Decorative geometric rings (created by JS) */
.home-banr-wrp .rt-hero-ring {
  position: absolute;
  border: 1px solid var(--rt-neon-soft);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: rt-ring-pulse 7s ease-in-out infinite;
}
.home-banr-wrp .rt-hero-ring:nth-child(1) {
  width: 480px; height: 480px;
  top: -140px; right: -80px;
}
.home-banr-wrp .rt-hero-ring:nth-child(2) {
  width: 280px; height: 280px;
  bottom: -70px; left: -50px;
  border-color: var(--rt-cyan-soft);
  animation-delay: 2.5s;
}
.home-banr-wrp .rt-hero-ring:nth-child(3) {
  width: 160px; height: 160px;
  top: 30%; left: 42%;
  animation-delay: 4.5s;
}

/* Hero H1 glow on hover */
.home-banr-wrp .txtwrp h1 {
  transition: text-shadow 0.4s ease;
}
.home-banr-wrp .txtwrp h1:hover {
  text-shadow: 0 0 40px rgba(212,17,80,0.15);
}

/* Hero trust-line neon underline on hover */
.hero-trust-line span {
  position: relative;
}
.hero-trust-line span::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--rt-neon);
  box-shadow: 0 0 6px var(--rt-neon-glow);
  transition: width 0.5s var(--rt-ease);
}
.hero-trust-line span:hover::after {
  width: 100%;
}


/* ══════════════════════════════════════════════════════════
   4. SCROLL REVEAL SYSTEM
   JS adds .rt-reveal + direction class to target elements.
   IntersectionObserver adds .rt-in when they enter viewport.
   Scoped under body.rt-anim for graceful degradation.
   ══════════════════════════════════════════════════════════ */

/* Hidden base state */
body.rt-anim .rt-reveal {
  opacity: 0;
  transition:
    opacity 0.85s var(--rt-ease),
    transform 0.85s var(--rt-ease);
  will-change: opacity, transform;
}

/* Direction variants */
body.rt-anim .rt-reveal.rt-up    { transform: translateY(50px); }
body.rt-anim .rt-reveal.rt-down  { transform: translateY(-50px); }
body.rt-anim .rt-reveal.rt-left  { transform: translateX(-60px); }
body.rt-anim .rt-reveal.rt-right { transform: translateX(60px); }
body.rt-anim .rt-reveal.rt-scale { transform: scale(0.88); }

/* Revealed — all directions reset to identity */
body.rt-anim .rt-reveal.rt-in {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}


/* ══════════════════════════════════════════════════════════
   5. TECH STACK BAND — SEQUENTIAL TAG FLICKER
   Each tech tag flickers on one after another.
   ══════════════════════════════════════════════════════════ */

body.rt-anim .tech-stack-band .tech-stack-items span {
  opacity: 0;
}
body.rt-anim .tech-stack-band.rt-in .tech-stack-items span {
  animation: rt-flicker-on 0.45s ease-out forwards;
}
body.rt-anim .tech-stack-band.rt-in .tech-stack-items span:nth-child(1)  { animation-delay: 0s; }
body.rt-anim .tech-stack-band.rt-in .tech-stack-items span:nth-child(2)  { animation-delay: 0.06s; }
body.rt-anim .tech-stack-band.rt-in .tech-stack-items span:nth-child(3)  { animation-delay: 0.12s; }
body.rt-anim .tech-stack-band.rt-in .tech-stack-items span:nth-child(4)  { animation-delay: 0.18s; }
body.rt-anim .tech-stack-band.rt-in .tech-stack-items span:nth-child(5)  { animation-delay: 0.24s; }
body.rt-anim .tech-stack-band.rt-in .tech-stack-items span:nth-child(6)  { animation-delay: 0.30s; }
body.rt-anim .tech-stack-band.rt-in .tech-stack-items span:nth-child(7)  { animation-delay: 0.36s; }
body.rt-anim .tech-stack-band.rt-in .tech-stack-items span:nth-child(8)  { animation-delay: 0.42s; }
body.rt-anim .tech-stack-band.rt-in .tech-stack-items span:nth-child(9)  { animation-delay: 0.48s; }
body.rt-anim .tech-stack-band.rt-in .tech-stack-items span:nth-child(10) { animation-delay: 0.54s; }


/* ══════════════════════════════════════════════════════════
   6. METHODOLOGY — STEP-BY-STEP BOOT
   Steps reveal in sequence 01→06. Number boxes pulse neon.
   Connecting lines "draw" themselves after steps appear.
   ══════════════════════════════════════════════════════════ */

body.rt-anim .methodology-wrp .method-step-col {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.6s var(--rt-ease), transform 0.6s var(--rt-ease);
}
body.rt-anim .methodology-wrp.rt-in .method-step-col {
  opacity: 1;
  transform: translateY(0);
}
body.rt-anim .methodology-wrp.rt-in .method-step-col:nth-child(1) { transition-delay: 0.05s; }
body.rt-anim .methodology-wrp.rt-in .method-step-col:nth-child(2) { transition-delay: 0.15s; }
body.rt-anim .methodology-wrp.rt-in .method-step-col:nth-child(3) { transition-delay: 0.25s; }
body.rt-anim .methodology-wrp.rt-in .method-step-col:nth-child(4) { transition-delay: 0.35s; }
body.rt-anim .methodology-wrp.rt-in .method-step-col:nth-child(5) { transition-delay: 0.45s; }
body.rt-anim .methodology-wrp.rt-in .method-step-col:nth-child(6) { transition-delay: 0.55s; }

/* Number boxes pulse on reveal */
body.rt-anim .methodology-wrp.rt-in .method-num {
  animation: rt-num-flash 1.8s ease-out 0.3s;
}

/* Connecting lines draw left→right */
body.rt-anim .methodology-wrp .method-step:not(:last-child)::after {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.7s var(--rt-ease);
}
body.rt-anim .methodology-wrp.rt-in .method-step:not(:last-child)::after {
  transform: scaleX(1);
  transition-delay: 0.7s;
}


/* ══════════════════════════════════════════════════════════
   7. PRICING CARDS — STAGGER REVEAL
   ══════════════════════════════════════════════════════════ */

body.rt-anim .custom-pricing-section .pricing-col {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s var(--rt-ease), transform 0.7s var(--rt-ease);
}
body.rt-anim .custom-pricing-section.rt-in .pricing-col {
  opacity: 1;
  transform: translateY(0);
}
body.rt-anim .custom-pricing-section.rt-in .pricing-col:nth-child(1) { transition-delay: 0.1s; }
body.rt-anim .custom-pricing-section.rt-in .pricing-col:nth-child(2) { transition-delay: 0.25s; }
body.rt-anim .custom-pricing-section.rt-in .pricing-col:nth-child(3) { transition-delay: 0.4s; }

/* Featured card continuous glow breathe */
.custom-pricing-card.featured {
  animation: rt-glow-breathe 4s ease-in-out infinite;
}


/* ══════════════════════════════════════════════════════════
   8. PORTFOLIO — HUD HOVER EFFECTS
   Scan line + neon frame glow + image zoom on hover.
   ══════════════════════════════════════════════════════════ */

/* Scan line on hover — portbox already has position:relative + overflow:hidden via retro-base.css */
.portfoliowrp-hmpg .portbox::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rt-neon), transparent);
  opacity: 0;
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.portfoliowrp-hmpg .portbox:hover::after {
  opacity: 0.7;
  animation: rt-scan-card 2s ease-in-out infinite;
}

/* Image zoom + brightness on hover */
.portfoliowrp-hmpg .portbox .imgwrp img {
  transition: transform 0.6s var(--rt-ease), filter 0.4s ease;
}
.portfoliowrp-hmpg .portbox:hover .imgwrp img {
  transform: scale(1.05);
  filter: brightness(1.12) contrast(1.05);
}

/* Neon frame glow on hover */
.portfoliowrp-hmpg .portbox .imgwrp {
  transition: box-shadow 0.4s ease;
}
.portfoliowrp-hmpg .portbox:hover .imgwrp {
  box-shadow: inset 0 0 30px rgba(212,17,80,0.06), 0 0 40px rgba(212,17,80,0.08);
}

/* Play button pulse on hover */
.portfoliowrp-hmpg .playwrp span {
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.portfoliowrp-hmpg .portbox:hover .playwrp span {
  box-shadow: 0 0 24px var(--rt-neon-glow);
  transform: scale(1.15);
}


/* ══════════════════════════════════════════════════════════
   9. AWARDS — STAGGER REVEAL
   ══════════════════════════════════════════════════════════ */

body.rt-anim .awordwrp .awwords-slider li {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.5s var(--rt-ease), transform 0.5s var(--rt-ease);
}
body.rt-anim .awordwrp.rt-in .awwords-slider li {
  opacity: 1;
  transform: translateY(0);
}
body.rt-anim .awordwrp.rt-in .awwords-slider li:nth-child(1) { transition-delay: 0.05s; }
body.rt-anim .awordwrp.rt-in .awwords-slider li:nth-child(2) { transition-delay: 0.12s; }
body.rt-anim .awordwrp.rt-in .awwords-slider li:nth-child(3) { transition-delay: 0.2s; }
body.rt-anim .awordwrp.rt-in .awwords-slider li:nth-child(4) { transition-delay: 0.28s; }
body.rt-anim .awordwrp.rt-in .awwords-slider li:nth-child(5) { transition-delay: 0.36s; }
body.rt-anim .awordwrp.rt-in .awwords-slider li:nth-child(6) { transition-delay: 0.44s; }


/* ══════════════════════════════════════════════════════════
   10. SERVICES CONTENT — ICON STAGGER + FLOAT
   Icons appear one by one, then gently float.
   ══════════════════════════════════════════════════════════ */

body.rt-anim .services-content .branding-info li {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.55s var(--rt-ease), transform 0.55s var(--rt-ease);
}
body.rt-anim .services-content.rt-in .branding-info li {
  opacity: 1;
  transform: translateY(0);
}
body.rt-anim .services-content.rt-in .branding-info li:nth-child(1) { transition-delay: 0.05s; }
body.rt-anim .services-content.rt-in .branding-info li:nth-child(2) { transition-delay: 0.15s; }
body.rt-anim .services-content.rt-in .branding-info li:nth-child(3) { transition-delay: 0.25s; }
body.rt-anim .services-content.rt-in .branding-info li:nth-child(4) { transition-delay: 0.35s; }
body.rt-anim .services-content.rt-in .branding-info li:nth-child(5) { transition-delay: 0.45s; }

/* After reveal: icons float gently */
body.rt-anim .services-content.rt-in .branding-info li img {
  animation: rt-float 5s ease-in-out infinite;
}
body.rt-anim .services-content.rt-in .branding-info li:nth-child(2) img { animation-delay: 0.7s; }
body.rt-anim .services-content.rt-in .branding-info li:nth-child(3) img { animation-delay: 1.4s; }
body.rt-anim .services-content.rt-in .branding-info li:nth-child(4) img { animation-delay: 2.1s; }
body.rt-anim .services-content.rt-in .branding-info li:nth-child(5) img { animation-delay: 2.8s; }


/* ══════════════════════════════════════════════════════════
   11. DIVERSITY SECTION — CHECKLIST STAGGER
   Each list item slides in from the right.
   ══════════════════════════════════════════════════════════ */

body.rt-anim .secendwrp .txtwrp ul li {
  opacity: 0;
  transform: translateX(25px);
  transition: opacity 0.45s var(--rt-ease), transform 0.45s var(--rt-ease);
}
body.rt-anim .secendwrp.rt-in .txtwrp ul li {
  opacity: 1;
  transform: translateX(0);
}
body.rt-anim .secendwrp.rt-in .txtwrp ul li:nth-child(1) { transition-delay: 0.08s; }
body.rt-anim .secendwrp.rt-in .txtwrp ul li:nth-child(2) { transition-delay: 0.16s; }
body.rt-anim .secendwrp.rt-in .txtwrp ul li:nth-child(3) { transition-delay: 0.24s; }
body.rt-anim .secendwrp.rt-in .txtwrp ul li:nth-child(4) { transition-delay: 0.32s; }
body.rt-anim .secendwrp.rt-in .txtwrp ul li:nth-child(5) { transition-delay: 0.40s; }
body.rt-anim .secendwrp.rt-in .txtwrp ul li:nth-child(6) { transition-delay: 0.48s; }


/* ══════════════════════════════════════════════════════════
   12. FAQ SECTION
   NOTE: Per-item stagger removed — applying opacity:0 and
   transform to individual .quest-section elements interfered
   with the jQuery accordion click handler (href anchors fire
   before e.preventDefault() when opacity/transform are active).
   The whole .roleswrp section still fades in via the scroll
   reveal system targeting it directly.
   ══════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
   13. BOTTOM FORM — TRUST LOGOS STAGGER
   ══════════════════════════════════════════════════════════ */

body.rt-anim .btmformwrp .form-slider-wrp li {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
body.rt-anim .btmformwrp.rt-in .form-slider-wrp li {
  opacity: 1;
  transform: translateY(0);
}
body.rt-anim .btmformwrp.rt-in .form-slider-wrp li:nth-child(1) { transition-delay: 0.25s; }
body.rt-anim .btmformwrp.rt-in .form-slider-wrp li:nth-child(2) { transition-delay: 0.35s; }
body.rt-anim .btmformwrp.rt-in .form-slider-wrp li:nth-child(3) { transition-delay: 0.45s; }
body.rt-anim .btmformwrp.rt-in .form-slider-wrp li:nth-child(4) { transition-delay: 0.55s; }
body.rt-anim .btmformwrp.rt-in .form-slider-wrp li:nth-child(5) { transition-delay: 0.65s; }


/* ══════════════════════════════════════════════════════════
   14. CTA ROW (.brd-full) — NEON ICON PULSE
   ══════════════════════════════════════════════════════════ */

.brd-full .flx-phn i {
  animation: rt-glow-breathe 3.5s ease-in-out infinite;
  border-radius: 50%;
}


/* ══════════════════════════════════════════════════════════
   15. HEADING ACCENT — BLINKING STATUS DOT
   Adds a blinking neon dot before .upr-head labels,
   giving them a "system active" indicator feel.
   ══════════════════════════════════════════════════════════ */

.hompg .upr-head::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rt-neon);
  margin-right: 10px;
  vertical-align: middle;
  animation: rt-blink 2s infinite;
  box-shadow: 0 0 8px var(--rt-neon-glow);
}


/* ══════════════════════════════════════════════════════════
   16. ENHANCED BUTTON MICRO-INTERACTIONS
   ══════════════════════════════════════════════════════════ */

/* Primary buttons — glow intensify on hover (no layout changes) */
.hompg .btn-1:hover,
.hompg .btnmain:hover,
.hompg .btn-banner:hover {
  box-shadow: 0 6px 30px var(--rt-neon-glow), 0 0 60px rgba(212,17,80,0.12) !important;
  transform: translateY(-2px);
}

/* Ghost buttons — border glow on hover */
.hompg .btn-2:hover {
  box-shadow: 0 0 20px var(--rt-neon-glow), inset 0 0 12px rgba(212,17,80,0.05) !important;
}

/* Testimonial quote glow on hover */
.testimnl .testim-wrp .slick-slide .tesim-box {
  transition: box-shadow 0.4s ease;
}
.testimnl .testim-wrp .slick-slide:hover .tesim-box {
  box-shadow: 0 0 40px rgba(212,17,80,0.06), 0 10px 30px rgba(0,0,0,0.3);
}


/* ══════════════════════════════════════════════════════════
   17. SECTION NEON HORIZON LINES
   Subtle glowing divider lines between key sections.
   ══════════════════════════════════════════════════════════ */

.hompg .fitst-fld-wrp::after,
.hompg .portfoliowrp-hmpg::after,
.hompg .secendwrp::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rt-neon), transparent);
  opacity: 0.06;
  pointer-events: none;
}
/* .fitst-fld-wrp and .portfoliowrp-hmpg already position:relative in retro-base.css */
.hompg .secendwrp {
  position: relative;
}


/* ══════════════════════════════════════════════════════════
   18. CTA SECTION — DECORATIVE MOTION
   ══════════════════════════════════════════════════════════ */

.ctawrp .mainimgwrp img,
.ctawrp .imgwrp img.img-main {
  animation: rt-float 6s ease-in-out infinite;
}
.ctawrp .imgwrp img.img-main {
  animation-delay: 1.5s;
}


/* ══════════════════════════════════════════════════════════
   19. IMAGE ASPECT-RATIO SAFETY
   Legacy CSS uses width:100% without height:auto.
   These overrides prevent stretching when containers resize.
   ══════════════════════════════════════════════════════════ */

/* Content section images */
.hompg .fitst-fld-wrp .imgwrp img {
  height: auto !important;
  object-fit: contain !important;
}
/* Diversity section image */
.hompg .secendwrp .imgwrp img {
  height: auto !important;
  object-fit: contain !important;
}
/* Award badge images (have HTML width/height, just ensure no stretch) */
.hompg .awordwrp .mainwrp img {
  height: auto !important;
  object-fit: contain !important;
}
/* Portfolio images — fixed height, need cover to prevent stretching */
.hompg .portfoliowrp-hmpg .portbox .imgwrp img {
  object-fit: cover !important;
}
/* Service icons */
.hompg .services-content .branding-info li img {
  height: auto !important;
  object-fit: contain !important;
}
/* CTA decorative images */
.hompg .ctawrp img {
  height: auto !important;
  object-fit: contain !important;
}
/* Methodology step images */
.hompg .methodology-wrp img {
  height: auto !important;
  object-fit: contain !important;
}
/* Bottom form trust logos */
.hompg .btmformwrp img {
  height: auto !important;
  object-fit: contain !important;
}


/* ══════════════════════════════════════════════════════════
   20. RESPONSIVE ADJUSTMENTS
   ══════════════════════════════════════════════════════════ */

/* Respect OS-level reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
    animation-delay: 0ms !important;
  }
  .rt-grid-bg,
  .rt-scanlines,
  .rt-scan-beam,
  .rt-scroll-progress,
  .home-banr-wrp .rt-hero-ring {
    display: none !important;
  }
  /* Ensure all content is visible */
  html.rt-anim-ready .home-banr-wrp .extrawrp .imgtop,
  html.rt-anim-ready .home-banr-wrp .extrawrp .txtwrp,
  html.rt-anim-ready .home-banr-wrp .extrawrp .btnwrp,
  html.rt-anim-ready .home-banr-wrp .hero-trust-line,
  html.rt-anim-ready .home-banr-wrp .btm-bnr-box,
  body.rt-anim .rt-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Mobile: simplify for performance */
@media (max-width: 768px) {
  .rt-grid-bg { opacity: 0.15; }
  .rt-scan-beam { display: none; }
  .home-banr-wrp .rt-hero-ring { display: none; }

  /* Faster transitions on mobile */
  body.rt-anim .rt-reveal {
    transition-duration: 0.5s;
  }

  /* Disable floating icons on mobile */
  body.rt-anim .services-content.rt-in .branding-info li img {
    animation: none;
  }

  /* Disable CTA image float on mobile */
  .ctawrp .mainimgwrp img,
  .ctawrp .imgwrp img.img-main {
    animation: none;
  }
}

/* Tablet: reduce ring sizes */
@media (max-width: 992px) {
  .home-banr-wrp .rt-hero-ring:nth-child(1) {
    width: 300px; height: 300px;
  }
  .home-banr-wrp .rt-hero-ring:nth-child(3) {
    display: none;
  }
}
