/* =====================================================================
   LUXE v120 — The Luna Dao · luxury bilingual typography & fluid gold
   Loaded LAST. English is primary; Chinese hanzi are decorative only.
   ===================================================================== */
:root{
  --ann-h: 40px;
  --luxe-gold-deep:#8E6E30;
  --luxe-gold:#C9A84C;
  --luxe-champagne:#D4AF7A;
  --luxe-cream:#F6E9C4;
  --luxe-flow: linear-gradient(96deg,#8E6E30 0%,#C9A84C 24%,#F6E9C4 42%,#D4AF7A 58%,#C9A84C 74%,#8E6E30 100%);
}

/* ============ 1. ANNOUNCEMENT + FIXED NAV: no more crowding ============ */
.announcement-bar{
  min-height:0;
  padding-top:8px; padding-bottom:8px;
  font-size:12px; letter-spacing:.6px;
}
.announcement-track span{ padding:0 34px; }
.ann-ico{ width:12px; height:12px; }
.announcement-close{ width:22px; height:22px; line-height:20px; font-size:.95rem; }

/* fixed nav sits BELOW the (in-flow) announcement bar on the home hero,
   then glides to the top once the bar scrolls away */
.is-home .header#header{ top:var(--ann-h); }
.is-home .header#header.nv-scrolled{ top:0; }
.header#header{
  transition: top .45s cubic-bezier(.4,0,.2,1), background .4s ease,
              box-shadow .4s ease, border-color .4s ease;
}
.is-home .hero-v97{ padding-top:calc(118px + var(--ann-h)); }
@media (max-width:860px){
  .is-home .hero-v97{ padding-top:calc(96px + var(--ann-h)); }
}

/* ============ 2. FLUID GOLD DISPLAY TITLES ============ */
@keyframes luxeFlow{ 0%{background-position:0% 50%;} 100%{background-position:220% 50%;} }
.is-home .hero-h1,
.is-home .section-header h2,
.is-home .section-head h2,
.is-home .cg-title,
.is-home .story-content h2,
.is-home .community-content h2{
  background-image:var(--luxe-flow);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:luxeFlow 11s linear infinite;
}
.is-home .hero-h1 em{ -webkit-text-fill-color:var(--luxe-champagne); }
/* keep the hero entrance rise AND layer the gold shimmer on top */
.is-home .hero-h1{
  opacity:1;
  animation:heroRise 1.1s cubic-bezier(.2,.7,.2,1) .3s forwards,
            luxeFlow 11s linear 1s infinite;
}
@media (prefers-reduced-motion:reduce){
  .is-home .hero-h1,.is-home .section-header h2,.is-home .section-head h2,
  .is-home .cg-title,.is-home .story-content h2,.is-home .community-content h2{ animation:none; }
}
/* gentler, slower shimmer on smaller headings */
.is-home .section-header h2,.is-home .section-head h2,.is-home .cg-title,
.is-home .story-content h2,.is-home .community-content h2{ animation-duration:16s; }

/* ============ 3. BILINGUAL CHAPTER SEAL (Chinese = ornament only) ============ */
.han-chapter{
  display:block; width:44px; height:44px; margin:0 auto 16px;
  text-align:center; line-height:42px;
  font-family:var(--font-display); font-size:22px; color:var(--luxe-gold);
  border:1px solid rgba(201,168,76,.34); border-radius:9px;
  background:radial-gradient(circle at 50% 28%,rgba(201,168,76,.16),rgba(20,16,12,.45));
  box-shadow:inset 0 0 14px rgba(201,168,76,.14), 0 8px 22px rgba(0,0,0,.4);
  position:relative;
}
.han-chapter::after{
  content:""; position:absolute; left:50%; bottom:-11px; width:1px; height:10px;
  background:linear-gradient(180deg,rgba(201,168,76,.5),transparent); transform:translateX(-50%);
}
.cg-content .han-chapter,
.story-content .han-chapter,
.community-content .han-chapter{ margin-left:0; }
.section-header.center .han-chapter,
.section-head[style*="center"] .han-chapter,
.section-head.text-center .han-chapter{ margin-left:auto; margin-right:auto; }

/* consistent luxury section-header rhythm */
.is-home .section-header{ margin-bottom:14px; }
.is-home .section-eyebrow,
.is-home .c-eyebrow{ letter-spacing:3px; }
.is-home .section-header h2,
.is-home .section-head h2{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(27px,3.4vw,40px); line-height:1.08; letter-spacing:.4px;
  margin:6px 0 14px;
}
.is-home .section-lead{ max-width:620px; margin:0 auto; }

/* ============ 4. SECTION RHYTHM & SOFT CHAPTER FIELDS ============ */
.is-home .mood-section,
.is-home .act2-section,
.is-home .intention-section,
.is-home .featured-coll-section{ padding-top:128px; padding-bottom:128px; position:relative; }
@media (max-width:860px){
  .is-home .mood-section,.is-home .act2-section,
  .is-home .intention-section,.is-home .featured-coll-section{ padding-top:84px; padding-bottom:84px; }
}
/* warm editorial field that groups the catalog so cards don't float on flat black */
.is-home .act2-section::before{
  content:""; position:absolute; inset:4% -6%; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 46% at 50% 0%, rgba(201,168,76,.07), transparent 72%),
    radial-gradient(72% 52% at 50% 100%, rgba(212,175,122,.05), transparent 74%);
}
.is-home .act2-section .container{ position:relative; z-index:1; }
/* hairline chapter rule above merchandising sections */
.is-home .act2-section .section-header::before,
.is-home .intention-section .section-header::before{
  content:""; display:block; width:54px; height:1px; margin:0 auto 26px;
  background:linear-gradient(90deg,transparent,rgba(201,168,76,.55),transparent);
}

/* ============ 5. PREMIUM PRODUCT GRID (the "shop" moment) ============ */
.is-home .intent-grid{ gap:30px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.is-home .intent-card{
  display:flex; flex-direction:column;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(30,23,15,.82),rgba(15,12,9,.8));
  border:1px solid rgba(201,168,76,.14);
  box-shadow:0 12px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(245,237,216,.045);
  overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s, border-color .5s;
}
.is-home .intent-card:hover{
  transform:translateY(-10px);
  border-color:rgba(201,168,76,.42);
  box-shadow:0 22px 60px rgba(0,0,0,.55), 0 0 46px rgba(201,168,76,.14);
}
.is-home .intent-card .product-image-link{ display:block; }
.is-home .intent-card .product-image{
  aspect-ratio:1/1; width:100%; overflow:hidden; position:relative; background:#14100C;
}
.is-home .intent-card .product-image img{
  transition:transform .9s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
.is-home .intent-card:hover .product-image img{ transform:scale(1.07); filter:brightness(1.05); }
.is-home .intent-card .product-info{
  padding:22px 22px 24px; display:flex; flex-direction:column; flex:1;
}
.is-home .intent-card .product-name{
  font-family:var(--font-display); font-size:20px; line-height:1.24;
  color:#F5EDD8; margin:10px 0 4px; text-decoration:none;
  transition:color .3s ease;
}
.is-home .intent-card .product-name:hover{ color:var(--luxe-gold); }
.is-home .intent-card .product-rating{ margin:2px 0 0; }
.is-home .intent-card .product-price{
  margin-top:auto; padding-top:16px; display:flex; align-items:baseline; gap:10px;
}
.is-home .intent-card .price{
  font-family:var(--font-mono); font-size:15px; letter-spacing:.6px; color:var(--luxe-gold);
}
.is-home .intent-card .compare-price{
  font-family:var(--font-mono); font-size:12.5px; color:#6B5F50; text-decoration:line-through;
}
/* quick-add: full-width pill docked on a soft scrim at the image foot */
.is-home .intent-card .product-image::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:96px; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(10,8,6,.55) 55%,rgba(10,8,6,.82));
}
.is-home .quick-add{
  position:absolute; left:14px; right:14px; bottom:14px; z-index:2;
  width:auto; margin:0;
  border:1px solid rgba(201,168,76,.6); color:var(--luxe-gold);
  background:rgba(14,11,8,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-radius:999px; padding:12px 16px; text-align:center;
  font-family:var(--font-mono); font-size:11px; letter-spacing:1.4px; text-transform:uppercase;
  cursor:pointer; opacity:1; transform:none;
  transition:background .3s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.is-home .quick-add:hover{
  background:var(--luxe-gold); color:#0A0806; border-color:var(--luxe-gold);
  box-shadow:0 8px 26px rgba(201,168,76,.28);
}

/* filter pills — a touch more couture */
.is-home .intent-pills{ margin:34px 0 46px; gap:11px; }
.is-home .intent-pill{ padding:10px 22px; border-radius:999px; }

/* quiz entry — harmonize with the shop field */
.is-home .quiz-entry{
  margin-top:64px; border-radius:16px;
  background:linear-gradient(160deg,rgba(32,25,16,.72),rgba(17,13,9,.82));
}

/* ============ 6. HERO BESTSELLER TRIPTYCH ============ */
.is-home .hero-strip{ z-index:4; }
.is-home .hs-card{
  background:rgba(20,16,12,.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(201,168,76,.16); border-radius:14px;
  transition:transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.is-home .hs-card:hover{
  transform:translateY(-5px); border-color:rgba(201,168,76,.4);
  box-shadow:0 18px 50px rgba(0,0,0,.5), 0 0 34px rgba(201,168,76,.12);
}
.is-home .hs-add{
  border:1px solid rgba(201,168,76,.5); color:var(--luxe-gold); background:transparent;
  border-radius:999px; transition:background .3s ease,color .3s ease;
}
.is-home .hs-add:hover{ background:var(--luxe-gold); color:#0A0806; }

/* ============ 7. MOOD / CATEGORY CARDS — quiet cohesion ============ */
.is-home .mood-card,.is-home .cat-card{ border-radius:16px; }
.is-home .mood-card{ transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s, box-shadow .4s; }
.is-home .mood-card:hover{ transform:translateY(-6px); border-color:rgba(201,168,76,.4); box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 34px rgba(201,168,76,.1); }

/* ============ 8. MOBILE ============ */
@media (max-width:860px){
  /* hero becomes a vertical stack so the static bestseller strip goes full-width below copy */
  .is-home .hero-v97{ flex-direction:column; align-items:stretch; }
  .is-home .hero-v97 .hero-inner{ width:100%; }
  /* hero bestseller triptych -> clean static stack, never overflows */
  .is-home .hero-strip{
    position:static !important; left:auto !important; right:auto !important; bottom:auto !important;
    transform:none !important; width:100%; max-width:100%; align-self:stretch; box-sizing:border-box;
    padding:0 18px; margin:34px 0 0;
  }
  .is-home .hero-strip-inner{
    display:grid !important; grid-template-columns:minmax(0,1fr) !important;
    gap:12px; transform:none !important; width:100%; min-width:0; box-sizing:border-box;
  }
  .is-home .hero-strip .hs-card{ display:flex !important; width:100%; min-width:0; max-width:100%; box-sizing:border-box; padding:12px 14px; }
  .is-home .hs-meta{ min-width:0; }
  .is-home .hs-add{ white-space:nowrap; padding:8px 14px; }
  .is-home .hs-img{ width:56px; height:56px; flex:0 0 56px; }
}
@media (max-width:600px){
  .announcement-bar{ font-size:11px; padding-left:0; }
  .announcement-track span{ padding:0 18px; }
  .is-home .intent-grid{ gap:18px; }
  .is-home .intent-card .product-info{ padding:18px 18px 20px; }
  .han-chapter{ width:40px; height:40px; line-height:38px; font-size:20px; }
  /* keep the mobile header from overflowing: keep burger, language, cart */
  .nv97-inner{ padding:0 14px; gap:10px; }
  .nv97-right{ gap:4px; }
  .nv97-right a[href="/wishlist"],
  .nv97-right a[href="/account/login"]{ display:none; }
}
@media (max-width:1024px){ .is-home .intent-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .is-home .intent-grid{ grid-template-columns:minmax(0,1fr); } }

/* ============ 9. HORIZONTAL OVERFLOW GUARD ============ */
html, body { overflow-x: clip; max-width: 100%; }
#three-canvas, #cosmic-bg, #fusion-layer { max-width: 100%; }

/* ============================================================
   SIGNATURE PIECE — cinematic product film band (build128)
   ============================================================ */
.signature-section{ position:relative; padding:110px 0; background:transparent; }
.signature-inner{
  display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:64px; align-items:center; max-width:1080px;
}
.signature-media{ display:flex; justify-content:center; }
.signature-frame{
  position:relative; width:100%; max-width:340px; aspect-ratio:9/14.6;
  border-radius:18px; overflow:hidden;
  border:1px solid rgba(201,168,76,.28);
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(212,175,122,.06), 0 0 60px rgba(201,168,76,.10);
  background:#0F0B07;
}
.signature-video{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); }
.signature-ring{
  position:absolute; inset:-1px; border-radius:18px; pointer-events:none;
  box-shadow: inset 0 0 60px rgba(201,168,76,.10);
  animation:sigGlow 6s ease-in-out infinite;
}
@keyframes sigGlow{ 0%,100%{ box-shadow: inset 0 0 50px rgba(201,168,76,.06);} 50%{ box-shadow: inset 0 0 90px rgba(201,168,76,.18);} }
.signature-copy .section-eyebrow{ margin-bottom:14px; }
.signature-title{
  font-family:var(--font-serif,'Cormorant Garamond',serif);
  font-weight:500; font-size:clamp(30px,3.4vw,46px); line-height:1.04;
  letter-spacing:-.6px; margin:0 0 18px; color:#F5EDD8;
  background:linear-gradient(100deg,#F5EDD8 0%,#E7C988 42%,#C9A84C 60%,#F5EDD8 100%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; animation:luxeFlow 9s linear infinite;
}
.signature-lead{ color:#9C8F7A; font-size:16px; line-height:1.75; max-width:560px; margin:0 0 22px; }
.signature-points{ list-style:none; margin:0 0 28px; padding:0; display:grid; gap:10px; }
.signature-points li{
  position:relative; padding-left:26px; color:#D8CDB6; font-size:14.5px; line-height:1.5;
}
.signature-points li::before{
  content:'✦'; position:absolute; left:0; top:0; color:#C9A84C; font-size:12px;
}
.signature-actions{ display:flex; flex-wrap:wrap; gap:14px; }
.signature-fine{ margin:18px 0 0; font-family:var(--font-mono,'DM Mono',monospace); font-size:10px; letter-spacing:.4px; text-transform:uppercase; color:#6B5F50; max-width:480px; }
@media (max-width:860px){
  .signature-section{ padding:72px 0; }
  .signature-inner{ grid-template-columns:minmax(0,1fr); gap:36px; }
  .signature-media{ order:-1; }
  .signature-frame{ max-width:280px; }
  .signature-actions .btn{ flex:1 1 auto; text-align:center; }
}