/* ==========================================================================
   AUTHIFY — Hero (Scene 01)
   Full viewport, three-zone layout: tagline + CTAs / signature lock / eyebrow
   + supporting copy. Static signature artwork, ambient background only.
   ========================================================================== */

.hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: calc(var(--space-3xl) + 2rem);
  padding-bottom: var(--space-xl);
  overflow: clip;
}

.hero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--gold-200) 22%, transparent), transparent 70%),
    var(--color-bg);
  transition: background var(--dur-mid) var(--ease-smooth);
}
.hero__bg::after{
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(60% 50% at 50% 30%, black, transparent 75%);
  opacity: 0.5;
}

.hero__content{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-xl);
  width: 100%;
  max-width: 1220px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.hero__left{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  text-align: left;
}

.hero__title{
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  line-height: 1;
}
.hero__title .line{ display: block; }

.hero__actions{
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.hero__center{
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__lock{
  width: min(20vw, 280px);
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.35))
          drop-shadow(0 2px 0 color-mix(in srgb, var(--gold-400) 40%, transparent));
  animation: hero-lock-float 7s var(--ease-smooth) infinite;
}
@keyframes hero-lock-float{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}

.hero__right{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  text-align: left;
}

.hero__desc{
  font-size: calc(var(--text-lg) * 0.8);
  max-width: 34ch;
  color: var(--color-text-muted);
}

.hero__scroll-cue{
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xs);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  opacity: 0.8;
  animation: scrollcue 2.6s var(--ease-smooth) infinite;
}
.hero__scroll-cue .icon{ width: 1rem; height: 1rem; }
@keyframes scrollcue{
  0%, 100%{ transform: translateX(-50%) translateY(0); opacity: 0.8; }
  50%{ transform: translateX(-50%) translateY(6px); opacity: 0.35; }
}

@media (max-width: 900px){
  .hero__content{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: var(--space-lg);
  }
  .hero__left, .hero__right{ align-items: center; text-align: center; }
  .hero__left{ order: 2; }
  .hero__center{ order: 1; }
  .hero__right{ order: 3; }
  .hero__lock{ width: min(46vw, 220px); }
  .hero__desc{ max-width: 42ch; }
}

@media (max-width: 640px){
  .hero{ padding-top: calc(var(--space-2xl) + 2rem); }
}

/* ==========================================================================
   Products (Scene 03) — ambient revolving signature gem, ring-free,
   centered on the section heading text.
   ========================================================================== */
.products{
  overflow: clip;
}
.products__header{
  position: relative;
}
.products__canvas-wrap{
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: clamp(420px, 46vw, 760px);
  aspect-ratio: 1;
  transform: translate(-50%, -46%);
  pointer-events: none;
  opacity: 0.9;
  mask-image: radial-gradient(50% 50% at 50% 50%, black, transparent 92%);
}
[data-theme="light"] .products__canvas-wrap{ opacity: 0.65; }
#products-canvas{ width: 100%; height: 100%; display: block; }
.products__canvas-fallback{
  position: absolute;
  top: 50%; left: 50%;
  width: 70%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.9), transparent 45%),
              radial-gradient(circle at 68% 75%, var(--gold-200), transparent 55%),
              linear-gradient(160deg, color-mix(in srgb, var(--gold-400) 35%, transparent), transparent 70%);
  filter: blur(0.5px);
  border: 1px solid var(--glass-border);
  animation: hero-lock-float 7s var(--ease-smooth) infinite;
}
.products__header > *:not(.products__canvas-wrap){ position: relative; z-index: 1; }