.snow-ui { position: absolute; inset: 0; }
.works-placeholder { display: grid; place-items: center; min-height: 100svh; background: #02101c; color: #f8faf0; }
.works-placeholder h2 { margin: 0; font: 400 clamp(64px, 12vw, 220px)/1 Anton, sans-serif; letter-spacing: .035em; }
.is-camera-enabled .snow-layer { will-change: transform; }
.is-camera-enabled .about-snow { min-height: 100svh; }
#about:focus-visible, #works:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* Full-bleed scenery, with the complete reference composition centered above it. */
.about-snow { isolation: isolate; overflow: hidden; }
.about-snow > .snow-background, .about-snow > .snow-shading { position: absolute; inset: 0; }
.snow-bio h2, .snow-bio h3, .snow-statement { transition: color .3s ease, text-shadow .3s ease, translate .4s ease; }
.snow-tool { outline: none; }
.snow-tool > div { transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .3s ease; }
.snow-tool:focus-visible > div { outline: 2px solid #b2f3ff; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .snow-bio h2:hover, .snow-bio h3:hover, .snow-statement:hover { color: #d0f5ff; text-shadow: 0 0 18px #8ce9ff66; translate: 2px 0; }
  .snow-tool:hover > div, .snow-tool:focus-visible > div { transform: translateY(-.45cqw) scale(1.08); border-color: #bcf4ff; box-shadow: 0 .5cqw 1cqw #14315466,0 0 .7cqw #9beaff55; }
}
@media (prefers-reduced-motion: reduce) {
  .snow-bio h2, .snow-bio h3, .snow-statement, .snow-tool > div { transition: none; }
  .snow-bio h2:hover, .snow-bio h3:hover, .snow-statement:hover { translate: none; }
  .snow-tool:hover > div, .snow-tool:focus-visible > div { transform: none; }
}

/* The scene ends at the section edge rather than an inset 16:9 crop. */
.snow-stage { height: 100svh; aspect-ratio: auto; overflow: visible; }
.snow-character { top: auto; bottom: 0; height: 34.9875cqw; }
.snow-orbits::after { display: none; }
.scene-seam { position: relative; height: 0; z-index: 2; pointer-events: none; }
.scene-seam::after { content: ""; position: absolute; top: -3svh; left: 0; right: 0; height: 6svh; background: linear-gradient(transparent, #4285c0 50%, transparent); }
.scene-seam-out::after { background: linear-gradient(transparent, #17334e 50%, transparent); }
.snow-roman-name, .snow-role-en, .snow-specialties, .snow-label, .snow-experience-en, .snow-tags li { transition: color .35s ease, background-size .45s ease, border-color .35s ease; }
.snow-roman-name, .snow-role-en, .snow-specialties, .snow-label, .snow-experience-en { background: linear-gradient(#9beaff,#9beaff) left bottom / 0 1px no-repeat; }
.snow-nav a::before { content: ""; position: absolute; left: 0; right: 0; bottom: -.35cqw; height: 1px; background: #96ecff; transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
@media (hover: hover) and (pointer: fine) {
  .snow-roman-name:hover, .snow-role-en:hover, .snow-specialties:hover, .snow-label:hover, .snow-experience-en:hover { color: #e2faff; background-size: 100% 1px; }
  .snow-nav a:hover::before, .snow-nav a:focus-visible::before { transform: scaleX(1); }
  .snow-tags li:hover { border-color: #b5f2ff; color: #b5f2ff; }
}
@media (max-width: 700px) {
  .snow-stage { width: 100%; height: auto; min-height: 100svh; padding: 22px; }
  .snow-ui { position: relative; display: grid; gap: 26px; }
  .snow-header { position: relative; inset: auto; }
  .snow-brand { font-size: 20px; gap: 10px; }
  .snow-brand span { width: 22px; }
  .snow-nav { font-size: 11px; gap: 8px; letter-spacing: .06em; }
  .snow-nav .is-current::after { top: 17px; width: 3px; height: 3px; }
  .snow-lettering { top: 105px; left: 7%; width: 86%; }
  .snow-character { top: 140px; bottom: auto; left: 50%; translate: -50% 0; width: min(110vw,510px); height: auto; aspect-ratio: 1873 / 1267; mask-image: linear-gradient(#000 85%, transparent); }
  .snow-character img { height: 100%; }
  .snow-bio, .snow-experience, .snow-philosophy, .snow-toolkit { position: relative; inset: auto; width: auto; }
  .snow-bio { margin-top: 340px; }
  .snow-kicker { font-size: 11px; }
  .snow-bio h2 { margin: 12px 0 7px; font-size: 36px; }
  .snow-roman-name { font-size: 12px; }
  .snow-bio-divider { width: 160px; margin-top: 12px; }
  .snow-bio-divider::before { width: 40px; height: 2px; }
  .snow-bio h3 { font-size: 22px; margin-top: 18px; }
  .snow-role-en, .snow-experience-en { font-size: 11px; margin-top: 6px; }
  .snow-specialties { margin-top: 14px; font-size: 14px; line-height: 1.7; white-space: normal; }
  .snow-bio-rail, .snow-experience-rail { display: none; }
  .snow-years { height: auto; margin-top: 10px; gap: 8px; }
  .snow-years strong { font-size: 76px; }
  .snow-years span { font-size: 22px; }
  .snow-experience h3 { font-size: 18px; }
  .snow-accent { width: 40px; height: 2px; margin-bottom: 12px; }
  .snow-label { font-size: 11px; }
  .snow-statement { margin-top: 10px; font-size: 18px; }
  .snow-tags { margin-top: 16px !important; gap: 12px; }
  .snow-tags li { height: 34px; padding: 0 14px; border-radius: 20px; font-size: 11px; }
  .snow-tools { gap: 8px; margin-top: 20px !important; }
  .snow-tool { width: 48px; }
  .snow-tool > div { width: 48px; height: 48px; padding: 4px; }
  .snow-tool > span { font-size: 11px; margin-top: 9px; }
  .snow-footer { position: relative; inset: auto; flex-wrap: wrap; gap: 10px; padding-top: 16px; font-size: 11px; line-height: 1.6; }
  .snow-orbits { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .snow-roman-name, .snow-role-en, .snow-specialties, .snow-label, .snow-experience-en, .snow-tags li, .snow-nav a::before { transition: none; }
}

/* HOME and ABOUT share a viewport; WORKS remains in normal document flow. */
.is-wheel-scenes .intro-scenes { position: relative; height: 100svh; isolation: isolate; overflow: hidden; background: #02101c; }
.is-wheel-scenes .intro-scenes > .hero,
.is-wheel-scenes .intro-scenes > .about-snow { position: absolute; inset: 0; width: 100%; height: 100%; }
.is-wheel-scenes .intro-scenes > .hero[hidden] { display: none; }
.is-wheel-scenes .intro-scenes > .hero { z-index: 0; }
.is-wheel-scenes .intro-scenes > .about-snow { z-index: 1; }
.is-wheel-scenes .scene-seam-in { display: none; }
.is-wheel-scenes .scene-seam-out { opacity: 0; }

.snow-years strong { color: #3FFFFF; }

/* Selected ABOUT copy stays pure white, including hover states. */
#about .snow-bio h2,
#about .snow-bio h3,
#about .snow-specialties,
#about .snow-statement,
#about .snow-years > span,
#about .snow-experience h3,
#about .snow-experience-en { color: #fff; }

/* Reserve the scene's normal flow space while its transition viewport is fixed. */
.is-wheel-scenes.is-scene-transition .intro-scenes { position: fixed; inset: 0; z-index: 5; height: 100svh !important; }
.is-wheel-scenes.is-scene-transition .journey-viewport { padding-top: 100svh; }
@media (max-width: 700px) {
  .is-wheel-scenes .intro-scenes > .about-snow { height: auto; min-height: 100svh; }
}