/* A presentation layer only: no layout, typography or base palette overrides. */
.home-hero, .framework-hero, .home-framework, .product-gallery, .designer-section, .code-example-section {
  position: relative;
  isolation: isolate;
}

/* Local, static glows fade fully before the section edges. No blur filters or loops. */
.home-hero::before, .framework-hero::before, .home-framework::before,
.product-gallery::before, .designer-section::before, .code-example-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(ellipse at 72% 42%, #376ccd10, transparent 67%);
}
.home-hero::before {
  background: radial-gradient(ellipse 38% 64% at 73% 50%, #3d70cf29, transparent 70%),
              radial-gradient(ellipse 30% 58% at 24% 49%, #6963ae16, transparent 78%);
}
.framework-hero::before {
  background: radial-gradient(ellipse 40% 65% at 70% 50%, #3d70cf24, transparent 74%),
              radial-gradient(ellipse 32% 60% at 26% 50%, #6963ae10, transparent 78%);
}
.product-gallery::before {
  background: radial-gradient(ellipse 56% 64% at 58% 47%, #3d70cf26, transparent 73%),
              radial-gradient(ellipse 22% 44% at 18% 60%, #6963ae10, transparent 80%);
}
.home-framework::before {
  background: radial-gradient(ellipse at 68% 50%, #376ccd0a, transparent 65%);
}
.designer-section::before {
  background: radial-gradient(ellipse 40% 65% at 69% 50%, #3d70cf19, transparent 76%),
              radial-gradient(ellipse 28% 60% at 23% 50%, #6963ae0c, transparent 78%);
}
.code-example-section::before {
  background: radial-gradient(ellipse 40% 60% at 68% 50%, #376ccd0c, transparent 78%);
}

.project-card, .project-row, .featured-project, .screenshot-link {
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.button { transition: background 150ms ease, border-color 150ms ease, box-shadow 180ms ease; }
.text-link, .project-links a, .social-links a, .back-link { transition: color 150ms ease; }
.project-card:focus-within, .project-row:focus-within, .featured-project:focus-within,
.screenshot-link:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent) 42%, var(--color-line));
}
@media (hover: hover) and (pointer: fine) {
  .project-card:hover, .project-row:hover, .featured-project:hover {
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-line));
    box-shadow: 0 8px 24px #162c490c;
  }
  .screenshot-link:hover {
    border-color: color-mix(in srgb, var(--color-accent) 48%, var(--color-line));
    box-shadow: var(--shadow-panel), 0 0 28px #376ccd12;
  }
  .button:hover { box-shadow: 0 4px 14px #162c4912; }
}

/* Motion is opt-in to the no-preference query; the default state is visible. */
@media (prefers-reduced-motion: no-preference) {
  [data-enter] { animation: content-enter 360ms cubic-bezier(.2, .65, .3, 1) backwards; }
  [data-enter="description"] { animation-delay: 40ms; }
  [data-enter="actions"] { animation-delay: 80ms; }
  [data-enter="screenshot"] { animation-delay: 120ms; }
  .framework-hero [data-enter] { animation-duration: 400ms; }
  .is-revealing { animation: section-enter 380ms cubic-bezier(.2, .65, .3, 1) backwards; }
  [data-reveal="framework"].is-revealing { animation-duration: 420ms; }

  /* Keyboard use and anchor navigation never wait for an entrance. */
  [data-enter]:focus-within, [data-reveal]:focus-within, [data-reveal]:target {
    animation: none;
  }
  @keyframes content-enter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes section-enter {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @media (hover: hover) and (pointer: fine) {
    .project-card, .project-row, .button, .screenshot-link {
      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 150ms ease;
    }
    .text-link .icon, .project-links .icon, .social-links .icon, .button .icon-arrow {
      transition: transform 180ms ease;
    }
    .project-card:hover, .project-row:hover { transform: translateY(-2px); }
    .button:hover { transform: translateY(-1px); }
    .screenshot-link:hover { transform: scale(1.008); }
    .text-link:hover .icon, .project-links a:hover .icon, .social-links a:hover .icon,
    .button:hover .icon-arrow { transform: translateX(2px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-enter], [data-reveal], .project-card, .project-row, .button, .screenshot-link,
  .text-link .icon, .project-links .icon, .social-links .icon, .button .icon {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1;
  }
}
@media print {
  [data-enter], [data-reveal] { animation: none !important; transform: none !important; opacity: 1 !important; }
  .home-hero::before, .framework-hero::before, .home-framework::before,
  .product-gallery::before, .designer-section::before, .code-example-section::before { display: none; }
}