:root {
  --lift-red: #e21a2c;
  --lift-ink: #070b14;
}

html.web-lift-arrival-boot::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50000;
  background: #070b14;
  pointer-events: none;
}

html.web-lift-arrival-boot[data-lift-theme="venom"]::before { background: #010202; }
body.web-lift-locked { overflow: hidden !important; }

.web-lift-transition {
  --lift-accent: var(--lift-red);
  --lift-accent-soft: rgba(226,26,44,.42);
  --lift-line: rgba(245,248,250,.92);
  --lift-bg: #070b14;
  position: fixed;
  inset: 0;
  z-index: 45000;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
  isolation: isolate;
}

.web-lift-transition[data-theme="venom"] {
  --lift-accent: #f4f7f8;
  --lift-accent-soft: rgba(244,247,248,.4);
  --lift-line: #fff;
  --lift-bg: #010202;
}

.web-lift-backdrop {
  position: absolute;
  inset: -2px;
  z-index: 1;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 18% 85%, rgba(204,17,41,.25), transparent 34%),
    radial-gradient(ellipse at 82% 12%, rgba(28,73,154,.2), transparent 32%),
    linear-gradient(165deg,#101827 0,#070b14 55%,#04060b 100%);
  clip-path: inset(100% 0 0);
  will-change: clip-path;
}

[data-theme="venom"] .web-lift-backdrop {
  background:
    radial-gradient(ellipse at 24% 82%, rgba(255,255,255,.09), transparent 32%),
    radial-gradient(ellipse at 79% 12%, rgba(117,130,135,.12), transparent 34%),
    linear-gradient(165deg,#14191a 0,#030505 55%,#010202 100%);
}

.web-lift-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .24;
  background-image: radial-gradient(circle, rgba(255,255,255,.38) 0 1px, transparent 1.2px);
  background-size: 9px 9px;
  -webkit-mask: linear-gradient(to bottom,transparent,#000 32%,#000 68%,transparent);
  mask: linear-gradient(to bottom,transparent,#000 32%,#000 68%,transparent);
}

.web-lift-speed {
  position: absolute;
  inset: -55% -10%;
  opacity: 0;
  background: repeating-linear-gradient(90deg,transparent 0 5.5vw,rgba(255,255,255,.12) 5.55vw 5.62vw,transparent 5.7vw 10vw);
  transform: perspective(800px) rotateX(62deg) translateY(-28%);
  will-change: transform, opacity;
}

.web-lift-shots {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.web-lift-shot {
  fill: none;
  stroke: var(--lift-line);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  filter: drop-shadow(0 0 3px var(--lift-accent)) drop-shadow(0 0 8px rgba(255,255,255,.34));
  vector-effect: non-scaling-stroke;
  will-change: stroke-dashoffset, opacity;
}

[data-theme="venom"] .web-lift-shot {
  stroke-width: 2.7;
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px rgba(255,255,255,.44));
}

.web-lift-actor {
  position: absolute;
  inset: 0;
  z-index: 7;
  perspective: 1200px;
}

.web-lift-pose {
  position: absolute;
  left: var(--actor-x);
  top: var(--actor-top);
  width: clamp(185px,18vw,315px);
  height: auto;
  opacity: 0;
  transform-origin: 50% 12%;
  filter: saturate(1.08) contrast(1.06) drop-shadow(0 22px 16px rgba(0,0,0,.58));
  will-change: transform, opacity, filter;
}

.web-lift-pose-rise { width: clamp(170px,16vw,275px); transform-origin: 50% 72%; }
.web-lift-pose-pull { width: clamp(175px,16vw,285px); }
.web-lift-pose-exit { width: clamp(190px,18vw,305px); transform-origin: 9% 7%; }

.web-lift-exit-rig {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 46vh;
  opacity: 0;
  will-change: height, opacity;
}

.web-lift-exit-web {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.web-lift-exit-rig .web-lift-pose-exit {
  top: 100%;
  left: var(--exit-hand-x);
  opacity: 0;
  transform: translate(-9%,-7%);
}

[data-theme="venom"] .web-lift-pose {
  filter: grayscale(1) contrast(2.05) brightness(.62) drop-shadow(0 0 11px rgba(255,255,255,.34)) drop-shadow(0 24px 17px rgba(0,0,0,.8));
}

.web-lift-impact {
  position: absolute;
  top: 72%;
  left: 50%;
  z-index: 6;
  width: min(72vw,1050px);
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg,transparent,var(--lift-accent),#fff,var(--lift-accent),transparent);
  box-shadow: 0 0 16px 4px var(--lift-accent-soft);
  transform: translate(-50%,-50%) scaleX(.05);
  will-change: opacity, transform;
}

.web-lift-grain {
  position: absolute;
  inset: -25%;
  z-index: 9;
  opacity: 0;
  background:
    repeating-radial-gradient(circle at 21% 32%,rgba(255,255,255,.17) 0 .5px,transparent .8px 3px),
    repeating-linear-gradient(106deg,rgba(255,255,255,.035) 0 1px,transparent 1px 5px);
  background-size: 7px 7px,5px 5px;
  mix-blend-mode: soft-light;
  will-change: opacity, transform;
}

.web-lift-edge {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 10;
  height: 3px;
  opacity: 0;
  background: linear-gradient(90deg,transparent 0 7%,var(--lift-accent) 28%,#fff 50%,var(--lift-accent) 72%,transparent 93%);
  box-shadow: 0 -12px 34px 9px var(--lift-accent-soft),0 10px 35px rgba(0,0,0,.65);
  will-change: top, opacity;
}

.web-lift-transition.is-departing .web-lift-backdrop { animation: lift-backdrop-rise 660ms 390ms cubic-bezier(.72,0,.2,1) both; }
.web-lift-transition.is-arriving .web-lift-backdrop { clip-path: inset(0); animation: lift-backdrop-lower 780ms 10ms cubic-bezier(.7,0,.22,1) both; }
.web-lift-transition.is-departing .web-lift-speed { animation: lift-speed-up 610ms 425ms ease-in both; }
.web-lift-transition.is-arriving .web-lift-speed { animation: lift-speed-down 735ms ease-out both; }
.web-lift-transition.is-departing .web-lift-pose-rise { animation: lift-pose-rise 330ms 20ms cubic-bezier(.17,.8,.2,1) both; }
.web-lift-transition.is-departing .web-lift-pose-pull { animation: lift-pose-pull 855ms 190ms cubic-bezier(.2,.8,.2,1) both; }
.web-lift-transition.is-departing .web-lift-shot-primary { animation: lift-web-cast 815ms 220ms cubic-bezier(.18,.75,.22,1) both; }
.web-lift-transition.is-arriving .web-lift-pose-pull { animation: lift-pose-release 300ms cubic-bezier(.35,0,.25,1) both; }
.web-lift-transition.is-arriving .web-lift-exit-rig { animation: lift-exit-rig 650ms 105ms cubic-bezier(.3,0,.58,1) both; }
.web-lift-transition.is-arriving .web-lift-pose-exit { animation: lift-exit-actor 650ms 105ms cubic-bezier(.3,0,.58,1) both; }
.web-lift-transition.is-arriving .web-lift-exit-strand { animation: lift-web-exit 610ms 115ms cubic-bezier(.18,.75,.22,1) both; }
.web-lift-transition.is-departing .web-lift-impact { animation: lift-impact-flash 260ms 505ms ease-out both; }
.web-lift-transition.is-arriving .web-lift-impact { animation: lift-impact-flash 270ms 335ms ease-out both; }
.web-lift-transition.is-departing .web-lift-grain { animation: lift-grain-show 660ms 390ms ease both,lift-grain-jitter 150ms steps(2,end) infinite; }
.web-lift-transition.is-arriving .web-lift-grain { animation: lift-grain-show 780ms ease both,lift-grain-jitter 150ms steps(2,end) infinite; }
.web-lift-transition.is-departing .web-lift-edge { animation: lift-edge-up 660ms 390ms cubic-bezier(.72,0,.2,1) both; }
.web-lift-transition.is-arriving .web-lift-edge { animation: lift-edge-arrival 780ms 10ms cubic-bezier(.7,0,.22,1) both; }

body.web-lift-departing > main,
body.web-lift-departing > .nav,
body.web-lift-departing > .site-header,
body.web-lift-departing > .web-scroll-rail,
body.web-lift-departing > footer {
  transform-origin: 50% 0;
  animation: suspended-page-away 660ms 390ms cubic-bezier(.62,0,.3,1) both;
  will-change: transform,filter,opacity;
}

body.web-lift-arriving > main,
body.web-lift-arriving > .nav,
body.web-lift-arriving > .site-header,
body.web-lift-arriving > .web-scroll-rail,
body.web-lift-arriving > footer {
  transform-origin: 50% 100%;
  animation: suspended-page-land 780ms cubic-bezier(.18,.8,.24,1) both;
  will-change: transform,filter,opacity;
}

body.web-lift-departing > .nav,
body.web-lift-departing > .site-header { animation-delay: 415ms; }

body.web-lift-arriving > .nav,
body.web-lift-arriving > .site-header { animation-delay: 28ms; }

body.web-lift-departing > footer { animation-delay: 440ms; }
body.web-lift-arriving > footer { animation-delay: 55ms; }

.portfolio-portal.portal-icon-launching { animation: lift-icon-launch 460ms cubic-bezier(.2,.8,.2,1) both !important; }
.portfolio-portal.portal-icon-landing { animation: lift-icon-land 850ms 390ms cubic-bezier(.2,1.45,.32,1) both !important; }

@keyframes lift-backdrop-rise {
  0% { clip-path: inset(100% 0 0); }
  100% { clip-path: inset(0); }
}

@keyframes lift-backdrop-lower {
  0% { clip-path: inset(0); }
  100% { clip-path: inset(0 0 100% 0); }
}

@keyframes lift-speed-up {
  0% { opacity: 0; transform: perspective(800px) rotateX(62deg) translateY(28%); }
  34% { opacity: .55; }
  100% { opacity: .08; transform: perspective(800px) rotateX(62deg) translateY(-38%); }
}

@keyframes lift-speed-down {
  0% { opacity: .5; transform: perspective(800px) rotateX(62deg) translateY(-40%); }
  100% { opacity: 0; transform: perspective(800px) rotateX(62deg) translateY(30%); }
}

@keyframes lift-pose-rise {
  0% { opacity: 0; transform: translate3d(-50%,72vh,0) rotate(var(--pose-rise-start)) scale(.68); }
  26% { opacity: 1; }
  72% { opacity: 1; transform: translate3d(-50%,2vh,35px) rotate(var(--pose-rise-over)) scale(1.04); }
  100% { opacity: 0; transform: translate3d(-50%,-1vh,18px) rotate(var(--pose-rise-settle)) scale(.98); }
}

@keyframes lift-pose-pull {
  0% { opacity: 0; transform: translate3d(-50%,18px,-30px) rotate(var(--pose-pull-start)) scale(.82); filter: blur(3px) saturate(1.12) contrast(1.08) drop-shadow(0 22px 16px rgba(0,0,0,.58)); }
  12% { opacity: 1; filter: blur(0) saturate(1.08) contrast(1.06) drop-shadow(0 22px 16px rgba(0,0,0,.58)); }
  38% { transform: translate3d(-50%,-8px,32px) rotate(var(--pose-pull-over)) scale(1.035); }
  66% { transform: translate3d(-50%,6px,18px) rotate(var(--pose-pull-settle)) scale(.99); }
  100% { opacity: 1; transform: translate3d(-50%,-3px,24px) rotate(0) scale(1); }
}

@keyframes lift-pose-release {
  0% { opacity: 1; transform: translate3d(-50%,-3px,24px) rotate(0) scale(1); }
  62% { opacity: .92; transform: translate3d(-50%,-16px,10px) rotate(var(--pose-release-a)) scale(.94); }
  100% { opacity: 0; transform: translate3d(-50%,-28px,-20px) rotate(var(--pose-release-b)) scale(.84); }
}

@keyframes lift-exit-rig {
  0% { height: 49vh; opacity: 0; }
  15% { height: 42vh; opacity: 1; }
  40% { height: 31vh; opacity: 1; }
  68% { height: 17vh; opacity: 1; }
  100% { height: 0; opacity: 0; }
}

@keyframes lift-exit-actor {
  0% { opacity: 0; transform: translate(-9%,-7%) rotate(var(--pose-exit-start)) scale(.72); }
  15% { opacity: 1; }
  40% { opacity: 1; transform: translate(-9%,-7%) rotate(var(--pose-exit-over)) scale(1.04); }
  68% { opacity: 1; transform: translate(-9%,-7%) rotate(var(--pose-exit-swing)) scale(.93); }
  100% { opacity: 0; transform: translate(-9%,-7%) rotate(var(--pose-exit-start)) scale(.55); }
}

@keyframes lift-web-cast {
  0% { opacity: 0; stroke-dashoffset: 1; }
  11% { opacity: 1; }
  36%,82% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}

@keyframes lift-web-exit {
  0% { opacity: 0; stroke-dashoffset: 1; }
  14% { opacity: 1; }
  40%,67% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: -1; }
}

@keyframes lift-impact-flash {
  0% { opacity: 0; transform: translate(-50%,-50%) scaleX(.04); }
  36% { opacity: .92; transform: translate(-50%,-50%) scaleX(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scaleX(1.22); }
}

@keyframes lift-grain-show {
  0%,100% { opacity: 0; }
  18%,76% { opacity: .15; }
}

@keyframes lift-grain-jitter {
  0% { transform: translate3d(-2%,1%,0); }
  25% { transform: translate3d(2%,-2%,0); }
  50% { transform: translate3d(1%,2%,0); }
  75% { transform: translate3d(-1%,-1%,0); }
  100% { transform: translate3d(2%,1%,0); }
}

@keyframes lift-edge-up {
  0% { top: 100%; opacity: 0; }
  10%,86% { opacity: 1; }
  100% { top: 0; opacity: 0; }
}

@keyframes lift-edge-down {
  0% { top: 0; opacity: 0; }
  12%,84% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@keyframes lift-edge-arrival {
  0% { top: 100%; opacity: 0; }
  12%,84% { opacity: 1; }
  100% { top: 0; opacity: 0; }
}

@keyframes suspended-page-away {
  0% { transform: perspective(1500px) translate3d(0,0,0) rotateX(0) rotateZ(0) scale(1); filter: blur(0) saturate(1); opacity: 1; }
  12% { transform: perspective(1500px) translate3d(0,1.4vh,-8px) rotateX(-1.2deg) rotateZ(0) scale(.998); }
  28% { transform: perspective(1500px) translate3d(var(--lift-nudge-a),-3vh,-28px) rotateX(4deg) rotateZ(var(--lift-tilt-a)) scale(.99); filter: blur(.2px) saturate(.98); }
  42% { transform: perspective(1500px) translate3d(var(--lift-nudge-b),-16vh,-55px) rotateX(7deg) rotateZ(var(--lift-tilt-b)) scale(.975); filter: blur(.6px) saturate(.92); }
  100% { transform: perspective(1500px) translate3d(var(--lift-drift),-118vh,-180px) rotateX(-12deg) rotateZ(var(--lift-tilt-far)) scale(.92); filter: blur(3px) saturate(.68); opacity: .3; }
}

@keyframes suspended-page-land {
  0% { transform: perspective(1500px) translate3d(var(--lift-arrival-start),105vh,-180px) rotateX(-13deg) rotateZ(var(--lift-arrival-tilt)) scale(.91); filter: blur(4px) saturate(.7); opacity: .35; }
  48% { opacity: 1; filter: blur(.5px) saturate(.96); }
  64% { transform: perspective(1500px) translate3d(var(--lift-arrival-a),-4.2vh,20px) rotateX(2.4deg) rotateZ(var(--lift-arrival-tilt-a)) scale(1.018); }
  76% { transform: perspective(1500px) translate3d(var(--lift-arrival-b),1.7vh,-8px) rotateX(-1.1deg) rotateZ(var(--lift-arrival-tilt-b)) scale(.994); }
  88% { transform: perspective(1500px) translate3d(0,-.6vh,4px) rotateX(.35deg) rotateZ(0) scale(1.004); }
  100% { transform: perspective(1500px) translate3d(0,0,0) rotateX(0) rotateZ(0) scale(1); filter: blur(0) saturate(1); opacity: 1; }
}

@keyframes lift-icon-launch {
  0% { opacity: 1; transform: translate3d(0,0,0) rotate(0) scale(1); }
  34% { transform: translate3d(0,4px,0) rotate(2deg) scale(.9); }
  68% { transform: translate3d(0,-3px,0) rotate(-1deg) scale(1.08); }
  100% { opacity: 1; transform: translate3d(0,0,0) rotate(0) scale(1); }
}

@keyframes lift-icon-land {
  0% { opacity: 0; transform: translate3d(0,-62vh,0) rotate(12deg) scale(.62); }
  55% { opacity: 1; transform: translate3d(0,13px,0) rotate(-4deg) scale(1.12); }
  70% { transform: translate3d(0,-8px,0) rotate(2deg) scale(.96); }
  84% { transform: translate3d(0,3px,0) rotate(-1deg) scale(1.025); }
  100% { opacity: 1; transform: translate3d(0,0,0) rotate(0) scale(1); }
}

@media (max-width: 720px) {
  .web-lift-pose { width: min(47vw,235px); }
  .web-lift-pose-rise { width: min(43vw,220px); }
  .web-lift-pose-exit { width: min(50vw,245px); }
  .web-lift-shot { stroke-width: 2; }
  .web-lift-impact { width: 88vw; }
}

@media (prefers-reduced-motion: reduce) {
  .web-lift-transition.is-reduced > :not(.web-lift-backdrop) { display: none !important; }
  .web-lift-transition.is-reduced .web-lift-backdrop {
    inset: 0;
    clip-path: none;
    background: var(--lift-bg);
    animation-duration: 190ms !important;
    animation-delay: 0ms !important;
    animation-timing-function: ease !important;
  }

  .web-lift-transition.is-reduced.is-departing .web-lift-backdrop { animation-name: lift-reduced-in !important; }
  .web-lift-transition.is-reduced.is-arriving .web-lift-backdrop { animation-name: lift-reduced-out !important; animation-duration: 280ms !important; }

  body.web-lift-departing > main,
  body.web-lift-departing > .nav,
  body.web-lift-departing > .site-header,
  body.web-lift-departing > .web-scroll-rail,
  body.web-lift-departing > footer,
  body.web-lift-arriving > main,
  body.web-lift-arriving > .nav,
  body.web-lift-arriving > .site-header,
  body.web-lift-arriving > .web-scroll-rail,
  body.web-lift-arriving > footer,
  .portfolio-portal.portal-icon-launching,
  .portfolio-portal.portal-icon-landing { animation: none !important; }
}

@keyframes lift-reduced-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lift-reduced-out { from { opacity: 1; } to { opacity: 0; } }