/* Art Color: finite entrances, native scrolling, and static reading states. */
@media screen {
  .page-index .hero h1 .hero-line {
    display: block;
    margin: 0;
    font-weight: 600;
    padding-bottom: .045em;
    margin-bottom: -.045em;
  }
  .page-index .hero h1 .hero-line--accent { margin-top: 5px; font-weight: 450; }
  .page-index .hero h1 .hero-line__text { display: block; margin: 0; font-weight: inherit; }
  .hero-mockup picture { display: block; transform-origin: center; }
  .home-values {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: linear-gradient(180deg, #5a28f0 0%, #4620b7 28%, #260d6f 65%, #1c0850 100%);
  }
  .brand-construction {
    position: absolute;
    inset: 3% -4% 0 39%;
    z-index: -1;
    background: url('assets/images/brand-construction.png') center / contain no-repeat;
    opacity: .27;
    pointer-events: none;
  }
  .home-values > .container { position: relative; }
  @media (max-width: 650px) {
    .brand-construction { inset: 5% -38% 15% 12%; background-position: center top; opacity: .2; }
  }
}

@media screen and (prefers-reduced-motion: no-preference) {
  .motion-enabled .hero::after {
    content: '';
    position: absolute;
    width: min(64vw, 920px);
    aspect-ratio: 1;
    top: -7%;
    right: -8%;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(ellipse, rgba(200, 143, 255, .24), rgba(122, 73, 255, .1) 42%, transparent 67%);
    opacity: .7;
  }
  .motion-enabled.hero-intro .hero::after {
    animation: hero-light 3.2s cubic-bezier(.18, .65, .3, 1) both;
  }
  .hero-grid { z-index: 1; }
  @keyframes hero-light {
    from { opacity: 0; transform: translate(-9%, 8%) scale(.85); }
    45% { opacity: 1; }
    to { opacity: .7; transform: translate(0, 0) scale(1); }
  }
  .motion-suspended .hero::after { animation-play-state: paused; }
  .motion-enabled .hero-mockup picture {
    transform: perspective(1100px) translate3d(var(--mockup-x, 0px), var(--mockup-y, 0px), 0)
      rotateX(var(--mockup-rx, 0deg)) rotateY(var(--mockup-ry, 0deg));
    transition: transform .65s cubic-bezier(.2, .65, .25, 1);
  }

  /* Original rails stay visible; a brighter overlay traces the route once. */
  .motion-enabled .perception-path::before { background: rgba(212, 179, 255, .22); }
  .motion-enabled .perception-path::after {
    content: '';
    position: absolute;
    left: 19px;
    top: 21px;
    bottom: 42px;
    width: 1px;
    background: linear-gradient(#b580ff, #f3ddff, #b886ff);
    transform: scaleY(var(--trace-progress, 0));
    transform-origin: top;
    pointer-events: none;
  }
  .perception-path li { z-index: 1; }
  .path-number { transition: background .35s, border-color .35s, box-shadow .35s; }
  .motion-enabled .trace-active .path-number {
    background: #6f34d3;
    border-color: #dfbcff;
    box-shadow: 0 0 20px rgba(186, 112, 255, .22);
  }
  .motion-enabled .page-index #methode .method-list::before { background: #e0d0fa; box-shadow: none; }
  .motion-enabled .page-index #methode .method-list::after {
    content: '';
    position: absolute;
    top: 5px;
    bottom: 16px;
    left: 0;
    width: 9px;
    border-radius: 100px;
    background: linear-gradient(#692cff, #ae20ff);
    transform: scaleY(var(--trace-progress, 0));
    transform-origin: top;
    pointer-events: none;
  }
  .page-index #methode .method-list li { z-index: 1; }
  .page-index #methode .method-list li::before { transition: background .3s, color .3s, box-shadow .3s; }
  .motion-enabled .page-index #methode .trace-active::before {
    color: #fff;
    background: #8737f1;
    box-shadow: 0 0 0 4px rgba(137, 55, 241, .08);
  }
  .button > span, .text-link > span { transition: transform .22s ease; }
  .button:focus-visible > span, .text-link:focus-visible > span { transform: translateX(4px); }
  .situation, .tier-grid .card, .project-investment {
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .situation:focus-within, .tier-grid .card:focus-within, .project-investment:focus-within { border-color: #d5adff; }
  @media (hover: hover) and (pointer: fine) {
    .button:hover > span, .text-link:hover > span { transform: translateX(4px); }
    .situation:hover, .tier-grid .card:hover, .project-investment:hover {
      border-color: #d5adff;
      box-shadow: inset 0 1px rgba(255, 255, 255, .4), 0 18px 40px rgba(22, 0, 61, .23);
    }
    .tier-grid .card:hover, .project-investment:hover { transform: translateY(-4px); }
    .nav__links a {
      background: linear-gradient(#dfc5ff, #dfc5ff) left bottom / 0 1px no-repeat;
      transition: color .2s, background-size .25s;
    }
    .nav__links a:hover, .nav__links a:focus-visible { background-size: 100% 1px; }
  }
  @media (max-width: 650px) {
    .motion-enabled .hero::after { width: 110vw; top: 34%; right: -25%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mockup picture { transform: none !important; }
  .brand-construction { clip-path: none !important; }
}
@media print {
  .brand-construction, .hero::after { display: none !important; }
}