/* Espad — BEAUTY, BORN FROM SCIENCE
   Built from the Figma frames "Espad Landing · Desktop" (1440) and "Espad Landing · Mobile" (402).
   Every value here comes from FIGMA-SPEC.md; the two frames are the two anchor points and the
   layout holds its exact numbers at each of them.
   The page is RTL: horizontal rows are written in reading order (first child renders at the right),
   except the repeating card rows, which keep the data order and flow left to right as the design does. */

/* ---------- tokens ---------- */
:root{
  /* colours, named exactly as the Figma variables */
  --bg:#F7F9FA;
  --surface:#FFFFFF;
  --ink:#102A36;
  --muted:#5B6B72;
  --line:#E1E8EB;
  --brand:#09618A;
  --navy:#0B2342;
  --cyan:#3FE0E8;
  --on-dark:#EEF4F6;

  /* gradients */
  --g-capsule:linear-gradient(135deg,#2363B4,#1FA9C9,#3FE0E8);
  --g-footer:linear-gradient(165deg,#1A4F77,#0B2342);
  --g-shade:linear-gradient(to top,rgba(5,18,32,.82) 0%,rgba(5,18,32,0) 45%);
  --g-overlay:linear-gradient(to top,rgba(4,14,26,.82) 0%,rgba(4,14,26,.35) 45%,rgba(4,14,26,.45) 100%);

  /* type */
  --f-fa:"Vazirmatn","Vazir","Segoe UI",Tahoma,system-ui,sans-serif;
  --f-en:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;

  /* layout */
  --wrap:1240px;
  --gutter:100px;
  --section-y:120px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-fa);font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:clip;-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,p,dl,dd,ul{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
.en{font-family:var(--f-en);font-weight:400;font-optical-sizing:auto}
/* both logos sit on dark: capsule mark in cyan, wordmark in the on-dark ink */
.lg-m{fill:var(--cyan)}
.lg-t{fill:var(--on-dark)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.wrap{width:min(var(--wrap),100% - var(--gutter) * 2);margin-inline:auto}

/* ---------- shared pieces ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;padding:14px 26px;border:0;cursor:pointer;
  font-family:var(--f-fa);font-weight:500;font-size:14px;line-height:1;white-space:nowrap;
  transition:transform .25s var(--ease),background .25s,color .25s}
.btn:hover{transform:translateY(-2px)}
.btn-light{background:var(--on-dark);color:var(--navy)}
.btn-outline{background:transparent;color:var(--on-dark);border:1px solid var(--on-dark);padding:13px 25px}
.btn-outline:hover{background:var(--on-dark);color:var(--navy)}
.btn-primary{background:var(--navy);color:var(--on-dark)}

.divider{height:1px;background:var(--line);border:0;margin:0}

/* the capsule motif from the packaging: 16×6 at 52°, brand blue */
.capsule{display:inline-block;width:16px;height:6px;border-radius:3px;
  background:var(--brand);transform:rotate(52deg);flex:0 0 auto}

/* section head: count at the far left, title and section number at the right */
.s-head{display:flex;align-items:flex-end;gap:24px;padding-bottom:52px}
.s-head .s-num{font-family:var(--f-en);font-size:34px;line-height:1;letter-spacing:0;
  color:var(--brand);text-align:right;flex:0 0 auto}
.s-head .s-title{display:flex;flex-direction:column;gap:6px;flex:0 0 auto;max-width:372px}
.s-head h2{font-weight:600;font-size:36px;line-height:1.4;text-align:right}
.s-head .s-sub{font-weight:300;font-size:15px;line-height:1;color:var(--muted);text-align:right}
.s-head .s-count{font-weight:400;font-size:13px;line-height:1;color:var(--muted);
  margin-inline-start:auto;text-align:right}

/* ---------- 01 · Hero ---------- */
.hero{position:relative;height:860px;overflow:hidden;background:var(--navy);color:var(--on-dark);isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;z-index:1;background:var(--g-overlay);pointer-events:none}
.hero > .wrap{position:relative;z-index:2;height:100%}

.hero-header{position:absolute;inset-block-start:0;inset-inline:0;height:84px;
  display:flex;align-items:center;gap:32px}
.hero-header .logo{width:116px;height:42px;flex:0 0 auto}
.hero-header .logo svg{width:100%;height:100%}
.nav{display:flex;gap:28px;margin-inline-start:auto}
.nav a{font-weight:400;font-size:14px;line-height:1;color:var(--on-dark);opacity:.9;transition:opacity .2s}
.nav a:hover{opacity:1}

.hero-tag{position:absolute;inset-block-start:120px;right:0;
  display:inline-flex;align-items:center;border-radius:99px;padding:4px 12px;background:var(--navy);
  font-weight:500;font-size:11px;line-height:1.5;color:var(--on-dark)}

.slogan{position:absolute;inset-block-start:320px;left:0;
  direction:ltr;text-align:left;font-family:var(--f-en);font-size:124px;line-height:.95}
.slogan span{display:block}
.slogan .l1,.slogan .l2{letter-spacing:.01em;color:var(--on-dark)}
.slogan .l3{font-style:italic;letter-spacing:0;color:var(--cyan)}

.hero-sub{position:absolute;inset-block-start:742px;right:0;
  display:flex;align-items:center;gap:16px}
.hero-sub span{font-weight:400;font-size:15px;line-height:1;color:var(--on-dark)}
.hero-sub i{display:block;width:56px;height:1px;background:var(--on-dark)}

.hero-actions{position:absolute;inset-block-start:722px;left:0;
  display:flex;gap:10px}

/* ---------- 02 · About ---------- */
.about{padding-block:var(--section-y)}
.about-grid{display:flex;gap:104px;align-items:flex-start}
.about-lead{flex:0 0 456px;display:flex;flex-direction:column;gap:18px}
.about-lead .eyebrow{font-weight:500;font-size:12px;line-height:1.6;letter-spacing:.12em;color:var(--muted)}
.about-lead h2{font-weight:600;font-size:46px;line-height:1.35}
.about-lead .en{font-size:26px;line-height:1;letter-spacing:.06em;color:var(--brand);direction:ltr;text-align:right}
.about-text{flex:1 1 680px;display:flex;flex-direction:column;gap:22px;min-width:0}
.about-text p{font-size:17px;line-height:2.1}
.about-text p.lead{font-weight:400;color:var(--ink)}
.about-text p.soft{font-weight:300;color:var(--muted)}
.pillars{display:flex;gap:20px;border-top:1px solid var(--line);padding-top:20px}
.pillar{flex:1 1 0;display:flex;flex-direction:column;gap:4px;min-width:0}
.pillar h3{display:flex;align-items:center;gap:10px;font-weight:600;font-size:20px;line-height:1.55}
.pillar p{font-weight:400;font-size:13px;line-height:1.8;color:var(--muted)}

/* ---------- 03 · Products ---------- */
.products{padding-block:var(--section-y)}
/* the design lays the cards out left to right, so the row keeps the data order */
.p-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;direction:ltr}
.card{direction:rtl;display:flex;flex-direction:column;background:transparent}
.card-media{position:relative;aspect-ratio:228.8 / 299;border-radius:112px 112px 0 0;overflow:hidden;background:var(--line)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.card:hover .card-media img{transform:scale(1.05)}
.card-accent{height:4px;background:var(--a,var(--brand))}
.card-body{display:flex;flex-direction:column;gap:2px;padding-top:14px;text-align:right}
.card-name{font-family:var(--f-en);font-size:21px;line-height:1.5;letter-spacing:.08em;color:var(--ink);direction:ltr;text-align:right}
.card-kicker{font-weight:400;font-size:13px;line-height:1.55;color:var(--muted)}
.card-link{font-weight:500;font-size:12px;line-height:1.55;color:var(--brand)}
.card:hover .card-link{text-decoration:underline;text-underline-offset:3px}

.catalog{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:56px;
  padding:24px 28px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}
.catalog-text{display:flex;flex-direction:column;gap:2px;text-align:right}
.catalog-text b{font-weight:600;font-size:17px;line-height:1.6}
.catalog-text span{font-weight:400;font-size:15px;line-height:1.5;color:var(--muted)}

/* ---------- 04 · Videos ---------- */
.videos{padding-block:var(--section-y)}
.v-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;direction:ltr}
.vcard{direction:rtl;position:relative;aspect-ratio:229 / 407;border-radius:20px;overflow:hidden;
  background:var(--navy);color:var(--on-dark);display:block;isolation:isolate}
.vcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.vcard:hover img{transform:scale(1.05)}
.vcard .shade{position:absolute;inset:0;background:var(--g-shade)}
.vcard .chip{position:absolute;inset-block-start:14px;right:14px;
  display:inline-flex;align-items:center;border-radius:99px;padding:4px 12px;background:var(--navy);
  font-weight:500;font-size:11px;line-height:1.5}
.vcard .label{position:absolute;inset-block-end:0;inset-inline:16.5px;padding-bottom:22px;
  display:flex;flex-direction:column;gap:2px;text-align:right}
.vcard .v-name{font-family:var(--f-en);font-size:19px;line-height:1.5;letter-spacing:.08em;direction:ltr;text-align:right}
.vcard .v-tag{font-weight:400;font-size:11px;line-height:1.55}

/* ---------- 05 · Footer ---------- */
.footer{background:var(--g-footer);color:var(--on-dark);position:relative;overflow:hidden;isolation:isolate;
  padding-block:0 0}
.footer .wrap{position:relative;z-index:1;padding-block:72px 32px}
.ig-top{display:flex;justify-content:space-between;align-items:flex-start;gap:48px}
.ig-text{display:flex;flex-direction:column;gap:8px;max-width:583px;text-align:right}
.ig-text .eyebrow{font-weight:500;font-size:12px;line-height:1.6;letter-spacing:.12em}
.ig-text h2{font-weight:600;font-size:46px;line-height:1.35}
.ig-text .handle{font-family:var(--f-en);font-size:30px;line-height:1.5;color:var(--cyan);direction:ltr;text-align:right}
.ig-text p{font-weight:300;font-size:16px;line-height:1.9;max-width:560px}
.ig-posts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding-top:56px;direction:ltr}
.ig-posts img{aspect-ratio:1;object-fit:cover;border-radius:14px;width:100%}
.bottom{display:flex;justify-content:space-between;align-items:center;gap:32px;
  margin-top:72px;padding-top:28px;border-top:1px solid var(--on-dark)}
.bottom .logo{width:116px;height:42px;flex:0 0 auto}
.bottom .logo svg{width:100%;height:100%}
.bottom .claim{font-family:var(--f-en);font-size:13px;line-height:1.5;letter-spacing:.1em;
  direction:ltr;text-align:right}
.bottom .copy{font-family:var(--f-en);font-size:13px;line-height:1.5;direction:ltr}

/* seven drifting capsules behind the footer */
.cap-pattern{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cap-pattern i{position:absolute;width:130px;height:32px;border-radius:16px;
  background:var(--g-capsule);opacity:.45;transform:rotate(52deg)}

/* ---------- product panel ---------- */
.pv{--a:var(--brand);padding:0;border:0;margin:auto;background:transparent;overflow:visible;
  width:min(1100px,calc(100vw - 48px));height:min(760px,calc(100dvh - 48px));max-width:none;max-height:none}
.pv::backdrop{background:rgba(6,20,32,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pv-panel{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  background:var(--bg);border-radius:24px;overflow:hidden;box-shadow:0 40px 100px -30px rgba(0,0,0,.55)}
.pv[open] .pv-panel{animation:pvIn .5s var(--ease)}
@keyframes pvIn{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
.pv-media{position:relative;background:var(--navy);display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0}
.pv-stage{position:relative;min-height:0;overflow:hidden}
.pv-stage img,.pv-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pv-thumbs{display:flex;gap:10px;padding:14px 18px 18px;overflow-x:auto;scrollbar-width:none}
.pv-thumbs::-webkit-scrollbar{display:none}
.pv-thumbs button{all:unset;cursor:pointer;flex:0 0 56px;height:72px;border-radius:28px 28px 8px 8px;
  overflow:hidden;opacity:.5;transition:opacity .3s,box-shadow .3s}
.pv-thumbs button img{width:100%;height:100%;object-fit:cover}
.pv-thumbs button[aria-pressed="true"]{opacity:1;box-shadow:0 0 0 2px var(--a)}
.pv-close{position:absolute;z-index:6;inset-block-start:16px;left:16px;
  min-height:40px;padding:0 18px;border-radius:99px;border:1px solid rgba(238,244,246,.3);
  background:rgba(5,18,32,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--on-dark);font-size:13px;font-weight:500;cursor:pointer}
.pv-info{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:40px;
  display:grid;align-content:start;gap:16px;text-align:right}
.pv-kicker{display:flex;gap:14px;font-size:12px;letter-spacing:.06em;color:var(--muted)}
.pv-kicker .idx{color:var(--brand);font-weight:500;font-variant-numeric:tabular-nums}
.pv-name{font-family:var(--f-en);font-size:44px;line-height:1.05;letter-spacing:.08em;direction:ltr;text-align:right}
.pv-fa{font-weight:500;font-size:15px;color:var(--brand);margin-top:-8px}
.pv-tag{font-weight:500;font-size:18px}
.pv-desc{font-weight:300;font-size:15px;line-height:2;color:var(--muted)}
.pv-hcp{font-size:12.5px;line-height:1.8;color:var(--warn);padding:12px 16px;border-radius:14px;
  background:color-mix(in srgb,var(--warn) 9%,transparent)}
#pv-sections{display:grid;gap:26px}
.pv-sec{display:grid;gap:10px}
.pv-h{font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--muted)}
.pv-sec .dl{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:0 20px;
  border-top:1px solid var(--line);font-size:14px}
.pv-sec .dl dt,.pv-sec .dl dd{padding-block:11px;border-bottom:1px solid var(--line)}
.pv-sec .dl dt{font-size:12.5px;font-weight:500;line-height:1.75}
.pv-sec .dl dd{font-weight:300;line-height:1.85;color:var(--muted)}
.pv-lead{font-weight:300;font-size:14px;color:var(--muted)}
.pv-list{display:grid;gap:9px;font-weight:300;font-size:14px;line-height:1.85;color:var(--muted)}
.pv-list li{position:relative;padding-inline-start:18px}
.pv-list li::before{content:"";position:absolute;inset-inline-start:0;top:.78em;
  width:6px;height:6px;border-radius:50%;background:var(--a)}
.pv-note{font-weight:300;font-size:12.5px;line-height:1.85;color:var(--muted);
  padding-inline-start:14px;border-inline-start:2px solid var(--line)}
.pv-sec.warn .pv-h,.pv-hcp{color:var(--warn)}
.pv-sec.warn .pv-list li::before{background:var(--warn)}
.pv-foot{display:flex;justify-content:space-between;gap:12px;padding-top:18px;border-top:1px solid var(--line)}
.pv-foot button{all:unset;cursor:pointer;display:grid;gap:2px;min-height:44px;font-size:12px;color:var(--muted)}
.pv-foot button b{font-family:var(--f-en);font-size:17px;letter-spacing:.06em;color:var(--ink);direction:ltr}
.pv-foot button.next{text-align:left}
html.pv-lock{overflow:hidden}
:root{--warn:#A0512F}

/* ---------- mobile: the 402 frame ---------- */
@media (max-width:820px){
  :root{--gutter:20px;--wrap:362px;--section-y:64px}

  .hero{height:820px}
  .hero-header{height:72px;gap:16px}
  .hero-header .logo{width:96px;height:35px}
  .nav{display:none}
  .hero-tag{inset-block-start:96px;font-size:10px}
  .slogan{inset-block-start:473px;font-size:min(54px,13.4vw)}
  .slogan .l1,.slogan .l2{letter-spacing:0}
  .hero-actions{inset-block-start:714px;left:auto;right:0}
  .hero-sub{inset-block-start:660px}

  .s-head{padding-bottom:32px;gap:16px}
  .s-head .s-title{flex:1 1 auto;max-width:none}
  .s-head h2{font-size:26px}
  .s-head .s-num{font-size:28px}
  .s-head .s-count{display:none}

  .about-grid{flex-direction:column;gap:32px}
  .about-lead{flex:0 0 auto;width:100%}
  .about-lead h2{font-size:30px}
  .about-lead .en{font-size:20px}
  .about-text{flex:0 0 auto;width:100%}
  .about-text p{font-size:15px;line-height:2}
  .pillars{flex-direction:column;gap:16px}

  /* two per row, left to right, as the mobile frame has it */
  .p-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 12px;row-gap:24px}
  .card-media{border-radius:86px 86px 0 0}
  .card-name{font-size:18px}

  .catalog{flex-direction:column;align-items:stretch;gap:16px;margin-top:32px;padding:20px}
  .catalog .btn{width:100%}
  .catalog-text{margin-inline-start:0}

  /* the mobile frame scrolls the videos horizontally instead of gridding them */
  .v-grid{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;
    scroll-snap-type:x mandatory;scrollbar-width:none}
  .v-grid::-webkit-scrollbar{display:none}
  .vcard{flex:0 0 225px;aspect-ratio:225 / 400;scroll-snap-align:start}

  .footer .wrap{padding-block:72px 32px}
  .ig-top{flex-direction:column;gap:24px}
  .ig-text h2{font-size:30px}
  .ig-text .handle{font-size:24px}
  .ig-posts{display:flex;grid-template-columns:none;gap:12px;padding-top:32px;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .ig-posts::-webkit-scrollbar{display:none}
  .ig-posts img{flex:0 0 160px;scroll-snap-align:start}
  .bottom{flex-direction:column;align-items:flex-end;gap:16px;margin-top:40px}

  .pv{width:100vw;height:100dvh;margin:0}
  .pv-panel{display:block;border-radius:0;overflow-y:auto}
  .pv-media{display:block}
  .pv-stage{aspect-ratio:4/5}
  .pv-info{padding:24px var(--gutter) 32px;overflow:visible}
  .pv-name{font-size:34px}
  .pv-sec .dl{grid-template-columns:minmax(0,1fr);gap:0}
  .pv-sec .dl dt{padding-bottom:0;border-bottom:0}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* =====================================================================
   Motion layer — used by js/motion.js. Everything below is scoped to
   html.motion (set in <head> unless the visitor prefers reduced motion),
   so without JS the page is exactly the static design above.
   ===================================================================== */

/* nav underline (always on) */
.nav a{position:relative;padding-block:6px}
.nav a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--cyan);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
/* GSAP animates these opacities; a CSS opacity transition would fight it */
.motion .nav a{transition:none}
.motion .pv-thumbs button{transition:box-shadow .3s}

/* intro curtain + preloader (progress comes from the inline script in index.html via --p) */
.intro{display:none}
.motion .intro{display:grid;place-items:center;position:fixed;inset:0;z-index:100;background:var(--navy);
  animation:introAuto .6s 10s forwards}   /* fail-safe if the scripts never arrive */
@keyframes introAuto{to{opacity:0;visibility:hidden}}
.intro-box{display:grid;justify-items:center;gap:26px}
.intro-logo{width:min(230px,55vw);aspect-ratio:39.5 / 14.3;animation:introLogo 1.3s cubic-bezier(.75,0,.2,1) .1s both}
@keyframes introLogo{from{clip-path:inset(0 100% 0 0);transform:translateY(12px)}to{clip-path:inset(0 0 0 0);transform:none}}
.intro-logo svg{width:100%;height:100%;display:block}
.intro-bar{position:relative;width:min(320px,78vw);height:1px;background:rgba(238,244,246,.14);overflow:hidden;
  animation:introFade .8s ease .5s both}
.intro-bar i{position:absolute;inset:0;background:linear-gradient(90deg,#2363B4,#1FA9C9,#3FE0E8);
  transform:scaleX(var(--p,0));transform-origin:left;box-shadow:0 0 12px #3FE0E8}
.intro-meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;width:min(320px,78vw);
  margin-top:-14px;direction:ltr;font-family:var(--f-en);color:var(--on-dark);animation:introFade .8s ease .7s both}
.intro-claim{font-size:10px;letter-spacing:.26em;opacity:.7;white-space:nowrap}
.intro-pct{font-size:13px;letter-spacing:.08em;color:var(--cyan);font-variant-numeric:tabular-nums}
@keyframes introFade{from{opacity:0;transform:translateY(8px)}}
@media (max-width:400px){.intro-claim{font-size:9px;letter-spacing:.18em}}

/* Lenis smooth scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}

/* scroll progress */
.progress{position:fixed;top:0;inset-inline:0;height:2px;z-index:90;pointer-events:none;
  background:var(--g-capsule);transform:scaleX(0);transform-origin:right}

/* the hero sits above later sections so its fixed header stays on top */
.motion .hero{z-index:10}
.motion .hero-header.is-fixed{position:fixed;inset-block-start:12px;
  inset-inline:max(12px,calc((100vw - var(--wrap)) / 2 - 28px));
  height:64px;padding-inline:28px;border-radius:999px;z-index:60;
  background:rgba(11,35,66,.62);border:1px solid rgba(238,244,246,.12);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.5)}
@media (max-width:820px){
  .motion .hero-header.is-fixed{height:56px;padding-inline:20px}
}

/* lines drawn by --lx (0 → 1) */
.motion .pillars,.motion .bottom{position:relative;border-top-color:transparent}
.motion .pillars::before,.motion .bottom::before{content:"";position:absolute;top:-1px;inset-inline:0;height:1px;
  transform:scaleX(var(--lx,1));transform-origin:right}
.motion .pillars::before{background:var(--line)}
.motion .bottom::before{background:var(--on-dark)}

/* image hover zoom moves to the `scale` property so GSAP can own `transform` */
.motion .card-media img,.motion .vcard img{transition:scale 1.4s var(--ease)}
.motion .card:hover .card-media img,.motion .vcard:hover img{transform:none;scale:1.06}
.motion .card,.motion .vcard{will-change:transform}

/* light that follows the pointer, in the product's accent colour */
.glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;mix-blend-mode:screen;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--a,#3FE0E8) 55%,transparent),transparent 65%)}
.card:hover .glow,.vcard:hover .glow{opacity:.85}

/* buttons: magnetic (GSAP) + a fill that grows from the pointer's entry point */
.motion .btn{position:relative;overflow:hidden;isolation:isolate;transition:color .4s,border-color .4s,background .4s}
.motion .btn:hover{transform:none}
.motion .btn::before{content:"";position:absolute;z-index:-1;left:var(--x,50%);top:var(--y,50%);
  width:260%;aspect-ratio:1;border-radius:50%;background:var(--fill,var(--brand));pointer-events:none;
  transform:translate(-50%,-50%) scale(0);transition:transform .7s var(--ease)}
.motion .btn:hover::before{transform:translate(-50%,-50%) scale(1)}
.motion .btn:disabled::before{display:none}
.motion .btn-light{--fill:var(--g-capsule)}
.motion .btn-light:hover{color:#fff}
.motion .btn-primary{--fill:var(--brand)}
.motion .btn-outline{--fill:var(--on-dark)}
.motion .btn-outline:hover{background:transparent;color:var(--navy)}

/* product panel: GSAP drives the entrance */
.motion .pv[open] .pv-panel{animation:none}
.pv[open]::backdrop{animation:bdIn .5s ease}
@keyframes bdIn{from{opacity:0}}
.pv-fly{position:fixed;z-index:8;object-fit:cover;pointer-events:none;margin:0;max-width:none}
.motion .pv-thumbs button{background:rgba(238,244,246,.08)}
.motion .pv-thumbs img{opacity:0;transition:opacity .45s ease}
.motion .pv-thumbs img.ok{opacity:1}


@media (prefers-reduced-motion:reduce){
  .intro,.progress,.glow{display:none!important}
}