/* SAG Motion — styles the GSAP layer relies on. */

/* Hero + header start hidden only while motion is pending; failsafe reveals them if GSAP never loads. */
html.sag-motion:not(.sag-ready) .sag-hero > .e-con-inner,
html.sag-motion:not(.sag-ready) .sag-header { opacity: 0; animation: sag-failsafe 0s 2.5s forwards; }
@keyframes sag-failsafe { to { opacity: 1; } }

/* Word-by-word heading reveal masks. */
.sag-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.sag-wi { display: inline-block; will-change: transform; }

/* Scroll progress line. */
.sag-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: #E10600; transform: scaleX(0); transform-origin: 0 50%; z-index: 10000; pointer-events: none; }

/* Header gains depth once the page scrolls. */
.sag-header { transition: box-shadow .35s ease, background-color .35s ease; }
.sag-header.is-scrolled { box-shadow: 0 12px 32px rgba(0, 0, 0, .5); background: rgba(10, 10, 10, .97) !important; }

/* Hero: animated diagonal slash + red glow behind the badge. */
.sag-hero::after { transform: translateX(var(--slash-x, 0)); opacity: var(--slash-o, 1); }
.sag-glow-host { position: relative; isolation: isolate; }
.sag-glow { position: absolute; inset: -18%; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(225, 6, 0, .38), rgba(225, 6, 0, 0) 72%); }

/* Founding band light sweep. */
#founding { position: relative; overflow: hidden; }
.sag-shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .16) 50%, transparent 62%); transform: translateX(-100%); }

/* Cards lift on hover. */
.sag-card-fx { transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .45s; }
.sag-card-fx:hover { transform: translateY(-6px); border-color: #E10600 !important; box-shadow: 0 22px 44px -16px rgba(225, 6, 0, .4); }
.sag-card-fx .elementor-icon { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.sag-card-fx:hover .elementor-icon { transform: scale(1.12) rotate(-6deg); }

/* Floating WhatsApp pulse ring. */
.sag-wa-float .elementor-button { position: relative; }
.sag-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
	.sag-card-fx, .sag-card-fx .elementor-icon, .sag-header { transition: none; }
	.sag-card-fx:hover { transform: none; }
}

/* ===== Premium layer — effects adapted from Magic UI (Shimmer Button, Magic Card, Animated Shiny Text, Marquee) ===== */

/* Pill badge above the hero headline (class: sag-pill on a Heading). */
.sag-pill { align-self: flex-start; width: auto; }
.sag-pill .elementor-heading-title { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(18, 18, 18, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #E5E5E5 !important; }
.sag-pill .elementor-heading-title::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #E10600; animation: sag-ping 2s ease-out infinite; }
.sag-pill .elementor-heading-title::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .2) 50%, transparent 70%); transform: translateX(-100%); animation: sag-sweep 4s ease-in-out infinite; pointer-events: none; }
@keyframes sag-ping { 0% { box-shadow: 0 0 0 0 rgba(225, 6, 0, .7); } 80%, 100% { box-shadow: 0 0 0 8px rgba(225, 6, 0, 0); } }
@keyframes sag-sweep { 0%, 35% { transform: translateX(-100%); } 75%, 100% { transform: translateX(100%); } }

/* Animated red gradient on highlighted words (class sag-red inside a heading). */
.sag-red, .sag-red .sag-wi { background: linear-gradient(90deg, #E10600, #FF5A4F, #E10600, #FF5A4F, #E10600) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sag-grad 6s linear infinite; }
@keyframes sag-grad { to { background-position: -200% 0; } }

/* Shimmer button (class: sag-shimmer on a Button): a light travels around the border. */
.sag-shimmer .elementor-button { position: relative; isolation: isolate; overflow: hidden; background: transparent !important; border-color: transparent !important; box-shadow: 0 12px 32px -12px rgba(225, 6, 0, .75); }
.sag-shimmer .elementor-button::before { content: ""; position: absolute; inset: -250% -40%; z-index: -2; background: conic-gradient(from 0deg, transparent 0 290deg, rgba(255, 255, 255, .95) 325deg, transparent 360deg); animation: sag-spin 3s linear infinite; }
.sag-shimmer .elementor-button::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: inherit; background: #E10600; box-shadow: inset 0 -8px 12px rgba(255, 255, 255, .14); transition: background .25s, box-shadow .25s; }
.sag-shimmer .elementor-button:hover::after { background: #FF1A12; box-shadow: inset 0 -6px 12px rgba(255, 255, 255, .3); }
@keyframes sag-spin { to { transform: rotate(1turn); } }

/* Hero facts row. */
.sag-stats { border-top: 1px solid rgba(255, 255, 255, .12); }
.sag-stat p { margin: 0; font-size: 13px; line-height: 1.4; color: #A3A3A3; max-width: 160px; }
.sag-stat-num .elementor-heading-title { font-variant-numeric: tabular-nums; }

/* Marquee band (class: sag-marquee on a Heading inside a full-width container with sag-marquee-band). */
.sag-marquee-band { overflow: hidden; }
.sag-marquee .elementor-heading-title { display: block; white-space: nowrap; font-size: clamp(40px, 7vw, 96px) !important; line-height: 1.05 !important; color: transparent !important; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .32); }
.sag-mq-track { display: inline-flex; will-change: transform; }
.sag-mq-dot { color: #E10600; -webkit-text-stroke: 0; padding: 0 .3em; }

/* Photo cards + spotlight that follows the mouse (Magic Card). */
.sag-photo-card { overflow: hidden; }
.sag-spot { position: relative; }
.sag-spotlight { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(360px circle at var(--x, 50%) var(--y, 50%), rgba(225, 6, 0, .26), transparent 65%); }
.sag-spot:hover .sag-spotlight { opacity: 1; }
.sag-spot > .elementor-element, .sag-spot > .e-con-inner { position: relative; z-index: 2; }
.sag-photo-card .elementor-icon { background: rgba(10, 10, 10, .55); border-color: rgba(225, 6, 0, .7) !important; border-radius: 4px; }

/* Red offset frame behind an image (class: sag-frame on a container). */
.sag-frame { position: relative; }
.sag-frame::after { content: ""; position: absolute; inset: 18px -14px -14px 18px; border: 2px solid rgba(225, 6, 0, .55); border-radius: 8px; z-index: 0; pointer-events: none; }
.sag-frame > .elementor-element { position: relative; z-index: 1; }
@media (max-width: 767px) { .sag-frame::after { inset: 12px -8px -8px 12px; } }

@media (prefers-reduced-motion: reduce) {
	.sag-pill .elementor-heading-title::before, .sag-pill .elementor-heading-title::after, .sag-red, .sag-red .sag-wi, .sag-shimmer .elementor-button::before { animation: none; }
}

/* Hero logo badge (class: sag-badge on an Image). */
.sag-badge img { border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 80px -24px rgba(225, 6, 0, .55), 0 20px 40px -20px rgba(0, 0, 0, .8); }