/* ============================================
   AZKADIENA COLLECTION — style.css
   ------------------------------------------
   DAFTAR ISI
   1.  Design Tokens & Reset
   2.  Layout Umum (container, section, button)
   3.  Navbar
   4.  Hero
   5.  Marquee
   6.  About / Tentang Kami
   7.  Card Grid (Keunggulan & Layanan)
   8.  Produk
   9.  Alur Produksi
   10. Portfolio / Lightbox
   11. Testimoni
   12. FAQ
   13. CTA
   14. Kontak & Form (termasuk EmailJS states)
   15. Footer
   16. Floating WhatsApp, Loader, Cursor Glow
   17. Accessibility & Scroll Reveal
   18. Dark Mode
   19. Ambient Motion & Micro-interactions (BARU)
   20. Fun Floating Easter Egg (BARU)
============================================ */

/* ---- 1. Design Tokens & Reset ---- */
:root{
  --primary:#A67C52;
  --primary-rgb:166,124,82;
  --secondary:#D8C2A8;
  --accent:#C89B63;
  --accent-rgb:200,155,99;
  --bg:#FAFAFA;
  --card:#FFFFFF;
  --ink:#1F2937;
  --stitch:#EADFCF;
  --ink-60:rgba(31,41,55,.6);
  --ink-50:rgba(31,41,55,.5);
  --ink-55:rgba(31,41,55,.55);
  --ink-45:rgba(31,41,55,.45);
  --ink-40:rgba(31,41,55,.4);
  --ink-10:rgba(31,41,55,.08);
  --ink-05:rgba(31,41,55,.05);
  --shadow-soft:0 20px 60px -20px rgba(166,124,82,.28);
  --shadow-card:0 10px 30px -12px rgba(31,41,55,.10);
  --radius-lg:1.75rem;
  --radius-xl:2.25rem;
  --container:1240px;

  /* surface / chrome tokens — kept separate from --card & --ink so the
     hero/footer/CTA sections that intentionally stay dark don't shift
     when dark mode is toggled */
  --surface-alt:rgba(255,255,255,.6);
  --surface-alt-2:rgba(234,223,207,.35);
  --surface-glass:rgba(255,255,255,.92);
  --surface-glass-2:rgba(255,255,255,.75);
  --surface-border:#FFFFFF;
  --nav-bg:rgba(250,250,250,.7);
  --nav-bg-scrolled:rgba(255,255,255,.9);
  --nav-bg-open:rgba(255,255,255,.98);
  --input-bg:#FFFFFF;
  --placeholder:rgba(31,41,55,.35);
  --footer-ink:#1F2937;
  --ease-smooth:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Manrope',sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background-color .5s var(--ease-smooth), color .5s var(--ease-smooth);
}
h1,h2,h3,h4,.font-display{font-family:'Plus Jakarta Sans',sans-serif;}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
input,select,textarea{font-family:inherit;}
::selection{background:var(--accent); color:#fff;}

.container{max-width:var(--container); margin:0 auto; padding:0 20px;}
@media(min-width:768px){ .container{padding:0 32px;} }

.section{padding:96px 0;}
@media(max-width:480px){ .section{padding:64px 0;} }
@media(min-width:768px){ .section{padding:128px 0;} }
.section--tight{padding:56px 0;}
.section--alt{background:var(--surface-alt); border-top:1px solid var(--ink-05); border-bottom:1px solid var(--ink-05);}

.eyebrow{color:var(--primary); font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:12px;}
.section-head{max-width:640px; margin:0 auto 56px; text-align:center;}
.section-head h2{font-weight:800; font-size:clamp(28px,4vw,38px); line-height:1.2; color:var(--ink);}
.section-head--left{margin:0 0 40px; text-align:left; max-width:520px;}

.grad-text{
  background:linear-gradient(90deg,var(--primary),var(--accent),var(--secondary),var(--primary));
  background-size:300% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradShift 7s ease-in-out infinite;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:14px; padding:16px 28px; border-radius:999px;
  transition:transform .35s var(--ease-smooth), box-shadow .35s var(--ease-smooth), background-color .35s ease, color .35s ease;
  position:relative; overflow:hidden;
}
.btn:active{transform:scale(.96);}
.btn-primary{background:var(--primary); color:#fff; box-shadow:var(--shadow-soft);}
.btn-primary:hover{background:var(--accent); transform:translateY(-2px);}
.btn-white{background:#fff; color:var(--ink); border:1px solid var(--ink-10);}
.btn-white:hover{background:var(--stitch); transform:translateY(-2px);}
.btn-dark{background:var(--footer-ink); color:#fff;}
.btn-dark:hover{background:var(--primary);}
.btn-light-cta{background:#fff; color:var(--ink);}
.btn-light-cta:hover{background:var(--secondary);}
.ripple{position:absolute; border-radius:50%; background:rgba(255,255,255,.5); transform:scale(0); animation:ripple .6s linear; pointer-events:none;}
@keyframes ripple{to{transform:scale(4); opacity:0;}}

/* ============ NAVBAR ============ */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:var(--nav-bg);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  transition:background-color .4s var(--ease-smooth), box-shadow .35s ease;
}
.navbar.scrolled{background:var(--nav-bg-scrolled); box-shadow:0 8px 30px -15px rgba(31,41,55,.15);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:80px; column-gap:20px;}
.nav-right{display:flex; align-items:center; gap:20px;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:19px; white-space:nowrap;}
@media(max-width:380px){ .brand{font-size:15px; gap:8px;} }
.brand-mark{
  width:40px; height:40px; border-radius:12px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  background-size:220% 220%;
  animation:brandGlow 5s ease-in-out infinite;
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:var(--shadow-soft); flex-shrink:0;
}
@media(max-width:380px){ .brand-mark{width:34px; height:34px; border-radius:10px; font-size:14px;} }
.brand span{color:var(--primary); font-weight:600;}

.nav-menu{display:none; align-items:center; gap:22px; font-weight:600; font-size:13.5px; color:var(--ink-60); white-space:nowrap;}
.nav-menu a{position:relative; padding:4px 0; transition:color .3s ease;}
.nav-menu a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--primary); border-radius:2px; transition:right .35s var(--ease-smooth);
}
.nav-menu a:hover{color:var(--primary);}
.nav-menu a:hover::after{right:0;}
@media(min-width:1340px){ .nav-menu{display:flex;} }
.navbar .container{max-width:1440px;}
.nav-cta{display:none; white-space:nowrap;}
@media(min-width:820px){ .nav-cta{display:inline-flex;} }

.menu-toggle{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--ink-10);
  transition:background .3s ease, transform .3s var(--ease-smooth), border-color .3s ease;
}
.menu-toggle:hover{background:var(--stitch); transform:rotate(90deg);}
@media(min-width:1340px){ .menu-toggle{display:none;} }

/* ============ THEME TOGGLE ============ */
.theme-toggle{
  position:relative; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--ink-10); background:transparent; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  transition:background .3s ease, border-color .3s ease, transform .3s var(--ease-smooth);
}
.theme-toggle:hover{background:var(--stitch); transform:translateY(-2px);}
.theme-toggle i{position:absolute; font-size:16px; color:var(--primary); transition:transform .5s var(--ease-smooth), opacity .4s ease;}
.theme-toggle .fa-sun{opacity:1; transform:rotate(0) scale(1);}
.theme-toggle .fa-moon{opacity:0; transform:rotate(-90deg) scale(.4);}
[data-theme="dark"] .theme-toggle .fa-sun{opacity:0; transform:rotate(90deg) scale(.4);}
[data-theme="dark"] .theme-toggle .fa-moon{opacity:1; transform:rotate(0) scale(1);}
.mobile-menu-list .theme-toggle-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; border-bottom:1px solid var(--ink-05); font-weight:600; font-size:14px; color:var(--ink-60);
}

.navbar.menu-open{background:var(--nav-bg-open); box-shadow:0 8px 30px -15px rgba(31,41,55,.15);}
.mobile-menu{max-height:0; overflow:hidden; transition:max-height .5s var(--ease-smooth); background:var(--card);}
.mobile-menu.open{max-height:calc(100vh - 80px); min-height:calc(100vh - 80px); overflow-y:auto; border-top:1px solid var(--ink-05);}
.mobile-menu-list{display:flex; flex-direction:column; gap:2px; padding-bottom:24px; font-weight:600; font-size:14px; color:var(--ink-60);}
.mobile-menu-list a{padding:12px 0; border-bottom:1px solid var(--ink-05);}
.mobile-menu-list .btn{margin-top:12px; justify-content:center;}

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding:140px 0 60px; overflow:hidden;
}
@media(max-width:480px){ .hero{padding:112px 0 48px; min-height:auto;} }
.blob{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; z-index:0; animation:blobMove 18s ease-in-out infinite;}
.blob--1{width:420px; height:420px; background:var(--secondary); top:-90px; right:-90px;}
.blob--2{width:360px; height:360px; background:rgba(var(--accent-rgb),.4); bottom:-100px; left:-100px; animation-duration:22s; animation-delay:-6s;}
.blob--3{width:380px; height:380px; background:rgba(var(--accent-rgb),.3); top:-100px; right:10%; animation-duration:20s; animation-delay:-10s;}

/* thin drifting particles inside the hero — pure ambient decoration */
.particles{position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;}
.particle{
  position:absolute; bottom:-20px; border-radius:50%; background:var(--accent); opacity:0;
  animation-name:particleFloat; animation-timing-function:ease-in; animation-iteration-count:infinite;
}

.hero-grid{display:grid; gap:56px; align-items:center; position:relative; z-index:1;}
@media(min-width:1080px){ .hero-grid{grid-template-columns:1fr 1fr;} }

.badge-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.7); border:1px solid rgba(var(--primary-rgb),.25);
  color:var(--primary); font-weight:700; font-size:12px; padding:9px 16px; border-radius:999px;
  margin-bottom:24px; box-shadow:0 2px 10px rgba(0,0,0,.03);
}
.dot-pulse{width:6px; height:6px; border-radius:50%; background:var(--primary); animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.3}}

.hero h1{font-weight:800; font-size:clamp(34px,6vw,58px); line-height:1.1; letter-spacing:-.01em; margin-bottom:22px;}
.hero p.lead{color:var(--ink-60); font-size:17px; line-height:1.7; max-width:520px; margin-bottom:32px;}
.hero-actions{display:flex; flex-wrap:wrap; gap:16px; margin-bottom:36px;}
@media(max-width:640px){
  .hero-actions{gap:8px !important; flex-wrap:nowrap !important; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; scrollbar-width:none;}
  .hero-actions::-webkit-scrollbar{display:none;}
  .hero-actions .btn{flex:0 0 auto !important; width:auto !important; padding:10px 14px !important; font-size:12px !important; gap:5px !important; white-space:nowrap !important;}
}

.badge-row{display:flex; flex-wrap:wrap; gap:12px;}
.badge-item{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--ink-10); color:var(--ink-60);
  font-weight:700; font-size:12px; padding:9px 14px; border-radius:999px;
}
.badge-item i{color:var(--primary);}

.hero-image-wrap{position:relative; max-width:440px; margin:0 auto;}
.hero-image{
  position:relative; border-radius:var(--radius-xl); overflow:hidden;
  aspect-ratio:4/5; box-shadow:var(--shadow-soft);
}
.hero-image img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-smooth); animation:kenBurns 15s ease-in-out infinite alternate;}
.hero-image:hover img{transform:scale(1.04); animation-play-state:paused;}
.hero-image::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(31,41,55,.3), transparent 50%);
}

.float-card{
  background:var(--surface-glass); backdrop-filter:blur(6px);
  border-radius:18px; box-shadow:var(--shadow-card); border:1px solid var(--surface-border);
  padding:16px 20px;
}
.float-card .num{font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:24px; color:var(--primary);}
.float-card .label{font-size:11px; color:var(--ink-60); font-weight:600;}
@keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)}}

/* Mobile & tablet: stats sit in a tidy 2x2 grid below the photo instead of
   floating over it, so nothing overlaps or gets clipped on small screens. */
.hero-image-wrap{display:flex; flex-wrap:wrap; gap:12px;}
.hero-image{flex:1 1 100%; margin:0;}
.float-card{flex:1 1 calc(50% - 6px); text-align:center;}

@media(min-width:1080px){
  .hero-image-wrap{display:block; max-width:440px;}
  .hero-image{margin:0;}
  .float-card{
    position:absolute; text-align:left; animation:floaty 5s ease-in-out infinite;
  }
  .fc-1{left:-24px; top:30px;}
  .fc-2{right:-16px; top:32%; animation-delay:1.2s;}
  .fc-3{left:-16px; bottom:40px; animation-duration:7s;}
  .fc-4{right:-24px; bottom:110px; animation-duration:7s; animation-delay:1s;}
}

/* ============ MARQUEE ============ */
.marquee-wrap{overflow:hidden; padding:56px 0;}
.marquee-label{text-align:center; font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-40); margin-bottom:32px;}
.marquee-track{display:flex; width:max-content; gap:64px; align-items:center; animation:marquee 26s linear infinite; padding:0 32px;}
.marquee-wrap:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.marquee-track span{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:22px; color:var(--ink-40);
  filter:grayscale(1); transition:all .3s ease; white-space:nowrap;
}
.marquee-track span:hover{filter:grayscale(0); color:var(--primary);}

/* ============ ABOUT ============ */
.about-grid{display:grid; gap:64px; align-items:center;}
@media(min-width:1080px){ .about-grid{grid-template-columns:1fr 1fr;} }
.about-image-wrap{position:relative; max-width:480px;}
.about-image{border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-soft); max-width:480px;}
.about-image img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-smooth); animation:kenBurns 17s ease-in-out infinite alternate;}
.about-image:hover img{transform:scale(1.04); animation-play-state:paused;}
.about-float{
  display:none; position:absolute; right:-32px; bottom:-32px; width:224px;
  background:var(--card); border-radius:24px; box-shadow:var(--shadow-card); border:1px solid var(--stitch); padding:24px;
  animation:floaty 6s ease-in-out infinite;
}
@media(min-width:768px){ .about-float{display:block;} }
.about-float i{color:var(--primary); font-size:24px; margin-bottom:8px;}
.about-float p{font-weight:700; font-size:14px; line-height:1.4;}

.about-copy p.lead{color:var(--ink-60); line-height:1.75; margin-bottom:24px;}
.vm-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:32px;}
@media(max-width:480px){ .vm-grid{grid-template-columns:1fr;} }
.vm-card{display:flex; gap:12px; background:var(--card); border-radius:18px; padding:16px; border:1px solid var(--ink-05); transition:transform .4s var(--ease-smooth), box-shadow .4s var(--ease-smooth);}
.vm-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-card);}
.vm-card i{color:var(--primary); margin-top:2px;}
.vm-card .t{font-weight:700; font-size:14px; margin-bottom:4px;}
.vm-card .d{font-size:12px; color:var(--ink-60); line-height:1.5;}

.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; border-top:2px dashed rgba(var(--accent-rgb),.35); padding-top:24px;}
.stat-strip .num{font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:clamp(18px,5vw,24px); color:var(--primary);}
.stat-strip .label{font-size:11px; color:var(--ink-50); font-weight:600;}
@media(max-width:420px){ .stat-strip{gap:8px;} }

/* ============ CARD GRIDS (Keunggulan / Layanan) ============ */
.card-grid{display:grid; gap:20px; grid-template-columns:1fr;}
@media(min-width:640px){ .card-grid{grid-template-columns:repeat(2,1fr);} }
@media(min-width:1080px){ .card-grid--5{grid-template-columns:repeat(5,1fr);} .card-grid--3{grid-template-columns:repeat(3,1fr);} }

.feature-card{
  background:var(--card); border:1px solid var(--ink-05); border-radius:24px; padding:26px;
  transition:transform .45s var(--ease-smooth), box-shadow .45s var(--ease-smooth), border-color .4s ease, background .5s ease;
}
.feature-card:hover{transform:translateY(-6px) scale(1.01); box-shadow:0 25px 60px -20px rgba(var(--primary-rgb),.35); border-color:var(--accent);}
.feature-icon{
  width:48px; height:48px; border-radius:16px; background:var(--stitch); color:var(--primary);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:17px;
  animation:iconPulse 4.5s ease-in-out infinite;
}
.feature-card:nth-child(2n) .feature-icon{animation-delay:-1.4s;}
.feature-card:nth-child(3n) .feature-icon{animation-delay:-2.8s;}
.feature-card:nth-child(5n) .feature-icon{animation-delay:-.7s;}
.feature-card:hover .feature-icon{transform:scale(1.1) rotate(-6deg);}
.feature-card .t{font-weight:700; font-size:14px; margin-bottom:6px;}
.feature-card .d{font-size:12.5px; color:var(--ink-55); line-height:1.6;}

.service-card{
  background:linear-gradient(160deg,var(--card),var(--surface-alt-2));
  border:1px solid var(--ink-05); border-radius:24px; padding:28px;
  transition:transform .45s var(--ease-smooth), box-shadow .45s var(--ease-smooth), border-color .4s ease, background .5s ease;
}
.service-card:hover{transform:translateY(-6px); box-shadow:0 25px 60px -20px rgba(var(--primary-rgb),.35); border-color:var(--accent);}
.service-card i{color:var(--primary); font-size:24px; margin-bottom:16px; display:inline-block; transition:transform .4s var(--ease-smooth);}
.service-card:hover i{transform:scale(1.15) rotate(-8deg);}
.service-card .t{font-weight:700; margin-bottom:6px; font-family:'Plus Jakarta Sans',sans-serif;}
.service-card .d{font-size:14px; color:var(--ink-60); line-height:1.6;}

/* ============ PRODUK ============ */
.produk-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:56px;}
.product-grid{display:grid; gap:24px; grid-template-columns:repeat(2,1fr);}
@media(min-width:1080px){ .product-grid{grid-template-columns:repeat(4,1fr);} }
.product-card{
  position:relative; border-radius:24px; overflow:hidden; aspect-ratio:3/4; display:block;
  transition:transform .45s var(--ease-smooth), box-shadow .45s var(--ease-smooth);
}
.product-card:hover{transform:translateY(-6px) scale(1.01); box-shadow:0 25px 60px -20px rgba(var(--primary-rgb),.35);}
.product-card img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-smooth);}
.product-card:hover img{transform:scale(1.1);}
.product-card::after{content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(31,41,55,.8), rgba(31,41,55,.1) 55%, transparent);}
.product-card .label{position:absolute; left:0; right:0; bottom:0; padding:20px; color:#fff; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; z-index:1;}
.produk-note{text-align:center; color:var(--ink-45); font-size:12.5px; margin-top:32px;}
.produk-note a{color:var(--primary); font-weight:700; text-decoration:underline;}

/* ============ PROSES PRODUKSI ============ */
.proses-wrap {
  position: relative;
}

.stitch-line {
  display: none;
  position: absolute;
  top: 32px;
  left: 10%;
  right: 10%;
  height: 2px;
  opacity: 0.6;
  background-image: repeating-linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 20px);
  z-index: 0;
  animation: stitchMarch 1.1s linear infinite;
}

.proses-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  position: relative;
}

@media (min-width: 640px) {
  .proses-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .stitch-line {
    display: block;
  }
  .proses-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.proses-step {
  text-align: center;
  position: relative;
}

.proses-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 20px;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease, background-color .5s ease, border-color .5s ease;
}

.proses-step:hover .proses-icon {
  transform: translateY(-5px) scale(1.06);
}

.proses-step .t {
  font-weight: 700;
  font-size: 13.5px;
  margin-bottom: 4px;
}

.proses-step .d {
  font-size: 11.5px;
  color: var(--ink-50);
  line-height: 1.5;
}
/* ============ PORTFOLIO ============ */
.filter-row{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:40px;}
.filter-btn{
  padding:10px 20px; border-radius:999px; font-size:13px; font-weight:700;
  background:#fff; border:1px solid var(--ink-10); color:var(--ink-60); transition:all .25s ease;
}
.filter-btn.active{background:var(--primary); color:#fff; border-color:var(--primary);}

.lookbook-wrap{position:relative; display:flex; align-items:center; gap:14px;}
.lookbook-viewport{flex:1; overflow:hidden; border-radius:20px;}
.lookbook-track{
  display:flex; gap:20px;
  padding:4px 2px 20px 2px;
  cursor:grab;
  will-change:transform;
  transition:transform .65s cubic-bezier(.22,1,.36,1);
}
.lookbook-track.dragging{transition:none; cursor:grabbing;}
.lookbook-slide{
  flex:0 0 auto; width:72%; border-radius:20px; overflow:hidden;
  cursor:pointer; box-shadow:var(--shadow-card); transition:transform .4s ease, box-shadow .4s ease;
}
.lookbook-slide:hover{transform:translateY(-4px); box-shadow:0 25px 60px -20px rgba(var(--primary-rgb),.35);}
.lookbook-slide img{width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:1/1; -webkit-user-drag:none; user-select:none; transition:transform .6s var(--ease-smooth);}
.lookbook-slide:hover img{transform:scale(1.08);}
@media(min-width:640px){ .lookbook-slide{width:42%;} }
@media(min-width:1024px){ .lookbook-slide{width:29.5%;} }
.lookbook-arrow{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%; border:1px solid var(--ink-10);
  background:var(--card); display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:var(--shadow-card); transition:all .3s var(--ease-smooth); z-index:2;
}
.lookbook-arrow:hover{background:var(--primary); color:#fff; border-color:var(--primary); transform:scale(1.08);}
@media(max-width:640px){ .lookbook-arrow{width:38px; height:38px; font-size:12px;} }

.lookbook-dots{display:flex; justify-content:center; gap:8px; margin-top:20px;}
.lookbook-dot{width:7px; height:7px; border-radius:50%; background:var(--ink-10); transition:all .35s var(--ease-smooth); cursor:pointer;}
.lookbook-dot.active{background:var(--primary); width:22px; border-radius:4px;}

.lightbox{
  position:fixed; inset:0; background:rgba(31,41,55,.92); z-index:2000;
  display:none; align-items:center; justify-content:center; padding:24px;
}
.lightbox.open{display:flex;}
.lightbox img{max-height:85vh; max-width:100%; border-radius:20px;}
.lightbox-close{position:absolute; top:24px; right:24px; color:#fff; font-size:30px; background:none; border:none;}

/* ============ TESTIMONI ============ */
.testi-track{display:flex; gap:24px; overflow-x:auto; scroll-behavior:smooth; padding-bottom:8px; scrollbar-width:none;}
.testi-track::-webkit-scrollbar{display:none;}
.testi-card{
  min-width:300px; background:var(--surface-glass-2); backdrop-filter:blur(6px);
  border:1px solid var(--surface-border); border-radius:24px; padding:28px; box-shadow:var(--shadow-card); transition:background .5s ease, border-color .5s ease, transform .4s var(--ease-smooth), box-shadow .4s var(--ease-smooth);
}
.testi-card:hover{transform:translateY(-6px); box-shadow:0 25px 55px -20px rgba(var(--primary-rgb),.32);}
@media(min-width:768px){ .testi-card{min-width:360px;} }
.stars{color:#fbbf24; font-size:13px; margin-bottom:16px; letter-spacing:2px;}
.testi-card .quote{color:var(--ink-60); font-size:14px; line-height:1.7; margin-bottom:24px;}
.testi-person{display:flex; align-items:center; gap:12px;}
.avatar{width:40px; height:40px; border-radius:50%; background:var(--secondary); color:var(--primary); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center;}
.testi-person .name{font-weight:700; font-size:14px;}
.testi-person .role{font-size:12px; color:var(--ink-50);}
.testi-controls{display:flex; justify-content:center; gap:12px; margin-top:32px;}
.testi-controls button{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--ink-10); background:var(--card);
  display:flex; align-items:center; justify-content:center; transition:all .3s var(--ease-smooth);
}
.testi-controls button:hover{background:var(--primary); color:#fff; transform:scale(1.08);}

/* ============ FAQ ============ */
.faq-wrap{max-width:760px; margin:0 auto;}
.faq-item{background:var(--card); border:1px solid var(--ink-05); border-radius:18px; overflow:hidden; margin-bottom:16px; transition:background .5s ease, border-color .3s ease, box-shadow .3s ease;}
.faq-item:hover{box-shadow:var(--shadow-card);}
.faq-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  text-align:left; padding:20px 24px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:14.5px;
}
.faq-btn i{color:var(--primary); transition:transform .4s var(--ease-smooth);}
.faq-content{max-height:0; overflow:hidden; transition:max-height .5s var(--ease-smooth);}
.faq-content p{padding:0 24px 20px; font-size:14px; color:var(--ink-60); line-height:1.7;}

/* ============ CTA ============ */
.cta{position:relative; overflow:hidden; padding:96px 0;}
.cta-bg{position:absolute; inset:0; background:linear-gradient(135deg, var(--footer-ink), #2b2318, var(--primary)); background-size:220% 220%; animation:ctaGradShift 12s ease-in-out infinite;}
.cta-inner{position:relative; z-index:1; max-width:680px; margin:0 auto; text-align:center;}
.cta-inner h2{color:#fff; font-weight:800; font-size:clamp(26px,4vw,36px); margin-bottom:16px;}
.cta-inner p{color:rgba(255,255,255,.7); margin-bottom:36px;}
.cta-actions{display:flex; flex-wrap:wrap; gap:16px; justify-content:center;}

/* ============ KONTAK ============ */
.kontak-grid{display:grid; gap:32px;}
@media(min-width:1080px){ .kontak-grid{grid-template-columns:2fr 3fr;} }
.info-list{display:flex; flex-direction:column; gap:16px;}
.info-item{display:flex; gap:16px; align-items:flex-start; background:var(--card); border:1px solid var(--ink-05); border-radius:18px; padding:18px; transition:background .5s ease, transform .3s var(--ease-smooth), box-shadow .3s ease;}
.info-item:hover{transform:translateX(4px); box-shadow:var(--shadow-card);}
.info-icon{width:44px; height:44px; border-radius:14px; background:var(--stitch); color:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.info-item .t{font-weight:700; font-size:14px; margin-bottom:2px;}
.info-item .d{font-size:14px; color:var(--ink-60);}
.info-item .d:hover{color:var(--primary);}

.map-box{position:relative; display:block; border-radius:18px; overflow:hidden; border:1px solid var(--ink-05); height:220px; margin-top:16px;}
.map-box iframe{width:100%; height:100%; border:0; pointer-events:none;}
.map-overlay{position:absolute; inset:0; background:rgba(31,41,55,0); display:flex; align-items:center; justify-content:center; transition:background .3s ease;}
.map-box:hover .map-overlay{background:rgba(31,41,55,.2);}
.map-overlay span{
  opacity:0; transition:opacity .3s ease; background:#fff; color:var(--ink); font-size:12px; font-weight:700;
  padding:10px 16px; border-radius:999px; box-shadow:var(--shadow-card); display:inline-flex; align-items:center; gap:8px;
}
.map-box:hover .map-overlay span{opacity:1;}
.map-note{font-size:11px; color:var(--ink-40); margin-top:10px;}

.form-card{background:var(--card); border:1px solid var(--ink-05); border-radius:28px; padding:32px; box-shadow:var(--shadow-card); transition:background .5s ease;}
.form-row{display:grid; gap:20px; margin-bottom:20px;}
@media(min-width:640px){ .form-row--2{grid-template-columns:1fr 1fr;} }
.field label{display:block; font-size:12px; font-weight:700; color:var(--ink-60); margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--ink-10); border-radius:14px; padding:13px 16px; font-size:14px; outline:none;
  background:var(--input-bg); color:var(--ink);
  transition:box-shadow .25s ease, border-color .25s ease, background .5s ease, color .5s ease;
}
.field input::placeholder, .field textarea::placeholder{color:var(--placeholder);}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),.15);}
.field select option{background:var(--input-bg); color:var(--ink);}
.form-success{display:none; text-align:center; font-size:14px; font-weight:700; color:var(--primary); margin-top:6px;}
.form-success.show{display:block;}
.form-error{display:none; text-align:center; font-size:13px; font-weight:600; color:#dc2626; margin-top:6px; line-height:1.5;}
.form-error.show{display:block;}
.btn-primary:disabled{opacity:.65; cursor:not-allowed; transform:none !important;}
.btn-tiktok{background:#000000; color:#fff;}
.btn-tiktok:hover{background:var(--primary); color:#fff;}
/* ============ FOOTER ============ */
.footer{background:var(--footer-ink); color:rgba(255,255,255,.7); padding-top:80px; padding-bottom:32px;}
.footer-grid{display:grid; gap:40px; grid-template-columns:1fr; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.1);}
@media(min-width:640px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media(min-width:1080px){ .footer-grid{grid-template-columns:2fr 1fr 1fr 1.2fr;} }
.footer-brand .brand{color:#fff; margin-bottom:16px;}
.footer-brand p{font-size:14px; line-height:1.7; max-width:280px; margin-bottom:20px;}
.social-row{display:flex; gap:12px;}
.social-row a{width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; transition:background .25s ease, transform .3s var(--ease-smooth);}
.social-row a:hover{background:var(--primary); transform:translateY(-4px) scale(1.08);}
.footer h4{color:#fff; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:14px; margin-bottom:16px;}
.footer-list{display:flex; flex-direction:column; gap:10px; font-size:14px;}
.footer-list a:hover{color:var(--primary);}
.footer-list li{display:flex; align-items:flex-start; gap:8px;}
.footer-list i{color:var(--primary); margin-top:3px;}
.footer-bottom{display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:space-between; padding-top:28px; font-size:12px; color:rgba(255,255,255,.4);}
@media(min-width:640px){ .footer-bottom{flex-direction:row;} }
.footer-bottom .links{display:flex; gap:24px;}
.footer-bottom a:hover{color:rgba(255,255,255,.7);}

/* ============ FLOATING WHATSAPP ============ */
.wa-float{
  position:fixed; bottom:24px; right:24px; z-index:900; width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px;
  box-shadow:var(--shadow-soft); animation:floaty 5s ease-in-out infinite, waPulse 2.6s ease-in-out infinite;
  bottom:calc(24px + env(safe-area-inset-bottom)); right:calc(24px + env(safe-area-inset-right));
  opacity:0; transform:scale(.8); pointer-events:none; transition:opacity .3s ease, transform .3s ease;
}
.wa-float.show{opacity:1; transform:scale(1); pointer-events:auto;}
@media(max-width:480px){ .wa-float{width:50px; height:50px; font-size:21px; bottom:calc(16px + env(safe-area-inset-bottom)); right:calc(16px + env(safe-area-inset-right));} }

/* ============ SCROLL PROGRESS BAR ============ */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--primary),var(--accent),var(--secondary));
  z-index:2500; transition:width .12s linear;
  box-shadow:0 0 10px rgba(var(--primary-rgb),.55);
}

/* ============ LOADER ============ */
#loader{
  position:fixed; inset:0; z-index:3000; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}
#loader.hide{opacity:0; visibility:hidden;}
.thread-spinner{width:60px; height:60px; border-radius:50%; border:3px solid var(--stitch); border-top-color:var(--primary); animation:spin .9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ============ CURSOR GLOW ============ */
#cursor-glow{
  position:fixed; width:380px; height:380px; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(var(--accent-rgb),.15), transparent 70%);
  transform:translate(-50%,-50%);
  transition:opacity .3s ease;
}
@media(max-width:768px){ #cursor-glow{display:none;} }

/* ============ ACCESSIBILITY / QUALITY FLOOR ============ */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--primary); outline-offset:3px; border-radius:8px;
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}
/* ============ SCROLL REVEAL (fallback for AOS) ============ */
[data-reveal]{opacity:0; transform:translateY(28px); filter:blur(6px); transition:opacity .9s var(--ease-smooth), transform .9s var(--ease-smooth), filter .9s var(--ease-smooth);}
[data-reveal].in{opacity:1; transform:translateY(0); filter:blur(0);}
[data-reveal="left"]{transform:translateX(-36px);}
[data-reveal="left"].in{transform:translateX(0);}
[data-reveal="right"]{transform:translateX(36px);}
[data-reveal="right"].in{transform:translateX(0);}
[data-reveal="zoom"]{transform:scale(.94);}
[data-reveal="zoom"].in{transform:scale(1);}

/* staggered entrance for grid items so cards don't all pop in at once */
.card-grid .feature-card[data-reveal],
.card-grid .service-card[data-reveal],
.product-grid .product-card[data-reveal],
.testi-track .testi-card[data-reveal]{transition-delay:calc(var(--stagger,0) * 70ms);}
.card-grid > :nth-child(1){--stagger:0} .card-grid > :nth-child(2){--stagger:1}
.card-grid > :nth-child(3){--stagger:2} .card-grid > :nth-child(4){--stagger:3}
.card-grid > :nth-child(5){--stagger:4} .card-grid > :nth-child(6){--stagger:5}
.card-grid > :nth-child(7){--stagger:6} .card-grid > :nth-child(8){--stagger:7}
.card-grid > :nth-child(9){--stagger:8} .card-grid > :nth-child(10){--stagger:9}
.testi-track > :nth-child(1){--stagger:0} .testi-track > :nth-child(2){--stagger:1}
.testi-track > :nth-child(3){--stagger:2} .testi-track > :nth-child(4){--stagger:3}
.testi-track > :nth-child(5){--stagger:4} .testi-track > :nth-child(6){--stagger:5}
.testi-track > :nth-child(7){--stagger:6} .testi-track > :nth-child(8){--stagger:7}
.testi-track > :nth-child(9){--stagger:8}

/* ============================================
   18. DARK MODE
   Default is always light ([data-theme="light"] or no attribute).
   Toggled by adding data-theme="dark" to <html> via JS (theme-toggle button).
   Preference is remembered in localStorage.
============================================ */
:root[data-theme="dark"]{
  --primary:#D9A86C;
  --primary-rgb:217,168,108;
  --secondary:#8A6B47;
  --accent:#E0B57F;
  --accent-rgb:224,181,127;
  --bg:#121110;
  --card:#1B1A18;
  --ink:#F2EEE7;
  --stitch:rgba(217,168,108,.14);
  --ink-60:rgba(242,238,231,.62);
  --ink-55:rgba(242,238,231,.55);
  --ink-50:rgba(242,238,231,.5);
  --ink-45:rgba(242,238,231,.45);
  --ink-40:rgba(242,238,231,.4);
  --ink-10:rgba(242,238,231,.12);
  --ink-05:rgba(242,238,231,.07);
  --shadow-soft:0 20px 60px -20px rgba(0,0,0,.55);
  --shadow-card:0 10px 30px -12px rgba(0,0,0,.45);

  --surface-alt:rgba(255,255,255,.03);
  --surface-alt-2:rgba(var(--primary-rgb),.07);
  --surface-glass:rgba(27,26,24,.85);
  --surface-glass-2:rgba(27,26,24,.75);
  --surface-border:rgba(255,255,255,.08);
  --nav-bg:rgba(18,17,16,.7);
  --nav-bg-scrolled:rgba(18,17,16,.92);
  --nav-bg-open:rgba(18,17,16,.98);
  --input-bg:#1F1E1B;
  --placeholder:rgba(242,238,231,.32);
  --footer-ink:#0B0A09;
  color-scheme:dark;
}

:root[data-theme="dark"] body{ -webkit-font-smoothing:subpixel-antialiased; }

/* elements that intentionally stay dark in light mode need a touch more
   contrast against the now-dark page background */
:root[data-theme="dark"] .badge-pill{background:rgba(255,255,255,.05); border-color:rgba(217,168,108,.3);}
:root[data-theme="dark"] .badge-item{background:var(--card); border-color:var(--ink-10);}
:root[data-theme="dark"] .btn-white{background:var(--card); color:var(--ink); border-color:var(--ink-10);}
:root[data-theme="dark"] .btn-light-cta{background:var(--card); color:var(--ink);}
:root[data-theme="dark"] .btn-light-cta:hover{background:var(--secondary); color:#fff;}
:root[data-theme="dark"] .stat-strip{border-top-color:rgba(217,168,108,.25);}
:root[data-theme="dark"] .lightbox{background:rgba(0,0,0,.95);}
:root[data-theme="dark"] #loader{background:var(--bg);}
:root[data-theme="dark"] .filter-btn{background:var(--card); border-color:var(--ink-10); color:var(--ink-60);}
:root[data-theme="dark"] ::selection{background:var(--primary); color:#1B1A18;}
:root[data-theme="dark"] .map-box{filter:grayscale(.25) invert(.92) contrast(.9);}
:root[data-theme="dark"] .map-overlay span{background:var(--card); color:var(--ink);}
:root[data-theme="dark"] .blob--1{background:rgba(var(--primary-rgb),.22); opacity:.6;}
:root[data-theme="dark"] .avatar{background:rgba(var(--primary-rgb),.22); color:var(--primary);}
:root[data-theme="dark"] .lookbook-dot{background:var(--ink-10);}
:root[data-theme="dark"] .fun-bubble{background:var(--card); color:var(--ink); border-color:var(--ink-10);}
:root[data-theme="dark"] .field select{background-image:none;}

/* smooth cross-fade for every themed surface when the toggle is used */
body, .navbar, .mobile-menu, .feature-card, .service-card, .float-card, .about-float,
.vm-card, .testi-card, .faq-item, .info-item, .form-card, .field input, .field select,
.field textarea, .proses-icon, .lookbook-arrow, .testi-controls button, .badge-pill,
.badge-item, .btn-white, .filter-btn, .avatar, .fun-float, .fun-bubble, .lookbook-dot{
  transition:background-color .5s var(--ease-smooth), border-color .5s var(--ease-smooth), color .5s var(--ease-smooth), box-shadow .5s var(--ease-smooth);
}

/* ============================================
   19. AMBIENT MOTION & MICRO-INTERACTIONS (BARU)
   Semua animasi di bawah ini bergerak terus-menerus (infinite) secara
   halus dan ambient — dirancang untuk terasa "hidup" tanpa mengganggu
   keterbacaan konten. Semua otomatis dinonaktifkan lewat aturan
   prefers-reduced-motion di atas.
============================================ */

/* logo/brand mark — pergerakan gradasi lembut tak terhenti */
@keyframes brandGlow{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}

/* judul dengan gradasi warna berjalan */
@keyframes gradShift{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* blob dekoratif hero & CTA — melayang perlahan membentuk lintasan organik */
@keyframes blobMove{
  0%,100%{transform:translate(0,0) scale(1);}
  25%{transform:translate(30px,-40px) scale(1.08);}
  50%{transform:translate(-20px,20px) scale(.95);}
  75%{transform:translate(24px,32px) scale(1.05);}
}

/* partikel debu kain melayang naik di hero, seperti serat kain tertiup angin */
@keyframes particleFloat{
  0%{transform:translateY(0) translateX(0); opacity:0;}
  10%{opacity:.45;}
  90%{opacity:.25;}
  100%{transform:translateY(-420px) translateX(24px); opacity:0;}
}

/* efek ken-burns lembut pada foto hero & about — zoom & pan tanpa henti */
@keyframes kenBurns{
  0%{transform:scale(1) translate(0,0);}
  100%{transform:scale(1.12) translate(-1.5%,-1%);}
}

/* garis jahitan (signature element) — "berjalan" seperti mesin jahit yang aktif */
@keyframes stitchMarch{
  to{background-position:20px 0;}
}

/* denyut halus pada ikon keunggulan produk, seperti indikator kualitas yang aktif */
@keyframes iconPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(var(--primary-rgb),.28);}
  50%{box-shadow:0 0 0 9px rgba(var(--primary-rgb),0);}
}

/* gradasi latar CTA bergeser pelan, memberi kedalaman tanpa mengalihkan perhatian dari teks */
@keyframes ctaGradShift{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}

/* denyut lembut tombol WhatsApp mengambang, menandakan tombol ini aktif/hidup */
@keyframes waPulse{
  0%,100%{box-shadow:var(--shadow-soft), 0 0 0 0 rgba(37,211,102,.45);}
  50%{box-shadow:var(--shadow-soft), 0 0 0 10px rgba(37,211,102,0);}
}

/* ============================================
   20. FUN FLOATING EASTER EGG (BARU)
   Tombol kecil yang mengambang, muncul lucu, dan kalau diklik akan
   memicu confetti + pesan lucu sebagai kejutan kecil buat pengunjung.
============================================ */
.fun-float{
  position:fixed; left:24px; bottom:24px; z-index:900;
  left:calc(24px + env(safe-area-inset-left)); bottom:calc(24px + env(safe-area-inset-bottom));
  width:54px; height:54px; border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:21px;
  box-shadow:var(--shadow-soft); border:2px solid rgba(255,255,255,.5);
  animation:funWiggle 3.2s ease-in-out infinite;
  opacity:0; transform:scale(.8); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, box-shadow .3s ease;
}
.fun-float.show{opacity:1; transform:scale(1); pointer-events:auto;}
.fun-float:hover{animation-play-state:paused; transform:scale(1.12) rotate(-6deg);}
.fun-float:active{transform:scale(.92);}
@media(max-width:480px){ .fun-float{width:46px; height:46px; font-size:18px;} }

@keyframes funWiggle{
  0%,100%{transform:rotate(0deg) translateY(0);}
  10%{transform:rotate(-10deg) translateY(-2px);}
  20%{transform:rotate(9deg) translateY(0);}
  30%{transform:rotate(-6deg);}
  40%{transform:rotate(0deg);}
}
.fun-float.show:hover{ animation:none; }

.fun-bubble{
  position:fixed; left:24px; bottom:88px; z-index:901;
  left:calc(24px + env(safe-area-inset-left)); bottom:calc(88px + env(safe-area-inset-bottom));
  max-width:240px; background:#fff; color:var(--ink); border:1px solid var(--ink-10);
  border-radius:18px 18px 18px 4px; padding:14px 16px; font-size:13px; font-weight:600; line-height:1.5;
  box-shadow:var(--shadow-card);
  opacity:0; transform:translateY(10px) scale(.92); pointer-events:none;
  transition:opacity .35s var(--ease-smooth), transform .35s var(--ease-smooth);
}
.fun-bubble.show{opacity:1; transform:translateY(0) scale(1);}
@media(max-width:480px){ .fun-bubble{max-width:200px; font-size:12.5px; bottom:calc(78px + env(safe-area-inset-bottom));} }

.confetti-piece{
  position:fixed; top:0; left:0; z-index:950; pointer-events:none;
  border-radius:2px; opacity:.95;
  animation-name:confettiFall; animation-timing-function:cubic-bezier(.25,.46,.45,.94); animation-fill-mode:forwards;
}
@keyframes confettiFall{
  0%{transform:translate(0,0) rotate(0deg); opacity:1;}
  100%{transform:translate(var(--confetti-x,0), var(--confetti-y,600px)) rotate(var(--confetti-r,540deg)); opacity:0;}
}