/*
 * Sam Oyugi Solutions — Animation Layer
 * Loaded after styles.css and theme.css on all public pages.
 * All animations respect prefers-reduced-motion.
 */

/* ══════════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════════ */

@keyframes sos-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Flowing gradient sweep for hero span text */
@keyframes sos-grad-sweep {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Gentle vertical float */
@keyframes sos-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  40%       { transform: translateY(-11px) rotate(.5deg); }
  70%       { transform: translateY(-6px) rotate(-.4deg); }
}

/* Hero background orbs */
@keyframes sos-orb-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  35%       { transform: translate(45px, -35px) scale(1.1); }
  68%       { transform: translate(-28px, 22px) scale(0.93); }
}
@keyframes sos-orb-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  30%       { transform: translate(-38px, 28px) scale(0.92); }
  65%       { transform: translate(26px, -20px) scale(1.08); }
}

/* CTA button glow breathe */
@keyframes sos-btn-glow {
  0%, 100% { box-shadow: 0 14px 30px rgba(13,110,253,.22), 0 0 0 0 rgba(13,110,253,.00); }
  50%       { box-shadow: 0 20px 50px rgba(13,110,253,.40), 0 0 0 9px rgba(13,110,253,.07); }
}

/* Shimmer sweep */
@keyframes sos-shimmer {
  0%   { left: -80%; }
  100% { left: 160%; }
}

/* Kicker line grows in */
@keyframes sos-kicker-in {
  from { width: 0; opacity: 0; }
  to   { width: 27px; opacity: 1; }
}

/* WhatsApp button bob */
@keyframes sos-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-7px) scale(1.07); }
}

/* Icon box ping on hover */
@keyframes sos-icon-ping {
  0%   { box-shadow: 0 0 0 0 rgba(13,110,253,.35); }
  70%  { box-shadow: 0 0 0 14px rgba(13,110,253,.00); }
  100% { box-shadow: 0 0 0 0 rgba(13,110,253,.00); }
}

/* Stat number count-up placeholder — actual values driven by JS */
@keyframes sos-count-flash {
  0%  { opacity: .5; }
  100%{ opacity: 1; }
}

/* Underline slide in */
@keyframes sos-underline {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ══════════════════════════════════════════════
   PAGE ENTER
══════════════════════════════════════════════ */

body {
  animation: sos-fadein 0.45s cubic-bezier(.22,1,.36,1) both;
}

/* ══════════════════════════════════════════════
   HERO SECTION
══════════════════════════════════════════════ */

.home-hero {
  position: relative;
  overflow: hidden;
}

/* Everything inside hero sits above the canvas & orbs */
.home-hero > * {
  position: relative;
  z-index: 2;
}

/* Ambient orb A — top-right, teal */
.home-hero::before {
  content: "";
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--teal, #10b8a6) 0%, transparent 68%);
  opacity: .13;
  top: -140px; right: 2%;
  pointer-events: none;
  animation: sos-orb-a 18s ease-in-out infinite;
  z-index: 1;
}

/* Ambient orb B — bottom-left, blue */
.home-hero::after {
  content: "";
  position: absolute;
  width: 440px; height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--blue, #0d6efd) 0%, transparent 68%);
  opacity: .12;
  bottom: -100px; left: 10%;
  pointer-events: none;
  animation: sos-orb-b 22s ease-in-out infinite;
  z-index: 1;
}

/* Hero headline — second line flows with theme colors */
.home-hero h1 span {
  background: linear-gradient(
    90deg,
    var(--cyan, #43c6ff) 0%,
    var(--blue, #0d6efd) 28%,
    var(--teal, #10b8a6) 58%,
    var(--cyan, #43c6ff) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sos-grad-sweep 7s linear infinite;
}

/* Floating badge gently bobs */
.floating-badge {
  animation: sos-float 5s ease-in-out infinite;
  will-change: transform;
}

/* Stat strip numbers */
.stat-strip strong {
  display: block;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════
   SCROLL PROGRESS BAR
══════════════════════════════════════════════ */

#sos-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--blue, #0d6efd), var(--cyan, #43c6ff), var(--teal, #10b8a6));
  z-index: 9999;
  border-radius: 0 3px 3px 0;
  pointer-events: none;
  transition: width 0.06s linear;
}

/* ══════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════ */

/* Primary CTAs in the hero and CTA band breathe with a glow */
.home-hero .btn:not(.btn-secondary):not(.btn-ghost):not(.btn-light),
.cta-band .btn:not(.btn-secondary) {
  animation: sos-btn-glow 3.8s ease-in-out infinite;
}
.home-hero .btn:hover,
.cta-band .btn:hover {
  animation: none;
}

/* nav-cta gets a sweeping shimmer */
.nav-cta {
  position: relative;
  overflow: hidden;
}
.nav-cta::after {
  content: "";
  position: absolute;
  top: -10%; left: -80%;
  width: 55%; height: 120%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  animation: sos-shimmer 4s ease-in-out 1.5s infinite;
  pointer-events: none;
  border-radius: inherit;
}

/* ══════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════ */

.card {
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-7px);
  box-shadow: 0 24px 56px rgba(0,0,0,.14);
}

.sector-card {
  transition: transform 0.28s cubic-bezier(.34,1.56,.64,1), box-shadow 0.28s ease, border-color 0.25s;
}
.sector-card:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 14px 38px rgba(0,0,0,.12);
}

.smart-access-card {
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease;
}
.smart-access-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 52px rgba(0,0,0,.15);
}

/* Project / service cards */
.project-card,
.service-card {
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease;
}
.project-card:hover,
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,0,0,.14);
}

/* Partnership cards */
.partner-card {
  transition: transform 0.28s cubic-bezier(.34,1.56,.64,1), box-shadow 0.28s ease;
}
.partner-card:hover {
  transform: translateY(-5px);
}

/* Support cards */
.support-card {
  transition: transform 0.28s cubic-bezier(.34,1.56,.64,1), box-shadow 0.28s ease !important;
}
.support-card:hover {
  transform: translateY(-5px);
}

/* ══════════════════════════════════════════════
   ICON BOXES
══════════════════════════════════════════════ */

.icon-box {
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease, background 0.25s;
}
.card:hover .icon-box {
  transform: scale(1.14) rotate(-4deg);
  box-shadow: 0 8px 28px rgba(13,110,253,.28);
  animation: sos-icon-ping 0.6s ease-out;
}

/* ══════════════════════════════════════════════
   KICKER DECORATION LINE
══════════════════════════════════════════════ */

/* When the parent becomes visible, the kicker line draws itself in */
.reveal.visible .kicker::before,
.section-head.reveal.visible .kicker::before,
.visible .kicker::before {
  animation: sos-kicker-in 0.55s 0.25s cubic-bezier(.22,1,.36,1) both;
}

/* ══════════════════════════════════════════════
   NAVIGATION LINK UNDERLINE
══════════════════════════════════════════════ */

.main-nav a {
  position: relative;
}
.main-nav a::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 0;
  width: 100%; height: 1.5px;
  background: var(--cyan, #43c6ff);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(.22,1,.36,1);
}
.main-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.main-nav a.active::after {
  transform: scaleX(1);
}

/* ══════════════════════════════════════════════
   LINK ARROWS (→)
══════════════════════════════════════════════ */

.link-arrow {
  display: inline-block;
  transition: letter-spacing 0.25s ease, color 0.2s;
}
.link-arrow:hover {
  letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════════
   WHATSAPP FLOAT
══════════════════════════════════════════════ */

.whatsapp-float {
  animation: sos-bob 3.4s ease-in-out infinite;
  will-change: transform;
}

/* ══════════════════════════════════════════════
   METRIC CARD NUMBERS
══════════════════════════════════════════════ */

.metric-card strong {
  display: block;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════
   REVEAL STAGGER HELPERS (set by JS via CSS var)
══════════════════════════════════════════════ */

[data-stagger] {
  transition-delay: var(--sd, 0ms);
}

/* ══════════════════════════════════════════════
   CURSOR GLOW (injected by JS)
══════════════════════════════════════════════ */

#sos-cursor-glow {
  position: fixed;
  width: 380px; height: 380px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, rgba(67,198,255,.048) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.4s;
  will-change: left, top;
}

/* ══════════════════════════════════════════════
   PARTICLE CANVAS
══════════════════════════════════════════════ */

#sos-particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: .5;
  z-index: 0;
}

/* ══════════════════════════════════════════════
   SECTION HEADING ANIMATIONS
══════════════════════════════════════════════ */

/* Section-head divs inside a section animate slightly faster */
.section-head.reveal {
  transition-duration: 0.55s;
}

/* ══════════════════════════════════════════════
   TIMELINE DOTS (about.html)
══════════════════════════════════════════════ */

.timeline-item {
  transition: transform 0.25s ease;
}
.timeline-item:hover {
  transform: translateX(5px);
}

/* ══════════════════════════════════════════════
   SURVEY STEPS (survey.html)
══════════════════════════════════════════════ */

.survey-step {
  transition: transform 0.22s ease, opacity 0.22s;
}

/* ══════════════════════════════════════════════
   HEADER SCROLL SHADOW
   JS adds .scrolled class on body when y > 40px
══════════════════════════════════════════════ */

.site-header {
  transition: box-shadow 0.3s ease, background 0.3s;
}
body.scrolled .site-header {
  box-shadow: 0 4px 32px rgba(0,0,0,.22);
}

/* ══════════════════════════════════════════════
   PORTAL / ACCESS CARDS
══════════════════════════════════════════════ */

.access-badge {
  transition: transform 0.2s ease, background 0.2s;
}
.smart-access-card:hover .access-badge {
  transform: scale(1.08) rotate(-2deg);
}

/* ══════════════════════════════════════════════
   PAGE HERO  (about, services, projects, contact…)
   Same full treatment as .home-hero
══════════════════════════════════════════════ */

.page-hero {
  position: relative;
  overflow: hidden;
}

/* All direct children sit above canvas & orbs */
.page-hero > * {
  position: relative;
  z-index: 2;
}

/* Orb A — top-right, teal */
.page-hero::before {
  content: "";
  position: absolute;
  width: 440px; height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--teal, #10b8a6) 0%, transparent 68%);
  opacity: .13;
  top: -100px; right: 5%;
  pointer-events: none;
  animation: sos-orb-a 18s ease-in-out infinite;
  z-index: 1;
}

/* Orb B — bottom-left, blue */
.page-hero::after {
  content: "";
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--blue, #0d6efd) 0%, transparent 68%);
  opacity: .12;
  bottom: -80px; left: 15%;
  pointer-events: none;
  animation: sos-orb-b 22s ease-in-out infinite;
  z-index: 1;
}

/* Page hero h1 — flowing gradient across the full title */
.page-hero h1 {
  background: linear-gradient(
    90deg,
    var(--cyan, #43c6ff) 0%,
    var(--blue, #0d6efd) 28%,
    var(--teal, #10b8a6) 58%,
    var(--cyan, #43c6ff) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sos-grad-sweep 7s linear infinite;
}

/* Page visual image gently bobs like the floating badge */
.page-visual {
  position: relative;
}
.page-visual img {
  animation: sos-float 6s ease-in-out 0.6s infinite;
}

/* ══════════════════════════════════════════════
   QUOTE PANELS
══════════════════════════════════════════════ */

.quote-panel {
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease;
}
.quote-panel:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 64px rgba(13,110,253,.28);
}

/* ══════════════════════════════════════════════
   FEATURE LIST ITEMS
══════════════════════════════════════════════ */

.feature-item {
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), background 0.2s;
}
.feature-item:hover {
  transform: translateX(7px);
}
.feature-item span {
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.feature-item:hover span {
  transform: scale(1.15) rotate(-5deg);
}

/* ══════════════════════════════════════════════
   FORM FIELDS — glow on focus
══════════════════════════════════════════════ */

.form-card input,
.form-card textarea,
.form-card select {
  transition: border-color 0.22s, box-shadow 0.22s, background 0.22s;
}
.form-card input:focus,
.form-card textarea:focus,
.form-card select:focus {
  box-shadow: 0 0 0 3px rgba(13,110,253,.16), 0 2px 8px rgba(0,0,0,.07);
  outline: none;
}

/* ══════════════════════════════════════════════
   AREA BUTTONS (coverage) — ripple on click
══════════════════════════════════════════════ */

.area-button {
  position: relative;
  overflow: hidden;
}

@keyframes sos-ripple {
  0%   { transform: scale(0); opacity: .45; }
  100% { transform: scale(5); opacity: 0; }
}
.sos-ripple {
  position: absolute;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--blue, #0d6efd);
  margin-left: -25px; margin-top: -25px;
  pointer-events: none;
  animation: sos-ripple 0.5s ease-out forwards;
}

/* ══════════════════════════════════════════════
   APPLICATION / CAREERS PANEL
══════════════════════════════════════════════ */

.application-panel {
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease;
}
.application-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 54px rgba(13,110,253,.18);
}

/* ══════════════════════════════════════════════
   FAQ ACCORDION
══════════════════════════════════════════════ */

.faq-button {
  transition: color 0.2s, background 0.2s, padding-left 0.25s;
}
.faq-item.open .faq-button {
  color: var(--blue, #0d6efd);
  padding-left: 6px;
}
.faq-content {
  transition: max-height 0.35s cubic-bezier(.22,1,.36,1), opacity 0.3s;
}

/* ══════════════════════════════════════════════
   SERVICE DETAIL ROWS (services page)
══════════════════════════════════════════════ */

.service-detail {
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), border-color 0.25s;
}
.service-detail:hover {
  transform: translateX(6px);
  border-left: 3px solid var(--blue, #0d6efd);
}

/* ══════════════════════════════════════════════
   SECTOR CARDS — accent left border on hover
══════════════════════════════════════════════ */

.sector-card {
  border-left: 3px solid transparent;
}
.sector-card:hover {
  border-left-color: var(--blue, #0d6efd);
}

/* ══════════════════════════════════════════════
   HIRING / CAREERS STATUS BADGE
══════════════════════════════════════════════ */

.hiring-status {
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), background 0.2s;
}
.hiring-notice:hover .hiring-status {
  transform: scale(1.06);
}

/* ══════════════════════════════════════════════
   PARTNER / CONTACT TAGS
══════════════════════════════════════════════ */

.tag {
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), background 0.2s, color 0.2s;
}
.tag:hover {
  transform: scale(1.07);
  background: var(--blue, #0d6efd);
  color: #fff;
}

/* ══════════════════════════════════════════════
   COVERAGE RESULT PANEL — slide up on show
══════════════════════════════════════════════ */

@keyframes sos-slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.coverage-result.show {
  animation: sos-slide-up 0.35s cubic-bezier(.22,1,.36,1) both;
}

/* ══════════════════════════════════════════════
   PROJECT CARDS — image zoom on hover
══════════════════════════════════════════════ */

.project-visual {
  overflow: hidden;
}
.project-visual img {
  transition: transform 0.5s cubic-bezier(.22,1,.36,1);
}
.project-card:hover .project-visual img {
  transform: scale(1.06);
}

/* ══════════════════════════════════════════════
   SMART CHOICE BUTTONS (smart finder widget)
══════════════════════════════════════════════ */

[data-smart-choice] {
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), border-color 0.2s, background 0.2s !important;
}
[data-smart-choice]:hover,
[data-smart-choice].active {
  transform: translateY(-3px);
}

/* ══════════════════════════════════════════════
   SUPPORT CARDS
══════════════════════════════════════════════ */

.support-topic-card {
  transition: transform 0.28s cubic-bezier(.34,1.56,.64,1), box-shadow 0.28s;
}
.support-topic-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(0,0,0,.12);
}

/* ══════════════════════════════════════════════
   POLICY PAGES  (privacy.html, terms.html)
   No page-hero on these pages — animate the content
   section instead.
══════════════════════════════════════════════ */

/* Wrap the policy section in a pseudo-orb background */
.section-soft:has(.policy) {
  position: relative;
  overflow: hidden;
}
.section-soft:has(.policy)::before {
  content: "";
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--blue, #0d6efd) 0%, transparent 65%);
  opacity: .07;
  top: -160px; right: -60px;
  pointer-events: none;
  animation: sos-orb-a 20s ease-in-out infinite;
  z-index: 0;
}
.section-soft:has(.policy) > * {
  position: relative;
  z-index: 1;
}

/* Policy h1 — gradient sweep */
.policy h1 {
  background: linear-gradient(
    90deg,
    var(--cyan, #43c6ff) 0%,
    var(--blue, #0d6efd) 28%,
    var(--teal, #10b8a6) 58%,
    var(--cyan, #43c6ff) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sos-grad-sweep 7s linear infinite;
}

/* Policy h2 — decorative accent line */
.policy h2 {
  position: relative;
  padding-bottom: 10px;
}
.policy h2::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 36px; height: 2px;
  background: linear-gradient(90deg, var(--blue, #0d6efd), var(--teal, #10b8a6));
  border-radius: 2px;
  opacity: .75;
}

/* ══════════════════════════════════════════════
   404 / EMPTY STATE PAGE
══════════════════════════════════════════════ */

@keyframes sos-404-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  35%       { transform: translateY(-22px) scale(1.03); }
  65%       { transform: translateY(-10px) scale(1.01); }
}

.empty-state h1 {
  background: linear-gradient(
    90deg,
    var(--cyan, #43c6ff) 0%,
    var(--blue, #0d6efd) 35%,
    var(--teal, #10b8a6) 65%,
    var(--cyan, #43c6ff) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sos-grad-sweep 4s linear infinite, sos-404-bounce 3.5s ease-in-out 0.8s infinite;
  display: inline-block;
}

/* Orb behind the 404 section */
.section-soft:has(.empty-state) {
  position: relative;
  overflow: hidden;
}
.section-soft:has(.empty-state)::before {
  content: "";
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--blue, #0d6efd) 0%, transparent 65%);
  opacity: .07;
  top: -150px; left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  animation: sos-orb-b 16s ease-in-out infinite;
  z-index: 0;
}
.section-soft:has(.empty-state) > * {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════
   DARK SECTIONS — ambient background orb
   Makes every .section-dark feel alive, not flat.
══════════════════════════════════════════════ */

.section-dark {
  position: relative;
  overflow: hidden;
}
.section-dark::before {
  content: "";
  position: absolute;
  width: 640px; height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--blue, #0d6efd) 0%, transparent 60%);
  opacity: .04;
  top: -220px; right: -120px;
  pointer-events: none;
  animation: sos-orb-a 28s ease-in-out infinite;
  z-index: 0;
}
.section-dark > * {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════
   CTA BANDS — shimmer + content lift
══════════════════════════════════════════════ */

.cta-band {
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,.04) 50%,
    transparent 70%
  );
  animation: sos-shimmer 6s ease-in-out 3s infinite;
  pointer-events: none;
  z-index: 0;
}
.cta-band > * {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════
   DIRECTIONAL CARD REVEALS
   Assigned dynamically by anim.js based on column
   position within .grid-3 / .grid-2 / .grid-4
══════════════════════════════════════════════ */

/* From the left */
.sos-rl {
  transform: translateX(-32px) translateY(8px) !important;
  transition: opacity 0.75s, transform 0.8s cubic-bezier(.22,1,.36,1) !important;
}
/* From the right */
.sos-rr {
  transform: translateX(32px) translateY(8px) !important;
  transition: opacity 0.75s, transform 0.8s cubic-bezier(.22,1,.36,1) !important;
}
/* Scale + rise (centre column) */
.sos-rs {
  transform: scale(0.9) translateY(16px) !important;
  transition: opacity 0.75s, transform 0.8s cubic-bezier(.22,1,.36,1) !important;
}

.sos-rl.visible,
.sos-rr.visible,
.sos-rs.visible {
  transform: none !important;
  opacity: 1;
}

/* ══════════════════════════════════════════════
   FOOTER LINKS — slide underline on hover
   Exclude .brand (logo link) and social links
══════════════════════════════════════════════ */

.footer-grid a:not(.brand) {
  position: relative;
  display: inline-block;
}
.footer-grid a:not(.brand)::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0;
  width: 100%; height: 1px;
  background: var(--cyan, #43c6ff);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.28s cubic-bezier(.22,1,.36,1);
}
.footer-grid a:not(.brand):hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ══════════════════════════════════════════════
   SECTION-SOFT — subtle top accent for sections
   that immediately follow the hero
══════════════════════════════════════════════ */

.page-hero + .section-soft,
.home-hero + .section-soft {
  position: relative;
}
.page-hero + .section-soft::before,
.home-hero + .section-soft::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--blue, #0d6efd) 30%,
    var(--cyan, #43c6ff) 50%,
    var(--teal, #10b8a6) 70%,
    transparent
  );
  opacity: .4;
  pointer-events: none;
  z-index: 2;
}

/* ══════════════════════════════════════════════
   PREFERS REDUCED MOTION — full override
══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  /* Reset all custom animations */
  body,
  .floating-badge,
  .whatsapp-float,
  .home-hero::before,
  .home-hero::after,
  .home-hero .btn,
  .cta-band .btn,
  .cta-band::before,
  .nav-cta::after,
  .home-hero h1 span,
  .page-hero::before,
  .page-hero::after,
  .page-hero h1,
  .page-visual img,
  .section-dark::before,
  .section-soft:has(.policy)::before,
  .section-soft:has(.empty-state)::before,
  .policy h1,
  .empty-state h1 {
    animation: none !important;
    transition: none !important;
  }

  /* Restore h1 plain colour */
  .home-hero h1 span,
  .page-hero h1,
  .policy h1,
  .empty-state h1 {
    -webkit-text-fill-color: var(--cyan, #43c6ff);
    background: none !important;
  }

  /* Disable all motion */
  .card,
  .sector-card,
  .smart-access-card,
  .project-card,
  .service-card,
  .support-card,
  .quote-panel,
  .feature-item,
  .service-detail,
  .timeline-item,
  .area-button,
  .application-panel,
  .sos-rl,
  .sos-rr,
  .sos-rs,
  .footer-grid a {
    transition: none !important;
    animation: none !important;
  }

  /* Directional reveals — make visible immediately */
  .sos-rl,
  .sos-rr,
  .sos-rs {
    transform: none !important;
    opacity: 1 !important;
  }

  /* Disable nav + footer underlines */
  .main-nav a::after,
  .footer-grid a:not(.brand)::after {
    display: none;
  }
}