/* ============================================================
   BONA'LISSA — home.css
   ============================================================ */

/* ---------- HERO ---------- */
.hero{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display:flex; align-items:center;
  background:
    radial-gradient(ellipse 90% 65% at 78% 18%, rgba(201,162,94,.16), transparent 60%),
    radial-gradient(ellipse 70% 60% at 10% 90%, rgba(110,44,44,.10), transparent 60%),
    var(--ink);
  overflow: hidden;
}
.hero-particles{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:1; opacity: .9;
}
.hero-inner{
  position: relative; z-index: 4;
  width:100%; max-width:1280px; margin:0 auto; padding: 0 48px;
  display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; gap:40px;
  padding-top: var(--header-h);
}
@media (max-width: 900px){
  .hero-inner{
    grid-template-columns: 1fr;
    padding: calc(var(--header-h) + 34px) 24px 0;
    gap: 0;
  }
  .hero-gem-col{ order:2; min-height: 0; margin-top: 18px; }
  .hero-copy{ order:1; }
}

.hero-eyebrow{
  display:flex; align-items:center; gap:14px;
  font-size: 12px; letter-spacing:.34em; text-transform:uppercase;
  color: var(--gold-bright);
  opacity:0; transform: translateY(18px);
}
.hero-eyebrow::before{ content:''; width:34px; height:1px; background: var(--gold-bright); }

.hero-title{
  font-family: var(--serif);
  color: var(--cream);
  font-weight: 400;
  font-size: clamp(46px, 7.2vw, 96px);
  line-height: 1.03;
  margin: 22px 0 26px;
}
.hero-title .line{ overflow:hidden; display:block; }
.hero-title .line > *{ display:block; transform: translateY(102%); }
.hero-title em{ font-style: italic; color: var(--gold-bright); font-weight:400; }

.hero-sub{
  max-width: 420px;
  color: rgba(244,237,226,.78);
  font-size: 16.5px; line-height: 1.75; font-weight: 300;
  opacity:0; transform: translateY(18px);
}
.hero-cta{
  margin-top: 40px;
  display:flex; align-items:center; gap: 28px; flex-wrap:wrap;
  opacity:0; transform: translateY(18px);
}
.hero-cta .text-link{ color: var(--gold-pale); border-color: rgba(228,207,164,.35); }

.hero-scroll-cue{
  position:absolute; left:48px; bottom:38px; z-index:4;
  display:flex; align-items:center; gap:12px;
  color: rgba(244,237,226,.55);
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  opacity:0;
}
.hero-scroll-cue .cue-line{ width:1px; height:38px; background: rgba(244,237,226,.3); position:relative; overflow:hidden; }
.hero-scroll-cue .cue-line::after{ content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--gold-bright); animation: cueDrop 2.2s ease-in-out infinite; }
@keyframes cueDrop{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }
@media (max-width: 860px){ .hero-scroll-cue{ left:24px; bottom:24px; } }

/* ---------- HERO MARK (animated brand clover — replaces old ring/gem) ---------- */
.hero-gem-col{ position:relative; display:flex; align-items:center; justify-content:center; min-height: 420px; }

.hero-mark-wrap{
  position:relative; z-index:3;
  perspective: 1200px;
  opacity:0; transform: scale(.82);
  width: min(64vw, 380px); aspect-ratio: 1/1;
  display:flex; align-items:center; justify-content:center;
}
.hero-mark-glow{
  position:absolute; inset:-18%;
  background: radial-gradient(circle, rgba(201,162,94,.4), transparent 66%);
  filter: blur(14px);
  z-index:0; pointer-events:none;
}
.hero-mark-layer{ position:absolute; inset:0; }
.hero-mark-layer svg{ width:100%; height:100%; display:block; overflow:visible; }
.hero-mark-layer .mark-line{ stroke: var(--gold-bright); stroke-width: 1.1; fill:none; }

.layer-outer{ opacity:.4; }
.layer-outer .mark-line{ stroke-width: .9; }
.layer-inner{ inset: 11%; opacity:.55; }
.layer-inner path{ fill: rgba(201,162,94,.16); stroke: rgba(228,207,164,.5); stroke-width: .9; }

.hero-mark-core{ position:relative; z-index:2; width:46%; filter: drop-shadow(0 8px 24px rgba(0,0,0,.35)); }
.hero-mark-core svg{ width:100%; display:block; overflow:visible; }
.hero-mark-core .mark-line{ stroke: var(--gold-bright); stroke-width: 1.6; }
@media (max-width: 900px){
  .hero-mark-wrap{ width: min(52vw, 240px); }
}

/* ---------- LOGO WATERMARKS (used sparingly across sections) ---------- */
/* ---------- LOGO WATERMARKS moved to css/style.css (loaded on every page) ---------- */

/* ---------- MARQUEE STRIP ---------- */
.marquee-strip{
  background: var(--cream-deep);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 26px 0;
  overflow:hidden;
  white-space:nowrap;
}
.marquee-track{ display:inline-flex; gap:56px; animation: marquee 34s linear infinite; }
.marquee-track span{
  font-family: var(--serif); font-style:italic; font-size: 22px; color: var(--ink-soft);
  display:inline-flex; align-items:center; gap:56px;
}
.marquee-track span::after{ content:'\2726'; font-style:normal; color: var(--gold); font-size:12px; margin-left:56px; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform: translateX(-50%); } }

/* ---------- INTRO / FILOSOFIA ---------- */
.intro-section{ background: var(--cream); }
.intro-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items:start; }
.intro-heading{
  font-size: clamp(30px, 3.6vw, 46px); line-height:1.16; font-weight:400;
}
.intro-copy{ font-size:16px; line-height:1.85; color: var(--ink-soft); max-width: 480px; }
.intro-copy p + p{ margin-top:18px; }
.intro-values{ margin-top:40px; display:flex; flex-direction:column; gap:22px; }
.intro-value{ display:flex; gap:18px; align-items:flex-start; }
.intro-value .num{ font-family: var(--serif); font-size:15px; color: var(--gold); padding-top:2px; }
.intro-value h4{ font-family: var(--sans); font-size:14.5px; letter-spacing:.02em; font-weight:500; margin-bottom:4px; }
.intro-value p{ font-size:14.5px; color: var(--ink-soft); line-height:1.6; margin:0; max-width:340px; }
@media (max-width: 900px){ .intro-grid{ grid-template-columns: 1fr; gap:48px; } }

/* ---------- SHOWCASE PIN (horizontal scroll) ---------- */
.showcase-pin{ background: var(--ink); overflow:hidden; height:100vh; display:flex; flex-direction:column; justify-content:center; }
.showcase-head{ padding: 0 48px; margin-bottom:44px; }
@media (max-width:860px){ .showcase-head{ padding:0 24px; } }
.showcase-head .eyebrow{ color: var(--gold-bright); }
.showcase-head h2{ font-size: clamp(30px,4.4vw,54px); color: var(--cream); max-width:620px; }
.showcase-track{ display:flex; gap: 32px; padding: 0 48px; will-change: transform; }
.showcase-item{
  position:relative; flex: 0 0 auto;
  width: min(64vw, 420px); height: 66vh; max-height:560px;
  overflow:hidden;
}
.showcase-item img{ width:100%; height:100%; object-fit:cover; transform: scale(1.05); transition: transform .8s var(--ease); }
.showcase-item:hover img{ transform: scale(1.12); }
.showcase-cap{
  position:absolute; left:0; right:0; bottom:0; padding: 26px 24px;
  background: linear-gradient(to top, rgba(0,0,0,.62), transparent);
  color: var(--cream);
}
.showcase-cap .cap-eyebrow{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color: var(--gold-bright); margin-bottom:6px; }
.showcase-cap h3{ font-size:24px; font-weight:400; color: var(--cream); }
@media (max-width:900px){
  /* On touch devices the JS pinned horizontal-scroll animation is disabled
     (see pinShowcase() in home.js), so fall back to a native, swipeable
     horizontal scroller instead of a clipped, immovable row. */
  .showcase-pin{ height:auto; padding: 70px 0; }
  .showcase-track{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 0 24px 14px;
    scrollbar-width: none;
  }
  .showcase-track::-webkit-scrollbar{ display:none; }
  .showcase-item{ width: 78vw; height: 52vh; scroll-snap-align: start; }
}

/* ---------- VALUES / STATS ---------- */
.stats-section{ background: var(--cream-deep); }
.stats-row{ display:grid; grid-template-columns: repeat(4,1fr); gap:32px; text-align:center; }
.stat-block{ padding: 12px; border-left: 1px solid var(--line-gold); }
.stat-block:first-child{ border-left:none; }
.stat-num{ font-family: var(--serif); font-size: clamp(34px,4vw,52px); color: var(--gold); }
.stat-label{ margin-top:8px; font-size:12.5px; letter-spacing:.1em; color: var(--ink-soft); }
@media (max-width: 860px){ .stats-row{ grid-template-columns: repeat(2,1fr); gap:28px 20px; } .stat-block{ border-left:none; } }

/* ---------- CATALOG TEASER ---------- */
.cat-teaser-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
.cat-teaser-card{
  position:relative; aspect-ratio: 3/4; overflow:hidden;
  background: var(--ink);
}
.cat-teaser-card img{ width:100%; height:100%; object-fit:cover; opacity:.82; transition: transform .8s var(--ease), opacity .5s; }
.cat-teaser-card:hover img{ transform: scale(1.07); opacity:1; }
.cat-teaser-info{
  position:absolute; left:0; right:0; bottom:0; padding: 24px;
  display:flex; justify-content:space-between; align-items:flex-end;
  color: var(--cream);
}
.cat-teaser-info h3{ font-size:21px; font-weight:400; }
.cat-teaser-info span{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color: var(--gold-pale); }
@media (max-width: 860px){ .cat-teaser-grid{ grid-template-columns: 1fr; } }

/* ---------- VISIT CTA ---------- */
.visit-section{
  background: var(--ink); color: var(--cream);
  padding: 130px 0;
  position: relative;
}
.visit-grid{ display:grid; grid-template-columns: 1fr auto; align-items:center; gap: 40px; }
.visit-grid h2{ font-size: clamp(30px,4.6vw,58px); font-weight:400; max-width: 640px; }
.visit-grid h2 em{ font-style:italic; color: var(--gold-bright); }
@media (max-width: 760px){ .visit-grid{ grid-template-columns: 1fr; text-align:left; } }