@font-face{font-family:AVATR;src:url(../assets/fonts/AVATR-Light-sub.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:AVATR;src:url(../assets/fonts/AVATR-Regular-sub.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:AVATR;src:url(../assets/fonts/AVATR-Bold-sub.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

*{box-sizing:border-box}
html,body,#root,button,input,textarea,select{font-family:AVATR,Helvetica Neue,Helvetica,Arial,sans-serif}
html,body{margin:0;padding:0;width:100%;background:#000;overflow-x:hidden;-webkit-text-size-adjust:100%}
#root{width:100%;overflow-x:clip}
img,video,canvas{max-width:100%}

/* "Scroll" hint fades out as soon as the user starts scrolling */
.scroll-hint{transition:opacity .5s ease}
html.page-scrolled .scroll-hint{opacity:0;pointer-events:none}

/* animated dot grids */
.intro-grey-dots{
  background-image:radial-gradient(circle,rgba(255,255,255,0.13) 1.1px,transparent 1.7px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,transparent 40%,#000 85%);
  mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,transparent 40%,#000 85%);
  animation:introDotsDrift 7s linear infinite;
}
@keyframes introDotsDrift{from{background-position:0 0}to{background-position:26px 52px}}
.loc-edge-dots{
  background-image:radial-gradient(circle,rgba(255,255,255,0.11) 1.1px,transparent 1.7px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,transparent 44%,#000 86%);
  mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,transparent 44%,#000 86%);
  animation:locDotsDrift 7s linear infinite;
}
@keyframes locDotsDrift{from{background-position:0 0}to{background-position:26px 52px}}
.cta-dots{
  background-image:radial-gradient(circle,rgba(255,255,255,0.11) 1.1px,transparent 1.7px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,transparent 40%,#000 85%);
  mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,transparent 40%,#000 85%);
  animation:ctaDotsDrift 7s linear infinite;
}
@keyframes ctaDotsDrift{from{background-position:0 0}to{background-position:26px 52px}}
.hub2-dots{
  background-image:radial-gradient(circle,rgba(255,255,255,0.13) 1.1px,transparent 1.7px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 30%,#000 46%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,transparent 30%,#000 46%,#000 100%);
  animation:hub2DotsDrift 7s linear infinite;
}
@keyframes hub2DotsDrift{from{background-position:0 0}to{background-position:26px 52px}}

/* small animated bits */
.bounce-arrow{display:inline-block;animation:bounceArrow 1.6s ease-in-out infinite}
@keyframes bounceArrow{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.mz-char{display:inline-block;white-space:pre;opacity:0;filter:blur(10px);animation:mzChar .3s ease-in-out forwards}
@keyframes mzChar{from{opacity:0;filter:blur(10px)}to{opacity:1;filter:blur(0)}}

/* hover states */
.brand-cta{transition:transform .45s cubic-bezier(0.34,1.56,0.64,1),text-shadow .45s ease}
.hub-logo{transition:transform .45s cubic-bezier(0.34,1.56,0.64,1)}
.hub-logo img{opacity:.82;transition:opacity .45s ease,filter .45s ease}
.hub-logo:hover{transform:translateY(-3px) scale(1.08)}
.hub-logo:hover img{opacity:1;filter:drop-shadow(0 4px 14px rgba(0,0,0,0.5))}
.pill-link{transition:background .25s,color .25s}
.glass-btn{transition:transform .5s cubic-bezier(0.34,1.56,0.64,1),box-shadow .5s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 12px 30px rgba(0,0,0,0.34)}
.glass-btn:hover{transform:translateY(-4px) scale(1.04)}
.glass-btn .gb-tint{background:rgba(255,255,255,0.04);transition:background .5s cubic-bezier(0.34,1.56,0.64,1)}
.glass-btn:hover .gb-tint{background:rgba(255,255,255,0.08)}
.glass-btn .gb-shine{left:-45%;transition:left .85s ease}
.glass-btn:hover .gb-shine{left:115%}
.glass-btn:hover{box-shadow:0 20px 44px rgba(0,0,0,0.4),0 0 34px var(--acc33,rgba(125,132,142,0.2))}

/* ======================================================================
   Pages, routing and animation are done in CSS (no router / no animation JS)
   ====================================================================== */
:root{--e:cubic-bezier(0.22,1,0.36,1)}

/* routing: the section whose id matches the URL hash is shown (#/home is the default) */
.view{display:none}
.view:target,
#root:not(:has(.view:target)) > [data-home]{display:block}
.page{position:relative;background:linear-gradient(180deg,#000e2e 0%,#000a1e 40%,#00060f 72%,#000000 100%)}

/* reveal on scroll (class "in" is toggled by a tiny IntersectionObserver in app.js) */
.rv{opacity:0;transform:translateY(var(--y,40px));transition:opacity var(--dur,.6s) var(--e) var(--d,0s),transform var(--dur,.6s) var(--e) var(--d,0s)}
.rv.in{opacity:1;transform:none}

/* brand switcher */
.sw-m{display:none}
@media (max-width:767px){.sw-d{display:none}.sw-m{display:block}}
.sw-d .pill-link{padding:16px 7px;font-size:13px;text-transform:uppercase;writing-mode:vertical-rl}
.sw-m .pill-link{padding:8px 12px;font-size:12.5px;text-transform:uppercase;white-space:nowrap}

/* text that reveals character by character */
.char{display:inline-block;opacity:0}
.view:target .char,
#root:not(:has(.view:target)) > [data-home] .char{animation:charIn .3s cubic-bezier(0.215,0.61,0.355,1) calc(var(--base,0s) + var(--d,0s) + var(--n) * .015s) both}
@keyframes charIn{from{opacity:0;transform:translateY(10px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}

/* brand hero: headline leaves at 1.8s, description arrives, scroll hint disappears at 3.6s */
.view:target .hero-pre{animation:preOut .6s var(--e) 1.8s forwards}
@keyframes preOut{to{opacity:0;transform:translateX(-70px);filter:blur(6px)}}
.hero-hint{bottom:78px;opacity:1}
.view:target .hero-hint{animation:hintOut .4s ease 3.6s forwards}
@keyframes hintOut{to{opacity:0}}
.desc-wrap{display:flex;justify-content:flex-start;padding:0 clamp(48px,8vw,140px)}
.desc-wrap .cl{--base:1.8s}
.desc-inner{max-width:min(620px,52vw);text-align:left}

/* models gallery */
.bw{padding:12vh 0 6vh}
.bw-head{margin-bottom:14px}
.ez-pad{padding:48px 32px 34px}
.ez-stage{height:270px}
.ez-soon{margin-top:18px}
.ez-soon span{font-size:clamp(1.6rem,3vw,2.4rem)}
.ez-meta{margin-top:34px;flex-direction:row}
.ez-info{align-items:flex-start;text-align:left}
.fadein{animation:fadeIn .3s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}

/* visit us + globe */
.loc{align-items:center}
.loc-inner{padding:12vh clamp(24px,7vw,110px)}
.loc-globe{width:min(44vw,460px)}
.loc .te{display:inline-block;white-space:pre;opacity:0;transform:translateY(20px);transition:opacity .3s ease-in-out calc(var(--r)*.05s),transform .5s var(--e) calc(var(--r)*.05s)}
.loc.in .te{opacity:1;transform:none;transition-delay:calc(var(--i)*.05s)}
.loc-body{opacity:0;transform:translateY(16px);transition:opacity .6s ease-in-out .3s,transform .6s ease-in-out .3s}
.loc.in .loc-body{opacity:1;transform:none}
.globe-box{container-type:inline-size}
.lab{position:absolute;left:0;top:0;opacity:0;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap;padding:8px 13px;border-radius:11px;
  background:linear-gradient(135deg,rgba(255,255,255,0.62),rgba(255,255,255,0.28));backdrop-filter:blur(11px) saturate(160%);-webkit-backdrop-filter:blur(11px) saturate(160%);
  border:1px solid rgba(255,255,255,0.7);box-shadow:0 10px 28px rgba(20,30,60,0.16),inset 0 1px 0 rgba(255,255,255,0.85);will-change:left,top,opacity,transform}
.lab .row{display:flex;align-items:center;gap:7px}
.lab .dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:var(--acc);box-shadow:0 0 8px var(--acc)}
.lab .nm{font-size:12.5px;font-weight:700;color:#141c2e;letter-spacing:.01em}
.lab .ad{margin-top:2px;font-size:10.5px;color:rgba(20,28,46,0.62);padding-left:15px}
@container (max-width:399px){.lab{padding:5px 9px}.lab .nm{font-size:10.5px}.lab .ad{display:none}}

/* CTA */
.cta-sec{padding:16vh 6vw}
.brand-cta{font-size:clamp(1.9rem,3.2vw,2.8rem);text-shadow:0 2px 8px rgba(0,0,0,0.45)}
.brand-cta:hover{transform:translateY(-3px) scale(1.04);text-shadow:0 0 30px #8B929C88,0 2px 8px rgba(0,0,0,0.5)}

/* intro (the whole screen is a link to the brand page) */
.intro{position:fixed;inset:0;overflow:hidden;cursor:pointer;color:inherit;text-decoration:none;background:#000e2e}
.intro:target{animation:introIn .5s var(--e) both}
@keyframes introIn{from{opacity:0}to{opacity:1}}
.intro:target .i-a1{animation:a1 .6s var(--e) both}
.intro:target .i-a2{animation:a2 1s var(--e) .2s both}
.intro:target .i-a3{animation:a3 .7s var(--e) .9s both}
.intro:target .i-a4{animation:a4 .7s var(--e) 1.5s both}
.intro:target .i-bar{animation:bar 6.5s linear both}
@keyframes a1{from{opacity:0;transform:translateY(12px)}}
@keyframes a2{from{opacity:0;transform:scale(1.28);filter:blur(16px)}}
@keyframes a3{from{opacity:0;transform:translateY(16px)}}
@keyframes a4{from{opacity:0;transform:translateY(18px)}}
@keyframes bar{from{width:0}to{width:100%}}

/* hub */
.hub-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hub-video-m{display:none}
.hub-h1{font-size:clamp(2.6rem,8vw,5.8rem)}
.hub-inner{gap:56px}
.hub-logos{flex-direction:row;gap:clamp(40px,6vw,88px)}
.hub-logo{padding:12px 20px}
.hub-logo img{height:100px;width:100px}

@media (max-width:767px){
  .hero-hint{bottom:92px}
  .desc-wrap{justify-content:center;padding:0 8vw}
  .desc-inner{max-width:100%;text-align:center}
  .bw{padding:10vh 0 4vh}
  .bw-head{margin-bottom:8px}
  .ez-bg{display:none}
  .ez-pad{padding:34px 12px 26px}
  .ez-stage{height:206px}
  .ez-soon{margin-top:12px}
  .ez-soon span{font-size:clamp(1.4rem,6vw,2.1rem)}
  .ez-meta{margin-top:22px;flex-direction:column}
  .ez-info{align-items:center;text-align:center}
  .loc{align-items:flex-start}
  .loc-inner{padding:15vh clamp(24px,7vw,110px) 8vh}
  .loc-globe{width:min(84vw,380px)}
  .cta-sec{padding:14vh 6vw}
  .brand-cta{font-size:clamp(1.35rem,6.4vw,1.9rem)}
  .hub-video-d{display:none}
  .hub-video-m{display:block}
  .hub-h1{font-size:clamp(1.5rem,6vw,1.85rem)}
  .hub-inner{gap:40px}
  .hub-logos{flex-direction:column;gap:40px}
  .hub-logo{padding:8px 14px}
  .hub-logo img{height:80px;width:80px}
}