/* Light and movement around the original portfolio, without changing its layout. */
.hero__bg {
  pointer-events: none;
  background:
    radial-gradient(ellipse at 3% 36%, rgba(21, 119, 231, 0.19), transparent 40%),
    radial-gradient(ellipse at 95% 20%, rgba(120, 74, 230, 0.19), transparent 38%),
    radial-gradient(ellipse at 75% 94%, rgba(27, 146, 197, 0.12), transparent 40%);
}
.hero__field {
  display: block;
  width: 100%;
  height: 100%;
}
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(var(--bg-rgb), 0.95) 0%, rgba(var(--bg-rgb), 0.72) 26%, transparent 64%),
    linear-gradient(transparent 72%, var(--bg));
}
[data-theme='light'] .hero__bg {
  background:
    radial-gradient(ellipse at 3% 36%, rgba(53, 154, 255, 0.14), transparent 42%),
    radial-gradient(ellipse at 95% 20%, rgba(148, 108, 235, 0.13), transparent 38%),
    radial-gradient(ellipse at 75% 94%, rgba(51, 161, 195, 0.09), transparent 40%);
}
[data-theme='light'] .hero__bg::after {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(var(--bg-rgb), 0.98) 0%, rgba(var(--bg-rgb), 0.84) 26%, transparent 64%),
    linear-gradient(transparent 72%, var(--bg));
}
.hero__motion-toggle {
  position: absolute;
  right: max(22px, calc((100vw - 1200px) / 2));
  bottom: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 24px;
  font: 12px var(--font);
  cursor: pointer;
  transition: color 180ms, border-color 180ms, background 180ms;
}
.hero__motion-toggle:hover {
  color: var(--text);
  border-color: var(--border-light);
  background: var(--bg-card);
}
.hero__motion-toggle svg { width: 12px; height: 12px; }
.hero__motion-toggle .motion-play,
.hero__motion-toggle[aria-pressed='true'] .motion-pause { display: none; }
.hero__motion-toggle[aria-pressed='true'] .motion-play { display: block; }
.hero__content > .reveal { transition: none; }
.phone-mockup { padding-top: 8px; }
.phone-mockup .device {
  transition: translate 280ms cubic-bezier(.22, 1, .36, 1), filter 280ms;
}
.phone-mockup .device-frame,
.viewer__stage { position: relative; }
.screen-fade {
  position: absolute !important;
  pointer-events: none;
  z-index: 1;
  min-width: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  transform: none !important;
}
.gallery-stage__zoom { z-index: 2; }
.modal__container { animation-duration: 240ms; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .project-card[data-project]:hover .device,
  .project-card[data-project]:focus-within .device {
    translate: 0 -6px;
    filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.16));
  }
}
@media (max-width: 768px) {
  .hero { padding-bottom: 80px; }
  .hero__motion-toggle { right: 16px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__motion-toggle { display: none; }
  .phone-mockup .device { transition: none; }
}

/* Each app keeps its own colour, with light concentrated around the device. */
[data-project='selfquest'] { --project-rgb: 81, 157, 246; }
[data-project='selfaware'] { --project-rgb: 146, 130, 239; }
[data-project='selfgrow'] { --project-rgb: 80, 185, 129; }
[data-project='nuremi'] { --project-rgb: 84, 179, 196; }
[data-project='trainer'] { --project-rgb: 120, 140, 170; }
[data-project='emberfall'] { --project-rgb: 226, 164, 72; }
[data-project='hordeflow'] { --project-rgb: 214, 96, 74; }
[data-project='combat-lab'] { --project-rgb: 176, 120, 212; }
[data-project='selfquest-web'] { --project-rgb: 81, 157, 246; }
[data-project='xuabelle'], [data-static='xuabelle'] { --project-rgb: 200, 120, 160; }
[data-project='portfolio-3d'] { --project-rgb: 232, 98, 64; }
.project-card[data-project] {
  position: relative;
  isolation: isolate;
  --light-x: 50%;
  --light-y: 28%;
}
.project-card[data-project]::before,
.project-card[data-project]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity 260ms;
}
.project-card[data-project]::before {
  z-index: -1;
  background: radial-gradient(ellipse at 50% 29%, rgba(var(--project-rgb), 0.085), transparent 62%);
}
.project-card[data-project]::after {
  padding: 1px;
  opacity: 0;
  background: radial-gradient(320px circle at var(--light-x) var(--light-y), rgba(var(--project-rgb), 0.75), transparent 75%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.project-card[data-project].is-pointing::after,
.project-card[data-project]:focus-within::after { opacity: 1; }
.phone-mockup {
  --phone-scale: 0.55;
  overflow: visible;
}
.phone-mockup::before {
  content: '';
  position: absolute;
  width: 90%;
  height: 64px;
  left: 5%;
  bottom: -6px;
  background: radial-gradient(ellipse, rgba(var(--project-rgb), 0.15), transparent 70%);
  pointer-events: none;
}
.phone-mockup .device {
  transform: scale(var(--phone-scale)) perspective(1400px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 360ms cubic-bezier(.22, 1, .36, 1), translate 280ms cubic-bezier(.22, 1, .36, 1), filter 280ms;
}
.phone-mockup .device-frame::after {
  content: '';
  position: absolute;
  inset: 19px;
  z-index: 3;
  border-radius: 40px;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at var(--glass-x, 50%) 20%, rgba(255, 255, 255, 0.14), transparent 60%),
    linear-gradient(125deg, transparent 25%, rgba(255, 255, 255, 0.085) 44%, transparent 64%);
  transition: opacity 320ms;
}
.project-card.is-pointing .device-frame::after,
.project-card:focus-within .device-frame::after { opacity: 0.75; }
.phone-caption {
  min-height: 96px;
  margin: 14px 0 0;
  padding-inline: 4px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.phone-caption strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 5px;
}
.phone-caption strong::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 7px 2px 0;
  border-radius: 50%;
  background: rgb(var(--project-rgb));
}
.gallery-caption {
  min-height: 78px;
  padding: 12px 2px 4px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.65;
}
.gallery-caption strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}
.gallery-stage {
  background: radial-gradient(ellipse at 50% 40%, rgba(var(--project-rgb, 81, 157, 246), 0.08), transparent 80%), var(--bg-secondary);
}
.gallery-thumbnail[aria-pressed='true'] { border-color: rgb(var(--project-rgb, 81, 157, 246)); }
.viewer__caption { max-width: 780px; margin-inline: auto; line-height: 1.6; }
.viewer__caption strong { display: block; margin-bottom: 3px; color: #f0f0f0; font-weight: 500; }
.viewer__caption small { display: block; color: #969ba5; font-size: 12px; margin-top: 4px; }
.modal__container { animation: none; }
::view-transition-group(portfolio-screen) {
  animation-duration: 460ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  overflow: clip;
}
::view-transition-old(portfolio-screen),
::view-transition-new(portfolio-screen) { height: 100%; object-fit: contain; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 220ms; mix-blend-mode: normal; }
/* The timeline advances with reading progress; every role stays fully readable. */
.timeline--animated::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  transform-origin: top;
  transform: scaleY(var(--timeline-progress, 0));
  background: linear-gradient(var(--accent), #9c7ae6);
  box-shadow: 0 0 12px rgba(92, 130, 246, 0.2);
  pointer-events: none;
}
.timeline--animated .timeline__dot {
  background: var(--border-light);
  transition: background-color 240ms, box-shadow 240ms;
}
.timeline--animated .is-reached .timeline__dot { background: var(--accent); }
.timeline--animated .is-active .timeline__dot { box-shadow: 0 0 0 5px var(--accent-glow), 0 0 18px var(--accent-glow); }
.timeline--animated .is-active .timeline__content {
  border-color: rgba(104, 143, 231, 0.65);
  box-shadow: 0 8px 32px rgba(68, 104, 184, 0.07);
}
@media (max-width: 768px) {
  .phone-mockup { --phone-scale: 0.48; }
  .timeline--animated::after { left: 7px; }
}
@media (max-width: 580px) {
  .phone-mockup { --phone-scale: 0.55; }
  .phone-caption { min-height: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .phone-mockup .device { transform: scale(var(--phone-scale)); transition: none; }
  .timeline--animated::after { transform: none; }
  .timeline--animated .timeline__dot { background: var(--accent); }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}