/* ===========================================================================
   AnimeFFA — 4/5 · Hero
   Full-screen landing stage: background, atmospheric veil, logo, the two
   glass information panels and the sakura petals.
   Loaded only on the homepage (see the headStyles block in index.html).
   Requires ffa-tokens.css.
   =========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7.5rem 0 5.5rem;
  overflow: hidden;
  isolation: isolate;
}

.hero-bg { position: absolute; inset: 0; z-index: -3; }
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

/* Crimson bloom + vignette + gradient that hands off to the store section. */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(64% 52% at 50% 46%, rgba(6, 4, 5, .72), transparent 74%),
    radial-gradient(118% 88% at 50% 50%, transparent 28%, rgba(6, 4, 5, .86) 100%),
    linear-gradient(180deg, rgba(8, 6, 7, .82) 0%, rgba(8, 6, 7, .3) 26%, rgba(8, 6, 7, .42) 62%, var(--bg) 100%);
}

/* Torii-red horizon line where the hero meets the store. */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-red) 20%, var(--accent) 50%, var(--line-red) 80%, transparent);
  opacity: .5;
}

/* ---------------------------------------------------------------- Stage */
.hero-stage {
  position: relative;
  width: min(var(--shell), 100% - (var(--gutter) * 2));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(200px, 270px) minmax(0, 1fr) minmax(200px, 270px);
  align-items: center;
  gap: clamp(1rem, 3vw, 2.75rem);
}

.hero-logo {
  display: flex;
  justify-content: center;
  margin: 0;
  animation: logo-in .9s var(--ease) both;
}
.hero-logo img {
  width: clamp(240px, 32vw, 470px);
  height: auto;
  filter:
    drop-shadow(0 18px 40px rgba(0, 0, 0, .75))
    drop-shadow(0 0 46px rgba(211, 37, 63, .38));
}

@keyframes logo-in {
  from { opacity: 0; transform: translateY(18px) scale(.965); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------- Information panels */
.hero-panel {
  position: relative;
  display: grid;
  gap: .15rem;
  padding: .35rem;
  background: rgba(11, 7, 9, .58);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: var(--shadow-2);
  animation: panel-in .8s var(--ease) both;
}
.hero-panel--left { animation-delay: .12s; }
.hero-panel--right { animation-delay: .2s; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.hero-row {
  display: grid;
  gap: .1rem;
  width: 100%;
  padding: .7rem .85rem;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  text-align: left;
  font: inherit;
  transition: background-color .18s var(--ease);
}
.hero-row + .hero-row { border-top: 1px solid var(--line); }

.hero-label {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hero-value {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--text);
  word-break: break-word;
}
.hero-value svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
  stroke: var(--text-faint);
  fill: none;
  stroke-width: 2;
  transition: stroke .18s var(--ease);
}
.hero-value.num { color: #ffd7dd; font-variant-numeric: tabular-nums; }

button.hero-row { cursor: pointer; }
button.hero-row:hover { background: rgba(211, 37, 63, .12); }
button.hero-row:hover .hero-value svg { stroke: var(--accent); }
button.hero-row.is-copied .hero-value { color: #9ae3b6; }
button.hero-row.is-copied .hero-value svg { stroke: #9ae3b6; }

/* ------------------------------------------------------------ Scroll cue */
.hero-cue {
  position: relative;
  margin: clamp(2rem, 5vh, 3.5rem) auto 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.hero-cue:hover { color: var(--text); }
.hero-cue svg {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none; stroke-width: 2;
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(5px); opacity: 1; }
}

/* --------------------------------------------------------- Sakura petals */
.petals {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.petal {
  position: absolute;
  top: -6%;
  left: var(--x, 50%);
  width: var(--s, 8px);
  height: var(--s, 8px);
  border-radius: 100% 0 100% 0;
  background: linear-gradient(140deg, rgba(255, 190, 200, .75), rgba(211, 37, 63, .45));
  opacity: 0;
  animation: fall var(--d, 26s) linear var(--delay, 0s) infinite;
  will-change: transform, opacity;
}
@keyframes fall {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  8%   { opacity: var(--o, .3); }
  90%  { opacity: var(--o, .3); }
  100% { opacity: 0; transform: translate3d(var(--drift, 60px), 112vh, 0) rotate(420deg); }
}

/* ------------------------------------------------------------ Responsive */
@media (max-width: 1080px) {
  .hero-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
  }
  .hero-logo { grid-column: 1 / -1; order: -1; }
  .hero-logo img { width: clamp(220px, 52vw, 380px); }
}

@media (max-width: 560px) {
  .hero { padding-top: 6.5rem; padding-bottom: 4rem; }
  .hero-stage { grid-template-columns: minmax(0, 1fr); }
  .hero-logo img { width: min(74vw, 320px); }
  .hero-value { font-size: .95rem; }
  .petals { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .petals { display: none; }
}