/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: #272727;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 68px;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 40%, rgba(10,10,10,0.60) 100%);
}

/* ============================================================
   TYPOGRAPHIC STACK
   ============================================================ */
.hero-type-stack {
  position: relative;
  z-index: 10;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
}

.hero-ghost {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(14vw, 20vw, 22vw);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: rgba(226, 207, 196, 0.75);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-ghost.visible { opacity: 1; transform: translateY(0); }

.hero-ghost-2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(14vw, 20vw, 22vw);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: rgba(196, 136, 106, 0.55);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.hero-ghost-2.visible { opacity: 1; }

.hero-ghost-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: -0.12em;
}

.hero-sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(5vw, 4.5vw, 58px);
  color: #E2CFC4;
  line-height: 1;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 12;
  align-self: flex-start;
  padding-left: clamp(24px, 6vw, 120px);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.35s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}
.hero-sub.visible { opacity: 1; transform: translateY(0); }

/* Coffee shop eyebrow tag */
.hero-coffee-tag {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #C4886A;
  margin-bottom: 20px;
  position: relative;
  z-index: 12;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1) 0.05s, transform 0.6s cubic-bezier(0.16,1,0.3,1) 0.05s;
}
.hero-coffee-tag.visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   BRASS RULE WITH ADDRESS
   ============================================================ */
.hero-rule-wrap {
  position: relative;
  z-index: 10;
  width: min(60%, 680px);
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(24px, 3.5vw, 48px);
  opacity: 0;
  transform: scaleX(0.7);
  transform-origin: left center;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.55s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.55s;
}
.hero-rule-wrap.visible { opacity: 1; transform: scaleX(1); }

.hero-rule-line {
  flex: 1;
  height: 1px;
  background: #C4886A;
  opacity: 0.7;
}
.hero-rule-address {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #D4A990;
  white-space: nowrap;
}

/* ============================================================
   MICRO LABELS
   ============================================================ */
.hero-micro-labels {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.hero-micro-label {
  position: absolute;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(212, 169, 144, 1);
  opacity: 0;
  transition: opacity 0.9s ease;
}
.hero-micro-label.visible { opacity: 1; }
.hero-micro-label--est {
  top: calc(68px + 14%);
  left: 6%;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transition-delay: 0.7s;
}
.hero-micro-label--eat {
  top: calc(68px + 18%);
  right: 6%;
  transition-delay: 0.8s;
}
.hero-micro-label--brunch {
  bottom: 28%;
  left: 5%;
  transition-delay: 0.9s;
}

/* ============================================================
   ORRERY RING
   ============================================================ */
.hero-orrery {
  position: absolute;
  z-index: 8;
  right: clamp(-80px, -4vw, -40px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(260px, 36vw, 520px);
  height: clamp(260px, 36vw, 520px);
  opacity: 0;
  transition: opacity 1.2s ease 0.4s;
}
.hero-orrery.visible { opacity: 1; }

.orrery-ring-group {
  animation: orrery-spin 40s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes orrery-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.orrery-main-ring {
  stroke-dasharray: 1508;
  stroke-dashoffset: 1508;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}
.hero-orrery.visible .orrery-main-ring { stroke-dashoffset: 0; }

/* ============================================================
   CTA BUTTONS
   ============================================================ */
.hero-cta-wrap {
  position: relative;
  z-index: 10;
  margin-top: clamp(32px, 5vw, 64px);
  display: flex;
  gap: 12px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease 0.75s, transform 0.8s ease 0.75s;
}
.hero-cta-wrap.visible { opacity: 1; transform: translateY(0); }

.hero-cta {
  display: inline-block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #E2CFC4;
  border: 1px solid rgba(226, 207, 196, 0.5);
  padding: 14px 36px;
  border-radius: 2px;
  transition: background 250ms ease, border-color 250ms ease, color 250ms ease;
}
.hero-cta:hover {
  background: rgba(226, 207, 196, 0.1);
  border-color: rgba(226, 207, 196, 0.9);
}

.hero-cta-book {
  display: inline-block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #272727;
  background: #E2CFC4;
  border: 1px solid #E2CFC4;
  padding: 14px 36px;
  border-radius: 2px;
  transition: background 250ms ease, color 250ms ease;
}
.hero-cta-book:hover {
  background: #C4886A;
  border-color: #C4886A;
  color: #E2CFC4;
}

/* ============================================================
   HERO RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .hero-orrery {
    right: clamp(-120px, -10vw, -60px);
    width: clamp(200px, 55vw, 360px);
    height: clamp(200px, 55vw, 360px);
    opacity: 0.5;
  }
  .hero-orrery.visible { opacity: 0.5; }
  .hero-micro-label--eat { right: 3%; }
}

@media (max-width: 768px) {
  .hero-ghost { font-size: clamp(22vw, 28vw, 38vw); }
  .hero-ghost-2 { font-size: clamp(22vw, 28vw, 38vw); }
  .hero-sub {
    font-size: clamp(7vw, 8vw, 11vw);
    padding-left: 24px;
    align-self: center;
  }
  .hero-rule-wrap { width: 85%; }
  .hero-orrery {
    right: -40%;
    top: auto;
    bottom: 10%;
    transform: none;
    width: 75vw;
    height: 75vw;
    opacity: 0.18;
  }
  .hero-orrery.visible { opacity: 0.18; }
  .hero-micro-label--est { left: 4%; top: calc(68px + 8%); }
  .hero-micro-label--eat { right: 4%; }
  .hero-micro-label--brunch { left: 4%; }
}

@media (max-width: 480px) {
  .hero-sub { font-size: 9vw; }
  .hero-ghost { font-size: 28vw; }
}