/* RSVERSE cinematic scroll system */

:root {
  --pointer-x: 0;
  --pointer-y: 0;
  --contact-arrival: 0;
  --motion-cyan: #24c9ee;
  --motion-violet: #8d55ff;
  --motion-magenta: #d85bff;
}

html.motion-ready {
  scroll-behavior: auto;
}

.experience-atmosphere {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.experience-orb {
  position: absolute;
  width: min(44vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.1;
  filter: blur(100px);
  transform: translate3d(
    calc(var(--pointer-x) * 10px),
    calc(var(--pointer-y) * 8px),
    0
  );
}

.experience-orb-cyan {
  top: 18%;
  left: -25%;
  background: var(--motion-cyan);
}

.experience-orb-violet {
  right: -24%;
  bottom: 5%;
  background: var(--motion-violet);
  transform: translate3d(
    calc(var(--pointer-x) * -12px),
    calc(var(--pointer-y) * -9px),
    0
  );
}

main,
.footer {
  position: relative;
  z-index: 1;
}

/* Hero launch */
.hero-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.motion-ready .hero-section {
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
}

.motion-ready .hero-stage {
  position: relative;
  height: 100%;
}

/* Shared scene transitions */
[data-scene] {
  --scene-progress: 0;
  --scene-enter: 0;
  --scene-exit: 0;
  position: relative;
  isolation: isolate;
}

[data-scene]:not([data-scene="hero"])::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: 180px;
  pointer-events: none;
  opacity: calc(var(--scene-enter) * 0.42);
  background:
    radial-gradient(circle at calc(50% + var(--pointer-x) * 4%), 0%, rgba(36, 201, 238, 0.14), transparent 52%),
    linear-gradient(90deg, transparent, rgba(141, 85, 255, 0.11), transparent);
  transform: translate3d(0, calc((1 - var(--scene-enter)) * -34px), 0);
  z-index: -1;
}

[data-reveal] {
  --item-progress: 1;
}

.motion-ready [data-reveal] {
  opacity: var(--item-progress);
  transform: translate3d(0, calc((1 - var(--item-progress)) * 48px), 0)
    scale(calc(0.97 + var(--item-progress) * 0.03));
  transform-origin: 50% 70%;
}

.motion-ready [data-reveal]:not(.is-complete) {
  will-change: transform, opacity;
}

.motion-ready [data-scene].is-hash-arrival [data-reveal] {
  opacity: 1;
  transform: none;
}

html.is-history-return.motion-ready [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

.motion-ready [data-reveal="copy"] {
  transform: translate3d(calc((1 - var(--item-progress)) * 34px), 0, 0);
}

.motion-ready [data-reveal="cta"] {
  transform: translate3d(0, calc((1 - var(--item-progress)) * 24px), 0)
    scale(calc(0.94 + var(--item-progress) * 0.06));
}

/* Identity portal */
.about-section {
  overflow: hidden;
  isolation: isolate;
}

.about-image {
  position: relative;
}

.about-image::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
}

.about-image::before {
  width: 112%;
  aspect-ratio: 1;
  border: 1px solid rgba(141, 85, 255, 0.62);
  box-shadow: 0 0 42px rgba(83, 99, 255, 0.18);
  opacity: var(--item-progress);
  transform: translate(-50%, -50%) rotate(calc((1 - var(--item-progress)) * -34deg))
    scale(calc(0.72 + var(--item-progress) * 0.28));
}

.motion-ready [data-reveal="portal"] {
  transform: translate3d(0, calc((1 - var(--item-progress)) * -18px + var(--depth-shift, 0px)), 0)
    rotate(calc((1 - var(--item-progress)) * -4deg))
    scale(calc(0.72 + var(--item-progress) * 0.28));
}

/* Contribution constellation */
.contributed-section {
  overflow: hidden;
}

.contribution-trajectory {
  position: absolute;
  inset: 110px max(calc((100% - 1200px) / 2), 2rem) 48px;
  width: min(calc(100% - 4rem), 1200px);
  height: calc(100% - 158px);
  pointer-events: none;
  opacity: calc(var(--scene-enter) * 0.72);
  z-index: 0;
}

.contribution-trajectory path {
  fill: none;
  stroke: url(#contribution-gradient);
  stroke: rgba(141, 85, 255, 0.46);
  stroke-width: 1.5;
  stroke-dasharray: 1600;
  stroke-dashoffset: var(--trajectory-offset, 1600);
}

.contribution-trajectory circle {
  fill: var(--motion-cyan);
  opacity: var(--scene-enter);
  filter: drop-shadow(0 0 7px var(--motion-cyan));
}

.contributed-section > h2,
.contributed-grid {
  position: relative;
  z-index: 1;
}

/* Systems */
.skills-section {
  overflow: hidden;
}

/* Contact docking */
.contact-section {
  overflow: hidden;
  isolation: isolate;
}

.contact-section::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92vw, 1080px);
  height: 112%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(36, 201, 238, 0.15) 0%, rgba(141, 85, 255, 0.085) 40%, transparent 72%);
  filter: blur(28px);
  opacity: calc(0.34 + var(--scene-enter) * 0.5);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(calc(0.9 + var(--scene-enter) * 0.1));
  z-index: -1;
}

.contact-form .button-primary {
  position: relative;
  isolation: isolate;
}

.contact-form .button-primary::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid var(--motion-cyan);
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 220ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: -1;
}

.contact-form.is-ready .button-primary::after {
  opacity: 0.72;
  transform: scale(1.02);
  box-shadow: 0 0 24px rgba(36, 201, 238, 0.24);
}

/* Page trajectory rail */
.section-pagination {
  --page-progress: 0;
}

.section-pagination::after {
  content: "";
  position: absolute;
  top: calc(100% + 0.35rem);
  width: 1px;
  height: 80px;
  background: linear-gradient(var(--pagination-ring), transparent);
  transform: scaleY(var(--page-progress));
  transform-origin: top;
  opacity: 0.78;
}

.section-pagination-link.active {
  animation: pagination-arrival 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pagination-arrival {
  0% { transform: scale(0.72); }
  100% { transform: scale(1); }
}

/* Theme tuning */
[data-theme="light"] .experience-orb {
  opacity: 0.065;
}

[data-theme="light"] .contribution-trajectory path {
  stroke: rgba(88, 67, 184, 0.36);
}

[data-theme="light"] .contact-section::after {
  background: radial-gradient(ellipse at center, rgba(36, 201, 238, 0.13) 0%, rgba(111, 79, 211, 0.075) 40%, transparent 72%);
}

/* Responsive simplification */
@media (max-width: 1119px) {
  .contribution-trajectory {
    inset-inline: 1.5rem;
    width: calc(100% - 3rem);
  }
}

@media (max-width: 900px) {
  .contribution-trajectory {
    display: none;
  }

  .experience-orb {
    width: 92vw;
    filter: blur(80px);
  }
}

@media (max-width: 767px) {
  .motion-ready [data-reveal="copy"] {
    transform: translate3d(0, calc((1 - var(--item-progress)) * 24px), 0);
  }

  .contact-section::after {
    width: 125vw;
    height: 100%;
    top: 48%;
    filter: blur(26px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .experience-atmosphere,
  .contribution-trajectory,
  .contact-section::after {
    display: none;
  }

  .motion-ready [data-reveal],
  .motion-ready .hero-content,
  .motion-ready .hero-content h1,
  .motion-ready .hero-eyebrow,
  .motion-ready .hero-subtitle {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .section-pagination-link.active,
  .contact-form .button-primary::after {
    animation: none;
    transition: none;
  }
}