/* ============================================================
   Bell, hero, and section styling for Second Bell Studio
   ============================================================ */

/* ---------- bell ---------- */
.bell-unit { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.bell-btn {
  position: relative; border: none; border-radius: 50%; padding: 0;
  background:
    radial-gradient(circle at 40% 32%, #f6dd98, #c2873a 55%, #7c531f 100%);
  box-shadow:
    inset 0 2px 6px rgba(255,245,210,.65),
    inset 0 -6px 14px rgba(80,48,16,.6),
    0 8px 22px rgba(40,22,8,.45);
  display: grid; place-items: center; color: #6f4a1c;
  transition: transform .12s ease;
}
.bell-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(227,184,100,.55);
  animation: bellPulse 2.6s ease-out infinite;
}
@keyframes bellPulse {
  0% { box-shadow: 0 0 0 0 rgba(227,184,100,.5); }
  70%,100% { box-shadow: 0 0 0 18px rgba(227,184,100,0); }
}
.bell-btn:hover { transform: scale(1.05); }
.bell-btn:active { transform: scale(.95); }
.bell-ico { display: grid; place-items: center; width: 100%; height: 100%; transform-origin: 50% 14%; }
.bell-btn.ringing .bell-ico { animation: bellShake .8s cubic-bezier(.36,.07,.19,.97); }
@keyframes bellShake {
  0%,100% { transform: rotate(0); }
  10% { transform: rotate(11deg); } 25% { transform: rotate(-9deg); }
  40% { transform: rotate(7deg); } 55% { transform: rotate(-5deg); }
  70% { transform: rotate(3deg); } 85% { transform: rotate(-1.5deg); }
}
.bell-wave {
  position: absolute; left: 50%; top: 50%; width: 100%; height: 100%;
  border: 2px solid rgba(227,184,100,.7); border-radius: 50%;
  transform: translate(-50%,-50%) scale(1); opacity: .8;
  animation: bellWave 1.1s ease-out forwards; pointer-events: none;
}
@keyframes bellWave { to { transform: translate(-50%,-50%) scale(3); opacity: 0; } }
.bell-cap { font-size: 22px; line-height: 1; transform: rotate(-4deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column;
  background: var(--wood-900); color: var(--on-wood); overflow: hidden;
}
.hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 50%;
  transform: scale(1.04); will-change: transform;
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(20,10,7,.86) 0%, rgba(20,10,7,.5) 38%, rgba(20,10,7,.12) 62%, rgba(20,10,7,.5) 100%),
    linear-gradient(to top, rgba(20,10,7,.92) 0%, rgba(20,10,7,.3) 34%, rgba(20,10,7,.4) 100%);
}
.hero-vignette { position: absolute; inset: 0; box-shadow: inset 0 0 200px 60px rgba(15,7,4,.6); pointer-events: none; }

.hero-inner { position: relative; z-index: 3; flex: 1; display: flex; flex-direction: column; }

.hero-body { flex: 1; display: flex; align-items: center; }
.hero-grid { width: 100%; }
.hero-eyebrow { color: var(--brass-bright); }
.hero-eyebrow::before { background: var(--brass-bright); }
.hero h1 {
  font-size: clamp(40px, 7.4vw, 96px); line-height: .98; letter-spacing: -.035em;
  font-weight: 800; max-width: 16ch; margin-top: 22px;
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.hero h1 .em { color: var(--brass-bright); font-style: normal; position: relative; white-space: nowrap; }
.hero h1 .strike { position: relative; opacity: .65; }
.hero h1 .strike::after {
  content: ""; position: absolute; left: -2%; right: -2%; top: 52%; height: 4px;
  background: var(--red-bright); transform: rotate(-2.2deg);
  border-radius: 2px;
}
.hero-sub { font-size: clamp(18px, 2.1vw, 22px); color: rgba(243,233,214,.82); max-width: 46ch; margin-top: 26px; line-height: 1.55; }
.hero-cta { display: flex; align-items: center; gap: 22px; margin-top: 38px; flex-wrap: wrap; }

.hero-bell-zone { display: flex; align-items: center; gap: 16px; }
.hero-bell-note { font-family: var(--hand); color: var(--brass-bright); font-size: 21px; line-height: 1.15; max-width: 12ch; }

/* hero top bar */
.nav {
  position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter); gap: 20px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--on-wood); }
.brand-mark {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 32%, #f6dd98, #c2873a 55%, #7c531f 100%);
  color: #6f4a1c; box-shadow: inset 0 1px 3px rgba(255,245,210,.6), 0 3px 8px rgba(0,0,0,.35);
  flex: none;
}
.brand-name { font-family: var(--display); font-weight: 800; letter-spacing: -.01em; font-size: 19px; }
.brand-name small { display: block; font-weight: 600; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--brass-bright); margin-top: -2px; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 15px; color: rgba(243,233,214,.82); transition: color .2s; }
.nav-links a:hover { color: var(--brass-bright); }
.nav-pill {
  font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .04em;
  padding: 9px 16px; border: 1.5px solid rgba(227,184,100,.45); border-radius: 100px;
  color: var(--brass-bright); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.nav-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brass-bright); box-shadow: 0 0 0 0 rgba(227,184,100,.7); animation: bellPulse 2.4s infinite; }

.hero-foot {
  position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 var(--gutter) 30px; gap: 24px; color: rgba(243,233,214,.6);
  font-size: 13px; letter-spacing: .04em;
}
.hero-foot .marq { display: flex; gap: 26px; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; flex-wrap: wrap; }
.hero-foot .marq span { opacity: .8; }
.scroll-hint { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; }
.scroll-hint .line { width: 1px; height: 30px; background: linear-gradient(var(--brass-bright), transparent); animation: scrollLine 1.8s ease-in-out infinite; }
@keyframes scrollLine { 0%,100% { opacity: .3; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } }

@media (max-width: 760px) {
  .nav-links { display: none; }
  .hero h1 { margin-top: 14px; }
  .hero-foot .marq { display: none; }
}