/* hero.css — inside the showroom: the diamond turning in the light. */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: max(56px, env(safe-area-inset-top)) var(--gutter) 84px;
  overflow: hidden;
  color: #fff;
  text-align: center;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 45% at 50% 44%, rgba(255, 238, 222, 0.0) 0%, rgba(160, 98, 90, 0.18) 60%, rgba(120, 70, 64, 0.55) 100%),
    linear-gradient(180deg, rgba(150, 90, 84, 0.52) 0%, rgba(196, 140, 128, 0.25) 40%, rgba(150, 90, 84, 0.6) 100%),
    url("../assets/img/interior-soft.webp") center / cover no-repeat,
    var(--rose-deep);
}

.hero__logo {
  width: min(70vw, 360px);
  filter: drop-shadow(0 2px 14px rgba(90, 40, 36, 0.35));
}
.hero__kicker { margin-top: 8px; opacity: 0.92; }

/* ---- the gem ------------------------------------------------------------------- */
.gem {
  position: relative;
  width: min(80vw, 46svh, 420px);
  aspect-ratio: 1;
  margin: 4px 0 0;
  touch-action: pan-y;          /* horizontal drags spin it; vertical still scrolls */
  cursor: grab;
}
.gem:active { cursor: grabbing; }
.gem__canvas { position: relative; z-index: 1; width: 100%; height: 100%; display: block; }
.gem__halo {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 228, 0.75) 0%, rgba(255, 226, 200, 0.28) 35%, rgba(255, 220, 200, 0) 68%);
  animation: breathe 4s ease-in-out infinite;
}
.gem__floor {
  position: absolute;
  left: 22%; right: 22%;
  bottom: 2%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(80, 36, 34, 0.38), rgba(80, 36, 34, 0));
}
.gem__hint {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.75;
  transition: opacity 0.6s;
}
.gem__hint::before,
.gem__hint::after { content: "‹"; margin: 0 8px; }
.gem__hint::after { content: "›"; }
.gem.is-touched .gem__hint { opacity: 0; }

.hero__line {
  margin-top: 14px;
  max-width: 13em;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(32px, 9vw, 52px);
  line-height: 1.04;
  text-shadow: 0 2px 22px rgba(110, 56, 50, 0.4);
}
.hero__line .ch { display: inline-block; opacity: 0; transform: translateY(0.4em); }
.hero.is-on .hero__line .ch {
  animation: rise-in 0.9s var(--ease-out) forwards;
  animation-delay: calc(0.9s + var(--i) * 28ms);
}
.hero__date {
  margin-top: 10px;
  padding: 9px 20px;
  border: 1px solid rgba(255, 243, 207, 0.6);
  border-radius: 999px;
  font-family: var(--f-ui);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  background: rgba(120, 70, 64, 0.18);
}

.hero__cue {
  position: absolute;
  bottom: max(22px, env(safe-area-inset-bottom));
  left: 50%;
  width: 1px;
  height: 46px;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85));
  overflow: hidden;
}
.hero__cue span {
  position: absolute;
  left: -2px; top: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fff;
  animation: cue 2s var(--ease-in-out) infinite;
}
@keyframes cue {
  from { transform: translateY(-6px); opacity: 0; }
  40% { opacity: 1; }
  to { transform: translateY(46px); opacity: 0; }
}

/* entrance after the doors: everything waits for .is-on */
.hero .hero__logo,
.hero .hero__kicker,
.hero .gem,
.hero .hero__date,
.hero .hero__cue { opacity: 0; }
.hero.is-on .hero__logo { animation: rise-in 1.1s var(--ease-out) 0.15s forwards; }
.hero.is-on .hero__kicker { animation: rise-in 1s var(--ease-out) 0.35s forwards; }
.hero.is-on .gem { animation: gem-in 1.6s var(--ease-out) 0.2s forwards; }
.hero.is-on .hero__date { animation: rise-in 1s var(--ease-out) 1.7s forwards; }
.hero.is-on .hero__cue { animation: fade-in 1s ease 2.4s forwards; }
@keyframes gem-in {
  from { opacity: 0; transform: translateY(40px) scale(0.7); }
  to { opacity: 1; transform: none; }
}