/* DSH Dakdekkers — Scroll & Counter Animations
   Intersection Observer driven: no layout-shift, GPU-accelerated */

/* ── Base animation states ─────────────────────────────── */
.fade-up,
.fade-in,
.scale-in {
  opacity: 0;
  will-change: opacity, transform;
}

.fade-up   { transform: translateY(40px); }
.fade-in   { transform: none; }
.scale-in  { transform: scale(0.92); }

/* ── Animated (visible) states ─────────────────────────── */
.fade-up.anim,
.fade-in.anim,
.scale-in.anim {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .55s cubic-bezier(.22,.68,0,1.2),
              transform .55s cubic-bezier(.22,.68,0,1.2);
}

/* ── Stagger delays (auto-applied via JS to nth children) ─ */
.anim-d1 { transition-delay: .08s !important; }
.anim-d2 { transition-delay: .16s !important; }
.anim-d3 { transition-delay: .24s !important; }
.anim-d4 { transition-delay: .32s !important; }
.anim-d5 { transition-delay: .40s !important; }
.anim-d6 { transition-delay: .48s !important; }
.anim-d7 { transition-delay: .56s !important; }
.anim-d8 { transition-delay: .64s !important; }

/* ── Section header support ────────────────────────────── */
.section-head { opacity: 0; transform: translateY(32px); transition: opacity .5s ease, transform .5s ease; }
.section-head.anim { opacity: 1; transform: translateY(0); }

/* ── Card hover lift ───────────────────────────────────── */
.svc   { transition: transform .25s ease, box-shadow .25s ease, opacity .55s cubic-bezier(.22,.68,0,1.2) !important; }
.usp   { transition: transform .25s ease, box-shadow .25s ease, opacity .55s cubic-bezier(.22,.68,0,1.2) !important; }
.testi { transition: transform .25s ease, box-shadow .25s ease, opacity .55s cubic-bezier(.22,.68,0,1.2) !important; }

.svc:hover,
.usp:hover,
.testi:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 18px 36px rgba(28,39,76,.16) !important;
}

/* ── Pulse animation on primary CTA button ─────────────── */
@keyframes ctaPulse {
  0%   { box-shadow: 0 6px 20px rgba(249,115,22,.35); }
  50%  { box-shadow: 0 8px 28px rgba(249,115,22,.65), 0 0 0 8px rgba(249,115,22,.10); }
  100% { box-shadow: 0 6px 20px rgba(249,115,22,.35); }
}

.hero-cta .btn-primary {
  animation: ctaPulse 3s ease-in-out infinite;
}
.hero-cta .btn-primary:hover {
  animation: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(249,115,22,.55);
}

/* ── Counter element ───────────────────────────────────── */
.stat .num[data-count] {
  display: inline-block;
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM HERO — Animated gradient text, shine & warm glow
   ══════════════════════════════════════════════════════════════ */

/* ── Keyframes ──────────────────────────────────────────── */

/* White → warm orange → white flowing gradient for h1 */
@keyframes heroTitleFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 200% 50%; }
  100% { background-position: 0% 50%; }
}

/* Orange → gold → white → amber → orange for .yellow spans */
@keyframes orangeGoldFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 200% 50%; }
  100% { background-position: 0% 50%; }
}

/* Shine sweep — bright streak passing across element */
@keyframes shineSweep {
  0%     { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  3%     { opacity: 1; }
  40%    { transform: translateX(300%) skewX(-18deg); opacity: .8; }
  41%, 100% { opacity: 0; transform: translateX(300%) skewX(-18deg); }
}

/* Warm glow pulse for lead text */
@keyframes warmGlow {
  0%, 100% { color: #cdd5e8; text-shadow: none; }
  50%       { color: #e8d8c4; text-shadow: 0 0 24px rgba(249,115,22,.12); }
}

/* Number orange glow */
@keyframes numOrangeGlow {
  0%, 100% { text-shadow: 0 0 0 rgba(249,115,22,0); }
  50%       { text-shadow: 0 0 18px rgba(249,115,22,.55), 0 0 36px rgba(249,115,22,.22); }
}

/* Badge pulse ring */
@keyframes badgeRingPulse {
  0%   { box-shadow: 0 0 0 0 rgba(249,115,22,.55), 0 0 0 0 rgba(249,115,22,.3); }
  60%  { box-shadow: 0 0 0 8px rgba(249,115,22,.0), 0 0 0 16px rgba(249,115,22,0); }
  100% { box-shadow: 0 0 0 0 rgba(249,115,22,0); }
}

/* Ambient warm orb drift */
@keyframes orbDrift {
  0%   { transform: translate(0, 0) scale(1); opacity: .55; }
  33%  { transform: translate(30px, -20px) scale(1.12); opacity: .75; }
  66%  { transform: translate(-20px, 15px) scale(.92); opacity: .5; }
  100% { transform: translate(0, 0) scale(1); opacity: .55; }
}

/* Section title orange shimmer */
@keyframes sectionLabelShine {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 200% 50%; }
  100% { background-position: 0% 50%; }
}

/* Gradient text reveal on load */
@keyframes textRevealIn {
  from { opacity: 0; transform: translateY(16px) skewY(.5deg); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* Premium button shimmer (continuous left→right sweep) */
@keyframes btnGradientFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ── Hero h1 — white→warm→orange→white animated gradient ── */
/* Fallback: white text always visible; gradient enhances on top */
.hero h1 {
  color: #ffffff; /* safe fallback */
  background: linear-gradient(
    120deg,
    #ffffff    0%,
    #fff8f3   12%,
    #fde8d0   25%,
    #F97316   38%,
    #fbbf24   50%,
    #F97316   62%,
    #fde8d0   75%,
    #fff8f3   88%,
    #ffffff  100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroTitleFlow 9s ease-in-out infinite;
  will-change: background-position;
}
/* Safety: if background-clip:text not supported, show white */
@supports not (-webkit-background-clip: text) {
  .hero h1 {
    background: none;
    -webkit-text-fill-color: #ffffff;
    color: #ffffff;
    animation: none;
  }
}

/* ── .yellow inside h1 — intense orange/gold/amber shimmer ─ */
.hero h1 .yellow {
  background: linear-gradient(
    90deg,
    #F97316  0%,
    #fbbf24 20%,
    #ffffff 38%,
    #F97316 50%,
    #fde68a 68%,
    #ea580c 82%,
    #F97316 100%
  ) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: orangeGoldFlow 3.5s ease-in-out infinite !important;
  will-change: background-position;
}

/* ── Hero lead text — warm color pulse ──────────────────── */
.hero p.lead {
  animation: warmGlow 6s ease-in-out infinite;
}

/* ── Hero badge — pulsing ring + shine ──────────────────── */
.hero-badge {
  position: relative;
  overflow: hidden;
  animation: badgeRingPulse 3s ease-out infinite;
}
.hero-badge::after {
  content: '';
  position: absolute;
  top: -10%;
  left: 0;
  width: 45%;
  height: 120%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 200, 100, .28) 50%,
    transparent 100%
  );
  animation: shineSweep 4.5s ease-in-out 1.2s infinite;
  pointer-events: none;
}

/* ── Hero stats numbers — gradient + staggered glow ────── */
.hero-stats .num {
  background: linear-gradient(135deg, #ffffff 0%, #fde8d0 50%, #F97316 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroTitleFlow 5s ease-in-out var(--num-delay, 0s) infinite,
             numOrangeGlow 3s ease-in-out var(--num-delay, 0s) infinite;
  display: inline-block;
}
.hero-stats .stat:nth-child(1) .num { --num-delay: 0s; }
.hero-stats .stat:nth-child(2) .num { --num-delay: 0.4s; }
.hero-stats .stat:nth-child(3) .num { --num-delay: 0.8s; }
.hero-stats .stat:nth-child(4) .num { --num-delay: 1.2s; }

/* ── Hero image frame — warm border glow ───────────────── */
.hero-img-frame {
  animation: imgPulse 4s ease-in-out infinite;
}

/* ── CTA primary button — gradient flow + shine ─────────── */
.hero-cta .btn-primary {
  background: linear-gradient(
    90deg,
    #F97316  0%,
    #fbbf24 25%,
    #F97316 50%,
    #ea580c 75%,
    #F97316 100%
  );
  background-size: 300% 100%;
  animation: ctaPulse 3s ease-in-out infinite, btnGradientFlow 4s linear infinite;
  will-change: background-position, box-shadow;
  position: relative;
  overflow: hidden;
}
.hero-cta .btn-primary::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 0;
  width: 55%;
  height: 120%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.28),
    transparent
  );
  animation: shineSweep 3.5s ease-in-out 0.8s infinite;
  pointer-events: none;
  border-radius: inherit;
}
.hero-cta .btn-primary:hover {
  animation: none;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 32px rgba(249,115,22,.6);
  background: linear-gradient(135deg, #F97316, #ea580c);
}

/* ── Section labels / orange tags throughout page ─────── */
.section-label,
.pill-tag,
.badge-orange {
  background: linear-gradient(
    90deg,
    #F97316  0%,
    #fbbf24 30%,
    #ea580c 60%,
    #F97316 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sectionLabelShine 5s ease-in-out infinite;
  font-weight: 700;
  display: inline-block;
}

/* ── Detail hero h1 — same warm gradient ───────────────── */
.detail-hero h1 {
  background: linear-gradient(
    120deg,
    #ffffff  0%,
    #fde8d0 30%,
    #ffffff 55%,
    #fde8d0 80%,
    #ffffff 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroTitleFlow 10s ease-in-out infinite;
}

/* ── Hero image badge — shine effect ───────────────────── */
.hero-img-badge {
  position: relative;
  overflow: hidden;
}
.hero-img-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.35),
    transparent
  );
  animation: shineSweep 5s ease-in-out 2s infinite;
  pointer-events: none;
}

/* ── Warm ambient orbs injected via JS (.hero-orb) ─────── */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  z-index: 0;
  animation: orbDrift var(--dur, 8s) ease-in-out infinite;
  will-change: transform, opacity;
}

/* ── Trust badge shine ──────────────────────────────────── */
.trust-badge {
  position: relative;
  overflow: hidden;
}
.trust-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.12) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: btnGradientFlow 6s linear infinite;
  pointer-events: none;
}

/* ── Section headings — warm underline shimmer ──────────── */
.section-head h2 {
  position: relative;
  display: inline-block;
}
.section-head h2::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #F97316, #fbbf24, #F97316);
  background-size: 200% 100%;
  border-radius: 2px;
  animation: btnGradientFlow 3s linear infinite;
}

/* ── Respect reduced-motion preference ────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-in, .scale-in,
  .section-head {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-cta .btn-primary,
  .hero h1,
  .hero h1 .yellow,
  .hero p.lead,
  .hero-badge,
  .hero-stats .num,
  .detail-hero h1,
  .section-label {
    animation: none !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: inherit !important;
  }
  .anim-d1,.anim-d2,.anim-d3,.anim-d4,
  .anim-d5,.anim-d6,.anim-d7,.anim-d8 {
    transition-delay: 0s !important;
  }
}