/* ============================================================
   TRUMPONI — Hero: imperial stage, medallion, parallax layers
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(600px, 94svh, 960px);
  display: flex;
  align-items: center;
  isolation: isolate;
}

/* ---------- background layers ---------- */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
}
.hero__glow--gold {
  width: min(72vw, 780px);
  aspect-ratio: 1;
  right: -12%;
  top: 4%;
  background: radial-gradient(circle at 45% 45%, rgba(227, 179, 65, .2), rgba(227, 179, 65, .06) 45%, transparent 68%);
}
.hero__glow--wine {
  width: min(90vw, 900px);
  aspect-ratio: 1;
  left: -22%;
  bottom: -30%;
  background: radial-gradient(circle, rgba(110, 20, 35, .28), transparent 65%);
}
.hero__glow--empire {
  width: min(70vw, 700px);
  aspect-ratio: 1;
  right: -18%;
  bottom: -26%;
  background: radial-gradient(circle, rgba(20, 53, 38, .3), transparent 65%);
}

/* colosseum arcade silhouette hugging the bottom */
.hero__arches {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(140px, 30vh, 300px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='252' height='200' viewBox='0 0 252 200'%3E%3Cg fill='%23E3B341' fill-opacity='.07'%3E%3Cpath d='M0 200V92a24 24 0 0 1 48 0v108zM68 200V92a24 24 0 0 1 48 0v108zM136 200V92a24 24 0 0 1 48 0v108zM204 200V92a24 24 0 0 1 48 0v108z'/%3E%3C/g%3E%3Cg fill='%23E3B341' fill-opacity='.05'%3E%3Cpath d='M24 88a24 24 0 0 1 48 0 24 24 0 0 1-48 0zm68 0a24 24 0 0 1 48 0 24 24 0 0 1-48 0zm68 0a24 24 0 0 1 48 0 24 24 0 0 1-48 0z'/%3E%3C/g%3E%3Crect y='96' width='252' height='2' fill='%23E3B341' fill-opacity='.12'/%3E%3Crect y='46' width='252' height='1.4' fill='%23E3B341' fill-opacity='.08'/%3E%3C/svg%3E");
  background-size: 252px 100%;
  background-repeat: repeat-x;
  background-position: bottom center;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 32%);
  mask-image: linear-gradient(180deg, transparent, #000 32%);
}

/* faint green chart line rising behind the emperor */
.hero__spark {
  position: absolute;
  right: -4%;
  bottom: 12%;
  width: min(64vw, 640px);
  opacity: .5;
  color: var(--c-pump);
  filter: drop-shadow(0 0 12px rgba(47, 216, 115, .35));
}
.hero__spark path {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: spark-draw 2.8s var(--ease-out) .5s forwards;
}
@keyframes spark-draw { to { stroke-dashoffset: 0; } }

/* floating particles (coins + gold dust) injected by JS */
.hero__stage { position: absolute; inset: 0; pointer-events: none; }
.particle {
  position: absolute;
  bottom: -8%;
  color: var(--c-gold);
  opacity: 0;
  animation: particle-rise var(--dur, 14s) linear var(--delay, 0s) infinite;
  will-change: transform, opacity;
}
.particle--dust {
  width: var(--size, 4px);
  height: var(--size, 4px);
  border-radius: 50%;
  background: var(--c-gold-bright);
  box-shadow: 0 0 8px rgba(245, 215, 126, .8);
}
.particle--coin { width: var(--size, 26px); height: var(--size, 26px); filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
@keyframes particle-rise {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: var(--op, .7); }
  85%  { opacity: var(--op, .7); }
  100% { transform: translate(var(--drift, 30px), calc(-1 * var(--rise, 90vh))) rotate(var(--spin, 40deg)); opacity: 0; }
}

/* ---------- content ---------- */
.hero__inner {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(3.4rem, 7vh, 5rem) clamp(4.5rem, 9vh, 6rem);
}
.hero__inner { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 940px) {
  .hero__inner { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); }
}

.hero__content { display: grid; gap: clamp(1.1rem, 2.2vh, 1.6rem); justify-items: start; position: relative; z-index: 2; }

.hero__eyebrow { margin-left: .2rem; }

.hero__title {
  /* single words DONATELLO/TRUMPONI must fit the 320px content box (≈270px) */
  font-size: clamp(2.25rem, 10.5vw, 5.4rem);
  font-weight: 900;
  line-height: .98;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .6);
}
.hero__title .line { display: block; }
.hero__title .line--gold {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 18px rgba(227, 179, 65, .25));
}

.hero__tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 3.6vw, 2rem);
  letter-spacing: .09em;
  color: var(--c-gold-bright);
}
.hero__tagline .pinch { display: inline-block; animation: pinch-wave 3.2s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes pinch-wave {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50%      { transform: rotate(10deg) translateY(-3px); }
}

.hero__sub { color: var(--c-cream-dim); font-size: clamp(1rem, 2vw, 1.15rem); max-width: 34ch; }

.hero__chips { display: flex; flex-wrap: wrap; gap: .6rem; }

/* CTAs stack full-width by default (no min-content overflow on narrow screens) */
.hero__ctas { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; width: 100%; max-width: 460px; }
.hero__ctas .btn { width: 100%; padding-inline: .9rem; }
@media (min-width: 640px) {
  .hero__ctas { grid-template-columns: auto auto; }
  .hero__ctas .btn { width: auto; }
  .hero__ctas .btn--ghost { grid-column: 1 / -1; }
}
@media (min-width: 940px) {
  .hero__ctas { grid-template-columns: auto auto auto; width: auto; max-width: none; }
  .hero__ctas .btn--ghost { grid-column: auto; }
}

.hero__note { font-size: .78rem; color: var(--c-cream-faint); letter-spacing: .04em; }

/* ---------- figure / medallion ---------- */
.hero__figure {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(280px, 44vw, 560px);
}
.hero__medal {
  position: relative;
  z-index: 2;
  width: clamp(240px, 52vw, 300px);
  max-width: 100%;
  animation: medal-float 7s ease-in-out infinite alternate;
  filter: drop-shadow(0 26px 60px rgba(0, 0, 0, .65)) drop-shadow(0 0 60px rgba(227, 179, 65, .22));
  will-change: transform;
}
@media (min-width: 940px) { .hero__medal { width: clamp(340px, 36vw, 470px); } }
@keyframes medal-float {
  from { transform: translateY(-10px) rotate(-1.1deg); }
  to   { transform: translateY(12px) rotate(1.3deg); }
}

/* halo ring behind medallion */
.hero__halo {
  position: absolute;
  width: min(78vw, 118%);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(227, 179, 65, .18);
  z-index: 1;
}
.hero__halo::before, .hero__halo::after {
  content: '';
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  border: 1px dashed rgba(227, 179, 65, .12);
  animation: halo-spin 60s linear infinite;
}
.hero__halo::after { inset: 22px; border-style: solid; border-color: rgba(227, 179, 65, .1); animation-direction: reverse; animation-duration: 44s; }
@keyframes halo-spin { to { transform: rotate(360deg); } }

.hero__laurel {
  position: absolute;
  width: clamp(58px, 10vw, 110px);
  color: var(--c-gold);
  opacity: .5;
  z-index: 3;
}
.hero__laurel--l { left: -4%; top: 50%; transform: translateY(-50%) rotate(-8deg); }
.hero__laurel--r { right: -4%; top: 50%; transform: translateY(-50%) scaleX(-1) rotate(-8deg); }
@media (max-width: 520px) { .hero__laurel { display: none; } }

/* steam wisps rising below the medallion — the plate is hot */
.hero__steam {
  position: absolute;
  bottom: 8%;
  width: 14px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(180deg, transparent, rgba(242, 231, 213, .16), transparent);
  filter: blur(9px);
  z-index: 1;
  animation: steam-rise var(--dur, 6s) ease-in-out var(--delay, 0s) infinite;
}
.hero__steam--a { left: 34%; }
.hero__steam--b { left: 50%; --dur: 7.4s; --delay: 1.6s; height: 150px; }
.hero__steam--c { left: 64%; --dur: 5.2s; --delay: 3s; }
@keyframes steam-rise {
  0%   { transform: translateY(16px) translateX(0) scaleY(.86); opacity: 0; }
  30%  { opacity: .8; }
  100% { transform: translateY(-86px) translateX(var(--sway, 12px)) scaleY(1.12); opacity: 0; }
}

/* scroll hint */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: .3rem;
  font-size: .62rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--c-cream-faint);
  z-index: 3;
}
.hero__scroll svg { animation: hint-bob 1.8s ease-in-out infinite; color: var(--c-gold); }
@keyframes hint-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (max-height: 620px) { .hero__scroll { display: none; } }