/* Scroll Animation 64: original geometry and 1000px branch, scoped to this root.
   Brand substitutions: local Satoshi and Faten's pink / purple palette.
   Each source-media wrapper owns ONE original image-scale transform. */
.component64{font-family:Satoshi,sans-serif;background:#21112c;color:#fff1f7;position:relative}
.component64 :where(.logo,.hero,.hero-inner,.hero-spotlight-gallery,.hero-spotlight-col,.hero-spotlight-item,.source-media,.hero-header,.hero-footer,.hero-overlay,.studio,.connect){margin:0;padding:0;box-sizing:border-box}
.component64 .hero,.component64 .studio,.component64 .connect{position:relative;width:100%;height:100svh;min-height:0;max-height:none;overflow:hidden}
.component64 .studio,.component64 .connect{display:flex;justify-content:center;align-items:center;text-align:center;color:#fff1f7}
.component64 .hero{background-color:#21112c}
.component64 .studio{background-color:#43215d;margin-top:300svh}
.component64 .connect{background-color:#21112c}
.component64 .studio h1,.component64 .connect h1,.component64 .hero-header .source-headline,.component64 .hero-header h3,.component64 .hero-header h2,.component64 .hero-footer h5{margin:0;padding:0;font-family:Satoshi,sans-serif;font-weight:500;line-height:1.25;letter-spacing:-.04em}
.component64 .studio h1,.component64 .connect h1{font-size:clamp(2rem,4vw,6rem)}
.component64 .hero-header .source-headline,.component64 .hero-header h3,.component64 .hero-header h2{font-size:clamp(1.5rem,2.5vw,3.5rem)}
.component64 .hero-footer h5{font-size:clamp(1.25rem,2vw,2.75rem)}
.component64 .hero-header a.btn{text-decoration:none;color:#21112c;background-color:#d9468f;padding:1rem 2rem;border-radius:.25rem;font-weight:500;width:max-content;will-change:opacity;opacity:0;min-height:48px}
.component64 .hero-header a.btn:focus-visible{outline:2px solid #fff1f7;outline-offset:5px}
.component64 .hero-spotlight-gallery{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1);width:calc(300% + 2rem);height:calc(300svh + 2rem);display:flex;gap:1rem;will-change:transform}
.component64 .hero-spotlight-col{flex:1;display:flex;flex-direction:column;height:calc(300svh + 2rem);gap:1rem}
.component64 .hero-spotlight-col .hero-spotlight-item{position:relative;flex:1;overflow:hidden}
.component64 .hero-spotlight-item>.source-media{position:relative;width:100%;height:100%;transform:scale(1.25);will-change:transform}
.component64 .hero-spotlight-item>.source-media>img{display:block;position:relative;width:100%;height:100%;object-fit:cover}
.component64 .logo{position:fixed;bottom:2rem;left:2rem;width:6rem;display:flex;justify-content:center;align-items:center;transform:translateY(0px) scale(6);transform-origin:bottom left;will-change:transform;z-index:10}
.component64 .logo>img,.component64 .logo>svg{display:block;width:100%;height:auto;object-fit:contain}
.component64 .hero-inner{position:relative;width:100%;height:100%;will-change:transform}
.component64 .hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0;will-change:opacity;pointer-events:none}
.component64 .hero-header{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:45%;display:flex;flex-direction:column;justify-content:normal;align-items:center;gap:2rem;color:#fff1f7}
.component64 .hero-footer{position:absolute;bottom:2rem;right:2rem;width:200px;color:#fff1f7;will-change:transform,filter}
@media(max-width:1000px){
  .component64 .logo{transform:translateY(0px) scale(2)}
  .component64 .hero-header{width:100%;padding:2rem}
  .component64 .hero-footer{width:200px;right:unset;left:50%;bottom:20svh;text-align:center;transform:translateX(-50%)}
}
/* Static normal-flow fallback retains all nine images, copy, Studio and Connect. */
.component64[data-reduced-motion="true"] .logo{position:relative;bottom:auto;left:auto;transform:none;width:6rem;margin:2rem;will-change:auto}
.component64[data-reduced-motion="true"] .hero{height:auto;min-height:100svh;overflow:visible}
.component64[data-reduced-motion="true"] .hero-inner{height:auto;transform:none!important;display:flex;flex-direction:column;will-change:auto}
.component64[data-reduced-motion="true"] .hero-header{position:relative;top:auto;left:auto;transform:none;order:0;width:100%;padding:2rem;opacity:1}
.component64[data-reduced-motion="true"] .hero-header .word,.component64[data-reduced-motion="true"] .hero-header .btn{opacity:1!important}
.component64[data-reduced-motion="true"] .hero-spotlight-gallery{position:relative;top:auto;left:auto;transform:none!important;order:1;width:100%;height:auto;padding:1rem;will-change:auto}
.component64[data-reduced-motion="true"] .hero-spotlight-col{height:auto}
.component64[data-reduced-motion="true"] .hero-spotlight-item{aspect-ratio:3/4;flex:auto}
.component64[data-reduced-motion="true"] .hero-spotlight-item>.source-media{transform:none!important;will-change:auto}
.component64[data-reduced-motion="true"] .hero-footer{position:relative;left:auto;right:auto;bottom:auto;width:100%;order:2;padding:2rem;transform:none!important;filter:none!important;opacity:1!important;text-align:center;will-change:auto}
.component64[data-reduced-motion="true"] .hero-overlay{display:none}
.component64[data-reduced-motion="true"] .studio{margin-top:0}
.component64[data-reduced-motion="true"] .studio,.component64[data-reduced-motion="true"] .connect{height:auto;min-height:100svh;padding:2rem;overflow:visible}
@media(prefers-reduced-motion:reduce){
  .component64 .logo{position:relative;bottom:auto;left:auto;transform:none!important;width:6rem;margin:2rem;will-change:auto}
  .component64 .hero{height:auto;min-height:100svh;overflow:visible}
  .component64 .hero-inner{height:auto;transform:none!important;display:flex;flex-direction:column;will-change:auto}
  .component64 .hero-header{position:relative;top:auto;left:auto;transform:none!important;order:0;width:100%;padding:2rem;opacity:1}
  .component64 .hero-header .word,.component64 .hero-header .btn{opacity:1!important}
  .component64 .hero-spotlight-gallery{position:relative;top:auto;left:auto;transform:none!important;order:1;width:100%;height:auto;padding:1rem;will-change:auto}
  .component64 .hero-spotlight-col{height:auto}
  .component64 .hero-spotlight-item{aspect-ratio:3/4;flex:auto}
  .component64 .hero-spotlight-item>.source-media{transform:none!important;will-change:auto}
  .component64 .hero-footer{position:relative;left:auto;right:auto;bottom:auto;width:100%;order:2;padding:2rem;transform:none!important;filter:none!important;opacity:1!important;text-align:center;will-change:auto}
  .component64 .hero-overlay{display:none}
  .component64 .studio{margin-top:0}
  .component64 .studio,.component64 .connect{height:auto;min-height:100svh;padding:2rem;overflow:visible}
}