/* ============================================================
   eeg-motion.css - motion layer for Extreme Energy Group
   Loaded after eeg.css. Additive: it introduces motion states the
   baseline deliberately left out and never restyles a static rule.
   Everything here is switched off under prefers-reduced-motion.
   ============================================================ */

/* -- 1. Hero: slow push-in on the active slide --------------------
   The baseline sets .hero-slide::before / ::after to content:none, so
   ::before is free. It carries the image at z-index 0, beneath the
   overlay (1) and the copy (2), so the zoom never scales the text. */
.hero[data-hero-slider] .hero-slide::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:var(--slide-image);
  background-size:cover;
  background-position:center;
  transform:scale(1.04);
  transform-origin:50% 55%;
  will-change:transform;
}
.hero[data-hero-slider] .hero-slide.active::before{
  animation:eeg-kenburns var(--eeg-kb, 13s) linear both;
}
@keyframes eeg-kenburns{
  from{ transform:scale(1.04) }
  to  { transform:scale(1.13) }
}

/* -- 2. Hero copy arrives line by line ---------------------------- */
.hero[data-hero-slider] .hero-slide.active .hero-content > *{
  animation:eeg-rise .8s cubic-bezier(.22,.85,.28,1) both;
}
.hero[data-hero-slider] .hero-slide.active .hero-content > *:nth-child(1){ animation-delay:.20s }
.hero[data-hero-slider] .hero-slide.active .hero-content > *:nth-child(2){ animation-delay:.31s }
.hero[data-hero-slider] .hero-slide.active .hero-content > *:nth-child(3){ animation-delay:.42s }
.hero[data-hero-slider] .hero-slide.active .hero-content > *:nth-child(4){ animation-delay:.53s }
.hero[data-hero-slider] .hero-slide.active .hero-content > *:nth-child(5){ animation-delay:.62s }
@keyframes eeg-rise{
  from{ opacity:0; transform:translateY(22px) }
  to  { opacity:1; transform:none }
}


/* -- 4. Scroll cue at the foot of the hero ----------------------- */
.hero[data-hero-slider]::after{
  content:"";
  position:absolute;
  z-index:3;
  left:50%;
  bottom:26px;
  width:1px;
  height:56px;
  margin-left:-.5px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.8));
  animation:eeg-cue 2.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes eeg-cue{
  0%   { opacity:0; transform:scaleY(.25); transform-origin:top }
  35%  { opacity:.9 }
  100% { opacity:0; transform:scaleY(1);   transform-origin:top }
}
@media (max-width: 860px){ .hero[data-hero-slider]::after{ display:none } }

/* -- 5. Figures count up when they come into view ---------------- */
/* JS adds .eeg-num to the number element and reserves its final width
   so nothing reflows while the digits run. */
.eeg-num{ font-variant-numeric:tabular-nums; white-space:nowrap }
.metric strong,
.metrics-grid strong{ font-variant-numeric:tabular-nums }
.eeg-num.is-running{ animation:eeg-num-pulse .9s ease-out }
@keyframes eeg-num-pulse{
  from{ letter-spacing:-.04em; opacity:.72 }
  to  { letter-spacing:normal; opacity:1 }
}

/* -- 6. Grouped reveals arrive in sequence, not all at once ------ */
/* eeg.css already transitions .reveal; this only adds the offset. */
.reveal{ transition-delay:var(--eeg-rd, 0s) }

/* -- 7. Entity cards answer the pointer -------------------------- */
.entity-card{
  transition:transform .5s cubic-bezier(.22,.85,.28,1), box-shadow .5s ease;
}
.entity-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
}
.entity-card .entity-logo img{ transition:transform .5s cubic-bezier(.22,.85,.28,1) }
.entity-card:hover .entity-logo img{ transform:scale(1.04) }

/* -- 8. Nothing above runs for visitors who ask for stillness ---- */
@media (prefers-reduced-motion: reduce){
  .hero[data-hero-slider] .hero-slide.active::before,
  .hero[data-hero-slider] .hero-slide.active .hero-content > *,
  .hero[data-hero-slider]::after,
  .eeg-num.is-running{
    animation:none;
  }
  .hero[data-hero-slider] .hero-slide.active .hero-content > *{ opacity:1; transform:none }
  .hero[data-hero-slider]::after{ display:none }
  .reveal{ transition-delay:0s }
  .entity-card,
  .entity-card .entity-logo img{ transition:none }
}

/* -- 9. Two-speed call to action in the site-wide band ----------- */
/* A primary commitment plus a lighter, lower-friction second step,
   for visitors who are not ready to talk to anyone yet. */
.cta-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; flex:0 0 auto }
[dir="rtl"] .cta-actions{ align-items:flex-end }
.cta-alt{
  color:rgba(255,255,255,.82);
  font-size:14.5px;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.35);
  padding-bottom:2px;
  transition:color .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.cta-alt:hover{ color:#fff; border-color:#fff }
@media (max-width: 900px){
  .cta-actions{ align-items:center }
  [dir="rtl"] .cta-actions{ align-items:center }
  .cta-alt{ white-space:normal; text-align:center }
}

/* -- 10. Home-page entry to the readiness check ------------------ */
/* A contained card that sits on the page rather than a full-bleed stripe:
   photograph, legibility wash, two columns, and a still of the tool. */
.rc-promo-band{ background:transparent }
.rc-promo-shell{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:calc(var(--radius) * 3);
  padding:clamp(30px, 4.2vw, 58px);
  box-shadow:0 42px 92px rgba(16, 44, 67, .3);
}
.rc-promo-shell::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:url('../images/extreme/hero-steel-export-port.webp');
  background-size:cover;
  background-position:center;
  transform:scale(1.07);
  transform-origin:60% 50%;
  animation:eeg-promo-drift 30s ease-in-out infinite alternate;
}
.rc-promo-shell::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(94deg, rgba(11,32,49,.95) 0%, rgba(11,32,49,.86) 42%, rgba(11,32,49,.52) 100%);
}
[dir="rtl"] .rc-promo-shell::after{
  background:linear-gradient(266deg, rgba(11,32,49,.95) 0%, rgba(11,32,49,.86) 42%, rgba(11,32,49,.52) 100%);
}
@keyframes eeg-promo-drift{
  from{ transform:scale(1.07) translate3d(0,0,0) }
  to  { transform:scale(1.15) translate3d(-1.5%, -1.5%, 0) }
}

.rc-promo{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(34px, 4.4vw, 60px);
  align-items:center;
}
@media (max-width: 1000px){ .rc-promo{ grid-template-columns:1fr; gap:38px } }

.rc-promo .kicker{ color:var(--accent-300) }
.rc-promo h2{ color:#fff; font-size:clamp(28px, 2.9vw, 42px); line-height:1.16; margin:10px 0 14px }
/* The measure is only capped once the copy sits in its own column. */
@media (min-width: 1001px){ .rc-promo h2{ max-width:19ch } }
.rc-promo-copy > p{ color:rgba(255,255,255,.8); font-size:16.5px; line-height:1.65; margin:0 0 22px; max-width:48ch }
.rc-promo-list{ list-style:none; margin:0 0 28px; padding:0; display:grid; gap:10px }
.rc-promo-list li{
  position:relative;
  padding-inline-start:26px;
  color:rgba(255,255,255,.9);
  font-size:15px;
  line-height:1.5;
}
.rc-promo-list li::before{
  content:"✓";
  position:absolute;
  inset-inline-start:0;
  top:0;
  color:var(--accent-300);
  font-size:13px;
  font-weight:700;
}

/* the still of the tool, sitting on the photograph */
.rc-promo-card{
  position:relative;
  border:1px solid rgba(255,255,255,.18);
  border-radius:calc(var(--radius) * 2);
  background:linear-gradient(180deg, rgba(11,32,49,.74), rgba(11,32,49,.6));
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  padding:26px 26px 30px;
  box-shadow:0 30px 70px rgba(0,0,0,.34);
}
.rc-promo-card-head{ display:flex; align-items:center; gap:14px; margin-bottom:18px }
.rc-promo-step{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.66);
  white-space:nowrap;
}
.rc-promo-bar{ flex:1; height:3px; border-radius:3px; background:rgba(255,255,255,.18); overflow:hidden }
.rc-promo-bar i{
  display:block;
  height:100%;
  width:0;
  border-radius:3px;
  background:linear-gradient(90deg, var(--accent-500), var(--accent-300));
  transition:width 1.2s cubic-bezier(.22,.85,.28,1) .45s;
}
.rc-promo-shell.visible .rc-promo-bar i{ width:60% }
.rc-promo-q{
  font-family:var(--serif);
  font-size:clamp(18px, 1.5vw, 21px);
  line-height:1.34;
  color:#fff;
  margin-bottom:16px;
}
.rc-promo-opt{
  position:relative;
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);
  padding:12px 14px 12px 42px;
  margin-bottom:9px;
  font-size:14.5px;
  line-height:1.45;
  color:rgba(255,255,255,.74);
}
.rc-promo-opt::before{
  content:"";
  position:absolute;
  inset-inline-start:15px;
  top:14px;
  width:14px;
  height:14px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.34);
}
.rc-promo-opt.is-on{ border-color:var(--accent-400); background:rgba(255,255,255,.1); color:#fff }
.rc-promo-opt.is-on::before{ border-color:var(--accent-300); box-shadow:inset 0 0 0 2px rgba(11,32,49,.9), inset 0 0 0 8px var(--accent-300) }
[dir="rtl"] .rc-promo-opt{ padding:12px 42px 12px 14px }
.rc-promo-score{
  position:absolute;
  inset-inline-end:-16px;
  bottom:-24px;
  width:94px;
  height:94px;
  border-radius:50%;
  display:grid;
  place-items:center;
  text-align:center;
  line-height:1.05;
  background:var(--accent-700);
  border:5px solid rgba(11,32,49,.92);
  box-shadow:0 18px 44px rgba(0,0,0,.42);
}
.rc-promo-score b{ display:block; font-family:var(--serif); font-size:27px; color:#fff }
.rc-promo-score em{
  font-style:normal;
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(255,255,255,.74);
}
/* Below the two-column breakpoint the card is full width, which would put
   the badge in the same corner as the floating WhatsApp button. */
@media (max-width: 1000px){ .rc-promo-score{ inset-inline-end:auto; left:-12px; right:auto } }
@media (max-width: 560px){ .rc-promo-score{ width:78px; height:78px; left:-6px } .rc-promo-score b{ font-size:22px } }
@media (prefers-reduced-motion: reduce){
  .rc-promo-shell::before{ animation:none }
  .rc-promo-bar i{ width:60%; transition:none }
}