/* ==========================================================================
   El Cappuccino — homepage hero, rev 8: black marble + gold (no photo)
   Loaded after vibe.css. Scoped to .hero-marble so other pages are untouched.
   ========================================================================== */
body.elc .hero.hero-marble {
  --frame-inset: clamp(14px, 2.2vw, 28px);
  min-height: clamp(620px, 90vh, 940px);
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #070708;
  isolation: isolate;
}

/* —— Marble slab —— */
.hero-marble-bg,
.hero-marble-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-marble-bg { z-index: 0; display: block; }
.hero-marble-bg img {
  object-fit: cover;
  object-position: center;
  transition: filter 1.4s ease;
  animation: elc-marble-in 1.6s ease both;
}

/* readability: soft dark pool behind the type, warm glow, edge vignette */
.hero-marble-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 46% at 50% 47%, rgba(201,164,76,0.075) 0%, rgba(201,164,76,0) 70%),
    radial-gradient(ellipse 44% 50% at 50% 50%, rgba(6,6,7,0.62) 0%, rgba(6,6,7,0.38) 55%, rgba(6,6,7,0) 100%),
    radial-gradient(ellipse 110% 95% at 50% 50%, rgba(0,0,0,0) 58%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(7,7,8,0) 78%, rgba(7,7,8,0.8) 100%);
}
.hero-marble-shade::after {
  /* night: warmer, lower glow — fades in with the mood */
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
  background:
    radial-gradient(ellipse 58% 42% at 50% 58%, rgba(214,160,72,0.15) 0%, rgba(214,160,72,0) 70%),
    radial-gradient(ellipse 120% 100% at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.45) 100%);
}
html:not([data-theme="day"]) body.elc .hero.hero-marble .hero-marble-bg img { filter: brightness(0.74) saturate(1.12) sepia(0.12); }
html:not([data-theme="day"]) body.elc .hero.hero-marble .hero-marble-shade::after { opacity: 1; }

/* slow polished-stone sheen (one pass every ~18s) */
.hero-marble-sheen {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}
.hero-marble-sheen::before {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 42%;
  background: linear-gradient(100deg,
    rgba(255,236,196,0) 0%,
    rgba(255,236,196,0) 28%,
    rgba(255,236,196,0.05) 46%,
    rgba(255,240,210,0.075) 50%,
    rgba(255,236,196,0.05) 54%,
    rgba(255,236,196,0) 72%,
    rgba(255,236,196,0) 100%);
  transform: translate3d(-120%, 0, 0) rotate(10deg);
  animation: elc-marble-sheen 18s cubic-bezier(0.45, 0.05, 0.35, 1) 1.5s infinite;
  will-change: transform;
}

/* —— Gold hairline frame + corner ornaments —— */
.hero-frame {
  position: absolute;
  inset: var(--frame-inset);
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(201,164,76,0.32);
  animation: elc-marble-in 1.8s ease 0.25s both;
}
.hero-frame::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(201,164,76,0.11);
}
.hero-corner {
  position: absolute;
  width: 46px;
  height: 46px;
}
.hero-corner::before {
  /* brighter gold L that sits on the outer hairline */
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  border-top: 1px solid #e6c97f;
  border-left: 1px solid #e6c97f;
  -webkit-mask: linear-gradient(135deg, #000 55%, transparent 100%);
  mask: linear-gradient(135deg, #000 55%, transparent 100%);
}
.hero-corner::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 12px;
  width: 6px;
  height: 6px;
  background: #d9b765;
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(236,208,140,0.4);
}
.hero-corner--tl { top: 0; left: 0; }
.hero-corner--tr { top: 0; right: 0; transform: scaleX(-1); }
.hero-corner--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.hero-corner--br { bottom: 0; right: 0; transform: scale(-1, -1); }

/* —— Content —— */
body.elc .hero.hero-marble .hero-marble-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(4.25rem, 9vh, 6.5rem) 0 clamp(5rem, 10vh, 7rem);
}
.hero-marble-inner > * { animation: elc-hero-rise 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-marble-inner > :nth-child(1) { animation-delay: 0.15s; }
.hero-marble-inner > :nth-child(2) { animation-delay: 0.3s; }
.hero-marble-inner > :nth-child(3) { animation-delay: 0.45s; }
.hero-marble-inner > :nth-child(4) { animation-delay: 0.55s; }
.hero-marble-inner > :nth-child(5) { animation-delay: 0.65s; }
.hero-marble-inner > :nth-child(6) { animation-delay: 0.75s; }

body.elc .hero.hero-marble .hero-badge {
  margin: 0 0 1.5rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  color: #d8bf86;
  text-shadow: none;
  gap: 0.9rem;
}
body.elc .hero.hero-marble .hero-badge::before,
body.elc .hero.hero-marble .hero-badge::after {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(201,164,76,0), rgba(201,164,76,0.85));
}
body.elc .hero.hero-marble .hero-badge::after { background: linear-gradient(270deg, rgba(201,164,76,0), rgba(201,164,76,0.85)); }

.hero-wordmark {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-cliff {
  width: clamp(150px, 15vw, 200px);
  height: auto;
  fill: none;
  stroke: #d4b062;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.95;
  margin: 0 0 0.35rem;
  filter: drop-shadow(0 0 6px rgba(201,164,76,0.25));
}
.hero-wordmark-name {
  display: block;
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-weight: 600;
  font-size: clamp(3.4rem, 8vw, 6.5rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  padding: 0 0.06em 0.06em;
  background: linear-gradient(180deg, #f7e9c2 0%, #e2c47e 42%, #bf9442 78%, #a37a2f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 22px rgba(0,0,0,0.65));
}
.hero-wordmark-sub {
  display: block;
  margin-top: 0.85rem;
  padding-left: 0.5em; /* optically re-centre the tracked caps */
  font-family: var(--font-sans, Manrope, sans-serif);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.5em;
  line-height: 1;
  text-transform: uppercase;
  color: #cbbd9e;
}

.hero-divider {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 1.75rem 0 1.6rem;
}
.hero-divider::before,
.hero-divider::after {
  content: "";
  width: clamp(48px, 6vw, 84px);
  height: 1px;
  background: linear-gradient(90deg, rgba(201,164,76,0), rgba(201,164,76,0.8));
}
.hero-divider::after { background: linear-gradient(270deg, rgba(201,164,76,0), rgba(201,164,76,0.8)); }
.hero-divider span {
  width: 6px;
  height: 6px;
  border: 1px solid #e3c47c;
  transform: rotate(45deg);
}

body.elc .hero.hero-marble .hero-mood-slot { width: 100%; }
body.elc .hero.hero-marble h1 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 500;
  line-height: 1.15;
  max-width: none;
  margin: 0 auto 0.85rem;
  color: #f3ecdf;
  text-shadow: 0 2px 22px rgba(0,0,0,0.75);
}
body.elc .hero.hero-marble h1 em { font-weight: 500; white-space: nowrap; }
body.elc .hero.hero-marble .tagline {
  margin: 0 auto 1.7rem;
  max-width: 36rem;
  font-size: clamp(0.95rem, 1.4vw, 1.04rem);
  line-height: 1.7;
  color: #cfc7b8;
  text-shadow: 0 1px 14px rgba(0,0,0,0.8);
}
body.elc .hero.hero-marble .hero-meta {
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d9d0c0;
  gap: 0.5rem 2.2rem;
  margin: 0 0 2.1rem;
}
body.elc .hero.hero-marble .hero-actions { justify-content: center; }

/* Day / Night switch: quiet pill, centred on the frame's bottom edge */
body.elc .hero.hero-marble .hero-mood-toggle {
  right: auto;
  left: 50%;
  bottom: calc(var(--frame-inset) + 1.1rem);
  transform: translateX(-50%);
  background: rgba(8,8,9,0.55);
  border-color: rgba(201,164,76,0.32);
  animation: elc-marble-in 1.4s ease 1s both;
}
body.elc .hero.hero-marble .hero-mood-toggle button { font-size: 0.62rem; padding: 0.4rem 0.95rem; letter-spacing: 0.22em; }

/* —— Motion —— */
@keyframes elc-marble-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes elc-hero-rise {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes elc-marble-sheen {
  0% { transform: translate3d(-120%, 0, 0) rotate(10deg); }
  55%, 100% { transform: translate3d(300%, 0, 0) rotate(10deg); }
}

/* —— Mobile —— (tight enough that all three CTAs clear the sticky Call bar on a 390×844 screen) */
@media (max-width: 559px) {
  body.elc .hero.hero-marble { --frame-inset: 10px; min-height: 0; }
  body.elc .hero.hero-marble .hero-marble-inner {
    width: calc(100% - 3rem);
    padding: 1.35rem 0 4.6rem;
  }
  .hero-corner { width: 30px; height: 30px; }
  .hero-corner::after { top: 9px; left: 9px; width: 5px; height: 5px; }
  body.elc .hero.hero-marble .hero-badge { font-size: 0.58rem; letter-spacing: 0.22em; gap: 0.6rem; margin-bottom: 0.7rem; }
  body.elc .hero.hero-marble .hero-badge::before,
  body.elc .hero.hero-marble .hero-badge::after { width: 1.2rem; }
  .hero-cliff { width: 104px; margin-bottom: 0.1rem; }
  .hero-wordmark-name { font-size: clamp(2.5rem, 11.6vw, 3.1rem); }
  .hero-wordmark-sub { display: none; } /* the header brand right above already says it */
  .hero-divider { margin: 0.7rem 0 0.75rem; }
  .hero-divider::before, .hero-divider::after { width: 44px; }
  body.elc .hero.hero-marble h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }
  body.elc .hero.hero-marble .tagline { font-size: 0.88rem; line-height: 1.55; margin-bottom: 0.95rem; }
  body.elc .hero.hero-marble .hero-meta { flex-direction: column; align-items: center; gap: 0.3rem; font-size: 0.62rem; letter-spacing: 0.12em; margin-bottom: 1.05rem; }
  body.elc .hero.hero-marble .hero-actions { width: 100%; gap: 0.5rem; }
  body.elc .hero.hero-marble .hero-actions .btn-lg { padding-top: 0.95rem; padding-bottom: 0.95rem; }
  body.elc .hero.hero-marble .hero-actions .btn-outline { padding-top: 0.8rem; padding-bottom: 0.8rem; }
  body.elc .hero.hero-marble .hero-mood-toggle { bottom: calc(var(--frame-inset) + 0.85rem); }
}

/* —— Reduced motion: no sheen, no rise, no fades —— */
@media (prefers-reduced-motion: reduce) {
  .hero-marble-sheen { display: none; }
  .hero-marble-bg img,
  .hero-frame,
  .hero-marble-inner > *,
  body.elc .hero.hero-marble .hero-mood-toggle { animation: none !important; }
  .hero-marble-bg img,
  .hero-marble-shade::after { transition: none !important; }
}