.wm{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.w{display:inline-block;transform:translateY(118%) rotate(3deg);opacity:.001;transition:transform 1.15s var(--ease-expo),opacity .8s ease;will-change:transform}
.words-reveal.in .w{transform:translateY(0) rotate(0);opacity:1}
.reveal{opacity:0;filter:blur(6px);transform:translateY(34px) scale(.985);transition:opacity 1.1s ease,filter 1.1s ease,transform 1.2s var(--ease-expo);will-change:opacity,transform}
.reveal.in{opacity:1;filter:blur(0);transform:none}
.label-reveal{opacity:0;letter-spacing:.55em;transition:opacity 1s ease,letter-spacing 1.4s var(--ease-expo)}
.label-reveal.in{opacity:1;letter-spacing:.2em}
.line-reveal{transform:scaleX(0);transform-origin:left center;transition:transform 1.5s var(--ease-expo)}
.line-reveal.in{transform:scaleX(1)}
.glow-line{animation:textGlow 4.5s ease-in-out infinite;text-shadow:0 0 15px rgba(255,255,255,0.2)}
@keyframes textGlow{0%,100%{opacity:0.65}50%{opacity:1}}
.orb{position:absolute;border-radius:9999px;pointer-events:none;will-change:transform}
.orb-1{width:520px;height:520px;background:radial-gradient(circle,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0.01) 40%,transparent 70%);top:-12%;left:6%;animation:drift1 17s ease-in-out infinite alternate}
.orb-2{width:660px;height:660px;background:radial-gradient(circle,rgba(255,255,255,0.025) 0%,rgba(255,255,255,0.005) 40%,transparent 70%);bottom:-24%;right:2%;animation:drift2 22s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(80px,60px) scale(1.1)}}
@keyframes drift2{to{transform:translate(-70px,-50px) scale(1.14)}}
.cta-glow-line{position:relative;overflow:hidden}
.cta-glow-line::before{content:'';position:absolute;top:0;left:0;height:1px;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:glow-sweep 4s ease-in-out infinite}
@keyframes glow-sweep{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
.fade-transition{transition:opacity .35s ease-in-out,transform .35s ease-in-out}
.fade-out{opacity:0;transform:translateY(8px)}
.fade-in{opacity:1;transform:translateY(0)}
.animate-svg-path{transition:d .4s cubic-bezier(.4,0,.2,1)}
.animate-svg-dots{transition:cx .4s cubic-bezier(.4,0,.2,1),cy .4s cubic-bezier(.4,0,.2,1)}
.prod-section .prod-frame{opacity:0;transform:scale(.96);filter:blur(10px);transition:opacity .9s ease,transform 1s var(--ease-expo),filter .9s ease}
.prod-section.prod-in .prod-frame{opacity:1;transform:none;filter:blur(0)}
.prod-section .prod-anim{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity .8s ease,transform .9s var(--ease-expo),filter .8s ease;transition-delay:var(--d,0ms)}
.prod-section.prod-in .prod-anim{opacity:1;transform:none;filter:blur(0)}
.prod-section .prod-line{display:block;overflow:hidden;padding-bottom:.12em}
.prod-section .prod-line>span{display:block;transform:translateY(115%);transition:transform 1s var(--ease-expo);transition-delay:var(--d,0ms)}
.prod-section.prod-in .prod-line>span{transform:translateY(0)}
.prod-section .prod-row{opacity:0;filter:blur(6px);transition-property:opacity,filter,transform,background-color;transition-duration:.7s,.7s,.35s,.3s;transition-timing-function:ease,ease,var(--ease-expo),ease;transition-delay:var(--d,0ms),var(--d,0ms),0ms,0ms}
.prod-section.prod-in .prod-row{opacity:1;filter:blur(0)}
@media (prefers-reduced-motion:reduce){
  .reveal,.w,.line-reveal,.label-reveal{transition:none!important;opacity:1!important;filter:none!important;transform:none!important}
  .glow-line,.orb,.cta-glow-line::before{animation:none!important}
  .prod-section .prod-frame,.prod-section .prod-anim,.prod-section .prod-line>span,.prod-section .prod-row{opacity:1!important;transform:none!important;filter:none!important}
}

.bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  animation: hero-bg-cycle 15s infinite;
  will-change: transform, opacity;
  pointer-events: none;
  user-select: none;
}
.bg-layer-1 { animation-delay: 0s; }
.bg-layer-2 { animation-delay: 5s; }
.bg-layer-3 { animation-delay: 10s; }

.morph-container {
  position: relative;
  filter: url(#threshold);
  user-select: none;
}

.content-layer {
  opacity: 0;
  pointer-events: none;
  animation: hero-bg-cycle 15s infinite;
  will-change: opacity;
}

.morph-text {
  animation: hero-content-morph 15s infinite ease-in-out;
  transform-origin: right center;
  will-change: opacity, filter, transform;
  opacity: 0;
}

.slide-up-element {
  animation: slide-fade-up 15s infinite ease-in-out;
  will-change: transform, opacity;
  opacity: 0;
}

.morph-text-weak {
  animation: hero-content-morph-weak 15s infinite ease-in-out;
  will-change: opacity, filter, transform;
  opacity: 0;
}

@keyframes hero-content-morph-weak {
  0% { opacity: 0; filter: blur(6px); transform: scale(0.98); pointer-events: none; }
  2% { opacity: 0.6; filter: blur(3px); pointer-events: auto; }
  7.5%, 33.33% { opacity: 1; filter: blur(0px); transform: scale(1); pointer-events: auto; }
  35.5% { opacity: 0.6; filter: blur(3px); pointer-events: none; }
  40.83%, 100% { opacity: 0; filter: blur(6px); transform: scale(1.02); pointer-events: none; }
}

.content-layer-1, .content-layer-1 .morph-text, .content-layer-1 .morph-text-weak, .content-layer-1 .slide-up-element { animation-delay: 0s; }
.content-layer-2, .content-layer-2 .morph-text, .content-layer-2 .morph-text-weak, .content-layer-2 .slide-up-element { animation-delay: 5s; }
.content-layer-3, .content-layer-3 .morph-text, .content-layer-3 .morph-text-weak, .content-layer-3 .slide-up-element { animation-delay: 10s; }

@keyframes hero-bg-cycle {
  0% { opacity: 0; pointer-events: none; }
  10% { opacity: 1; pointer-events: auto; }
  33.33% { opacity: 1; pointer-events: auto; }
  43.33% { opacity: 0; pointer-events: none; }
  100% { opacity: 0; pointer-events: none; }
}

@keyframes slide-fade-up {
  0%, 1.5% { opacity: 0; transform: translateY(20px); }
  7.5%, 33.33% { opacity: 1; transform: translateY(0); }
  40.83%, 100% { opacity: 0; transform: translateY(-10px); }
}

.scroll-blur {
  animation: scroll-fade-in linear both;
  animation-timeline: view();
  animation-range: entry 10% cover 30%;
}

@keyframes scroll-fade-in {
  from {
    opacity: 0;
    transform: translateY(100px) scale(0.9) perspective(1000px) rotateX(5deg);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) perspective(1000px) rotateX(0);
    filter: blur(0);
  }
}

@keyframes hero-content-morph {
  0% { opacity: 0; filter: blur(20px); transform: scale(0.95); pointer-events: none; }
  2% { opacity: 0.5; filter: blur(10px); pointer-events: auto; }
  7.5%, 33.33% { opacity: 1; filter: blur(0px); transform: scale(1); pointer-events: auto; }
  35.5% { opacity: 0.5; filter: blur(10px); pointer-events: none; }
  40.83%, 100% { opacity: 0; filter: blur(20px); transform: scale(1.05); pointer-events: none; }
}