:root {
  --page-bg: #ffffff;
  --panel-bg: #ffffff;
  --text-neutral: #6f6f6a;
  --text-active: #6f6f6a;
  --text-muted: #dbdbdb;
  --icon-size: clamp(208px, min(22.4vw, 38vh), 336px);
  --menu-size: clamp(38px, min(4.3vw, 6vh), 68px);
  --menu-leading: 1.055;
  --menu-width: clamp(400px, 50vw, 780px);
  --composition-gap: clamp(36px, 4.6vw, 76px);
  --hover-bridge: calc(var(--composition-gap) + clamp(16px, 1.5vw, 28px));
  --visual-radius: clamp(18px, 1.55vw, 26px);
  --icon-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --glow-x: 0%;
  --glow-y: 0%;
  --transition: 700ms cubic-bezier(.2, .76, .22, 1);
}

* { box-sizing: border-box; }

html {
  background: var(--page-bg);
  color-scheme: light;
  overscroll-behavior: none;
}

body {
  min-width: 280px;
  min-height: 100svh;
  margin: 0;
  overflow: hidden;
  background: var(--page-bg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body.immersive-is-open { overscroll-behavior: none; }
button, a { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.page { min-height: 100svh; padding: 0; }

.stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100svh;
  min-height: 300px;
  overflow: hidden;
  background: var(--panel-bg);
  isolation: isolate;
  touch-action: none;
}

.experience {
  position: relative;
  display: grid;
  grid-template-columns: var(--icon-size) var(--menu-width);
  align-items: center;
  gap: var(--composition-gap);
  width: max-content;
  max-width: calc(100% - 40px);
  transform: translate3d(0, 0, 0);
  perspective: 1000px;
}

.icon-rail {
  position: relative;
  width: var(--icon-size);
  height: 100%;
  min-height: calc(var(--menu-size) * 7 * var(--menu-leading));
}

.icon-aligner {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  transform: translate3d(0, calc(-50% + var(--icon-y)), 0);
  transition: transform var(--transition);
  will-change: transform;
}

.icon-float {
  width: 100%;
  height: 100%;
  animation: levitate 5.4s ease-in-out infinite;
  will-change: transform;
}

.visual-card-placeholder { flex: none; visibility: hidden; pointer-events: none; }

.visual-card {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--visual-radius);
  contain: paint;
  isolation: isolate;
  background: radial-gradient(circle at 24% 24%, rgba(255,255,255,.15), transparent 42%), linear-gradient(140deg, #6f7680, #31343a);
  box-shadow: 0 18px 38px rgba(27,47,82,.16), 0 4px 12px rgba(14,25,49,.08), 0 0 0 1px rgba(0,0,0,.08) inset, 0 1px 0 rgba(255,255,255,.12) inset;
  transform: perspective(700px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  opacity: 1;
  transition: opacity 420ms cubic-bezier(.2,.76,.22,1), box-shadow 500ms ease;
  will-change: transform;
}

.visual-card.is-transition-card {
  transition: none !important;
  animation: none !important;
  cursor: default;
}

.visual-card.is-fullscreen { contain: strict; }

.visual-card__glow {
  position: absolute;
  inset: -45%;
  z-index: 1;
  pointer-events: none;
  opacity: .28;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.45), transparent 50%);
  transform: translate3d(var(--glow-x), var(--glow-y), 0);
  transition: transform 220ms ease-out;
  mix-blend-mode: soft-light;
  border-radius: inherit;
}

.shader-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.project-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: block;
  width: clamp(64px, 32%, 108px);
  max-height: clamp(70px, 36%, 116px);
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.08));
  transform: translate3d(-50%, -50%, 0) scale(.8) rotate(-5deg);
  transition: opacity 330ms ease, transform 620ms cubic-bezier(.2,.78,.2,1);
  will-change: transform, opacity;
}

.visual-card.is-transition-card .project-icon { transition: none; }
.project-icon.is-visible { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1) rotate(0deg); }
.experience.is-neutral .project-icon { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.78) rotate(-4deg); }
.experience.is-neutral .visual-card { opacity: 0; }
.experience.has-active .visual-card { cursor: pointer; }

.project-nav, .project-list { width: var(--menu-width); }
.project-nav { position: relative; z-index: 10; }
.project-list { display: flex; flex-direction: column; align-items: flex-start; }

.project-item {
  position: relative;
  display: block;
  width: calc(var(--menu-width) + var(--hover-bridge));
  min-height: calc(var(--menu-size) * var(--menu-leading));
  margin: 0 0 0 calc(var(--hover-bridge) * -1);
  padding: 0 0 0 var(--hover-bridge);
  overflow: visible;
  border: 0;
  border-radius: 4px;
  color: var(--text-neutral);
  background: transparent;
  font-size: var(--menu-size);
  font-weight: 650;
  line-height: var(--menu-leading);
  letter-spacing: -.045em;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: color 390ms ease, opacity 390ms ease, transform 560ms cubic-bezier(.2,.8,.2,1);
}

.experience.is-neutral .project-item { color: var(--text-neutral); opacity: 1; transform: translate3d(0,0,0); }
.experience.has-active .project-item:not([aria-selected="true"]) { color: var(--text-muted); opacity: 1; transform: translate3d(0,0,0); }
.experience.has-active .project-item[aria-selected="true"] { z-index: 1; color: var(--text-active); opacity: 1; transform: translate3d(6px,0,0); }
.experience.is-transitioning .project-item {
  opacity: var(--transition-opacity, 1) !important;
  transform: translate3d(var(--transition-x, 0), 0, var(--transition-depth, 0)) !important;
  pointer-events: none;
  transition: none !important;
}
.project-item:focus-visible, .visual-card:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }

.immersive-experience {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  isolation: isolate;
  background: transparent;
}

.immersive-experience.is-active {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}

.immersive-experience__card-layer,
.immersive-experience__canvas,
.immersive-experience__content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.immersive-experience__canvas { z-index: 1; display: block; width: 100vw; height: 100dvh; opacity: var(--immersive-canvas-opacity, 0); }
.immersive-experience__card-layer { z-index: 2; pointer-events: none; }
.immersive-experience__content { z-index: 4; pointer-events: none; color: #fff; }

.immersive-back {
  position: absolute;
  z-index: 20;
  top: calc(22px + env(safe-area-inset-top));
  left: calc(24px + env(safe-area-inset-left));
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: rgba(255,255,255,.92);
  background: rgba(7,10,16,.34);
  box-shadow: 0 10px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  font-size: 14px;
  font-weight: 620;
  letter-spacing: -.01em;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transform: translate3d(-10px,0,0);
  transition: opacity 420ms ease, transform 520ms cubic-bezier(.2,.8,.2,1), background 180ms ease;
}

.immersive-experience.is-exploring .immersive-back { opacity: 1; transform: translate3d(0,0,0); }
.immersive-back:hover { background: rgba(18,22,31,.55); }
.immersive-back:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.immersive-back:disabled { cursor: default; }
.immersive-back__arrow { font-size: 18px; line-height: 1; }

.immersive-title {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  display: block;
  width: max-content;
  max-width: min(78vw, 1180px);
  margin: 0;
  padding: .08em .04em .12em;
  overflow: visible;
  color: #fff;
  font-size: clamp(58px, 10vw, 174px);
  font-weight: 680;
  line-height: .94;
  letter-spacing: -.068em;
  text-align: center;
  white-space: nowrap;
  transform: translate3d(-50%, -50%, 0);
  text-shadow: 0 2px 28px rgba(0,0,0,.28);
  pointer-events: none;
}

.immersive-title__character {
  display: inline-block;
  opacity: var(--char-progress, 0);
  clip-path: inset(var(--char-clip, 48%) 0 var(--char-clip, 48%) 0);
  transform: translate3d(var(--char-x, 0), var(--char-y, 10px), 0) skewX(var(--char-skew, -2deg)) scale(var(--char-scale, .9));
  filter: blur(var(--char-blur, 3.2px));
  transform-origin: 50% 55%;
  will-change: transform, opacity, clip-path, filter;
}

.immersive-projects {
  --project-accent: #7aa4ff;
  --project-primary: #dfe9ff;
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.immersive-project {
  --project-width: clamp(160px, 16vw, 260px);
  --project-opacity: 0;
  --project-x: 0px;
  --project-y: 0px;
  --project-rotate: 0deg;
  --project-scale: .52;
  --project-blur: 6px;
  --project-image-opacity: 0;
  --project-image-clip: 50%;
  --project-pixel-opacity: 0;
  --project-pixel-clip: 50%;
  --project-pixel-scale: 1.16;
  --project-hover-x: 0px;
  --project-hover-y: 0px;
  --project-hover-rotate-x: 0deg;
  --project-hover-rotate-y: 0deg;
  --project-hover-scale: 1;
  --project-image-x: 0px;
  --project-image-y: 0px;
  --project-image-scale: 1;
  --project-light-opacity: .08;
  position: absolute;
  width: var(--project-width);
  height: auto;
  margin: 0;
  opacity: var(--project-opacity);
  transform: translate3d(var(--project-x), var(--project-y), 0) rotate(var(--project-rotate)) scale(var(--project-scale));
  transform-origin: 50% 50%;
  filter: blur(var(--project-blur));
  pointer-events: auto;
  will-change: transform, opacity, filter;
}

.immersive-project__visual {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  transform: perspective(1100px) translate3d(var(--project-hover-x), var(--project-hover-y), 0) rotateX(var(--project-hover-rotate-x)) rotateY(var(--project-hover-rotate-y)) scale(var(--project-hover-scale));
  transform-style: preserve-3d;
  will-change: transform;
}

.immersive-project__image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  opacity: var(--project-image-opacity);
  clip-path: inset(0 var(--project-image-clip) 0 var(--project-image-clip));
  transform: translate3d(var(--project-image-x), var(--project-image-y), 0) scale(var(--project-image-scale));
  transform-origin: 50% 50%;
  filter:
    drop-shadow(0 14px 28px rgba(0,0,0,.24))
    drop-shadow(0 0 18px color-mix(in srgb, var(--project-accent) 11%, transparent));
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform, opacity, clip-path;
}

.immersive-project__pixels {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: var(--project-pixel-opacity);
  clip-path: inset(0 var(--project-pixel-clip) 0 var(--project-pixel-clip));
  transform: translateZ(2px) scale(var(--project-pixel-scale));
  transform-origin: 50% 50%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter:
    brightness(1.06)
    saturate(.92)
    drop-shadow(0 0 12px color-mix(in srgb, var(--project-accent) 22%, transparent));
  pointer-events: none;
  will-change: transform, opacity, clip-path;
}

.immersive-project__light {
  position: absolute;
  z-index: 3;
  inset: -10%;
  opacity: var(--project-light-opacity);
  background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--project-primary) 22%, transparent), transparent 62%);
  filter: blur(14px);
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translateZ(-1px);
}

.signal-field { display: none; }
.signal-fragment,
.signal-fragment__rail,
.signal-fragment__node,
.signal-fragment__pulse { display: none; }

.noscript-message { position: fixed; inset: auto 16px 16px; margin: 0; padding: 12px 16px; border-radius: 10px; color: white; background: #222; font: 14px/1.4 -apple-system,BlinkMacSystemFont,sans-serif; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

@keyframes levitate {
  0%,100% { transform: translate3d(0,-2px,0) rotate(-.18deg); }
  38% { transform: translate3d(0,4px,0) rotate(.24deg); }
  72% { transform: translate3d(0,0,0) rotate(-.08deg); }
}

@media (max-width: 760px) {
  :root {
    --icon-size: clamp(112px, 32vw, 190px);
    --menu-size: clamp(22px, 6.2vw, 38px);
    --menu-width: min(52vw, 340px);
    --composition-gap: clamp(16px, 4vw, 32px);
    --visual-radius: clamp(14px, 3.5vw, 22px);
  }
  .experience { max-width: calc(100% - 24px); }
  .project-icon { width: clamp(42px,34%,66px); max-height: clamp(46px,38%,72px); }
  .experience.has-active .project-item[aria-selected="true"] { transform: translate3d(3px,0,0); }
  .immersive-title { top: 48%; max-width: 88vw; font-size: clamp(44px, 14vw, 104px); white-space: nowrap; line-height: .96; letter-spacing: -.058em; }
  .signal-fragment { width: 76px; height: 18px; }
  .immersive-back { top: calc(12px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left)); }
}

@media (max-width: 390px) {
  :root { --icon-size: clamp(104px,31vw,126px); --menu-size: clamp(20px,6vw,24px); --menu-width: 52vw; --composition-gap: 14px; }
}

@media (max-height: 520px) {
  :root { --icon-size: clamp(104px,30vh,156px); --menu-size: clamp(19px,5.8vh,29px); --menu-width: min(52vw,460px); --composition-gap: clamp(18px,3vw,34px); }
  .immersive-title { font-size: clamp(44px, 10vw, 84px); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition: 1ms linear; }
  .icon-float { animation: none; }
  .project-item, .project-icon, .visual-card, .immersive-back { transition-duration: 1ms !important; }
}

/* Homepage card resilience --------------------------------------------------
   The original WebGL shader remains the primary rendering path. This moving
   fallback is only visible when WebGL is unavailable or its context is lost. */
.visual-card::before {
  content: "";
  position: absolute;
  inset: -34%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 23% 27%, rgba(255,255,255,.32) 0%, rgba(255,255,255,.08) 23%, transparent 52%),
    radial-gradient(ellipse at 78% 68%, rgba(0,0,0,.24) 0%, transparent 48%),
    conic-gradient(from 205deg at 48% 52%, rgba(255,255,255,.06), rgba(255,255,255,.28), rgba(0,0,0,.12), rgba(255,255,255,.06));
  mix-blend-mode: soft-light;
  transform: translate3d(-2%, -1%, 0) rotate(-4deg) scale(1.08);
  transition: opacity 180ms ease;
  animation: cardFallbackFlow 8s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

.webgl-card-fallback .visual-card::before { opacity: .86; }
.webgl-card-fallback .shader-canvas { opacity: 0; }
.webgl-card-ready .shader-canvas { opacity: 1; }

.visual-card.is-preparing-immersive {
  box-shadow: 0 21px 48px rgba(27,47,82,.22), 0 5px 16px rgba(14,25,49,.1), 0 0 0 1px rgba(255,255,255,.18) inset;
}

.visual-card.is-preparing-immersive .visual-card__glow {
  opacity: .42;
}

.visual-card.has-immersive-error {
  animation: immersiveLoadError 520ms cubic-bezier(.2,.75,.2,1) both;
}

@keyframes cardFallbackFlow {
  0% { transform: translate3d(-5%, -2%, 0) rotate(-5deg) scale(1.08); filter: saturate(1.05) contrast(1.02); }
  45% { transform: translate3d(3%, -4%, 0) rotate(2deg) scale(1.12); filter: saturate(1.16) contrast(1.06); }
  100% { transform: translate3d(4%, 5%, 0) rotate(6deg) scale(1.09); filter: saturate(1.08) contrast(1.03); }
}

@keyframes immersiveLoadError {
  0%, 100% { transform: perspective(700px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateX(0); }
  30% { transform: perspective(700px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateX(-5px); }
  65% { transform: perspective(700px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .visual-card::before { animation: none; transform: scale(1.08); }
}

/* Prototyping media: videos never autoplay. Playback is explicitly user-controlled. */
.immersive-project__video {
  background: #080b10;
  object-fit: contain;
}

.immersive-project__play {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: clamp(46px, 4.4vw, 66px);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  background: rgba(5,8,13,.72);
  color: #fff;
  box-shadow:
    0 12px 30px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.2);
  opacity: var(--project-image-opacity);
  transform: translate(-50%, -50%) translateZ(8px);
  transition:
    width 220ms cubic-bezier(.16,.82,.18,1),
    left 220ms cubic-bezier(.16,.82,.18,1),
    top 220ms cubic-bezier(.16,.82,.18,1),
    right 220ms cubic-bezier(.16,.82,.18,1),
    transform 220ms cubic-bezier(.16,.82,.18,1),
    opacity 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
  cursor: pointer;
  pointer-events: auto;
}

.immersive-project__play:hover,
.immersive-project__play:focus-visible {
  background: rgba(10,14,22,.9);
  border-color: rgba(255,255,255,.84);
  outline: none;
}

.immersive-project__play-icon {
  position: relative;
  display: block;
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid currentColor;
}

.immersive-project.is-playing .immersive-project__play {
  left: auto;
  right: 9px;
  top: 9px;
  width: 34px;
  opacity: .74;
  transform: translateZ(8px);
}

.immersive-project.is-playing .immersive-project__play:hover,
.immersive-project.is-playing .immersive-project__play:focus-visible {
  opacity: 1;
}

.immersive-project.is-playing .immersive-project__play-icon {
  width: 10px;
  height: 13px;
  margin-left: 0;
  border: 0;
}

.immersive-project.is-playing .immersive-project__play-icon::before,
.immersive-project.is-playing .immersive-project__play-icon::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 2px;
  background: currentColor;
}

.immersive-project.is-playing .immersive-project__play-icon::before { left: 0; }
.immersive-project.is-playing .immersive-project__play-icon::after { right: 0; }

@media (max-width: 760px) {
  .immersive-project__play {
    width: clamp(42px, 13vw, 58px);
  }

  .immersive-project.is-playing .immersive-project__play {
    width: 32px;
    right: 7px;
    top: 7px;
  }
}

.immersive-experience:not(.is-exploring) .immersive-project__play {
  pointer-events: none;
}

/* Media framing and spacing pass — 2026-08-31 -----------------------------
   Keep the immersive scene untouched; only improve the portfolio media
   hierarchy, Apple-like corner treatment and proximity to the title. */
.immersive-project__image,
.immersive-project__pixels {
  border-radius: clamp(14px, 1.25vw, 24px);
}

.immersive-project__video {
  border-radius: clamp(22px, 1.7vw, 34px);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, .32),
    0 5px 18px rgba(0, 0, 0, .22),
    0 0 0 1px rgba(255, 255, 255, .12);
}

/* The portrait photo in About me should read as a hero image rather than a
   tiny decorative object. The other transparent pictograms remain untouched. */
.immersive-project[aria-label="About me 01"] .immersive-project__image,
.immersive-project[aria-label="About me 01"] .immersive-project__pixels {
  border-radius: clamp(22px, 1.7vw, 34px);
}

/* Rectangular portfolio screenshots get a slightly softer, Apple-like edge.
   Transparent graphic assets are unaffected visually by the clipping. */
.immersive-project__visual {
  border-radius: clamp(14px, 1.25vw, 24px);
}

@media (max-width: 760px) {
  .immersive-project__image,
  .immersive-project__pixels {
    border-radius: clamp(12px, 4vw, 20px);
  }

  .immersive-project__video,
  .immersive-project[aria-label="About me 01"] .immersive-project__image,
  .immersive-project[aria-label="About me 01"] .immersive-project__pixels {
    border-radius: clamp(18px, 5vw, 28px);
  }
}