/* Austria Energy Group – Motion & Darstellungs-Verfeinerungen
   Zentrale Animations-Ebene: Scroll-Reveals (nativ scroll-getrieben mit
   JS-Fallback), Einstiegs-Animationen, Mikro-Interaktionen und Ambient-Effekte.
   Nutzt ausschliesslich die Tokens aus tailwind/input.css (@theme).
   Achtung: Die Reveal-Selektorliste existiert zusaetzlich in js/motion.js –
   beide Listen synchron halten. */

:root {
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
}

/* ---------- Ambient: Hero- und Dunkelflaechen ------------------------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero::before,
.page-hero::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      38% 46% at 80% 16%,
      color-mix(in oklch, var(--color-accent-600) 5%, transparent) 0%,
      transparent 70%
    ),
    radial-gradient(
      48% 56% at 10% 86%,
      color-mix(in oklch, var(--color-primary-500) 6%, transparent) 0%,
      transparent 72%
    );
}

.section--accent {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.section--accent::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      34% 42% at 86% 8%,
      color-mix(in oklch, var(--color-accent-600) 4%, transparent) 0%,
      transparent 70%
    ),
    radial-gradient(
      42% 50% at 6% 96%,
      color-mix(in oklch, var(--color-primary-500) 5%, transparent) 0%,
      transparent 72%
    );
}

@media (prefers-reduced-motion: no-preference) {
  .hero::before,
  .page-hero::before,
  .section--accent::before {
    animation: aurora-drift 26s ease-in-out infinite alternate;
  }

  @keyframes aurora-drift {
    from {
      transform: translate3d(-2%, -1.5%, 0) rotate(-1.2deg) scale(1);
    }
    to {
      transform: translate3d(2.5%, 2%, 0) rotate(1.2deg) scale(1.07);
    }
  }
}

/* ---------- Einstiegs-Animation der Hero-Bereiche --------------------- */
/* Die h1 bleibt bewusst statisch (LCP), der Rest steigt gestaffelt ein.
   Bilder animieren ohne Opazitaet, damit der Largest Contentful Paint
   nicht verzoegert wird. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes intro-rise {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
  }

  @keyframes intro-lift {
    from {
      transform: translateY(22px) scale(0.985);
    }
  }

  .hero__text > :not(h1),
  .page-hero__text > :not(h1) {
    animation: intro-rise 0.65s var(--ease-out) backwards;
  }

  .hero__text > :nth-child(3),
  .page-hero__text > :nth-child(3) {
    animation-delay: 70ms;
  }

  .hero__text > :nth-child(4),
  .page-hero__text > :nth-child(4) {
    animation-delay: 130ms;
  }

  .hero__text > :nth-child(5),
  .page-hero__text > :nth-child(5) {
    animation-delay: 190ms;
  }

  .hero__text > :nth-child(6),
  .page-hero__text > :nth-child(6) {
    animation-delay: 250ms;
  }

  .hero__text > :nth-child(7),
  .page-hero__text > :nth-child(7) {
    animation-delay: 310ms;
  }

  .hero .process-card,
  .page-hero__media {
    animation: intro-lift 0.75s var(--ease-out) 0.12s backwards;
  }

  .page-hero .breadcrumb {
    animation: intro-rise 0.55s var(--ease-out) backwards;
  }
}

/* ---------- Scroll-Reveal: nativ scroll-getrieben ---------------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes reveal-rise {
      from {
        opacity: 0;
        transform: translateY(26px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    .section-head > *,
    .section > .shell > .eyebrow,
    .section > .shell > .headline-lg,
    .section > .shell > .headline-md,
    .section > .shell > .lead,
    .split > *,
    .faq-layout > *,
    .product-band__body,
    .steps > .step,
    .product-grid > *,
    .accordion__item,
    .stat-strip > *,
    .form-card,
    .calc__form,
    .calc-assumptions,
    .info-card,
    .content-figure,
    .partner-map,
    .content-flow .table-wrap,
    .cover,
    .embed-facade,
    .logo-ticker,
    .sector-grid > *,
    .panel--row {
      animation: reveal-rise 0.9s var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }

    /* Leichte Staffelung nebeneinanderliegender Raster-Elemente */
    :is(.steps, .product-grid, .stat-strip, .split, .sector-grid) > :nth-child(2),
    .accordion > :nth-child(2) {
      animation-range: entry 6% entry 48%;
    }

    :is(.steps, .product-grid, .stat-strip, .sector-grid) > :nth-child(3),
    .accordion > :nth-child(3) {
      animation-range: entry 12% entry 54%;
    }

    :is(.steps, .product-grid, .stat-strip, .sector-grid) > :nth-child(4),
    .accordion > :nth-child(4) {
      animation-range: entry 18% entry 60%;
    }
  }
}

/* ---------- Scroll-Reveal: JS-Fallback (html.js-motion) ---------------- */
/* js/motion.js setzt die Klasse nur, wenn keine nativen scroll-getriebenen
   Animationen verfuegbar sind und keine reduzierte Bewegung gewuenscht ist. */
html.js-motion .section-head > *,
html.js-motion .section > .shell > .eyebrow,
html.js-motion .section > .shell > .headline-lg,
html.js-motion .section > .shell > .headline-md,
html.js-motion .section > .shell > .lead,
html.js-motion .split > *,
html.js-motion .faq-layout > *,
html.js-motion .product-band__body,
html.js-motion .steps > .step,
html.js-motion .product-grid > *,
html.js-motion .accordion__item,
html.js-motion .stat-strip > *,
html.js-motion .form-card,
html.js-motion .calc__form,
html.js-motion .calc-assumptions,
html.js-motion .info-card,
html.js-motion .content-figure,
html.js-motion .partner-map,
html.js-motion .content-flow .table-wrap,
html.js-motion .cover,
html.js-motion .embed-facade,
html.js-motion .logo-ticker,
html.js-motion .sector-grid > *,
html.js-motion .panel--row {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

html.js-motion .is-revealed {
  opacity: 1;
  transform: none;
}

html.js-motion :is(.steps, .product-grid, .stat-strip, .accordion, .split, .sector-grid) > :nth-child(2) {
  transition-delay: 90ms;
}

html.js-motion :is(.steps, .product-grid, .stat-strip, .accordion) > :nth-child(3) {
  transition-delay: 180ms;
}

html.js-motion :is(.steps, .product-grid, .stat-strip, .accordion) > :nth-child(4) {
  transition-delay: 270ms;
}

/* ---------- Partnerkarte: Standortmarkierungen setzen sich nacheinander ---- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes pin-drop {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    .partner-map {
      view-timeline-name: --partner-map;
    }

    .partner-map__pin-body {
      animation: pin-drop 1s var(--ease-out) both;
      animation-timeline: --partner-map;
      animation-range: entry 25% entry 70%;
    }

    /* Wo Verbindungen gezeichnet sind (Fassung „network"), knüpft sich das
       Netz zuerst, danach setzen sich die Standorte. */
    @keyframes link-draw {
      from {
        stroke-dashoffset: 1;
      }
      to {
        stroke-dashoffset: 0;
      }
    }

    .partner-map__link {
      animation: link-draw 1.1s var(--ease-out) both;
      animation-timeline: --partner-map;
      animation-range: entry 18% entry 62%;
    }

    /* Die Einsatzradien wachsen aus ihrem Standort heraus. */
    @keyframes area-grow {
      from {
        opacity: 0;
        transform: scale(0.5);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    .partner-map__area {
      transform-box: fill-box;
      transform-origin: 50% 50%;
      animation: area-grow 1s var(--ease-out) both;
      animation-timeline: --partner-map;
      animation-range: entry 26% entry 72%;
    }

    .partner-map__area:nth-child(2) { animation-range: entry 31% entry 77%; }
    .partner-map__area:nth-child(3) { animation-range: entry 36% entry 82%; }
    .partner-map__area:nth-child(4) { animation-range: entry 41% entry 87%; }
    .partner-map__area:nth-child(5) { animation-range: entry 46% entry 92%; }
    .partner-map__area:nth-child(6) { animation-range: entry 51% entry 97%; }
    .partner-map__area:nth-child(7) { animation-range: entry 56% cover 2%; }
    .partner-map__area:nth-child(8) { animation-range: entry 61% cover 7%; }
    .partner-map__area:nth-child(9) { animation-range: entry 66% cover 12%; }

    /* Danach verdichten die Regionalstandorte das Netz – in drei Wellen,
       damit die zwölf Kreise nicht auf einen Schlag erscheinen. */
    .partner-map__area:nth-child(n + 10):nth-child(-n + 13) { animation-range: entry 70% cover 16%; }
    .partner-map__area:nth-child(n + 14):nth-child(-n + 17) { animation-range: entry 74% cover 20%; }
    .partner-map__area:nth-child(n + 18) { animation-range: entry 78% cover 24%; }

    .partner-map__pin:nth-child(2) .partner-map__pin-body { animation-range: entry 30% entry 75%; }
    .partner-map__pin:nth-child(3) .partner-map__pin-body { animation-range: entry 35% entry 80%; }
    .partner-map__pin:nth-child(4) .partner-map__pin-body { animation-range: entry 40% entry 85%; }
    .partner-map__pin:nth-child(5) .partner-map__pin-body { animation-range: entry 45% entry 90%; }
    .partner-map__pin:nth-child(6) .partner-map__pin-body { animation-range: entry 50% entry 95%; }
    .partner-map__pin:nth-child(7) .partner-map__pin-body { animation-range: entry 55% entry 100%; }
    .partner-map__pin:nth-child(8) .partner-map__pin-body { animation-range: entry 60% cover 5%; }
    .partner-map__pin:nth-child(9) .partner-map__pin-body { animation-range: entry 65% cover 10%; }

    .partner-map__pin:nth-child(n + 10):nth-child(-n + 13) .partner-map__pin-body { animation-range: entry 69% cover 14%; }
    .partner-map__pin:nth-child(n + 14):nth-child(-n + 17) .partner-map__pin-body { animation-range: entry 73% cover 18%; }
    .partner-map__pin:nth-child(n + 18) .partner-map__pin-body { animation-range: entry 77% cover 22%; }
  }
}

html.js-motion .partner-map .partner-map__link {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.8s var(--ease-out);
}

html.js-motion .partner-map.is-revealed .partner-map__link {
  stroke-dashoffset: 0;
}

html.js-motion .partner-map .partner-map__area {
  opacity: 0;
  transform: scale(0.5);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

html.js-motion .partner-map.is-revealed .partner-map__area {
  opacity: 1;
  transform: none;
}

html.js-motion .partner-map.is-revealed .partner-map__area:nth-child(2) { transition-delay: 60ms; }
html.js-motion .partner-map.is-revealed .partner-map__area:nth-child(3) { transition-delay: 120ms; }
html.js-motion .partner-map.is-revealed .partner-map__area:nth-child(4) { transition-delay: 180ms; }
html.js-motion .partner-map.is-revealed .partner-map__area:nth-child(5) { transition-delay: 240ms; }
html.js-motion .partner-map.is-revealed .partner-map__area:nth-child(6) { transition-delay: 300ms; }
html.js-motion .partner-map.is-revealed .partner-map__area:nth-child(7) { transition-delay: 360ms; }
html.js-motion .partner-map.is-revealed .partner-map__area:nth-child(8) { transition-delay: 420ms; }
html.js-motion .partner-map.is-revealed .partner-map__area:nth-child(9) { transition-delay: 480ms; }
html.js-motion .partner-map.is-revealed .partner-map__area:nth-child(n + 10):nth-child(-n + 13) { transition-delay: 540ms; }
html.js-motion .partner-map.is-revealed .partner-map__area:nth-child(n + 14):nth-child(-n + 17) { transition-delay: 600ms; }
html.js-motion .partner-map.is-revealed .partner-map__area:nth-child(n + 18) { transition-delay: 660ms; }

html.js-motion .partner-map .partner-map__pin-body {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

html.js-motion .partner-map.is-revealed .partner-map__pin-body {
  opacity: 1;
  transform: none;
}

html.js-motion .partner-map.is-revealed .partner-map__pin:nth-child(2) .partner-map__pin-body { transition-delay: 70ms; }
html.js-motion .partner-map.is-revealed .partner-map__pin:nth-child(3) .partner-map__pin-body { transition-delay: 140ms; }
html.js-motion .partner-map.is-revealed .partner-map__pin:nth-child(4) .partner-map__pin-body { transition-delay: 210ms; }
html.js-motion .partner-map.is-revealed .partner-map__pin:nth-child(5) .partner-map__pin-body { transition-delay: 280ms; }
html.js-motion .partner-map.is-revealed .partner-map__pin:nth-child(6) .partner-map__pin-body { transition-delay: 350ms; }
html.js-motion .partner-map.is-revealed .partner-map__pin:nth-child(7) .partner-map__pin-body { transition-delay: 420ms; }
html.js-motion .partner-map.is-revealed .partner-map__pin:nth-child(8) .partner-map__pin-body { transition-delay: 490ms; }
html.js-motion .partner-map.is-revealed .partner-map__pin:nth-child(9) .partner-map__pin-body { transition-delay: 560ms; }
html.js-motion .partner-map.is-revealed .partner-map__pin:nth-child(n + 10):nth-child(-n + 13) .partner-map__pin-body { transition-delay: 620ms; }
html.js-motion .partner-map.is-revealed .partner-map__pin:nth-child(n + 14):nth-child(-n + 17) .partner-map__pin-body { transition-delay: 680ms; }
html.js-motion .partner-map.is-revealed .partner-map__pin:nth-child(n + 18) .partner-map__pin-body { transition-delay: 740ms; }

/* ---------- Fortschrittsbalken und Kopfzeilen-Schatten ------------------ */
.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(
    90deg,
    var(--color-accent-700),
    var(--color-accent-500)
  );
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: 0 50%;
  pointer-events: none;
  /* Blendet weich weg, sobald die Kapitelleiste den Fortschritt übernimmt. */
  transition: opacity 0.26s ease;
}

@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: progress-grow linear both;
    animation-timeline: scroll();
  }

  @keyframes progress-grow {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .site-header {
      animation: header-elevate linear both;
      animation-timeline: scroll();
      animation-range: 0 140px;
    }
  }

  @keyframes header-elevate {
    from {
      box-shadow: 0 0 0 0 transparent;
    }
    to {
      box-shadow: 0 12px 32px -20px oklch(0.305 0.048 254.52 / 0.34);
    }
  }
}

html.js-motion .site-header {
  transition: box-shadow var(--duration-base) ease;
}

html.js-motion .site-header.is-scrolled {
  box-shadow: 0 12px 32px -20px oklch(0.305 0.048 254.52 / 0.34);
}

/* ---------- Sanfte Seitenuebergaenge ------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root) {
    animation-duration: 0.16s;
  }

  ::view-transition-new(root) {
    animation-duration: 0.24s;
  }
}

/* ---------- Mikro-Interaktionen: Karten und Medien ---------------------- */
.card__media img,
.step__media img,
.split__media img {
  transition: transform 0.55s var(--ease-out);
}

.card--link:hover .card__media img,
.card--link:focus-within .card__media img {
  transform: scale(1.045);
}

.card--link:focus-within {
  border-color: var(--color-primary-300);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.step:hover .step__media img {
  transform: scale(1.04);
}

.split__media:hover img {
  transform: scale(1.03);
}

.card--link .link-arrow svg {
  transition: transform var(--duration-fast) var(--ease-out);
}

.card--link:hover .link-arrow svg {
  transform: translateX(3px);
}

/* ---------- Mikro-Interaktionen: Buttons -------------------------------- */
.btn {
  position: relative;
  overflow: hidden;
}

.btn:active {
  transform: translateY(0) scale(0.985);
}

.btn--primary::before,
.btn--accent::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-130%) skewX(-18deg);
  background: linear-gradient(
    105deg,
    transparent 32%,
    color-mix(in oklch, #fff 50%, transparent) 50%,
    transparent 68%
  );
  pointer-events: none;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn--primary:hover::before,
  .btn--accent:hover::before {
    animation: btn-sheen 0.7s var(--ease-out);
  }

  @keyframes btn-sheen {
    to {
      transform: translateX(130%) skewX(-18deg);
    }
  }
}

/* ---------- Mikro-Interaktionen: Navigation ----------------------------- */
.nav-link:not([aria-current="page"])::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.25rem;
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent-700);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-base) var(--ease-out);
}

.nav-link:not([aria-current="page"]):hover::after,
.nav-link:not([aria-current="page"]):focus-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: no-preference) {
  .nav-group__panel:not([hidden]) {
    animation: panel-in 0.24s var(--ease-out);
  }

  @keyframes panel-in {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  }

  .nav-mobile:not([hidden]) {
    animation: mobile-in 0.28s var(--ease-out);
  }

  @keyframes mobile-in {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
  }
}

.nav-sub__icon {
  transition: background-color var(--duration-fast) ease,
    color var(--duration-fast) ease, transform var(--duration-base) var(--ease-out);
}

.nav-sub:hover .nav-sub__icon {
  background: var(--color-accent-500);
  color: var(--color-primary-950);
  transform: scale(1.06);
}

/* ---------- Akkordeon: weiches Auf- und Zuklappen ----------------------- */
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  .accordion__item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--duration-base) var(--ease-out),
      content-visibility var(--duration-base) allow-discrete;
  }

  .accordion__item[open]::details-content {
    block-size: auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .accordion__item[open] .accordion__panel {
    animation: acc-fade 0.35s var(--ease-out) both;
  }

  @keyframes acc-fade {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
  }
}

/* ---------- Weitere Verfeinerungen -------------------------------------- */
.region-list li {
  transition: transform var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.region-list li:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary-400);
}

.table-wrap tbody tr {
  transition: background-color var(--duration-fast) ease;
}

.table-wrap tbody tr:hover {
  background: var(--color-primary-100);
}

.footer-list a {
  transition: color var(--duration-fast) ease;
}

.toc__list a,
.topic-list a {
  transition: color var(--duration-fast) ease,
    text-decoration-color var(--duration-fast) ease;
}