/* ─────────────────────────────────────────────────────────────────────
   hero.css — Hero section layout, viewer, and dream-theme sparkles
───────────────────────────────────────────────────────────────────── */

.hero {
  position:  relative;
  overflow:  hidden;
  display:   grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap:         3rem;
  min-height:  100dvh;
  padding:     calc(var(--nav-h) + 2rem) clamp(1rem, 6vw, 6rem) 4rem;
  max-width:   1400px;
  margin:      0 auto;
}

/* Text and viewer sit above the sparkle layer */
.hero__content,
.hero__viewer { position: relative; z-index: 1; }

.hero__eyebrow {
  font-size:      0.8rem;
  font-weight:    600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  1rem;
}

.hero__title {
  font-size:      clamp(3rem, 8vw, 6rem);
  font-weight:    300;
  letter-spacing: 0.04em;
  line-height:    1.05;
  margin-bottom:  1rem;
}

.hero__sub {
  font-size:     1rem;
  color:         var(--text-muted);
  margin-bottom: 2rem;
}

.hero__viewer {
  aspect-ratio:  1;
  border-radius: var(--radius);
  background:    var(--bg-elevated);
  border:        1px solid var(--border);
  box-shadow:    inset 0 0 0 1px rgba(179, 141, 255, 0.28), 0 0 50px rgba(179, 141, 255, 0.1);
}


/* ─── SPARKLE FIELD ──────────────────────────────────────────────────── */
@keyframes twinkle {
  0%, 100% { opacity: 0.12; transform: scale(0.6) rotate(0deg);  }
  50%       { opacity: 0.85; transform: scale(1.3) rotate(18deg); }
}

.hero::before,
.hero::after {
  content:       '';
  position:      absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index:       0;
}

/* First sparkle layer */
.hero::before {
  width:      4px;
  height:     4px;
  background: var(--flourish);
  top:        20%;
  left:       6%;
  animation:  twinkle 4s ease-in-out infinite;
  box-shadow:
     110px  18px 0 -1px var(--gold),
     250px -12px 0 -1px var(--flourish),
     370px  44px 0 -2px var(--accent),
     -15px  78px 0 -1px var(--gold),
     510px  12px 0 -1px var(--flourish),
     190px 108px 0 -2px var(--gold),
     -55px 138px 0 -1px var(--accent),
     440px  90px 0 -1px var(--flourish),
     300px  68px 0 -2px var(--accent),
      65px 165px 0 -1px var(--gold);
}

/* Second sparkle layer (offset timing) */
.hero::after {
  width:      3px;
  height:     3px;
  background: var(--gold);
  top:        44%;
  left:       20%;
  animation:  twinkle 5.5s ease-in-out infinite 2.2s;
  box-shadow:
     125px  38px 0 -1px var(--flourish),
     -38px  78px 0 -1px var(--accent),
     330px   4px 0 -1px var(--gold),
     210px 118px 0 -1px var(--flourish),
      -8px 152px 0 -2px var(--accent),
     430px  56px 0 -1px var(--gold);
}


/* ─── VIEWER CORNER FRAMES ───────────────────────────────────────────── */
.hero__viewer::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0;
  width:      80px;
  height:     80px;
  pointer-events: none;
  z-index:    2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none'%3E%3Cpath d='M76,4 L24,4 Q4,4 4,24 L4,76' stroke='%23b38dff' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M4,4 C12,10 20,7 18,19 C16,29 8,27 11,37 C13,45 20,43 19,52' stroke='%23e8b4ff' stroke-width='1.1' stroke-linecap='round'/%3E%3Ccircle cx='76' cy='4' r='3.2' fill='%23b38dff'/%3E%3Ccircle cx='4' cy='76' r='3.2' fill='%23b38dff'/%3E%3Ccircle cx='19' cy='52' r='2.2' fill='%23e8b4ff'/%3E%3C/svg%3E") no-repeat;
  background-size: 80px 80px;
}
.hero__viewer::after {
  content:    '';
  position:   absolute;
  bottom: 0; right: 0;
  width:      80px;
  height:     80px;
  pointer-events: none;
  z-index:    2;
  transform:  rotate(180deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none'%3E%3Cpath d='M76,4 L24,4 Q4,4 4,24 L4,76' stroke='%23b38dff' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M4,4 C12,10 20,7 18,19 C16,29 8,27 11,37 C13,45 20,43 19,52' stroke='%23e8b4ff' stroke-width='1.1' stroke-linecap='round'/%3E%3Ccircle cx='76' cy='4' r='3.2' fill='%23b38dff'/%3E%3Ccircle cx='4' cy='76' r='3.2' fill='%23b38dff'/%3E%3Ccircle cx='19' cy='52' r='2.2' fill='%23e8b4ff'/%3E%3C/svg%3E") no-repeat;
  background-size: 80px 80px;
}


/* ─── RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    text-align:    center;
    padding-inline: 1.5rem;
  }
  .hero__viewer {
    max-width:     420px;
    margin-inline: auto;
  }
  .hero__sub { margin-inline: auto; }
}