/* ==========================================================================
   Sze Leong — homepage experience layer v3
   1. cinematic hero: full-screen, slow push-in, graded, line-by-line reveal
   2. scroll-driven horizontal product track (pinned) — swipe rail without JS
   3. every block enters: mask wipes, staggered rises, counting numbers
   4. full-bleed parallax band between sections
   5. material list builder -> WhatsApp
   With JavaScript off everything is static, visible and scrollable.
   ========================================================================== */

/* ---------- shared reveal primitives ------------------------------------ */
.js [data-rv]{opacity:0;transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.js [data-rv].in{opacity:1;transform:none}
.js [data-rv="mask"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);
  transition:clip-path 1.05s cubic-bezier(.2,.7,.3,1)}
.js [data-rv="mask"].in{clip-path:inset(0 0 0 0)}
.js [data-rv-d="1"]{transition-delay:.08s}
.js [data-rv-d="2"]{transition-delay:.16s}
.js [data-rv-d="3"]{transition-delay:.24s}
.js [data-rv-d="4"]{transition-delay:.32s}
.js [data-rv-d="5"]{transition-delay:.40s}

/* ---------- 1. CINEMATIC HERO ------------------------------------------- */
.cine{position:relative;height:100svh;min-height:620px;overflow:hidden;background:#08150F;
  display:flex;align-items:flex-end;isolation:isolate}
.cine-bg{position:absolute;inset:0;z-index:-3;overflow:hidden}
.cine-bg img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.78) contrast(1.14) brightness(.86);
  transform:scale(1.06);animation:kb 26s ease-out forwards}
@keyframes kb{from{transform:scale(1.06)}to{transform:scale(1.2)}}
.cine::before{content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(120% 85% at 78% 18%,rgba(201,162,74,.16) 0%,rgba(201,162,74,0) 55%),
    linear-gradient(180deg,rgba(6,17,12,.86) 0%,rgba(6,17,12,.34) 34%,rgba(6,17,12,.62) 66%,rgba(6,17,12,.96) 100%)}
.cine::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
  mix-blend-mode:overlay}
.cine .wrap{width:100%;padding-bottom:58px;color:#fff;position:relative;z-index:1}

.cine-top{position:absolute;top:0;left:0;right:0;z-index:1}
.cine-eyebrow{
  display:flex;align-items:center;gap:14px;font-size:.7rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent);margin-bottom:28px
}
.cine-eyebrow::before{content:"";width:52px;height:1px;background:var(--accent);
  transform-origin:left;animation:rule 1.1s .15s cubic-bezier(.2,.7,.3,1) both}
@keyframes rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.cine h1{
  font-family:var(--h-font);font-weight:800;color:#fff;letter-spacing:-.032em;line-height:.94;
  font-size:clamp(2.3rem,5.2vw,4.6rem);margin:0 0 30px;max-width:15ch;text-shadow:0 8px 40px rgba(0,0,0,.35)
}
.cine h1 em{font-style:normal;color:var(--accent)}
.cline{display:block;overflow:hidden;padding-bottom:.04em}
.js .cline>span{display:block;transform:translateY(112%);
  transition:transform 1.05s cubic-bezier(.16,.84,.28,1)}
.js .cine.in .cline>span{transform:none}
.js .cine .cline:nth-child(2)>span{transition-delay:.1s}
.js .cine .cline:nth-child(3)>span{transition-delay:.2s}
.cine-p{color:rgba(255,255,255,.86);font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.75;
  max-width:50ch;margin:0}
.cine-btns{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}
.cine .btn--primary{background:var(--accent);color:#0C1F17;box-shadow:0 14px 34px -16px rgba(201,162,74,.9)}
.cine .btn--primary:hover{background:#EBD49B;color:#0C1F17}
.cine .btn--ghost{backdrop-filter:blur(3px)}

.cine-stats{display:grid;grid-template-columns:repeat(4,minmax(0,auto));justify-content:start;
  margin-top:54px;border-top:1px solid rgba(255,255,255,.22)}
.cine-stat{padding:24px 36px 0 0;margin-right:36px;border-right:1px solid rgba(255,255,255,.14)}
.cine-stat:last-child{border-right:0;margin-right:0;padding-right:0}
.cine-stat b{display:block;font-family:var(--h-font);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.9rem,3.2vw,2.7rem);line-height:1;color:#fff}
.cine-stat span{display:block;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-top:10px}
.cine-cue{position:absolute;right:26px;bottom:30px;z-index:2;display:flex;flex-direction:column;
  align-items:center;gap:12px;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.55)}
.cine-cue i{display:block;width:1px;height:52px;background:linear-gradient(rgba(255,255,255,.05),var(--accent));
  animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

html.lang-zh .cine h1{font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.28;letter-spacing:.012em;max-width:13ch}
html.lang-zh .cine-eyebrow{letter-spacing:.16em}
html.lang-zh .cine-stat b{font-size:clamp(1.7rem,2.8vw,2.3rem)}

/* ---------- 2a. PROOF STRIP (real yard photos, full bleed) --------------- */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)}
.proof figure{position:relative;margin:0;overflow:hidden;aspect-ratio:16/11;background:var(--bg-2)}
.proof img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.proof figure:hover img{transform:scale(1.05)}
.proof figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;color:#fff;
  background:linear-gradient(transparent,rgba(6,15,11,.9))}
.proof figcaption b{display:block;font-family:var(--h-font);font-weight:800;font-size:1.12rem;
  letter-spacing:-.01em;margin-bottom:5px}
.proof figcaption span{font-size:.8rem;line-height:1.5;color:rgba(255,255,255,.78)}
.proof-note{display:flex;align-items:center;justify-content:center;gap:12px;padding:20px 24px;
  background:var(--brand);color:rgba(255,255,255,.85);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;text-align:center}
.proof-note b{color:var(--accent);font-weight:700}

/* ---------- 2b. PRODUCT GRID (big cards) -------------------------------- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pcard{display:flex;flex-direction:column;text-decoration:none;background:#fff;
  border:1px solid var(--line);transition:border-color .3s ease,box-shadow .35s ease,transform .35s cubic-bezier(.2,.7,.3,1)}
.pcard:hover{border-color:var(--brand);box-shadow:0 26px 50px -30px rgba(16,37,32,.5);transform:translateY(-5px)}
.pcard-ph{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--bg-2)}
.pcard-ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.pcard:hover .pcard-ph img{transform:scale(1.06)}
.pcard-no{position:absolute;left:0;top:0;background:var(--brand);color:var(--accent);
  font-family:var(--h-font);font-weight:800;font-size:.72rem;letter-spacing:.14em;padding:9px 13px}
.pcard-bd{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1 1 auto}
.pcard-bd h3{font-size:1.16rem;margin:0 0 10px}
.pcard-bd p{margin:0;font-size:.9rem;line-height:1.65;color:var(--ink-3)}
.pcard-go{margin-top:auto;padding-top:18px;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand)}
.pcard:hover .pcard-go{color:var(--accent-dk)}
.pgrid-head{max-width:640px;margin-bottom:40px}
.pgrid-head h2{margin:0 0 14px}
.pgrid-head p{margin:0;color:var(--ink-2);font-size:1.04rem;line-height:1.7}

@media (max-width:1000px){.pgrid{grid-template-columns:repeat(2,1fr);gap:20px}
  .proof{grid-template-columns:1fr 1fr}
  .proof figure:last-child{grid-column:span 2;aspect-ratio:2/1}}
@media (max-width:620px){.pgrid{grid-template-columns:1fr}
  .proof{grid-template-columns:1fr}
  .proof figure:last-child{grid-column:span 1;aspect-ratio:16/11}}

/* ---------- 3. FULL-BLEED PARALLAX BAND --------------------------------- */
.band{position:relative;height:clamp(360px,58vh,560px);overflow:hidden;isolation:isolate;
  display:flex;align-items:center}
.band-bg{position:absolute;inset:-14% 0;z-index:-2;will-change:transform}
.band-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.1) brightness(.8)}
.band::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(6,17,12,.9) 0%,rgba(6,17,12,.55) 55%,rgba(6,17,12,.3) 100%)}
.band .wrap{color:#fff}
.band h2{color:#fff;max-width:22ch;margin:0 0 16px}
.band p{color:rgba(255,255,255,.82);max-width:46ch;margin:0 0 26px}
.band .band-eyebrow{display:flex;align-items:center;gap:12px;font-size:.7rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
.band .band-eyebrow::before{content:"";width:40px;height:1px;background:var(--accent)}

/* ---------- 4. LIST BUILDER --------------------------------------------- */
.xbuild{background:var(--brand);color:#fff;position:relative;overflow:hidden}
.xbuild::before{content:"";position:absolute;right:-140px;top:-140px;width:520px;height:520px;
  border:1px solid rgba(201,162,74,.18);border-radius:50%}
.xbuild::after{content:"";position:absolute;right:-60px;bottom:-220px;width:420px;height:420px;
  border:1px solid rgba(201,162,74,.12);border-radius:50%}
.xbuild .wrap{padding-top:86px;padding-bottom:86px;position:relative;z-index:1}
.xbuild h2{color:#fff;margin-bottom:14px}
.xbuild-eyebrow{display:flex;align-items:center;gap:12px;font-size:.7rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
.xbuild-eyebrow::before{content:"";width:40px;height:1px;background:var(--accent)}
.xbuild-lede{color:rgba(255,255,255,.78);max-width:56ch;margin:0 0 40px}
.xbuild-grid{display:grid;grid-template-columns:1.3fr .95fr;gap:38px;align-items:start}
.xitems{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.xitem{
  display:flex;align-items:center;gap:14px;padding:15px 17px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);cursor:pointer;
  transition:border-color .22s ease,background .22s ease,transform .22s ease
}
.xitem:hover{border-color:rgba(201,162,74,.75);background:rgba(255,255,255,.08);transform:translateX(3px)}
.xitem:has(input:checked){border-color:var(--accent);background:rgba(201,162,74,.14)}
.xitem input[type=checkbox]{
  appearance:none;width:19px;height:19px;flex:none;border:1px solid rgba(255,255,255,.55);
  background:transparent;cursor:pointer;position:relative;border-radius:2px;transition:.18s ease
}
.xitem input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
.xitem input[type=checkbox]:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #10261F;
  border-width:0 2px 2px 0;transform:rotate(45deg)
}
.xitem-txt{flex:1 1 auto;min-width:0}
.xitem-txt b{display:block;font-size:.93rem;font-weight:600;line-height:1.3}
.xitem-txt small{display:block;font-size:.7rem;color:rgba(255,255,255,.55);margin-top:3px;
  letter-spacing:.08em;text-transform:uppercase}
.xqty{display:flex;align-items:center;flex:none;border:1px solid rgba(255,255,255,.22)}
.xqty button{width:32px;height:32px;background:transparent;border:0;color:#fff;font-size:1rem;
  line-height:1;cursor:pointer;transition:background .18s ease}
.xqty button:hover{background:rgba(255,255,255,.14)}
.xqty input{width:46px;height:32px;border:0;background:transparent;color:#fff;text-align:center;
  font:600 .92rem/1 var(--b-font);-moz-appearance:textfield}
.xqty input::-webkit-outer-spin-button,.xqty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.xsummary{background:#fff;color:var(--ink);padding:28px 26px;position:sticky;top:100px;
  box-shadow:0 30px 60px -34px rgba(0,0,0,.6)}
.xsummary h3{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 18px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.xsummary h3 em{font-style:normal;font-family:var(--h-font);font-size:1.5rem;color:var(--brand);letter-spacing:0}
.xlist{list-style:none;margin:0 0 20px;padding:0;min-height:92px}
.xlist li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:.92rem;animation:pop .3s cubic-bezier(.2,.7,.3,1)}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.xlist li b{font-weight:600;white-space:nowrap;color:var(--brand)}
.xempty{font-size:.9rem;color:var(--ink-3);line-height:1.6;padding:10px 0}
.xsummary .btn{width:100%;justify-content:center}
.xsummary .note{margin:14px 0 0;font-size:.78rem;line-height:1.6;color:var(--ink-3)}
.xbuild-fallback{margin-top:22px}
.js .xbuild-fallback{display:none}

/* list builder with a faint yard photo behind the green (products page) */
.xbuild--photo .xbuild-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.xbuild--photo .xbuild-bg img{width:100%;height:100%;object-fit:cover;opacity:.18;
  filter:saturate(.7) contrast(1.06) brightness(.9)}
.xbuild--photo .xbuild-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,36,30,.82) 0%,rgba(18,36,30,.9) 55%,rgba(18,36,30,.95) 100%)}
.xbuild--photo .wrap{z-index:2}

/* ---------- 5. misc ------------------------------------------------------ */
.xhead{max-width:640px;margin-bottom:38px}
.xhead h2{margin:0 0 14px}
.xhead p{margin:0;color:var(--ink-2);font-size:1.04rem;line-height:1.72}

/* ---------- responsive --------------------------------------------------- */
@media (max-width:1000px){
  .xbuild-grid{grid-template-columns:1fr;gap:26px}
  .xsummary{position:static}
  .cine-stats{grid-template-columns:repeat(2,1fr)}
  .cine-stat{padding:20px 20px 8px 0;margin-right:0;border-right:0}
  .cine-stat:nth-child(odd){border-right:1px solid rgba(255,255,255,.14)}
  .cine-stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
}
@media (max-width:820px){
  .js .track-sticky{position:relative;height:auto;padding:64px 0 58px}
  .js .track-rail{overflow-x:auto;transform:none !important}
  .track-prog{display:none}
  .js .track-nav{display:flex}
  .xitems{grid-template-columns:1fr}
  .cine{height:auto;min-height:0;padding-top:64px}
  .cine .wrap{padding-bottom:46px}
  .cine-cue{display:none}
  .band{height:auto;padding:70px 0}
}
@media (prefers-reduced-motion:reduce){
  .cine-bg img{animation:none;transform:none}
  .cine-cue i,.track-hint i{animation:none}
  .js [data-rv],.js [data-rv="mask"]{opacity:1;transform:none;clip-path:none;transition:none}
  .js .cline>span{transform:none}
  .band-bg,.cine-bg{transform:none !important}
}