html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

[data-prod-motion] {
  opacity: 0;
  will-change: opacity, transform, filter;
}

[data-prod-motion].is-visible {
  animation-duration: var(--motion-duration, 720ms);
  animation-delay: var(--motion-delay, 0ms);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-prod-motion='fade-up'].is-visible {
  animation-name: prod-fade-up;
}

[data-prod-motion='fade'].is-visible {
  animation-name: prod-fade;
}

[data-prod-motion='slide-left'].is-visible {
  animation-name: prod-slide-left;
}

[data-prod-motion='scale-in'].is-visible {
  animation-name: prod-scale-in;
}

[data-prod-motion='blur-in'].is-visible {
  animation-name: prod-blur-in;
}

.project-stack-card[data-project-reveal] {
  opacity: var(--project-opacity, 0.58) !important;
  transform: translate3d(0, var(--project-y, 52px), 0) scale(var(--project-scale, 1)) !important;
  transition:
    opacity 180ms linear,
    transform 180ms linear;
}

@keyframes prod-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes prod-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes prod-slide-left {
  from {
    opacity: 0;
    transform: translate3d(-28px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes prod-scale-in {
  from {
    opacity: 0;
    transform: scale(0.965);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes prod-blur-in {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 16px, 0);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-prod-motion] {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}

@media (max-width: 1023px) {
  #projects .project-stack-card.liquid-panel {
    border-color: rgba(255, 223, 173, 0.28);
    background:
      radial-gradient(circle at 18% 0%, rgba(255, 241, 214, 0.18), transparent 34%),
      linear-gradient(145deg, rgba(255, 236, 205, 0.16), rgba(255, 236, 205, 0.045) 34%, rgba(183, 121, 56, 0.08) 100%),
      rgba(24, 18, 13, 0.42);
    box-shadow:
      inset 0 1px 0 rgba(255, 244, 222, 0.22),
      inset 0 -1px 0 rgba(255, 220, 165, 0.06),
      0 18px 42px rgba(0, 0, 0, 0.3),
      0 0 0 1px rgba(255, 214, 146, 0.04);
    backdrop-filter: blur(18px) saturate(1.22);
    -webkit-backdrop-filter: blur(18px) saturate(1.22);
  }

  #projects .project-stack-card.liquid-panel::before {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(125deg, rgba(255, 245, 227, 0.2), transparent 28%, transparent 68%, rgba(255, 214, 146, 0.1)),
      radial-gradient(circle at 78% 12%, rgba(255, 231, 191, 0.14), transparent 24%);
    content: '';
    opacity: 0.9;
    pointer-events: none;
  }

  #projects .project-stack-card.liquid-panel > * {
    position: relative;
    z-index: 1;
  }
}

.hero-cta-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.hero-audio-toggle {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  width: 58px;
  min-width: 58px;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: rgba(243, 222, 192, 0.62);
  cursor: pointer;
  font: inherit;
  padding: 0;
  transition:
    transform 220ms ease,
    color 220ms ease,
    background-color 220ms ease,
    opacity 220ms ease;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.hero-audio-toggle:hover {
  background: transparent;
  color: rgba(243, 222, 192, 0.92);
  transform: translateY(-2px);
}

.hero-audio-toggle:active {
  transform: translateY(0) scale(0.98);
}

.hero-audio-toggle:focus-visible {
  outline: 1px solid rgba(243, 222, 192, 0.38);
  outline-offset: 3px;
}

.hero-audio-toggle__icon {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
  opacity: 0.94;
  filter: drop-shadow(0 0 10px rgba(255, 241, 194, 0.18)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.42));
  transition: opacity 220ms ease, transform 220ms ease;
}

.hero-audio-toggle.is-on {
  background: transparent;
  color: rgba(243, 222, 192, 0.96);
}

.hero-audio-toggle:hover .hero-audio-toggle__icon,
.hero-audio-toggle.is-on .hero-audio-toggle__icon {
  opacity: 1;
}

.hero-audio-toggle__text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .hero-cta-wrap {
    gap: 0.5rem;
  }

  .hero-audio-toggle {
    width: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
  }

  .hero-audio-toggle__icon {
    width: 32px;
    height: 32px;
  }
}

/* Local-only: hide cartoon avatar while keeping the original hero layout/texts intact. */
.hero-avatar-wrap,
.avatar-interaction-hint {
  display: none !important;
}

/* Local-only desktop hero split: two video-mask name pieces, no text stacking. */
@media (min-width: 1024px) {
  .hero-title-block {
    margin-top: clamp(2.2rem, 7vh, 5.6rem) !important;
  }

  .hero-intro-wrap {
    position: relative;
    z-index: 12;
    margin-top: clamp(1.2rem, 3.2vh, 3.2rem) !important;
    margin-bottom: clamp(0.45rem, 1vh, 0.95rem) !important;
  }

  .hero-kicker {
    visibility: hidden !important;
  }

  .hero-kicker-split {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 14;
    display: flex;
    width: min(78vw, 1220px);
    align-items: center;
    justify-content: space-between;
    color: #ffebc3fa;
    font-size: clamp(0.95rem, 1.05vw, 1.42rem);
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0.055em;
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 1px 0 rgba(0,0,0,.72), 0 0 18px rgba(232,178,87,.34), 0 8px 32px rgba(0,0,0,.54);
    transform: translateX(-50%);
  }

  .vlad-hero-heading {
    width: min(100%, 1720px) !important;
    height: clamp(5.6rem, 8vw, 10.8rem) !important;
    min-height: clamp(5.6rem, 8vw, 10.8rem) !important;
    margin-top: 0 !important;
    overflow: visible !important;
  }

  .vlad-hero-heading > .liquid-name-video,
  .vlad-hero-heading > .hero-name-fallback {
    display: none !important;
  }

  .split-name-video {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: block !important;
    width: min(42vw, 720px);
    height: 0.9em;
    opacity: 0.86;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    transform: translateY(calc(-50% - 12px));
  }

  .split-name-video--left {
    left: clamp(1.6rem, 4.8vw, 6.8rem);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 145'%3E%3Ctext text-anchor='middle' x='260' y='104' font-family='Kanit%2C Arial%2C sans-serif' font-size='92' font-weight='900' letter-spacing='-4' fill='white'%3EVLADISLAV%3C/text%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 145'%3E%3Ctext text-anchor='middle' x='260' y='104' font-family='Kanit%2C Arial%2C sans-serif' font-size='92' font-weight='900' letter-spacing='-4' fill='white'%3EVLADISLAV%3C/text%3E%3C/svg%3E");
  }

  .split-name-video--right {
    right: clamp(1.6rem, 4.8vw, 6.8rem);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 145'%3E%3Ctext text-anchor='middle' x='260' y='104' font-family='Kanit%2C Arial%2C sans-serif' font-size='92' font-weight='900' letter-spacing='-4' fill='white'%3EIMANAKOV%3C/text%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 145'%3E%3Ctext text-anchor='middle' x='260' y='104' font-family='Kanit%2C Arial%2C sans-serif' font-size='92' font-weight='900' letter-spacing='-4' fill='white'%3EIMANAKOV%3C/text%3E%3C/svg%3E");
  }

  .split-name-video--left,
  .split-name-video--right {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}

@media (max-width: 1023px) {
  .hero-kicker-split,
  .split-name-video {
    display: none !important;
  }
}

/* Local-only desktop fix: use the original video mask, split into left/right words. */
@media (min-width: 1024px) {
  .vlad-hero-heading > .liquid-name-video {
    display: block !important;
    height: 0.9em !important;
    opacity: 0.9 !important;
    transform: translate3d(0, -12px, 0) scale(1) !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-320 0 1640 145'%3E%3Ctext text-anchor='middle' x='-150' y='116' font-family='Kanit%2CArial%2Csans-serif' font-size='108' font-weight='900' letter-spacing='-4.5' fill='white'%3EVLADISLAV%3C/text%3E%3Ctext text-anchor='middle' x='1100' y='116' font-family='Kanit%2CArial%2Csans-serif' font-size='108' font-weight='900' letter-spacing='-4.5' fill='white'%3EIMANAKOV%3C/text%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-320 0 1640 145'%3E%3Ctext text-anchor='middle' x='-150' y='116' font-family='Kanit%2CArial%2Csans-serif' font-size='108' font-weight='900' letter-spacing='-4.5' fill='white'%3EVLADISLAV%3C/text%3E%3Ctext text-anchor='middle' x='1100' y='116' font-family='Kanit%2CArial%2Csans-serif' font-size='108' font-weight='900' letter-spacing='-4.5' fill='white'%3EIMANAKOV%3C/text%3E%3C/svg%3E") !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
  }

  .vlad-hero-heading > .hero-name-fallback,
  .split-name-video {
    display: none !important;
  }
}

/* Local-only desktop monitor sizing for the split video mask. */
@media (min-width: 1024px) and (max-width: 1365px) {
  .vlad-hero-heading {
    height: clamp(4.6rem, 7.2vw, 6.2rem) !important;
    min-height: clamp(4.6rem, 7.2vw, 6.2rem) !important;
    font-size: clamp(4.7rem, 7vw, 6.2rem) !important;
  }

  .vlad-hero-heading > .liquid-name-video {
    transform: translate3d(0, -8px, 0) scale(0.96) !important;
  }
}

@media (min-width: 1366px) and (max-width: 1919px) {
  .vlad-hero-heading {
    height: clamp(5.6rem, 7.8vw, 9.2rem) !important;
    min-height: clamp(5.6rem, 7.8vw, 9.2rem) !important;
    font-size: clamp(6.4rem, 7.4vw, 9.2rem) !important;
  }

  .vlad-hero-heading > .liquid-name-video {
    transform: translate3d(0, -12px, 0) scale(1) !important;
  }
}

@media (min-width: 1920px) {
  .vlad-hero-heading {
    height: clamp(8rem, 7.6vw, 12.8rem) !important;
    min-height: clamp(8rem, 7.6vw, 12.8rem) !important;
    font-size: clamp(8.6rem, 7.2vw, 12.8rem) !important;
  }

  .vlad-hero-heading > .liquid-name-video {
    transform: translate3d(0, -16px, 0) scale(1) !important;
  }
}

/* Local-only desktop monitor sizing for the split intro copy. */
@media (min-width: 1024px) and (max-width: 1365px) {
  .hero-kicker-split {
    width: min(82vw, 1060px) !important;
    top: 0 !important;
    font-size: clamp(0.82rem, 1vw, 1.02rem) !important;
  }
}

@media (min-width: 1366px) and (max-width: 1919px) {
  .hero-kicker-split {
    width: min(78vw, 1220px) !important;
    top: 0 !important;
    font-size: clamp(0.95rem, 1.05vw, 1.28rem) !important;
  }
}

@media (min-width: 1920px) {
  .hero-kicker-split {
    width: min(74vw, 1540px) !important;
    top: 0 !important;
    font-size: clamp(1.1rem, 0.95vw, 1.52rem) !important;
  }
}

/* Local-only desktop fine tuning: lower hero video and keep intro labels stable. */
@media (min-width: 1024px) {
  .hero-background-video {
    object-position: center 28% !important;
    filter: none !important;
  }

  .hero-kicker-split > :first-child {
    transform: translateX(-50px) !important;
  }

  .hero-kicker-split > :last-child {
    transform: translateX(30px) !important;
  }
}






/* Local-only: restore original typed intro line on every device. */
.hero-kicker {
  visibility: visible !important;
}

.hero-kicker-split {
  display: none !important;
}

/* Local-only: darken hero background video on mobile too. */
@media (max-width: 1023px) {
  .hero-background-video {
    filter: brightness(0.9) !important;
  }
}


/* Local-only desktop: split intro back, with separate typing on both sides. */
@media (min-width: 1024px) {
  .hero-intro-wrap {
    position: relative !important;
    z-index: 15 !important;
    margin-top: clamp(1.2rem, 3.2vh, 3.2rem) !important;
    margin-bottom: clamp(0.45rem, 1vh, 0.95rem) !important;
    left: auto !important;
    top: auto !important;
  }

  .hero-kicker {
    visibility: hidden !important;
  }

  .hero-kicker-split {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    z-index: 16 !important;
    display: flex !important;
    width: min(78vw, 1220px) !important;
    align-items: center !important;
    justify-content: space-between !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
  }

  .hero-kicker-split > span {
    display: inline-block !important;
    overflow: hidden !important;
    max-width: 0;
    white-space: nowrap !important;
    color: #ffebc3fa !important;
    font-size: clamp(0.95rem, 1.05vw, 1.28rem) !important;
    font-style: italic !important;
    font-weight: 600 !important;
    letter-spacing: 0.055em !important;
    line-height: 1 !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.72), 0 0 18px rgba(232,178,87,.34), 0 8px 32px rgba(0,0,0,.54) !important;
    animation: split-kicker-type 1.15s steps(28, end) 0.15s forwards !important;
  }

  .hero-kicker-split > span:first-child {
    transform: translateX(-50px) !important;
  }

  .hero-kicker-split > span:last-child {
    transform: translateX(30px) !important;
    animation-delay: 0.45s !important;
  }
}

@keyframes split-kicker-type {
  from { max-width: 0; }
  to { max-width: 34ch; }
}

/* Local-only desktop: make both split intro phrases type by letters, not slide. */
@media (min-width: 1024px) {
  .hero-kicker-split > span {
    max-width: none !important;
    overflow: visible !important;
    animation: none !important;
  }

  .split-kicker-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(4px);
    filter: blur(5px);
    font-style: inherit;
    animation: split-kicker-char-type 0.42s cubic-bezier(.16,1,.3,1) var(--char-delay, 0ms) forwards;
  }
}

@keyframes split-kicker-char-type {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Local-only: optimized scroll-driven mobile case strips. */
@media (max-width: 767px) {
  #marquee {
    contain: paint;
  }

  #marquee .flex.flex-col > .flex {
    will-change: transform;
    backface-visibility: hidden;
    transform-style: preserve-3d;
  }
}

/* Local-only: scroll-driven parallax decor, no autonomous floating. */
#about img {
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}


/* Local-only: calmer mobile motion, no double animation on project cards. */
@media (max-width: 767px) {
  #marquee .flex.flex-col > .flex {
    transition: transform 120ms cubic-bezier(.22, 1, .36, 1);
  }

  #projects article.project-stack-card {
    transition: transform 420ms cubic-bezier(.22, 1, .36, 1), opacity 420ms cubic-bezier(.22, 1, .36, 1) !important;
  }
}