/* Motion and lighting layer; all content retains its original layout. */
.js .reveal {
  opacity: 0;
  transform: translateY(34px) scale(.98);
  transition: opacity .75s ease, transform .85s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.visible { opacity: 1; transform: none; }
.js .reveal:focus-within { opacity: 1; transform: none; transition: none; }
.about-story, .footer-center { --reveal-delay: 90ms; }
.about-sidebar, .contact-stage, .footer-right { --reveal-delay: 160ms; }
.journey-card:nth-child(2) { --reveal-delay: 70ms; }
.journey-card:nth-child(3) { --reveal-delay: 140ms; }
.journey-card:nth-child(4) { --reveal-delay: 210ms; }
.journey-card:nth-child(5) { --reveal-delay: 280ms; }
.primary-button, .nav-cta {
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
.primary-button:hover, .primary-button:focus-visible {
  box-shadow: 0 8px 28px #ff742f35, 0 0 18px #ffae6818;
}
.primary-button:active, .nav-cta:active { transform: translateY(0) scale(.97); }
.button-icon { transition: transform .35s cubic-bezier(.16,1,.3,1); }
.primary-button:hover .button-icon { transform: rotate(-8deg); }
.about-portrait img { transition: transform .9s cubic-bezier(.16,1,.3,1); }
.about-portrait:hover img { transform: scale(1.035); }
.about-skill-grid li > span:first-child, .journey-symbol, .contact-float {
  transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease;
}
.about-skill-grid li:hover > span:first-child, .journey-card:hover .journey-symbol {
  box-shadow: 0 6px 24px #ff742f24;
  border-color: #ff9a6580;
}
.contact-float:hover { transform: translateY(-4px); box-shadow: 0 15px 35px #0005, 0 0 20px #ff742f23; }
.contact-form input, .contact-form textarea { transition: border-color .25s ease, box-shadow .25s ease; }
.contact-form input:focus, .contact-form textarea:focus { box-shadow: 0 0 22px #ff742f1c; }
.lab-card::after, .contact-device::after, .contact-note::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(240px circle at var(--glow-x, 50%) var(--glow-y, 50%), #ffaa6b24, transparent 75%);
  opacity: 0;
  transition: opacity .45s ease;
}
@media (hover: hover) and (pointer: fine) {
  .lab-card:hover::after, .contact-device:hover::after, .contact-note:hover::after { opacity: 1; }
}
dialog[open] { animation: dialog-arrive .35s cubic-bezier(.16,1,.3,1) both; }
dialog[open]::backdrop { animation: backdrop-arrive .3s ease both; }
@keyframes dialog-arrive {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes backdrop-arrive { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; transition-delay: 0ms; }
  dialog[open], dialog[open]::backdrop { animation: none; }
  .lab-card::after, .contact-device::after, .contact-note::after { display: none; }
  .about-portrait:hover img, .contact-float:hover, .primary-button:hover .button-icon,
  .primary-button:hover, .primary-button:active, .nav-cta:hover, .nav-cta:active { transform: none; }
}