/* SNBG Hero Banners — cinematic animations with 5 variants
 * Use data-hero-fx="leaves|grid|waves|rays|particles" on the hero section
 */

/* ===== Base hero polish for all banner classes ===== */
.services-hero,
.about-hero,
.news-hero,
.hero-default,
.secteur-hero,
.portfolio-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(320px, 42vh, 460px);
}

/* Animated overlay shimmer (subtle moving sheen) */
.services-hero .container,
.about-hero .container,
.news-hero .container,
.hero-default .container,
.secteur-hero .container,
.portfolio-hero .container {
  position: relative;
  z-index: 5;
}

/* Hero content stagger animation */
.services-hero .hero-content,
.about-hero .hero-content,
.news-hero .hero-content,
.hero-default .hero-content,
.portfolio-hero .hero-content,
.secteur-hero .container > .hero-content {
  opacity: 0;
  animation: heroContentIn 1s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) 0.2s forwards;
}

.services-hero h1,
.about-hero h1,
.news-hero h1,
.hero-default h1,
.portfolio-hero h1 {
  position: relative;
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  filter: blur(6px);
  animation: heroTitleIn 1.1s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) 0.4s forwards;
}

.services-hero h1::after,
.about-hero h1::after,
.news-hero h1::after,
.hero-default h1::after,
.portfolio-hero h1::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-300), transparent);
  border-radius: 2px;
  animation: heroUnderline 1.4s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) 1.2s forwards;
}

.services-hero .hero-subtitle,
.about-hero .hero-subtitle,
.news-hero .hero-subtitle,
.hero-default .hero-subtitle,
.portfolio-hero .hero-subtitle,
.secteur-hero .subtitle {
  opacity: 0;
  transform: translateY(20px);
  animation: heroSubtitleIn 1s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) 0.8s forwards;
}

.secteur-hero .breadcrumb {
  opacity: 0;
  animation: heroSubtitleIn 0.8s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) 0.3s forwards;
}
.secteur-hero h1 {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(6px);
  animation: heroTitleIn 1.1s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) 0.5s forwards;
  position: relative;
  display: inline-block;
}
.secteur-hero h1::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-300), transparent);
  border-radius: 2px;
  animation: heroUnderline 1.4s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) 1.3s forwards;
}

@keyframes heroContentIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroTitleIn {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes heroSubtitleIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroUnderline {
  to { width: 80px; }
}

/* Animated overlay sheen */
.services-hero::after,
.about-hero::after,
.news-hero::after,
.hero-default::after,
.secteur-hero::after,
.portfolio-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,215,0,0.04) 50%, transparent 70%);
  background-size: 200% 200%;
  animation: heroSheen 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes heroSheen {
  0%, 100% { background-position: -100% 0; }
  50%      { background-position: 200% 0; }
}

/* ===== Variant: leaves (forest, exploitation, essences) ===== */
[data-hero-fx="leaves"] {
  position: relative;
}
[data-hero-fx="leaves"]::before {
  content: "🍃 🌿 🍂 🍃 🌿";
  position: absolute;
  top: -10%;
  left: 0;
  right: 0;
  font-size: 1.4rem;
  letter-spacing: 18vw;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  animation: leavesFall 14s linear infinite;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
  white-space: nowrap;
}
[data-hero-fx="leaves"]::after {
  /* keep base sheen + add a second wave of leaves */
  background:
    linear-gradient(120deg, transparent 30%, rgba(255,215,0,0.04) 50%, transparent 70%);
}
@keyframes leavesFall {
  0%   { transform: translateY(0)    translateX(0);    opacity: 0; }
  10%  { opacity: 0.8; }
  100% { transform: translateY(140%) translateX(-40px); opacity: 0; }
}

/* Add a second leaf row via wrapper trick — using separate keyframe & nth */
[data-hero-fx="leaves"] .container::before {
  content: "🌿 🍃 🍂";
  position: absolute;
  top: -15%;
  left: -10%;
  font-size: 1.2rem;
  letter-spacing: 22vw;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  animation: leavesFall 18s linear infinite 4s;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
  white-space: nowrap;
}

/* ===== Variant: grid (services, transformation, trading, devis) ===== */
[data-hero-fx="grid"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,215,0,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,215,0,0.08) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  z-index: 2;
  pointer-events: none;
  animation: gridPan 20s linear infinite;
}
@keyframes gridPan {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 50px 50px, 50px 50px; }
}

/* Scanning beam */
[data-hero-fx="grid"] .container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10%;
  width: 60px;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.18), transparent);
  filter: blur(10px);
  z-index: 2;
  pointer-events: none;
  animation: gridScan 6s ease-in-out infinite;
}
@keyframes gridScan {
  0%   { left: -10%; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

/* ===== Variant: waves (logistique, contact) ===== */
[data-hero-fx="waves"]::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 120px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path d='M0,60 Q300,0 600,60 T1200,60 L1200,120 L0,120 Z' fill='%23FFD700' fill-opacity='0.08'/></svg>");
  background-repeat: repeat-x;
  background-size: 1200px 120px;
  z-index: 2;
  pointer-events: none;
  animation: wavesFlow 12s linear infinite;
}
[data-hero-fx="waves"] .container::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 100px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path d='M0,80 Q300,30 600,80 T1200,80 L1200,120 L0,120 Z' fill='%2379b889' fill-opacity='0.18'/></svg>");
  background-repeat: repeat-x;
  background-size: 1000px 100px;
  z-index: 1;
  pointer-events: none;
  animation: wavesFlow 16s linear infinite reverse;
}
@keyframes wavesFlow {
  0%   { background-position: 0 0; }
  100% { background-position: 1200px 0; }
}

/* ===== Variant: rays (devis, news, bourse-etudes) ===== */
[data-hero-fx="rays"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    conic-gradient(from 220deg at 100% 0%,
      transparent 0deg,
      rgba(255,215,0,0.10) 30deg,
      transparent 50deg,
      rgba(255,215,0,0.06) 80deg,
      transparent 110deg,
      rgba(255,215,0,0.12) 140deg,
      transparent 170deg,
      rgba(255,215,0,0.08) 200deg,
      transparent 240deg
    );
  z-index: 2;
  pointer-events: none;
  animation: raysSpin 30s linear infinite;
  transform-origin: top right;
}
@keyframes raysSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* secondary glow pulse */
[data-hero-fx="rays"] .container::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,215,0,0.18), transparent 70%);
  filter: blur(40px);
  z-index: 2;
  pointer-events: none;
  animation: raysGlow 6s ease-in-out infinite alternate;
}
@keyframes raysGlow {
  from { opacity: 0.5; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.2); }
}

/* ===== Variant: particles (realisations, secteurs index, bourse-etudes) ===== */
[data-hero-fx="particles"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 12% 20%, rgba(255,215,0,0.7), transparent 50%),
    radial-gradient(1.5px 1.5px at 28% 60%, rgba(255,255,255,0.6), transparent 50%),
    radial-gradient(2.5px 2.5px at 45% 30%, rgba(255,215,0,0.8), transparent 50%),
    radial-gradient(1.5px 1.5px at 60% 70%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(2px 2px at 75% 25%, rgba(255,215,0,0.6), transparent 50%),
    radial-gradient(1.5px 1.5px at 88% 80%, rgba(255,255,255,0.7), transparent 50%),
    radial-gradient(2px 2px at 35% 85%, rgba(255,215,0,0.5), transparent 50%),
    radial-gradient(2.5px 2.5px at 92% 40%, rgba(255,215,0,0.7), transparent 50%);
  z-index: 2;
  pointer-events: none;
  animation: particlesPulse 4s ease-in-out infinite;
}
[data-hero-fx="particles"] .container::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 18% 45%, rgba(255,215,0,0.9), transparent 50%),
    radial-gradient(1.5px 1.5px at 52% 12%, rgba(255,255,255,0.7), transparent 50%),
    radial-gradient(1px 1px at 70% 55%, rgba(255,215,0,0.8), transparent 50%),
    radial-gradient(2px 2px at 22% 75%, rgba(255,215,0,0.6), transparent 50%),
    radial-gradient(1.5px 1.5px at 80% 90%, rgba(255,255,255,0.6), transparent 50%);
  z-index: 2;
  pointer-events: none;
  animation: particlesDrift 18s ease-in-out infinite;
}
@keyframes particlesPulse {
  0%, 100% { opacity: 0.6; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-8px); }
}
@keyframes particlesDrift {
  0%, 100% { transform: translateX(0)    translateY(0); }
  25%      { transform: translateX(15px) translateY(-10px); }
  50%      { transform: translateX(-10px) translateY(-20px); }
  75%      { transform: translateX(10px) translateY(-12px); }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .services-hero h1, .about-hero h1, .news-hero h1, .hero-default h1, .secteur-hero h1,
  .services-hero .hero-subtitle, .about-hero .hero-subtitle, .news-hero .hero-subtitle, .hero-default .hero-subtitle, .secteur-hero .subtitle,
  .services-hero h1::after, .about-hero h1::after, .news-hero h1::after, .hero-default h1::after, .secteur-hero h1::after,
  .services-hero .hero-content, .about-hero .hero-content, .news-hero .hero-content, .hero-default .hero-content, .secteur-hero .container > .hero-content {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
  }
  [data-hero-fx]::before, [data-hero-fx]::after,
  [data-hero-fx] .container::before, [data-hero-fx] .container::after {
    animation: none !important;
  }
}