/* =========================================================================
 Helmara - Animation support styles
 GSAP (loaded from CDN in index.html) drives the actual entrance/scroll
 timelines from js/animations.js by writing inline styles at runtime, so
 this file intentionally does NOT hide content by default: if the GSAP
 CDN fails to load or JavaScript is disabled, everything defined here
 must still render fully visible or reduced-motion animate with CSS.
 ========================================================================= */

/* Generic scroll-reveal target. animations.js sets the pre-animation state
 (opacity/transform) via gsap.set() only once GSAP has loaded - so by
 default (no JS / no GSAP) every [data-reveal] element is fully visible. */
[data-reveal] {
 opacity: 1;
}

/* Hero elements - same principle: full visibility until animations.js
 takes over via GSAP; the JS applies gsap.set(...) synchronously before
 playing the entrance timeline so there is no flash of an "animated-out"
 state on a successful load. */
[data-hero-eyebrow],
[data-hero-line1],
[data-hero-line2],
[data-hero-body],
[data-hero-cta],
[data-hero-dashboard],
[data-hero-tile-motion],
[data-hero-tile-mobile] {
 opacity: 1;
}

/* Idle float - CSS fallback ONLY when GSAP did not initialize.
 When animations.js runs it adds `html.gsap-ready`, which disables this
 so CSS and GSAP never fight (that conflict was shifting tiles after
 entrance and causing a manic infinite loop).
 Transform here must NOT include translate(-50%, -50%) - that lives on
 the outer .hero__tile wrapper, matching /client HeroSection.jsx. */
@media (min-width: 1200px) {
 html:not(.gsap-ready) .hero__tile-motion {
 animation: hero-tile-float 6s ease-in-out infinite;
 }
 html:not(.gsap-ready) .hero__tile--email .hero__tile-motion {
 animation-delay: 0.3s;
 }
 html:not(.gsap-ready) .hero__tile--leads .hero__tile-motion {
 animation-delay: 0.6s;
 }
 html:not(.gsap-ready) .hero__tile--calling .hero__tile-motion {
 animation-delay: 0.15s;
 }
 html:not(.gsap-ready) .hero__tile--support .hero__tile-motion {
 animation-delay: 0.45s;
 }
 html:not(.gsap-ready) .hero__tile--ads .hero__tile-motion {
 animation-delay: 0.75s;
 }
}

@keyframes hero-tile-float {
 0%,
 100% {
 transform: translateY(0) rotate(0deg);
 }
 50% {
 transform: translateY(-5px) rotate(0.6deg);
 }
}

/* Connector path draw-in - CSS fallback that mirrors the GSAP
 strokeDashoffset animation for browsers where the JS timeline could not
 initialize (GSAP failed to load from the CDN). */
.hero__connectors path[data-connector-fallback] {
 animation: hero-connector-draw 1.4s ease-out both;
}

html.gsap-ready .hero__connectors path[data-connector-fallback] {
 animation: none;
}

@keyframes hero-connector-draw {
 from {
 stroke-dashoffset: 1000;
 }
 to {
 stroke-dashoffset: 0;
 }
}

/* Simple utility keyframes reused by a few CSS-only interactions
 (kept intentionally small; GSAP owns the choreographed sequences). */
@keyframes fade-in-up {
 from {
 opacity: 0;
 transform: translateY(16px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

.no-js [data-reveal],
.no-js [data-hero-eyebrow],
.no-js [data-hero-line1],
.no-js [data-hero-line2],
.no-js [data-hero-body],
.no-js [data-hero-cta],
.no-js [data-hero-dashboard],
.no-js [data-hero-tile-motion],
.no-js [data-hero-tile-mobile] {
 opacity: 1 !important;
 transform: none !important;
 filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
 .hero__tile-motion {
 animation: none !important;
 }

 .hero__connectors path[data-connector-fallback] {
 animation: none !important;
 stroke-dashoffset: 0 !important;
 }

 .hero-connector-energy {
 animation: none !important;
 }
}