/* Motion is enhancement-only: no JavaScript means no hidden page content. */
.primary-nav a, .text-link, .project-link, .contact-email, .contact-bottom a { transition: color .2s ease; }
.primary-nav a::after { transition: transform .3s var(--ease-out); }
.primary-nav a:hover::after, .primary-nav a:focus-visible::after { transform: scaleX(1); }
.site-header { transition: border-color .3s ease, background-color .25s ease; }
.theme-toggle { transition: border-color .2s ease, background-color .2s ease; }
.theme-toggle svg { transition: opacity .3s ease, transform .45s var(--ease-out); }
.theme-toggle:hover { border-color: var(--accent); }
.menu-lines::before, .menu-lines::after { transition: transform .25s ease; }
.menu-toggle[aria-expanded="true"] .menu-lines::before { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-lines::after { transform: translateY(-3.5px) rotate(-45deg); }
.button { transition: transform .22s var(--ease-out), box-shadow .25s ease, border-color .25s ease; }
.button::after { transition: transform .65s var(--ease-out), opacity .2s ease; }
.button-arrow, .text-link span { transition: transform .25s var(--ease-out); }
.button:hover::after, .button:focus-visible::after { opacity: 1; transform: translateX(0); }
.button-primary:hover, .button-primary:focus-visible { box-shadow: 0 9px 30px rgb(255 45 85 / 24%); }
.button-secondary:hover { border-color: var(--accent); }
.button:hover .button-arrow, .text-link:hover span { transform: translate(2px, -2px); }
.button:active { transform: scale(.97); }
.contact-email:hover, .contact-bottom a:hover { color: var(--accent); }
.back-to-top { transition: opacity .25s ease, visibility .25s ease, transform .25s ease, border-color .25s ease; }
.back-to-top:hover { border-color: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  /* Independent loader deadline is deliberately NOT redefined here. */
  .loader-mark { animation: loader-breathe 1.2s ease-in-out infinite alternate; }
  .loader-track span { animation: loading-line 1.2s var(--ease-out) both; }
  .loader-exiting .page-loader { display: grid; position: fixed; inset: 0; z-index: 100; place-items: center; background: var(--bg); color: var(--text); pointer-events: none; animation: loader-exit .32s ease forwards; }
  /* Backwards fill releases transform after entrance so magnetic buttons still work. */
  .is-ready [data-hero] { animation: hero-rise .8s var(--ease-out) backwards; }
  .is-ready [data-hero="1"] { animation-delay: .38s; }
  .is-ready [data-hero="2"], .is-ready [data-hero="3"] { animation: none; }
  .is-ready .title-char { animation: letter-enter .9s calc(.57s + var(--letter) * 35ms) var(--ease-out) backwards; }
  .is-ready .outlined-name .title-char { animation-delay: calc(.77s + var(--letter) * 42ms); }
  .is-ready .name-period { animation: panel-enter .6s 1.12s backwards; }
  .is-ready [data-hero="4"] { animation-delay: 1.12s; }
  .is-ready [data-hero="5"] { animation-delay: 1.32s; }
  .is-ready [data-hero="6"] { animation-delay: 1.44s; }
  
  .is-ready [data-hero="8"] { animation: artwork-settle 1.2s .28s var(--ease-out) backwards; }
  .is-ready .character-swing { animation: character-sway 7s 1.1s ease-in-out infinite alternate; }
  .is-ready .character-anchor { animation: character-arrive 1.4s .6s var(--ease-out) backwards; }
  .profile-ring { animation: ring-turn 32s linear infinite; }
  .motion-enabled [data-reveal] { transition: opacity .8s var(--ease-soft), transform .9s var(--ease-out), clip-path .95s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
  .motion-enabled .reveal-pending { opacity: 0; transform: translateY(20px); }
  .motion-enabled .section-heading.reveal-pending, .motion-enabled [data-reveal="title"].reveal-pending { transform: none; }
  .motion-enabled .heading-ink { transition: transform 1.05s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
  .motion-enabled .reveal-pending .heading-ink { transform: translateY(112%) rotate(1.4deg); }
  .heading-line:nth-child(2) .heading-ink { transition-delay: calc(var(--reveal-delay, 0ms) + 110ms); }
  .motion-enabled [data-reveal="portrait"].reveal-pending { clip-path: inset(0 0 100% 0 round 42%); transform: scale(1.06); }
  .motion-enabled [data-reveal="portrait"].is-revealed { clip-path: inset(-5% -5% -5% -5% round 0); }
  .motion-enabled [data-reveal="portrait"].is-revealed .profile-frame::after { animation: portrait-scan 1.5s .5s ease-out both; }
  .motion-enabled [data-reveal="prose"].reveal-pending { transform: translateX(22px); }
  .motion-enabled [data-reveal="timeline"].reveal-pending { transform: translateX(27px); }
  .timeline-item .eyebrow { transition: opacity .6s .2s ease, transform .6s .2s var(--ease-out); }
  .timeline-item.reveal-pending .eyebrow { opacity: 0; transform: translateX(-10px); }
  .motion-enabled [data-reveal="responsibility"].reveal-pending { transform: none; opacity: 1; }
  .responsibility > div, .responsibility-number { transition: transform .8s var(--ease-out), opacity .7s; transition-delay: var(--reveal-delay, 0ms); }
  .responsibility.reveal-pending > div { opacity: 0; transform: translateX(24px); }
  .responsibility.reveal-pending .responsibility-number { opacity: 0; transform: translateY(24px); }
  .responsibility.is-revealed::after { animation: line-draw .9s var(--reveal-delay, 0ms) var(--ease-out) both; }
  .motion-enabled [data-reveal="project"].reveal-pending { transform: perspective(1200px) translateY(36px) rotateX(4deg) scale(.975); }
  .motion-enabled [data-reveal="skills"].reveal-pending { transform: translateY(10px); clip-path: inset(0 100% 0 0); }
  .motion-enabled [data-reveal="skills"].is-revealed { clip-path: inset(-5% -5% -5% -5%); }
  .motion-enabled [data-reveal="footer"].reveal-pending { transform: none; opacity: .2; }
  .is-ready .site-header { animation: header-arrive .75s .16s var(--ease-out) backwards; }
  .is-ready .hero-orbit { animation: orbit-breathe 12s 2s ease-in-out infinite alternate; }
  .is-ready .orbit-two { animation-delay: 4s; animation-direction: alternate-reverse; }
  .is-ready .scroll-cue > span { animation: scroll-nudge 4s 3s ease-in-out infinite; }
  .stack-detail.is-updating .code-window::after { content: ''; display: inline-block; width: 6px; height: 1em; background: var(--accent); animation: caret-blink .55s 3 steps(1) both; }
  .project-surface:focus-within .live-browser { transform: translateY(-4px) scale(1.01); }
  .project-surface:focus-within .tags span { transform: translateY(-2px); }
  .dev-hud[open] .hud-body { animation: panel-enter .35s var(--ease-out); }
  .hud-plus { transition: transform .25s var(--ease-out); }
  .dev-hud[open] .hud-plus { transform: rotate(45deg); }
  .contact-panel::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border-top: 1px solid var(--accent); opacity: .4; pointer-events: none; }

  .motion-enabled .timeline-track > span { transform: scaleY(var(--timeline-progress, 0)); transition: transform .5s var(--ease-out); }
  .timeline-node { transition: background-color .4s ease, box-shadow .4s ease; }
  .timeline-item.is-revealed .timeline-node { background: var(--red); box-shadow: 0 0 0 5px var(--accent-soft), 0 0 20px var(--accent-soft); }
  .stack-detail.is-updating .stack-summary, .stack-detail.is-updating .code-window { animation: panel-enter .3s var(--ease-out); }
  .responsibility-mark { transition: transform .3s var(--ease-out), color .3s ease; }
  .responsibility:hover .responsibility-number { transform: translateX(4px); }
  .responsibility:hover .responsibility-mark { color: var(--accent); transform: translate(2px, -2px); }
}

.stack-option, .tech-monogram { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.stack-option:hover:not(:disabled) { border-color: var(--line-strong); background: var(--violet-soft); }
.skill-category li, .tags span, .about-pillars span { transition: border-color .2s ease, color .2s ease, background-color .2s ease, transform .35s var(--ease-out); }
.skill-category li:hover, .tags span:hover, .about-pillars span:hover { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.project-surface { transition: transform .3s var(--ease-out), border-color .25s ease, box-shadow .3s ease; }
.project-surface::before { transition: opacity .3s ease; }
.project-content h3, .live-browser { transition: transform .4s var(--ease-out), color .3s ease; }
.project-surface:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft), var(--shadow); }
.project-surface:focus-within::before { opacity: 1; }
.project-surface:focus-within h3 { color: var(--accent); }
.project-details summary > span { transition: transform .25s var(--ease-out); }
.project-details[open] summary > span { transform: rotate(45deg); }
.project-link[href]:hover { border-color: var(--accent); color: var(--accent); }
.character-swing img { transition: opacity .4s ease; }

@media (hover: hover) and (pointer: fine) {
  .project-surface:hover { border-color: var(--accent); }
  .project-surface:hover::before { opacity: 1; }
  .project-surface:hover h3 { color: var(--accent); }
  .preview-open > span { transition: transform .35s var(--ease-out), opacity .35s ease; opacity: 0; transform: translateY(8px); }
  .preview-open:hover > span, .preview-open:focus-visible > span { opacity: 1; transform: none; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pointer-enabled .cursor-glow { display: block; }
  .cursor-glow.is-visible { opacity: 1; }
  .cursor-glow { transition: opacity .3s ease; }
  .project-surface.is-pointer-active { transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-3px); transition: border-color .25s ease, box-shadow .3s ease; }
  .project-surface.is-pointer-active .live-browser { transform: translateY(-4px) scale(1.018); }
  .project-surface.is-pointer-active .tags span { transform: translateY(-2px); }
  .project-surface.is-pointer-active .tags span:nth-child(2) { transition-delay: 45ms; }
  .profile-frame img { transition: transform .7s var(--ease-out); }
  .about-visual:hover .profile-frame img { transform: scale(1.035) translateY(-2px); }
  .magnetic.is-magnetic { transform: translate(var(--magnet-x, 0px), var(--magnet-y, 0px)); }
  .magnetic.is-magnetic:active { transform: translate(var(--magnet-x, 0px), var(--magnet-y, 0px)) scale(.97); }
  .hero-art-depth { transform: translate3d(0, var(--depth-y, 0px), 0); }
}

@keyframes hero-rise { from { opacity: 0; transform: translateY(105%); } to { opacity: 1; transform: translateY(0); } }
@keyframes artwork-settle { from { opacity: 0; transform: translateY(30px) rotate(3deg); } to { opacity: 1; transform: none; } }
@keyframes character-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes ring-turn { to { transform: rotate(360deg); } }
@keyframes loader-breathe { from { transform: scale(.96); opacity: .7; } to { transform: scale(1); opacity: 1; } }
@keyframes loading-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes loader-exit { to { opacity: 0; visibility: hidden; } }
@keyframes panel-enter { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@keyframes letter-enter { from { transform: translateY(110%) rotate(5deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes header-arrive { from { opacity: 0; transform: translateY(-15px); } to { opacity: 1; transform: none; } }
@keyframes line-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes portrait-scan { from { opacity: 0; transform: translateY(-80%); } 35% { opacity: 1; } to { opacity: 0; transform: translateY(80%); } }
@keyframes orbit-breathe { from { opacity: .55; scale: .995; } to { opacity: 1; scale: 1.02; } }
@keyframes scroll-nudge { 0%, 75%, 100% { transform: translateY(0); } 85% { transform: translateY(4px); } }
@keyframes caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.code-copy, .lab-run, .preview-load { transition: color .2s, background-color .2s, border-color .2s, transform .2s var(--ease-out); }
.code-copy:hover, .lab-run:hover, .preview-load:hover { border-color: var(--accent); background: var(--accent-soft); }
.code-copy:active, .lab-run:active, .preview-load:active { transform: scale(.97); }
/* Background/off-screen effects pause; content visibility is never tied to this state. */
.page-paused .character-swing, .page-paused .profile-ring,
.about-offscreen .profile-ring,
.hero-offscreen .hero-orbit, .hero-offscreen .scroll-cue > span,
.page-paused .hero-orbit, .page-paused .scroll-cue > span,
.scene-motion-paused .hero-orbit, .scene-motion-paused .scroll-cue > span { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .heading-ink, .title-char, .profile-frame img, .responsibility > div, .responsibility-number, .hud-plus,
  .code-copy, .lab-run, .preview-load, .primary-nav, .primary-nav a, .tags span, [data-reveal] { transition: none; animation: none; }
  .code-copy:active, .lab-run:active, .preview-load:active { transform: none; }
  .cursor-glow { display: none; }
  .button, .button::after, .button-arrow, .text-link span, .theme-toggle svg,
  .menu-lines::before, .menu-lines::after, .primary-nav a::after, .project-surface,
  .project-content h3, .live-browser,
  .project-details summary > span, .character-swing img, .back-to-top { transition: none; }
  .button:active, .button:hover .button-arrow, .text-link:hover span { transform: none; }
  .preview-open > span { transition: none; transform: none; opacity: 1; }
}
@media print {
  html.is-ready .page-loader { display: none; }
  .motion-enabled .reveal-pending, .motion-enabled .reveal-pending .heading-ink,
  .motion-enabled .reveal-pending .responsibility-number, .motion-enabled .reveal-pending > div,
  .motion-enabled .reveal-pending .eyebrow { opacity: 1; transform: none; clip-path: none; }
}

/* View-transition snapshots reveal the next theme from the actual toggle position. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
::view-transition-group(root) { animation-duration: 0s; }
::view-transition { pointer-events: none; }
.theme-shifting .theme-toggle { border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
@keyframes character-arrive { from { transform: translateY(-85px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  .preview-studio[open] { animation: studio-enter .28s var(--ease-out) both; }
  .studio-tools a, .studio-close, .studio-devices button, .studio-projects button,
  .contact-copy, .code-wrap { transition: color .2s, border-color .2s, background .2s, transform .2s var(--ease-out); }
  .studio-close:hover { transform: rotate(90deg); }
  .contact-copy:active, .code-wrap:active, .scene-poke:active { transform: scale(.97); }
  .is-loading .studio-load-label { animation: preview-breathe 1.3s ease-in-out infinite alternate; }
}
@keyframes studio-enter { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes preview-breathe { from { opacity: .5; } to { opacity: 1; } }
.preview-is-open .hero-orbit, .preview-is-open .character-swing, .preview-is-open .profile-ring,
.preview-is-open .scroll-cue > span { animation-play-state: paused; }
.inline-preview-active .hero-orbit, .inline-preview-active .character-swing,
.inline-preview-active .profile-ring, .inline-preview-active .scroll-cue > span { animation-play-state: paused; }
/* A focused embedded site must remain steady while its own controls are used. */
.project-surface.is-preview-interactive, .project-surface.is-preview-interactive .live-browser { transform: none; }
.project-surface.is-preview-interactive::before { opacity: 0; }