/* ============================================================
   OPULENCE BEAUTY — Home page styles
   ============================================================ */

/* ---- Breathing intro ---- */
#intro{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  transition:opacity 1.2s var(--ease), visibility 1.2s;
}
#intro.done{ opacity:0; visibility:hidden; pointer-events:none; }
.intro-orb{
  position:absolute; width:60vmin; height:60vmin; border-radius:50%;
  background:radial-gradient(circle, rgba(201,162,75,0.22), transparent 65%);
  filter:blur(8px); animation:breathe 4s var(--ease) infinite;
}
.intro-logo{ height:78px; width:auto; margin-bottom:30px; opacity:0; animation:fadeUp 1.4s var(--ease) .3s forwards; position:relative; }
.intro-breath{ display:flex; align-items:center; gap:22px; position:relative; }
.intro-breath span:not(.b-dot){ font-family:var(--font-display); font-style:italic; font-size:clamp(1.6rem,5vw,2.6rem); letter-spacing:.04em; color:var(--cream); }
.intro-breath .b1{ opacity:0; animation:fadeUp 1.6s var(--ease) .6s forwards; }
.intro-breath .b2{ opacity:0; animation:fadeUp 1.6s var(--ease) 1.9s forwards; }
.intro-breath .b-dot{ width:5px; height:5px; border-radius:50%; background:var(--gold); opacity:0; animation:fadeUp 1s var(--ease) 1.3s forwards; }
.intro-word{ font-family:var(--font-sans); font-size:.7rem; letter-spacing:.6em; text-transform:uppercase; color:var(--gold); margin-top:26px; opacity:0; animation:fadeUp 1.4s var(--ease) 2.6s forwards; }
@keyframes breathe{ 0%,100%{ transform:scale(.85); opacity:.6; } 50%{ transform:scale(1.15); opacity:1; } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* ---- Hero ---- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ position:absolute; top:-6%; left:0; width:100%; height:112%; object-fit:cover; object-position:60% center; }
.hero-veil{ position:absolute; inset:0; background:
  linear-gradient(100deg, var(--ink) 18%, rgba(10,9,8,0.72) 46%, rgba(10,9,8,0.30) 70%, rgba(10,9,8,0.55) 100%),
  linear-gradient(0deg, var(--ink) 2%, transparent 30%); }
.hero-orb{ position:absolute; right:-8vw; top:30%; width:46vmin; height:46vmin; border-radius:50%;
  background:radial-gradient(circle, var(--gold-glow), transparent 60%); filter:blur(20px); z-index:1; animation:breathe 8s var(--ease) infinite; }
.hero-inner{ position:relative; z-index:3; padding-top:90px; }
.hero h1{ margin:24px 0 0; font-size:clamp(2.9rem, 7.2vw, 6.4rem); line-height:1.04; white-space:nowrap; }
.hero-sub{ max-width:46ch; margin-top:34px; }
.hero-actions{ display:flex; align-items:center; gap:34px; flex-wrap:wrap; margin-top:42px; }
.hero-scroll{ position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:12px; }
.hero-scroll span{ font-size:.62rem; letter-spacing:.4em; text-transform:uppercase; color:var(--cream-mute); }
.hero-scroll i{ width:1px; height:46px; background:linear-gradient(var(--gold),transparent); position:relative; overflow:hidden; }
.hero-scroll i::after{ content:""; position:absolute; top:-46px; left:0; width:1px; height:46px; background:var(--gold); animation:scrolldot 2.4s var(--ease) infinite; }
@keyframes scrolldot{ to{ transform:translateY(92px); } }

/* ---- Philosophy ---- */
.philosophy{ padding-block:clamp(90px,13vw,180px); }
.philo-text{ max-width:20ch; margin:26px auto 0; font-weight:300; }
.philosophy .philo-text{ max-width:24ch; }
.philo-tags{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:50px; }

/* ---- Signature services ---- */
.sec-head{ max-width:720px; margin-bottom:clamp(48px,7vw,90px); }
.sec-head .eyebrow{ margin-bottom:22px; }
.svc-list{ display:flex; flex-direction:column; gap:clamp(60px,9vw,130px); }
.svc-row{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(34px,6vw,90px); align-items:center; position:relative; }
.svc-row.reverse{ grid-template-columns:1.1fr 0.9fr; }
.svc-row.reverse .svc-media{ order:2; }
.svc-row.reverse .svc-body{ order:1; }
.svc-num{ position:absolute; top:-46px; left:0; font-family:var(--font-display); font-size:clamp(4rem,9vw,7rem); color:transparent; -webkit-text-stroke:1px rgba(201,162,75,0.28); z-index:0; line-height:1; }
.svc-media{ aspect-ratio:4/3; }
.svc-row.reverse .svc-num{ left:auto; right:0; }
.svc-body{ position:relative; z-index:2; }
.svc-body h3{ margin-bottom:18px; }
.svc-body .lead{ max-width:44ch; margin-bottom:26px; }
.svc-media img{ transition:transform 1.2s var(--ease-out); }
.svc-row:hover .svc-media img{ transform:scale(1.05); }

/* ---- Sustainability band ---- */
.sustain{ position:relative; overflow:hidden; padding-block:clamp(110px,16vw,220px); }
.sustain-media{ position:absolute; inset:-10% 0; z-index:0; }
.sustain-media img{ width:100%; height:120%; object-fit:cover; object-position:center 30%; }
.sustain-veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(8,7,6,0.92) 30%, rgba(8,7,6,0.55) 70%, rgba(8,7,6,0.78)); }
.sustain-inner{ position:relative; z-index:2; }
.sustain-card{ max-width:560px; }
.sustain-card h2{ margin:20px 0 22px; }

/* ---- Founder ---- */
.founder-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(40px,7vw,90px); align-items:center; }
.founder-media{ aspect-ratio:3/4; }
.founder-body h2{ margin:18px 0 24px; }
.founder-body .lead{ margin-bottom:22px; }
.founder-body .muted{ font-family:var(--font-display); font-style:italic; font-size:1.3rem; line-height:1.6; color:var(--cream-dim); border-left:1px solid var(--line); padding-left:24px; margin-bottom:32px; }

/* ---- Education ---- */
.edu-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(40px,7vw,90px); align-items:center; }
.edu-media{ aspect-ratio:4/3; }
.edu-body h2{ margin:18px 0 22px; }
.edu-body .lead{ max-width:42ch; margin-bottom:26px; }

/* ---- CTA ---- */
.cta{ position:relative; overflow:hidden; padding-block:clamp(110px,16vw,200px); }
.cta-orb{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:70vmin; height:70vmin; border-radius:50%; background:radial-gradient(circle, var(--gold-glow), transparent 62%); filter:blur(24px); z-index:0; animation:breathe 9s var(--ease) infinite; }
.cta .wrap{ position:relative; z-index:2; }
.cta h2{ margin:22px 0 26px; }

@media (max-width:600px){
  .hero h1{ white-space:normal; font-size:clamp(2.6rem,11vw,3.4rem); }
}
@media (max-width:860px){
  .svc-row, .svc-row.reverse{ grid-template-columns:1fr; gap:28px; }
  .svc-row.reverse .svc-media{ order:0; } .svc-row.reverse .svc-body{ order:0; }
  .svc-num, .svc-row.reverse .svc-num{ top:-38px; left:0; right:auto; }
  .founder-grid, .edu-grid{ grid-template-columns:1fr; gap:36px; }
  .edu-media{ order:-1; }
  .founder-media{ max-width:440px; }
}