/* BAMBOO sections */
.sec { position: relative; }
.bg-dark { background: var(--c-bg); }
.bg-surface { background: var(--c-surface); }
.bg-cream { background: var(--c-cream); color: #0a0a0a; }
.bg-cream h1, .bg-cream h2, .bg-cream h3 { color: #0a0a0a; }
.bg-cream .eyebrow { color: #7a5c00; }
.bg-accent { background: var(--c-accent); color: #0a0a0a; }
.bg-accent h1, .bg-accent h2, .bg-accent h3, .bg-accent .eyebrow { color: #0a0a0a; }
.pad-none { padding-block: 0; }
.pad-compact { padding-block: clamp(48px, 6vw, 90px); }
.pad-normal { padding-block: clamp(72px, 9vw, 140px); }
.pad-spacious { padding-block: var(--section-space); }

h1 em, h2 em, h3 em { font-style: normal; color: var(--c-accent); }
.bg-cream em { color: #7a5c00; }
.bg-accent em { color: #0a0a0a; border-bottom: 0.06em solid #0a0a0a; }

.page-home .site-footer { margin-top: 0; }

/* Animation start states: hidden only while the animation script is active */
html.js:not(.anim-off):not(.no-gsap) [data-anim] { opacity: 0; }
html.js:not(.anim-off):not(.no-gsap) [data-split]:not(.is-split),
html.js:not(.anim-off):not(.no-gsap) [data-scrub-words]:not(.is-split) { visibility: hidden; }

/* Split words (mask reveal) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.wi { display: inline-block; will-change: transform; }
.sw { display: inline; }

/* Bamboo-line pattern (temporary placeholder until real photos are added) */
.pattern-bamboo {
  background-color: var(--c-surface-2);
  background-image: repeating-linear-gradient(90deg, transparent 0 46px, color-mix(in srgb, var(--c-accent) 8%, transparent) 46px 50px);
}

/* ---------- Hero ---------- */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden;
  background: radial-gradient(ellipse 60% 70% at 72% 55%, color-mix(in srgb, var(--c-accent) 10%, transparent), transparent 62%), var(--c-bg);
}
.hero__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1.6s var(--ease-out);
}
.hero.is-3d-ready .hero__canvas { opacity: 1; }
.hero.no-webgl .hero__canvas { display: none; }
/* Dark scrims so the text stays readable over the 3D scene */
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.78) 0%, rgba(10, 10, 10, 0) 58%),
    linear-gradient(0deg, rgba(10, 10, 10, 0.85) 0%, rgba(10, 10, 10, 0) 32%);
}
.hero__content {
  position: absolute; z-index: 2; left: var(--gutter);
  bottom: clamp(90px, 14vh, 160px); max-width: min(780px, 88vw);
}
.hero__title { font-size: clamp(3rem, 8vw, 8.6rem); line-height: 0.95; margin-bottom: 0.35em; }
.hero__lead { max-width: 46ch; margin-bottom: 2rem; font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--c-beige); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__scroll {
  position: absolute; z-index: 2; right: var(--gutter); bottom: 34px;
  display: flex; align-items: center; gap: 14px;
  font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--c-beige);
}
.hero__scroll span { display: block; width: 1px; height: 56px; background: var(--c-accent); animation: scrollLine 2.4s var(--ease-in-out) infinite; }
@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Statement ---------- */
.statement { max-width: 1180px; }
.statement__text {
  margin: 0; font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(1.9rem, 4.6vw, 4.4rem); line-height: 1.16; color: var(--c-cream);
}

/* ---------- Category showcase ---------- */
.cats { position: relative; display: flex; align-items: center; height: 100vh; overflow: hidden; }
.cats__track { display: flex; align-items: stretch; gap: 2vw; height: 78vh; padding-inline: var(--gutter); will-change: transform; }
.cats__track::after { content: ''; flex: 0 0 var(--gutter); }
.cats__intro { flex: 0 0 min(36vw, 480px); display: flex; flex-direction: column; justify-content: center; }
.cats__intro h2 { font-size: clamp(2.4rem, 4.6vw, 4.6rem); }

.cat-panel {
  position: relative; display: block; flex: 0 0 min(40vw, 600px); overflow: hidden;
  border: 1px solid var(--c-line); background: var(--c-surface-2); will-change: transform;
}
.cat-panel--featured { flex-basis: min(54vw, 840px); }
.cat-panel__media { position: absolute; inset: 0; }
.cat-panel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); }
.cat-panel:hover .cat-panel__media img, .cat-panel:focus-visible .cat-panel__media img { transform: scale(1.06); }
.cat-panel__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 10, 10, 0.88), rgba(10, 10, 10, 0) 58%); }
.cat-panel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.11), transparent 45%);
}
.cat-panel:hover::after { opacity: 1; }
.cat-panel__num { position: absolute; top: 24px; left: 28px; font-family: var(--font-heading); font-size: 1.1rem; letter-spacing: 0.2em; color: var(--c-accent); }
.cat-panel__body { position: absolute; left: 28px; right: 28px; bottom: 28px; display: grid; gap: 10px; }
.cat-panel__name { margin: 0; font-size: clamp(2.4rem, 4.4vw, 4.6rem); }
.cat-panel--featured .cat-panel__name { font-size: clamp(3rem, 6vw, 6.4rem); }
.cat-panel__desc { max-width: 38ch; color: var(--c-beige); }
.cat-panel__cta {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 6px;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-accent);
}
.cat-panel__cta svg { transition: transform 0.5s var(--ease-out); }
.cat-panel:hover .cat-panel__cta svg { transform: translateX(8px); }
.cats__progress { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 4vh; height: 1px; background: var(--c-line); }
.cats__progress span { display: block; height: 100%; background: var(--c-accent); transform: scaleX(0); transform-origin: left; }

/* ---------- Story ---------- */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.media-frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--c-line); }
.media-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story__mark { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c-accent); opacity: 0.22; }
.story__mark .logo-mark { width: 46%; height: auto; }
.story__mark .logo-word { display: none; }

/* ---------- Why choose ---------- */
.why__head { max-width: 800px; margin-bottom: clamp(48px, 6vw, 96px); }
.why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.why-item { padding-top: 28px; border-top: 1px solid var(--c-line); position: relative; }
.why-item::before {
  content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--ease-out);
}
.why-item:hover::before { transform: scaleX(1); }
.why-item__num {
  display: block; margin-bottom: 18px; font-family: var(--font-heading); font-size: 3.4rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--c-accent);
}
.why-item h3 { font-size: 1.7rem; }
.why-item p { color: var(--c-beige); margin: 0; }

/* ---------- Promo ---------- */
.promo { overflow: hidden; }
.marquee { overflow: hidden; white-space: nowrap; margin-bottom: clamp(40px, 6vw, 80px); }
.marquee__track { display: inline-flex; animation: marquee 32s linear infinite; }
.marquee span { padding-right: 0.5em; font-family: var(--font-heading); font-size: clamp(3.5rem, 11vw, 10rem); line-height: 1; color: #0a0a0a; }
@keyframes marquee { to { transform: translateX(-50%); } }
.promo__body { display: grid; gap: 8px; justify-items: start; }
.promo__body h2 { max-width: 16ch; font-size: clamp(2.4rem, 5.5vw, 5.2rem); }
.promo__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.bg-accent .btn { border-color: #0a0a0a; color: #0a0a0a; }
.bg-accent .btn::before { background: #0a0a0a; }
.bg-accent .btn:hover, .bg-accent .btn:focus-visible { color: var(--c-accent); }
.bg-accent .btn--primary { background: #0a0a0a; color: var(--c-accent); }
.bg-accent .btn--primary::before { background: var(--c-cream); }
.bg-accent .btn--primary:hover, .bg-accent .btn--primary:focus-visible { color: #0a0a0a; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .cats { display: block; height: auto; overflow: visible; padding-block: var(--section-space); }
  .cats__track { flex-direction: column; height: auto; padding-inline: var(--gutter); gap: 20px; }
  .cats__track::after { display: none; }
  .cats__intro { flex: none; margin-bottom: 24px; }
  .cat-panel, .cat-panel--featured { flex: none; min-height: 62vh; }
  .cats__progress { display: none; }
  .story { grid-template-columns: 1fr; }
  .why__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hero__content { bottom: 72px; }
  .hero__scroll { display: none; }
  .hero::after { background: linear-gradient(0deg, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.4) 45%, rgba(10, 10, 10, 0) 70%); }
  .why__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .hero__scroll span { animation: none; transform: none; }
}

/* ===== Batch 5C: per-section background effects, hover effects and mobile settings ===== */
.sec { position: relative; }
.sec.fx-glow::before, .sec.fx-gradient::before, .sec.fx-lines::before, .sec.fx-grain::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.sec.fx-glow::before { background: radial-gradient(60% 55% at 50% 0%, rgba(255, 200, 0, 0.16), transparent 70%); }
.sec.fx-gradient::before { background: linear-gradient(135deg, rgba(255, 200, 0, 0.12), transparent 55%, rgba(255, 200, 0, 0.06)); }
.sec.fx-lines::before { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 120px); }
.sec.fx-grain::before { opacity: 0.35; background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1.2px); background-size: 4px 4px; }
.sec.fx-glow > *, .sec.fx-gradient > *, .sec.fx-lines > *, .sec.fx-grain > * { position: relative; z-index: 1; }

.sec.hover-lift :is(article, figure, .card, [class*="card"]),
.sec.hover-zoom :is(article, figure, .card, [class*="card"]),
.sec.hover-glow :is(article, figure, .card, [class*="card"]) { transition: transform 0.45s ease, box-shadow 0.45s ease; }
.sec.hover-lift :is(article, figure, .card, [class*="card"]):hover { transform: translateY(-8px); }
.sec.hover-zoom :is(article, figure, .card, [class*="card"]):hover { transform: scale(1.03); }
.sec.hover-glow :is(article, figure, .card, [class*="card"]):hover { box-shadow: 0 0 0 1px var(--c-accent), 0 12px 40px rgba(255, 200, 0, 0.22); }

@media (max-width: 640px) {
  .sec.mob-hide { display: none; }
  .sec.mpad-none { padding-block: 0; }
  .sec.mpad-compact { padding-block: 40px; }
  .sec.mpad-normal { padding-block: 64px; }
  .sec.mpad-spacious { padding-block: 96px; }
}


/* ---------- Hero showroom selector ---------- */
.hero__reel { position: absolute; right: clamp(20px, 5vw, 64px); bottom: clamp(104px, 17vh, 160px); z-index: 3; display: flex; gap: 18px; }
.hero__reel-btn { display: grid; gap: 4px; min-width: 74px; padding: 0; text-align: left; color: var(--c-muted); cursor: pointer; background: none; border: 0; transition: color 0.4s; }
.hero__reel-btn:hover, .hero__reel-btn:focus-visible, .hero__reel-btn.is-active { color: var(--c-cream); }
.hero__reel-num { font-family: var(--font-heading, serif); font-size: 1.05rem; color: var(--c-accent); letter-spacing: 0.05em; }
.hero__reel-label { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; }
.hero__reel-bar { display: block; height: 2px; margin-top: 6px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.hero__reel-bar i { display: block; height: 100%; background: var(--c-accent); transform: scaleX(0); transform-origin: left; }
.hero:not(.is-3d-ready) .hero__reel, .hero.no-webgl .hero__reel { display: none; }
@media (max-width: 768px) {
  .hero__reel { right: 0; left: 0; bottom: 64px; justify-content: center; gap: 14px; }
  .hero__reel-btn { min-width: 0; }
  .hero__reel-label { font-size: 0.6rem; letter-spacing: 0.14em; }
}


/* Hero on phones: text at the top, showroom underneath, selector at the bottom */
@media (max-width: 768px) {
  .hero { min-height: 660px; }
  .hero__content { top: clamp(88px, 13svh, 120px); bottom: auto; right: var(--gutter); max-width: none; }
  .hero__title { font-size: clamp(2.3rem, 10.5vw, 3.2rem); }
  .hero::after { background: linear-gradient(180deg, rgba(10, 10, 10, 0.82) 0%, rgba(10, 10, 10, 0.55) 38%, rgba(10, 10, 10, 0) 58%), linear-gradient(0deg, rgba(10, 10, 10, 0.7) 0%, rgba(10, 10, 10, 0) 22%); }
  .hero__reel { bottom: 26px; }
  .hero__scroll, .hero [class*="scroll"] { display: none; }
}