/* ============================================================
   AUTPLAS PRECISION (M) SDN BHD — Custom Styles
   ============================================================ */

:root{
  --navy:#0D3B66;
  --navy-600:#13507f;
  --navy-500:#1c6aa6;
  --cyan:#22D3EE;
  --steel:#5A6B7B;
  --charcoal:#1A1F26;
  --ash:#F4F6F9;
}

*{ -webkit-font-smoothing:antialiased; }
html{ scroll-behavior:auto; } /* Lenis handles smooth scroll */
body{ font-family:'Inter',system-ui,sans-serif; }
::selection{ background:var(--cyan); color:var(--charcoal); }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#0b1622; }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--navy-500),var(--navy)); border-radius:10px; }

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

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader{ transition:opacity .6s ease, visibility .6s ease; }
#preloader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-logo{ animation:logoPulse 1.6s ease-in-out infinite; }
@keyframes logoPulse{ 0%,100%{ opacity:.65; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-3px); } }
#loader-bar{ transition:width .3s ease; }

/* ============================================================
   NAVBAR
   ============================================================ */
#navbar.scrolled{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 8px 30px -12px rgba(13,59,102,.18);
  border-bottom:1px solid rgba(13,59,102,.06);
}
#navbar.scrolled .nav-wordmark,
#navbar.scrolled .nav-link{ color:var(--charcoal); }
.nav-wordmark{ color:#fff; transition:color .4s ease; }
.nav-link{
  position:relative; font-size:.9rem; font-weight:600; color:rgba(255,255,255,.85);
  transition:color .3s ease;
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:var(--cyan); transition:width .3s ease;
}
.nav-link:hover{ color:var(--cyan); }
.nav-link:hover::after{ width:100%; }
#navbar.scrolled .nav-link:hover{ color:var(--navy); }

/* Brand logo */
.brand-logo{
  height:46px; width:auto; display:block;
  /* white over the dark hero, full colour once navbar gets a light background */
  filter:brightness(0) invert(1);
  transition:filter .4s ease, height .4s ease;
}
#navbar.scrolled .brand-logo{ filter:brightness(1) invert(0); }
.logo-white{ filter:brightness(0) invert(1); }
@media(max-width:640px){ .brand-logo{ height:38px; } }

/* Burger */
.burger,.burger::before,.burger::after{
  content:''; display:block; width:24px; height:2px; border-radius:2px;
  background:#fff; transition:transform .35s ease, opacity .25s ease, background .3s ease;
}
#navbar.scrolled .burger,#navbar.scrolled .burger::before,#navbar.scrolled .burger::after{ background:var(--charcoal); }
.burger::before{ transform:translateY(-7px); }
.burger::after{ transform:translateY(5px); }
body.menu-open .burger{ background:transparent !important; }
body.menu-open .burger::before{ transform:translateY(0) rotate(45deg); background:#fff !important; }
body.menu-open .burger::after{ transform:translateY(-2px) rotate(-45deg); background:#fff !important; }
#mobile-menu.open{ transform:translateX(0); }
.mobile-link{ opacity:.9; transition:color .25s ease; }
.mobile-link:hover{ color:var(--cyan); }

/* ============================================================
   HERO
   ============================================================ */
.text-gradient{
  background:linear-gradient(110deg,#22D3EE 0%,#7DD3FC 50%,#fff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-grid{
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 30% 40%,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 30% 40%,#000 0%,transparent 75%);
}
@keyframes scrollCue{ 0%{ transform:translateY(0); opacity:1; } 70%{ transform:translateY(10px); opacity:0; } 100%{ opacity:0; } }
.animate-scroll{ animation:scrollCue 1.7s ease-in-out infinite; }

/* Hero capability pills */
.hero-highlights{ list-style:none; padding:0; margin-top:3rem; max-width:36rem; }
.hero-pill{
  display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1.05rem;
  border-radius:999px; font-size:.82rem; font-weight:600; color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.hero-pill::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 10px rgba(34,211,238,.8);
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{ width:max-content; }
.marquee-track{ animation:marquee 28s linear infinite; }
@keyframes marquee{ to{ transform:translateX(-100%); } }
.trust-item{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:1.1rem; letter-spacing:-.01em; color:var(--steel); }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); display:inline-block; }

/* ============================================================
   SECTION HELPERS
   ============================================================ */
.section-eyebrow{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; color:var(--navy-500);
}
.section-title{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; letter-spacing:-.02em;
  line-height:1.1; font-size:clamp(1.7rem,3.4vw,2.7rem); color:var(--charcoal);
}
.feat-ico{
  flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:9px;
  background:rgba(13,59,102,.08); color:var(--navy);
}
.feat-ico svg{ width:17px; height:17px; }

/* Reveal animations (set initial state; GSAP animates) */
.reveal,.reveal-img{ will-change:transform,opacity; }

/* ============================================================
   SERVICES
   ============================================================ */
.service-card{
  position:relative; overflow:hidden; border-radius:1.25rem; background:#fff;
  border:1px solid rgba(13,59,102,.07); padding:2rem 1.75rem;
  transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .45s ease;
}
.service-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg,var(--cyan),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .45s ease;
}
.service-card:hover{ transform:translateY(-8px); box-shadow:0 30px 60px -28px rgba(13,59,102,.35); border-color:transparent; }
.service-card:hover::before{ opacity:1; }
.svc-ico{
  display:grid; place-items:center; width:54px; height:54px; border-radius:15px;
  background:linear-gradient(135deg,var(--navy),var(--navy-500)); color:#fff;
  box-shadow:0 14px 26px -12px rgba(13,59,102,.6); transition:transform .45s ease;
}
.svc-ico svg{ width:26px; height:26px; }
.service-card:hover .svc-ico{ transform:scale(1.08) rotate(-4deg); }
.svc-num{
  position:absolute; top:1.4rem; right:1.6rem; font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800; font-size:2.4rem; color:rgba(13,59,102,.06); line-height:1;
}

/* ============================================================
   WHY CHOOSE US
   ============================================================ */
.glass-dark{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
/* Light frosted card (e.g. About floating badge) */
.glass{
  background:rgba(255,255,255,.82); border:1px solid rgba(13,59,102,.1);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.why-card{
  border-radius:1.1rem; padding:1.7rem; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(8px);
  transition:transform .4s ease, background .4s ease, border-color .4s ease;
}
.why-card:hover{ transform:translateY(-6px); background:rgba(255,255,255,.07); border-color:rgba(34,211,238,.35); }
.why-ico{
  display:grid; place-items:center; width:46px; height:46px; border-radius:13px;
  background:rgba(34,211,238,.12); color:var(--cyan); margin-bottom:1.1rem;
}
.why-ico svg{ width:23px; height:23px; }
.why-h{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:1.05rem; color:#fff; }
.why-p{ margin-top:.5rem; font-size:.875rem; line-height:1.55; color:rgba(255,255,255,.55); }

/* ============================================================
   PROCESS
   ============================================================ */
.process-step{ position:relative; text-align:center; }
@media(min-width:1024px){ .process-step{ text-align:left; } }
.step-node{
  display:grid; place-items:center; width:68px; height:68px; margin:0 auto;
  border-radius:50%; background:#fff; border:2px solid rgba(13,59,102,.12);
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.25rem;
  color:var(--navy); position:relative; z-index:1;
  box-shadow:0 14px 30px -16px rgba(13,59,102,.4); transition:all .4s ease;
}
@media(min-width:1024px){ .step-node{ margin:0; } }
.process-step:hover .step-node{ background:var(--navy); color:#fff; border-color:var(--navy); transform:scale(1.06); }

/* ============================================================
   INDUSTRIES
   ============================================================ */
.industry-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem; padding:2rem 1rem; border-radius:1.1rem; text-align:center;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(8px); transition:transform .4s ease, background .4s ease, border-color .4s ease;
}
.industry-tile:hover{ transform:translateY(-6px); background:rgba(34,211,238,.08); border-color:rgba(34,211,238,.4); }
.ind-ico{ display:grid; place-items:center; width:54px; height:54px; border-radius:14px; background:rgba(34,211,238,.12); color:var(--cyan); transition:transform .4s ease; }
.ind-ico svg{ width:28px; height:28px; }
.industry-tile:hover .ind-ico{ transform:scale(1.1); }
.industry-tile h3{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:.95rem; color:#fff; }
.industry-tile p{ margin-top:.3rem; font-size:.72rem; line-height:1.35; color:rgba(255,255,255,.5); }

/* ============================================================
   GALLERY
   ============================================================ */
.filter-btn{
  padding:.55rem 1.3rem; border-radius:999px; font-size:.85rem; font-weight:600;
  color:var(--steel); background:#fff; border:1px solid rgba(13,59,102,.1);
  transition:all .3s ease; cursor:pointer;
}
.filter-btn:hover{ color:var(--navy); border-color:var(--navy-500); }
.filter-btn.is-active{ background:var(--navy); color:#fff; border-color:var(--navy); box-shadow:0 10px 22px -12px rgba(13,59,102,.6); }
#gallery-grid{ grid-auto-rows:200px; }
@media(min-width:1024px){ #gallery-grid{ grid-auto-rows:215px; } }
.gallery-item{
  position:relative; overflow:hidden; border-radius:1rem; cursor:pointer;
  transition:opacity .4s ease, transform .4s ease; height:100%;
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-item::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(13,59,102,.78),transparent 55%);
  opacity:0; transition:opacity .4s ease;
}
.gallery-item:hover::after{ opacity:1; }
.gallery-item figcaption{
  position:absolute; left:1rem; bottom:.9rem; z-index:2; color:#fff;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:.9rem;
  transform:translateY(10px); opacity:0; transition:all .4s ease;
}
.gallery-item:hover figcaption{ transform:translateY(0); opacity:1; }
.gallery-item.hide{ display:none; }

/* Lightbox */
#lightbox.open{ display:flex; }
#lb-img{ animation:lbIn .35s ease; }
@keyframes lbIn{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:scale(1); } }

/* ============================================================
   CONTACT
   ============================================================ */
.glass-light{
  background:rgba(255,255,255,.7); border:1px solid rgba(13,59,102,.08);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.contact-row{ display:flex; gap:1rem; align-items:flex-start; }
.contact-ico{
  flex:none; display:grid; place-items:center; width:48px; height:48px; border-radius:14px;
  background:linear-gradient(135deg,var(--navy),var(--navy-500)); color:#fff;
  box-shadow:0 14px 26px -14px rgba(13,59,102,.6);
}
.contact-ico svg{ width:23px; height:23px; }
.contact-h{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:1rem; color:var(--charcoal); }
.contact-p{ margin-top:.2rem; font-size:.9rem; line-height:1.5; color:var(--steel); }

/* Floating-label fields */
.field{ position:relative; }
.field input,.field textarea,.field select{
  width:100%; border-radius:.85rem; border:1px solid rgba(13,59,102,.15);
  background:rgba(255,255,255,.85); padding:1.05rem .95rem .45rem;
  font-size:.92rem; color:var(--charcoal); outline:none;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.field textarea{ padding-top:1.2rem; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--navy-500); box-shadow:0 0 0 4px rgba(28,106,166,.12);
}
.field label{
  position:absolute; left:.95rem; top:.85rem; font-size:.92rem; color:var(--steel);
  pointer-events:none; transition:all .2s ease; transform-origin:left;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:valid + label{
  top:.4rem; font-size:.68rem; color:var(--navy-500); font-weight:600;
}
.field select{ appearance:none; color:var(--charcoal); }
.field select:invalid{ color:transparent; }
.select-label{ background:transparent; }
.field::after{
  /* dropdown caret */
}
.field:has(select)::after{
  content:''; position:absolute; right:1rem; top:1.25rem; width:9px; height:9px;
  border-right:2px solid var(--steel); border-bottom:2px solid var(--steel);
  transform:rotate(45deg); pointer-events:none;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer-h{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.95rem; color:#fff; margin-bottom:1rem; }
.footer-list{ display:flex; flex-direction:column; gap:.6rem; font-size:.875rem; }
.footer-list a{ color:rgba(255,255,255,.55); transition:color .25s ease; }
.footer-list a:hover{ color:var(--cyan); }

/* Back to top visible state */
#to-top.show{ transform:translateY(0); opacity:1; }

/* ============================================================
   PRODUCT CATALOG CARDS
   ============================================================ */
.catalog-card{
  display:flex; flex-direction:column; text-align:left; cursor:pointer;
  background:#fff; border:1px solid rgba(13,59,102,.08); border-radius:1.1rem;
  overflow:hidden; padding:0; position:relative;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.catalog-card:hover{ transform:translateY(-7px); box-shadow:0 30px 55px -26px rgba(13,59,102,.4); border-color:transparent; }
.catalog-card-img{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--ash); }
.catalog-card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.catalog-card:hover .catalog-card-img img{ transform:scale(1.07); }
.catalog-card-img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(13,59,102,.35),transparent 50%);
  opacity:0; transition:opacity .4s ease;
}
.catalog-card:hover .catalog-card-img::after{ opacity:1; }
.catalog-card-body{ padding:1rem 1.1rem 1.15rem; }
.catalog-card-body h3{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:1rem;
  color:var(--charcoal); line-height:1.25;
}
.catalog-count{ display:inline-block; margin-top:.35rem; font-size:.78rem; font-weight:600; color:var(--navy-500); }
.catalog-card-cta{
  position:absolute; right:1rem; bottom:1.05rem; display:grid; place-items:center;
  width:34px; height:34px; border-radius:50%; background:var(--navy); color:#fff;
  transform:translateY(6px) scale(.8); opacity:0; transition:all .4s ease;
}
.catalog-card-cta svg{ width:16px; height:16px; }
.catalog-card:hover .catalog-card-cta{ transform:translateY(0) scale(1); opacity:1; }

/* ============================================================
   CATEGORY MODAL
   ============================================================ */
#catalog-modal{ display:none; }
#catalog-modal.open{ display:block; }
body.modal-open{ overflow:hidden; }
.modal-panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(1100px,94vw); max-height:90vh; display:flex; flex-direction:column;
  background:#fff; border-radius:1.4rem; overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6); animation:modalIn .4s cubic-bezier(.2,.7,.2,1);
}
@keyframes modalIn{ from{ opacity:0; transform:translate(-50%,-46%) scale(.97); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
.modal-header{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.5rem 1.75rem; border-bottom:1px solid rgba(13,59,102,.08); flex:none;
}
.modal-body{ overflow-y:auto; padding:1.5rem 1.75rem 2rem; -webkit-overflow-scrolling:touch; }
.modal-group-label{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.95rem; color:var(--navy-700);
  margin:1.6rem 0 .9rem; padding-left:.75rem; border-left:3px solid var(--cyan);
}
.modal-group-label:first-child{ margin-top:0; }
.modal-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.85rem;
}
.modal-item{
  position:relative; aspect-ratio:1; border-radius:.7rem; overflow:hidden; cursor:zoom-in;
  background:var(--ash); border:1px solid rgba(13,59,102,.06);
}
.modal-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.modal-item:hover img{ transform:scale(1.08); }
.modal-item::after{
  content:''; position:absolute; inset:0; background:rgba(13,59,102,0); transition:background .3s ease;
}
.modal-item:hover::after{ background:rgba(13,59,102,.12); }
@media(max-width:640px){
  .modal-panel{ width:96vw; max-height:92vh; border-radius:1.1rem; }
  .modal-header{ padding:1.1rem 1.2rem; }
  .modal-body{ padding:1.1rem 1.2rem 1.5rem; }
  .modal-grid{ grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:.6rem; }
}

/* ============================================================
   FACTORY CAROUSEL
   ============================================================ */
.factory-carousel{
  position:relative; border-radius:1.4rem; overflow:hidden;
  background:var(--charcoal); box-shadow:0 40px 80px -34px rgba(13,59,102,.5);
}
.fc-viewport{ overflow:hidden; }
.fc-track{ display:flex; transition:transform .65s cubic-bezier(.5,.1,.1,1); will-change:transform; }
.fc-slide{
  position:relative; min-width:100%; aspect-ratio:16/9; background:#0b1622;
}
@media(max-width:640px){ .fc-slide{ aspect-ratio:4/3; } }
.fc-slide img,.fc-slide video{ width:100%; height:100%; object-fit:cover; display:block; }
.fc-slide::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,rgba(10,18,30,.75),transparent 42%);
}
.fc-caption{
  position:absolute; left:1.5rem; bottom:1.4rem; right:5rem; z-index:2; color:#fff;
}
.fc-caption .fc-kicker{
  display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:.4rem;
}
.fc-caption h4{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:1.15rem; line-height:1.2; }
@media(max-width:640px){ .fc-caption{ left:1rem; bottom:1rem; right:1rem; } .fc-caption h4{ font-size:.95rem; } }
.fc-badge{
  position:absolute; top:1.1rem; left:1.1rem; z-index:2; display:inline-flex; align-items:center; gap:.35rem;
  padding:.3rem .7rem; border-radius:999px; font-size:.68rem; font-weight:700; letter-spacing:.05em;
  color:#fff; background:rgba(34,211,238,.25); border:1px solid rgba(34,211,238,.5); backdrop-filter:blur(6px);
}
.fc-badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.fc-unmute{
  position:absolute; right:1.1rem; bottom:1.2rem; z-index:3; display:grid; place-items:center;
  width:42px; height:42px; border-radius:50%; color:#fff;
  background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(6px);
  transition:background .25s ease;
}
.fc-unmute:hover{ background:rgba(0,0,0,.6); }
.fc-unmute svg{ width:20px; height:20px; }
.fc-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4; display:grid; place-items:center;
  width:46px; height:46px; border-radius:50%; color:#fff;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(8px); transition:background .25s ease, transform .25s ease;
}
.fc-arrow:hover{ background:rgba(255,255,255,.25); }
.fc-prev{ left:1rem; }
.fc-next{ right:1rem; }
.fc-arrow svg{ width:22px; height:22px; }
.fc-arrow:active{ transform:translateY(-50%) scale(.92); }
.fc-counter{
  position:absolute; top:1.1rem; right:1.2rem; z-index:3; padding:.3rem .8rem; border-radius:999px;
  font-size:.8rem; font-weight:600; color:#fff; background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px);
}
.fc-thumbs{
  display:flex; gap:.6rem; margin-top:1rem; overflow-x:auto; padding:.25rem; scrollbar-width:thin;
  scroll-snap-type:x proximity;
}
.fc-thumbs::-webkit-scrollbar{ height:6px; }
.fc-thumbs::-webkit-scrollbar-thumb{ background:rgba(13,59,102,.25); border-radius:10px; }
.fc-thumb{
  position:relative; flex:none; width:104px; aspect-ratio:16/10; border-radius:.6rem; overflow:hidden;
  cursor:pointer; opacity:.5; scroll-snap-align:center; border:2px solid transparent;
  transition:opacity .3s ease, border-color .3s ease, transform .3s ease;
}
.fc-thumb img{ width:100%; height:100%; object-fit:cover; }
.fc-thumb:hover{ opacity:.85; }
.fc-thumb.is-active{ opacity:1; border-color:var(--cyan); }
.fc-thumb .fc-thumb-play{
  position:absolute; inset:0; display:grid; place-items:center; color:#fff;
}
.fc-thumb .fc-thumb-play svg{ width:22px; height:22px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
@media(max-width:640px){ .fc-thumb{ width:84px; } }

/* ============================================================
   MOTION SAFETY
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .marquee-track{ animation:none; }
}