/* ---------------------------------------------------------
   HERO SECTION (namespaced: .hero__)
   Fonts: Arizona Flare (headings), Helveesti (body/labels)
   Palette: #F8F2E9 #170B01 #AE1B74 #ECBDFB #FDF18B
   --------------------------------------------------------- */

/* Load required fonts (project rule #10) */
@font-face{
  font-family: "Arizona Flare";
  src: url("../fonts/arizona_flare_300_normal_headings_h1-h6.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Arizona Flare";
  src: url("../fonts/arizona_flare_300_italic_headings_h1-h6.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Helveesti";
  src: url("../fonts/helveesti_400_normal_body_ui.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Helveesti";
  src: url("../fonts/helveesti_400_italic_body_ui.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Helveesti Bold";
  src: url("../fonts/helveesti_700_normal_body_labels.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Helveesti Bold";
  src: url("../fonts/helveesti_700_italic_body_labels.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Section tokens (scoped) */
.hero {
  --hero-bg: #F8F2E9;
  --hero-ink: #170B01;
  --hero-accent: #1C1BAE;
  --hero-accent-soft: #BDCFFB;
  --hero-accent-warm: #EAFD8B;

  padding-block: 48px;
}

/* Card-style wrapper inside page container */
.hero__wrap {
  width: min(1120px, calc(100% - 64px));
  margin-inline: auto;
  background: #ffffff00; /* transparent around the inner panel */
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  gap: 32px;

  /* inner panel look to match reference */
  background: var(--hero-bg);
  border-radius: 3px;
}

/* Left: keep whole image visible (no crop) */
.hero__media {
  margin: 0;
  background: var(--hero-bg);
  border-radius: 3px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* "complete image" as requested */
  display: block;
}

/* Right column */
.hero__content {
  color: var(--hero-ink);
  font-family: "Helveesti", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display: grid;
  align-content: center;
  gap: 20px;
  padding: 8px 4px;
}

/* Headline */
.hero__title {
  font-family: "Arizona Flare", serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.3;
  margin: 0;
  color: var(--hero-ink);
}
.hero__title-underline {
  box-shadow: 0 -0.28em 0 0 var(--hero-accent-soft) inset;
  border-bottom: 3px solid var(--hero-accent);
}

/* Body copy */
.hero__desc {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  max-width: 58ch;
  color: var(--hero-ink);
}

/* CTAs */
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}
.hero__btn {
  --_pad-y: 12px;
  --_pad-x: 20px;
  font-family: "Helveesti", "Helveesti", system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.2px;

  background: #EAFD8B;
  color: #170B01;
  border: 1px solid var(--hero-accent);
  border-radius: 3px;
  padding: 10px 24px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms ease, opacity 120ms ease;
  gap: 3px;
}
.hero__btn:hover { transform: translateY(-1px); }
.hero__btn:active { transform: translateY(0); opacity: 0.92; }

.hero__btn--ghost {
  background: #BDCFFB;
  color: #170B01;
  gap: 3px;
}

.section.hero {
  padding-inline: 0;
  border-top: 1px solid color-mix(in oklab, var(--hero-ink) 15%, transparent);
}

.hero__wrap {
  width: 100%;
  margin: 0;
}

/*======================================================================*/
.section.hero{
  --shine-duration: 3.5s;     
  --shine-angle: 45deg;     
  --spark-top: 5%;        
  --spark-left: 95%;         
  --spark-size: 20px;
  --spark-color: #1C1BAE;
}

.hero__media{
  position: relative;
  overflow: hidden;
}

.hero__media::after{
  content: "";
  position: absolute;
  top: -20%;
  left: -60%;
  width: 220%;
  height: 140%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.0) 40%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0.0) 60%,
    rgba(255,255,255,0) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: .8;
  animation: hero-shine-sweep var(--shine-duration) cubic-bezier(.2,.7,.3,1) infinite;
}

@keyframes hero-shine-sweep{
  0%   { transform: translateX(-140%) rotate(var(--shine-angle)); }
  100% { transform: translateX(140%)  rotate(var(--shine-angle)); }
}

.hero__media::before{
  content: "✦"; 
  position: absolute;
  top: var(--spark-top);
  left: var(--spark-left);
  transform: translate(-50%, -50%) scale(.4) rotate(0deg);
  font-size: var(--spark-size);
  line-height: 1;
  color: var(--spark-color);
  text-shadow:
    0 0 8px rgba(255,255,255,.70),
    0 0 16px rgba(255,255,255,.40);
  opacity: 0;
  pointer-events: none;
  animation: hero-spark var(--shine-duration) ease-in-out infinite;
}

@keyframes hero-spark{
  0%, 86%  { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(0deg); }
  90%      { opacity: .85; transform: translate(-50%, -50%) scale(1.0) rotate(10deg); }
  94%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.5) rotate(-12deg); }
  98%      { opacity: .6;  transform: translate(-50%, -50%) scale(1.1) rotate(6deg); }
  100%     { opacity: 0;   transform: translate(-50%, -50%) scale(.4) rotate(0deg); }
}

/* Responsive */
@media (max-width: 960px) {
  .hero__wrap {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .hero__media { height: 280px; }
}
@media (max-width: 520px) {
  .hero { padding-block: 10px; }
  .hero__media { height: 220px; }
  .hero__btn { width: 100%; }
  .hero__title {font-size: 24px;}
  .section.hero{
    --spark-top: 10%;        
    --spark-left: 95%;   
  }
}

@media (max-width: 380px) {
  .section.hero{
    --spark-top: 15%;          
  }
}