/* A restrained technical layer over the portfolio's editorial typography. */
:root {
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
  --site-reveal-duration: 780ms;
  --site-reveal-easing: var(--motion-ease);
}

.motion-hero {
  position: relative;
  isolation: isolate;
}

.motion-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  color: var(--effect);
  contain: paint;
}

.motion-grid {
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 90% 35%, #000, transparent 64%);
}

.motion-field::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(380px circle at var(--pointer-x, 70%) var(--pointer-y, 30%), rgba(var(--light-rgb), var(--hero-light-opacity)), transparent 70%);
  transition: opacity .7s ease;
}

.motion-hero.is-pointed .motion-field::after { opacity: 1; }

.motion-orbit {
  position: absolute;
  width: clamp(240px, 38vw, 570px);
  right: -4%;
  top: 7%;
  stroke: currentColor;
  stroke-width: .65;
  opacity: .14;
  transform: rotate(-18deg);
}

.motion-orbit circle:nth-child(2) { stroke-width: 2; }
.motion-satellite { transform-origin: 200px 200px; animation: motionOrbit 26s linear infinite; animation-play-state: paused; }
.motion-satellite circle { fill: currentColor; stroke: none; }
.motion-in-view .motion-satellite { animation-play-state: running; }
.motion-hero :is(.trajectory-ambient, .trajectory-scroll-dot) { animation-play-state: paused; }
.motion-hero.motion-in-view :is(.trajectory-ambient, .trajectory-scroll-dot) { animation-play-state: running; }
.case-hero .motion-field { opacity: .5; }
.trajectory-hero .motion-field { opacity: .8; }

.motion-surface { position: relative; isolation: isolate; }
.motion-light {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(340px circle at var(--pointer-x, 50%) var(--pointer-y, 0%), rgba(var(--light-rgb), .22), transparent 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--effect) 18%, transparent);
  transition: opacity .55s var(--motion-ease);
}
.motion-surface:is(.is-pointed, :focus-visible, :focus-within) > .motion-light { opacity: 1; }
.split-dark > .motion-light { background: radial-gradient(450px circle at var(--pointer-x, 50%) var(--pointer-y, 0%), rgba(var(--accent-rgb), .09), transparent 70%); }
.trajectory-milestone > .motion-light { box-shadow: none; }
.case-card { --card-hover-duration: .65s; --card-hover-easing: var(--motion-ease); transition: box-shadow .65s var(--motion-ease); }
.case-card:is(:hover, :focus-visible) { box-shadow: 0 18px 50px -28px rgba(var(--shadow-rgb), .32); }
.case-visual, .project-image { transition: transform .7s var(--motion-ease); }

.motion-button { isolation: isolate; }
.motion-button:where(:not(.lightbox-close, .lightbox-nav, .pdf-nav)) { position: relative; }
.cta.motion-button, .contact-btn.motion-button { overflow: hidden; }
.motion-button.motion-magnetic.is-pointed {
  translate: var(--magnet-x, 0px) calc(var(--magnet-y, 0px) - 2px);
}
.cta.motion-button::before, .contact-btn.motion-button::before {
  content: '';
  position: absolute;
  inset: -50% -100%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, color-mix(in srgb, var(--accent-shine) 16%, transparent) 50%, transparent 60%);
  transform: translateX(-45%);
  transition: transform .85s var(--motion-ease);
}
.cta.motion-button:is(:hover, :focus-visible)::before,
.contact-btn.motion-button:is(:hover, :focus-visible)::before { transform: translateX(45%); }
.motion-button:active { scale: .97; }
.motion-ripple { position: absolute; border-radius: 50%; background: var(--accent); opacity: 0; pointer-events: none; z-index: -1; }
.cta .motion-ripple { background: var(--accent-shine); z-index: 0; }
.motion-button:disabled { scale: 1; }

.nav-links a::after { transition: opacity .3s ease, transform .55s var(--motion-ease); }
.nav-links a[aria-current]::after {
  background: var(--active-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--active-accent) 25%, transparent);
}
.footer-links a { position: relative; }
.footer-links a::after {
  content: '';
  position: absolute;
  inset: auto 0 -3px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--motion-ease);
}
.footer-links a:is(:hover, :focus-visible)::after { transform: scaleX(1); }
@supports selector(:has(*)) {
  .language-switch { position: relative; isolation: isolate; }
  .language-switch::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent);
    transition: translate .45s var(--motion-ease), background-color .35s ease;
    pointer-events: none;
  }
  .language-switch:has([data-language='en'][aria-pressed='true'])::before { translate: 32px 0; }
  .site-header .language-switch button[aria-pressed='true'] { background: transparent; }
  .trajectory-nav .language-switch::before { background: var(--accent); }
}

.motion-reading-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 10001;
  pointer-events: none;
  background: var(--accent);
  transform: scaleX(var(--reading-progress, 0));
  transform-origin: left;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
}

.site-scroll-enabled .site-scroll-reveal:not(.is-visible) {
  transform: translate3d(0, 26px, 0);
  filter: blur(4px);
}
.site-scroll-enabled h1.site-scroll-reveal:not(.is-visible),
.site-scroll-enabled h2.site-scroll-reveal:not(.is-visible) { clip-path: inset(0 0 100% 0); }
.site-scroll-enabled :is(h1, h2).site-scroll-reveal {
  transition: opacity var(--site-reveal-duration) var(--motion-ease), transform var(--site-reveal-duration) var(--motion-ease), filter var(--site-reveal-duration) ease, clip-path var(--site-reveal-duration) var(--motion-ease);
  transition-delay: var(--site-reveal-delay, 0ms);
  clip-path: inset(-8% -3% -12% -3%);
}
.trajectory-reveal { transform: translateY(26px); filter: blur(4px); transition-duration: .78s; transition-timing-function: var(--motion-ease); transition-delay: var(--trajectory-reveal-delay, 0ms); }
.trajectory-stage-title { will-change: auto; }
.motion-stage.is-pointed .trajectory-stage-title {
  color: transparent;
  background: radial-gradient(240px circle at var(--pointer-x, 50%) 50%, var(--accent-shine), var(--accent) 70%);
  background-clip: text;
  -webkit-background-clip: text;
}
.trajectory-stage::before { background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.trajectory-milestone-divider path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--motion-ease); }
.trajectory-milestone.is-visible + .trajectory-milestone-divider path { stroke-dashoffset: 0; }
.trajectory-lean-step:is(:hover, :focus-visible) .trajectory-lean-number { text-shadow: 0 0 24px rgba(var(--accent-rgb), .25); }

/* Page opacity leaves layout and fixed controls undisturbed. */
html.site-spa-enabled main,
html.site-spa-enabled .site-footer { transition: opacity .22s ease; }
body.site-page-loading::after {
  content: '';
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 10002;
  width: 35%;
  height: 2px;
  background: var(--accent);
  animation: motionLoading 1s var(--motion-ease) infinite;
  pointer-events: none;
}

.lightbox { backdrop-filter: blur(16px); }
.lightbox.is-closing { display: flex; pointer-events: none; }
.lightbox-image { border-radius: 2px; box-shadow: 0 28px 100px rgba(var(--shadow-rgb), .55); touch-action: pan-y pinch-zoom; }
.lightbox-image.is-loading { opacity: .3; }
.gallery-image { transition: filter .45s ease, outline-color .45s ease; outline: 1px solid transparent; outline-offset: -1px; }
.gallery-image:focus-visible { outline-color: var(--accent); filter: brightness(1.03); }
.lightbox-counter { color: var(--on-dark-muted); font-variant-numeric: tabular-nums; }
.lightbox-stage::before, .lightbox-stage::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  border-style: solid;
  pointer-events: none;
}
.lightbox-stage::before { top: 0; left: 0; border-width: 1px 0 0 1px; }
.lightbox-stage::after { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.lightbox-close, .lightbox-nav { transition: color .25s, background .25s, translate .35s var(--motion-ease); }
.lightbox-close:is(:hover, :focus-visible), .lightbox-nav:is(:hover, :focus-visible) { opacity: 1; }
.pdf-page-status { font-variant-numeric: tabular-nums; }
.pdf-stage[aria-busy='true']::after {
  content: '';
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: -8px;
  height: 1px;
  background: var(--accent);
  transform-origin: left;
  animation: motionPdf 1s ease-in-out infinite alternate;
}

@media (hover: hover) and (pointer: fine) {
  .motion-surface.is-pointed :is(.case-visual, .project-image) { transform: perspective(1000px) rotateX(var(--depth-x, 0deg)) rotateY(var(--depth-y, 0deg)); }
  .gallery-image:hover { outline-color: var(--accent); filter: brightness(1.03); }
}
@media (max-width: 800px) {
  .motion-grid { background-size: 42px 42px; opacity: .1; }
  .motion-orbit { right: -32%; top: 2%; width: 300px; opacity: .1; }
  .lightbox-stage::before, .lightbox-stage::after { width: 12px; height: 12px; }
}
.motion-paused .motion-satellite,
.motion-paused .motion-hero :is(.trajectory-ambient, .trajectory-scroll-dot),
.motion-paused body.site-page-loading::after { animation-play-state: paused; }

@keyframes motionOrbit { to { transform: rotate(360deg); } }
@keyframes motionLoading { from { translate: -100% 0; } to { translate: 390% 0; } }
@keyframes motionPdf { from { scale: .2 1; opacity: .3; } to { scale: 1 1; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .motion-satellite, body.site-page-loading::after, .pdf-stage[aria-busy='true']::after { animation: none; }
  body.site-page-loading::after { width: 100%; opacity: .5; }
  .motion-field::after, .motion-light, .cta.motion-button::before, .contact-btn.motion-button::before { display: none; }
  .motion-button, .motion-button.is-pointed, .motion-button:active { translate: none !important; scale: none; }
  .case-visual, .project-image, .motion-surface.is-pointed :is(.case-visual, .project-image) { transform: none; transition: none; }
  html.site-spa-enabled main, html.site-spa-enabled .site-footer,
  .case-card, .lightbox-close, .lightbox-nav, .trajectory-reveal { transition: none; }
  .site-scroll-enabled :is(h1, h2).site-scroll-reveal { transition: none; clip-path: none; }
  .trajectory-stage-title, .trajectory-stage::before, .trajectory-stage::after, .trajectory-milestone-divider path { transition: none; }
  .nav-links a::after, .language-switch::before, .footer-links a::after, .gallery-image { transition: none; }
  .motion-stage.is-pointed .trajectory-stage-title { background: none; color: var(--accent); }
  .trajectory-stage:is(:hover, :focus-visible) .trajectory-stage-title { transform: none; }
  .trajectory-milestone-divider path { stroke-dashoffset: 0; }
}