/**
 * EV Charger UK — Expert mode (custom layout, mirror FX, charge animations)
 * Loaded after ev-charger-uk.css — does not duplicate heat-pump patterns.
 */

/* ── Global: sharp photos + expert scope ── */
.evuk-expert img.evuk-hero-bg,
.evuk-expert .evuk-what-img,
.evuk-expert .evuk-why-img,
.evuk-expert .evuk-solar-img,
.evuk-expert .evuk-cta-ultra-photo {
  filter: contrast(1.07) saturate(1.06) brightness(1.02);
  image-rendering: -webkit-optimize-contrast;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.evuk-expert .evuk-what-frame,
.evuk-expert .evuk-why-frame,
.evuk-expert .evuk-solar-frame {
  position: relative;
  isolation: isolate;
}

.evuk-expert .evuk-x-frame-mirror {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(10, 22, 36, 0.15) 35%,
    rgba(160, 255, 212, 0.08) 70%,
    rgba(31, 111, 92, 0.18) 100%
  );
  opacity: 0.7;
  transition: opacity 0.6s ease;
}

.evuk-expert .is-inview .evuk-x-frame-mirror {
  animation: evukMirrorShine 4s ease-in-out infinite;
}

@keyframes evukMirrorShine {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.95; }
}

/* Section reveal shell */
.evuk-expert .evuk-x-section {
  position: relative;
  overflow: hidden;
}

.evuk-expert .evuk-x-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.evuk-expert .evuk-x-section.is-inview::before {
  opacity: 1;
}

/* ── Hero: charge scan + mirror wash ── */
.evuk-expert .evuk-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(160, 255, 212, 0.09) 45%,
    transparent 55%
  );
  animation: evukHeroScan 7s linear infinite;
}

@keyframes evukHeroScan {
  0% { transform: translateX(-40%); opacity: 0.5; }
  50% { opacity: 1; }
  100% { transform: translateX(40%); opacity: 0.5; }
}

.evuk-expert .evuk-hero .evuk-tariff-connector-pulse {
  width: 10px;
  height: 10px;
  margin-left: -5px;
  box-shadow: 0 0 18px rgba(160, 255, 212, 0.75);
}

.evuk-expert .evuk-hero.evuk-hero-ready .evuk-tariff-node-featured {
  animation: evukFeaturedPulse 2.8s ease-in-out infinite;
}

@keyframes evukFeaturedPulse {
  0%, 100% { box-shadow: 0 0 24px rgba(31, 111, 92, 0.12); }
  50% { box-shadow: 0 0 36px rgba(160, 255, 212, 0.28); }
}

.evuk-expert .evuk-x-mirror-hero {
  position: absolute;
  inset: auto 0 0 0;
  height: 28%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    rgba(7, 20, 32, 0.85) 0%,
    rgba(126, 232, 200, 0.06) 55%,
    transparent 100%
  );
}

/* ── Band: electric ticker ── */
.evuk-expert .evuk-x-band.evuk-band {
  position: relative;
}

.evuk-expert .evuk-x-band::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #a0ffd4, transparent);
  animation: evukBandSweep 3.5s ease-in-out infinite;
}

@keyframes evukBandSweep {
  0% { left: -60%; opacity: 0; }
  20% { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

.evuk-expert .evuk-band.is-inview .evuk-band-card {
  animation: evukBandPop 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0ms);
}

@keyframes evukBandPop {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* ── What: diagonal charge grid + floating flow cards ── */
.evuk-expert .evuk-x-what::before {
  background:
    linear-gradient(125deg, rgba(31, 111, 92, 0.06) 0%, transparent 42%),
    repeating-linear-gradient(
      -12deg,
      transparent,
      transparent 48px,
      rgba(126, 232, 200, 0.03) 48px,
      rgba(126, 232, 200, 0.03) 49px
    );
}

.evuk-expert .evuk-what.is-inview .evuk-flow-card {
  animation: evukFlowFloat 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--card-d, 0ms);
}

@keyframes evukFlowFloat {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}


.evuk-expert .evuk-what-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0ms);
}

.evuk-expert .evuk-what.is-inview .evuk-what-reveal {
  opacity: 1;
  transform: none;
}

/* ── Charge steps (How it works) — unique dark charge lane ── */
.evuk-expert .evuk-charge-steps {
  position: relative;
  background: linear-gradient(165deg, #061018 0%, #0c1f2e 48%, #0a1824 100%) !important;
}

.evuk-expert .evuk-charge-steps::before {
  background:
    radial-gradient(ellipse 70% 50% at 20% 0%, rgba(160, 255, 212, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 100%, rgba(31, 111, 92, 0.2) 0%, transparent 50%);
}

.evuk-expert .evuk-charge-steps .sbsuk-energy-line {
  background: linear-gradient(90deg, transparent, rgba(160, 255, 212, 0.5), transparent) !important;
  animation: evukChargeLine 2.8s ease-in-out infinite !important;
}

@keyframes evukChargeLine {
  0%, 100% { opacity: 0.35; transform: scaleX(0.6); }
  50% { opacity: 1; transform: scaleX(1); }
}

.evuk-expert .evuk-charge-steps.is-inview .evuk-step-card {
  animation: evukStepRise 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0ms);
}

@keyframes evukStepRise {
  from { opacity: 0; transform: translateY(24px) rotateX(8deg); }
  to { opacity: 1; transform: none; }
}

.evuk-expert .evuk-charge-steps .sbsuk-step-card-featured {
  box-shadow:
    0 0 0 1px rgba(160, 255, 212, 0.25),
    0 20px 48px rgba(0, 0, 0, 0.35),
    0 0 40px rgba(31, 111, 92, 0.25) !important;
}

.evuk-expert .evuk-charge-steps .evuk-step-ico svg {
  animation: evukIconPulse 2.4s ease-in-out infinite;
}

.evuk-expert .evuk-charge-steps .evuk-step-card:hover {
  transform: translateY(-6px);
  border-color: rgba(160, 255, 212, 0.38);
}

.evuk-expert .evuk-what.is-inview .evuk-flow-card:hover {
  opacity: 1 !important;
  transform: translate3d(0, -5px, 0) scale(1.03) !important;
  animation-play-state: paused;
}

@keyframes evukIconPulse {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50% { filter: drop-shadow(0 0 8px rgba(160, 255, 212, 0.45)); }
}

/* ── Why: mirror column + stagger items ── */
.evuk-expert .evuk-x-why {
  background: linear-gradient(180deg, #fff 0%, #f2f8f6 100%);
}

.evuk-expert .evuk-x-why::before {
  background: radial-gradient(circle at 100% 30%, rgba(126, 232, 200, 0.14) 0%, transparent 45%);
}

.evuk-expert .evuk-why.is-inview .evuk-why-item {
  animation: evukWhySlide 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0ms);
}

@keyframes evukWhySlide {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: none; }
}

.evuk-expert .evuk-why.is-inview .evuk-why-stat-card {
  animation: evukStatPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--card-d, 0ms);
}

@keyframes evukStatPop {
  from { opacity: 0; transform: scale(0.88); }
  to { opacity: 1; transform: none; }
}

.evuk-expert .evuk-why-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  transition-delay: var(--d, 0ms);
}

.evuk-expert .evuk-why.is-inview .evuk-why-reveal {
  opacity: 1;
  transform: none;
}

/* ── Numbers: arc beam + table glow ── */
.evuk-expert .evuk-numbers-ultra.is-inview .evuk-numbers-panel-metrics {
  box-shadow:
    0 0 0 1px rgba(160, 255, 212, 0.12),
    0 18px 44px rgba(0, 0, 0, 0.32);
}

.evuk-expert .evuk-numbers-ultra .evuk-numbers-metric-highlight .evuk-numbers-metric-val .evuk-num-count-go {
  text-shadow: 0 0 20px rgba(160, 255, 212, 0.55);
}

.evuk-expert .evuk-x-numbers .evuk-numbers-beam {
  animation: evukNumbersBeam 6s ease-in-out infinite;
}

@keyframes evukNumbersBeam {
  0%, 100% { opacity: 0.4; transform: rotate(6deg) translateX(0); }
  50% { opacity: 0.85; transform: rotate(6deg) translateX(-4%); }
}

.evuk-expert .evuk-numbers.is-inview .evuk-table-row {
  animation: evukRowReveal 0.5s ease both;
}

.evuk-expert .evuk-numbers.is-inview .evuk-table-row:nth-child(1) { animation-delay: 0.1s; }
.evuk-expert .evuk-numbers.is-inview .evuk-table-row:nth-child(2) { animation-delay: 0.18s; }
.evuk-expert .evuk-numbers.is-inview .evuk-table-row:nth-child(3) { animation-delay: 0.26s; }
.evuk-expert .evuk-numbers.is-inview .evuk-table-row:nth-child(4) { animation-delay: 0.34s; }

@keyframes evukRowReveal {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: none; }
}

.evuk-expert .evuk-numbers.is-inview .evuk-numbers-step-anim {
  animation: evukShiftStep 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--step-d, 0ms);
}

@keyframes evukShiftStep {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ── Budget: equal ultra grid + stagger ── */
.evuk-expert .evuk-x-budget {
  position: relative;
}

.evuk-expert .evuk-x-budget::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31, 111, 92, 0.35), transparent);
}

.evuk-expert .evuk-budget-split.is-inview .evuk-budget-ultra-grid .evuk-budget-card {
  animation: evukBudgetCardIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0ms);
}

@keyframes evukBudgetCardIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.evuk-expert .evuk-budget-split.is-inview .evuk-budget-card-featured {
  animation-name: evukBudgetFeaturedIn;
}

@keyframes evukBudgetFeaturedIn {
  from {
    opacity: 0;
    transform: translateY(18px);
    box-shadow: 0 0 0 rgba(31, 111, 92, 0);
  }
  to {
    opacity: 1;
    transform: none;
    box-shadow: 0 18px 48px rgba(7, 20, 38, 0.18);
  }
}

.evuk-expert .evuk-budget-split.is-inview .evuk-budget-compare {
  animation: evukCompareGlow 0.8s ease 0.35s both;
}

@keyframes evukCompareGlow {
  from { opacity: 0; box-shadow: 0 0 0 rgba(160, 255, 212, 0); }
  to { opacity: 1; box-shadow: 0 0 32px rgba(126, 232, 200, 0.15); }
}

/* ── Cost: shimmer panel + price flash ── */
.evuk-expert .evuk-x-cost.sbsuk-cost-ultra {
  position: relative;
}

.evuk-expert .evuk-x-cost .sbsuk-cost-table-card {
  position: relative;
  overflow: hidden;
}

.evuk-expert .evuk-x-cost.is-inview .sbsuk-cost-table-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(160, 255, 212, 0.12), transparent);
  animation: evukTableShimmer 2.2s ease 0.4s 1;
  pointer-events: none;
}

@keyframes evukTableShimmer {
  0% { left: -120%; }
  100% { left: 140%; }
}

/* ── Solar: mirror frame + card cascade ── */
.evuk-expert .evuk-x-solar::before {
  background: linear-gradient(135deg, rgba(31, 111, 92, 0.05) 0%, transparent 50%);
}

.evuk-expert .evuk-x-solar.is-inview .evuk-solar-pair-card {
  animation: evukSolarCard 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0ms);
}

.evuk-expert .evuk-solar-ultra.is-inview .evuk-solar-img {
  animation: evukSolarImgDrift 18s ease-in-out infinite alternate;
}

@keyframes evukSolarImgDrift {
  0% { transform: scale(1); }
  100% { transform: scale(1.04); }
}

.evuk-expert .evuk-solar-pair-card:hover {
  transform: translateY(-4px);
}

@keyframes evukSolarCard {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ── Worth: dark ultra 4-col cascade ── */
.evuk-expert .evuk-x-worth::before {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(31, 111, 92, 0.2) 0%, transparent 55%),
    linear-gradient(125deg, rgba(126, 232, 200, 0.04) 0%, transparent 45%);
}

.evuk-expert .evuk-worth-ultra.is-inview .evuk-worth-card {
  animation: evukWorthCardIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0ms);
}

@keyframes evukWorthCardIn {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.evuk-expert .evuk-worth-ultra .evuk-worth-card {
  position: relative;
  overflow: hidden;
}

.evuk-expert .evuk-worth-ultra.is-inview .evuk-worth-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, #a0ffd4, #1f6f5c);
  transition: height 0.45s ease;
  z-index: 1;
}

.evuk-expert .evuk-worth-ultra.is-inview .evuk-worth-card:hover::before {
  height: 100%;
}

.evuk-expert .evuk-worth-ultra.is-inview .evuk-worth-card:hover {
  transform: translate3d(0, -4px, 0) scale(1.01);
  border-color: rgba(160, 255, 212, 0.38);
}

/* ── Diff: hex charge mesh (EV-only) ── */
.evuk-expert .evuk-x-diff {
  position: relative;
}

.evuk-expert .evuk-x-diff::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48'%3E%3Cpath fill='none' stroke='%231F6F5C' stroke-opacity='0.08' d='M28 0 L56 14 L56 34 L28 48 L0 34 L0 14 Z'/%3E%3C/svg%3E");
  background-size: 56px 48px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
}

.evuk-expert .evuk-diff.is-inview .evuk-diff-card {
  animation: evukDiffFlip 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0ms);
}

@keyframes evukDiffFlip {
  from { opacity: 0; transform: perspective(800px) rotateY(-12deg) translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ── Process: charge timeline pulse ── */
.evuk-expert .evuk-x-process .hpuk-process-track,
.evuk-expert .evuk-x-process .evuk-process-track {
  position: relative;
}

.evuk-expert .evuk-x-process.is-inview .evuk-process-card {
  animation: evukProcessIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0ms);
}

@keyframes evukProcessIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.evuk-expert .evuk-process.is-inview .evuk-process-card-featured {
  box-shadow: 0 0 0 1px rgba(160, 255, 212, 0.3), 0 24px 48px rgba(0, 0, 0, 0.3);
}

/* ── FAQ: slide accent ── */
.evuk-expert .evuk-x-faq .sbsuk-faq-ultra-item.is-open .sbsuk-faq-ultra-q {
  border-left: 3px solid #a0ffd4;
}

.evuk-expert .evuk-x-faq.is-inview .sbsuk-faq-ultra-item {
  animation: evukFaqIn 0.45s ease both;
  animation-delay: var(--d, 0ms);
}

@keyframes evukFaqIn {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: none; }
}

/* ── CTA: stronger photo + mirror floor ── */
.evuk-expert .evuk-x-cta.evuk-cta-has-photo .evuk-cta-ultra-photo {
  opacity: 0.82 !important;
  filter: contrast(1.1) saturate(1.08);
}

.evuk-expert .evuk-x-cta.is-inview .evuk-cta-save-feature {
  animation: evukCtaSavePulse 4s ease-in-out 0.8s infinite;
}

.evuk-expert .evuk-x-cta::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(0deg, rgba(6, 16, 28, 0.5) 0%, transparent 100%);
}

/* Tariff engine expert polish */
.evuk-expert .evuk-tariff-engine {
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(160, 255, 212, 0.12);
}

.evuk-expert .evuk-hero-ready .evuk-tariff-connector-pulse {
  box-shadow: 0 0 12px rgba(160, 255, 212, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .evuk-expert .evuk-hero::after,
  .evuk-expert .evuk-x-band::after,
  .evuk-expert .evuk-charge-steps .sbsuk-energy-line,
  .evuk-expert .evuk-x-mirror,
  .evuk-expert .evuk-x-frame-mirror,
  .evuk-expert .evuk-x-numbers .evuk-numbers-beam,
  .evuk-expert .evuk-x-cta.is-inview .evuk-cta-save-feature,
  .evuk-expert .evuk-hero.evuk-hero-ready .evuk-tariff-node-featured {
    animation: none !important;
  }

  .evuk-expert .evuk-what-reveal,
  .evuk-expert .evuk-why-reveal {
    opacity: 1;
    transform: none;
  }
}