/*
 * Hero 10 "Centered Hero with Image Fan", plain CSS port (no React, no Tailwind).
 * Original component: Felipe Menezes (felipemenezes098), MIT License,
 * Copyright (c) 2026 Felipe Menezes. https://21st.dev/@felipemenezes098/components/hero-10
 * Port for Primax Consulting Limited. Each rule notes the Tailwind classes it replaces.
 * Breakpoints match Tailwind: sm = 40rem (640px), md = 48rem (768px).
 */
:root {
  --hero-bg: #fafaf8;            /* --background */
  --hero-fg: #0f294e;            /* --foreground, Primax navy */
  --hero-primary: #fcba1e;       /* --primary, Primax gold */
  --hero-primary-fg: #0f294e;    /* --primary-foreground */
  --hero-muted-fg: #4a5a75;      /* --muted-foreground */
  --hero-accent: #eef1f5;        /* --accent (outline hover) */
  --hero-input: #c9d1dc;         /* --input (outline border) */
  --hero-ring: #0f294e;          /* --ring */
  --hero-serif: "Fraunces", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; /* font-serif; Fraunces (OFL) to match the share image */
  --hero-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --hero-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.hero10, .hero10 *, .hero10 *::before, .hero10 *::after { box-sizing: border-box; }
.hero10 h1, .hero10 p { margin: 0; }
.hero10 img { display: block; max-width: 100%; }

/* section: bg-background relative isolate w-full overflow-hidden */
.hero10 {
  position: relative; isolation: isolate; width: 100%; overflow: hidden;
  background: var(--hero-bg); color: var(--hero-fg);
  font-family: var(--hero-sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* relative z-10 mx-auto flex max-w-6xl flex-col items-center px-6 text-center
   py-20 sm:py-28 gap-8 sm:gap-10   (variant "standard") */
.hero10__inner {
  position: relative; z-index: 10; margin: 0 auto; display: flex; flex-direction: column;
  align-items: center; max-width: 72rem; padding: 2.5rem 1.5rem 5rem; gap: 2rem; text-align: center; /* Chinelle 21 Oct: logo tile removed, less space above the headline */
}
@media (min-width: 40rem) { .hero10__inner { padding-top: 4rem; padding-bottom: 7rem; gap: 2.5rem; } }

/* flex w-full max-w-2xl flex-col items-center gap-5 */
.hero10__header { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 42rem; gap: 1.25rem; }

/* eyebrow logo tile: size-16 rounded-xl shadow-md sm:size-[72px] */
.hero10__logo { width: 4rem; height: 4rem; /* rounded-xl = 12px */
  border-radius: 12px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); }
@media (min-width: 40rem) { .hero10__logo { width: 72px; height: 72px; } }

/* h1: text-foreground font-serif font-normal tracking-tight text-balance text-3xl sm:text-4xl md:text-5xl */
.hero10__title {
  font-family: var(--hero-serif); font-weight: 400; letter-spacing: -0.025em; text-wrap: balance;
  color: var(--hero-fg); font-size: 1.875rem; line-height: 2.25rem;
}
@media (min-width: 40rem) { .hero10__title { font-size: 2.25rem; line-height: 2.5rem; } }
@media (min-width: 48rem) { .hero10__title { font-size: 3rem; line-height: 1; } }
/* <Balancer> wraps each line in an inline-block; text-wrap: balance does the same job */
.hero10__line { display: inline-block; vertical-align: top; text-wrap: balance; }
/* FINAL: navy "numbers." (same colour as the headline) with a gold #FCBA1E underline bar behind the text,
   matching the share image. Same as the React classes: relative z-0 inline-block text-foreground
   after:absolute after:left-[0.03em] after:right-[0.22em] after:bottom-[0.04em] after:-z-10 after:h-[0.135em] after:rounded-full after:bg-primary */
.hero10__highlight { position: relative; z-index: 0; display: inline-block; color: var(--hero-fg); }
.hero10__highlight::after { content: ""; position: absolute; left: .03em; right: .22em; bottom: .04em; height: .135em;
  border-radius: 9999px; background: var(--hero-primary); z-index: -1; pointer-events: none; }

/* p: text-muted-foreground max-w-lg text-sm sm:text-base */
.hero10__description { color: var(--hero-muted-fg); max-width: 32rem; font-size: .875rem; line-height: 1.25rem; text-wrap: balance; }
@media (min-width: 40rem) { .hero10__description { font-size: 1rem; line-height: 1.5rem; } }

/* flex flex-col items-center gap-4 */
.hero10__actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
/* flex flex-wrap items-center justify-center gap-x-4 gap-y-3 */
.hero10__buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1rem; }

/* shadcn Button + "w-fit rounded-full px-4", size lg (h-10) */
.hero10__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; white-space: nowrap;
  width: fit-content; height: 2.5rem; padding: 0 1rem; border-radius: 9999px;
  font-family: var(--hero-sans); font-size: .875rem; line-height: 1.25rem; font-weight: 500; text-decoration: none;
  transition: color .15s, background-color .15s, border-color .15s;
}
.hero10__btn:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--hero-ring); }
/* variant default: bg-primary text-primary-foreground shadow hover:bg-primary/90 */
.hero10__btn--primary { background: var(--hero-primary); color: var(--hero-primary-fg); border: 0;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); }
.hero10__btn--primary:hover { background: color-mix(in srgb, var(--hero-primary) 90%, transparent); }
/* variant outline: border border-input bg-background shadow-sm hover:bg-accent */
.hero10__btn--outline { background: var(--hero-bg); color: var(--hero-fg); border: 1px solid var(--hero-input);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); }
.hero10__btn--outline:hover { background: var(--hero-accent); }

/* ctaNote: text-muted-foreground text-xs ; socialProof: + font-medium */
.hero10__note, .hero10__proof { color: var(--hero-muted-fg); font-size: .75rem; line-height: 1rem; }
.hero10__proof { font-weight: 500; }
.hero10__nowrap { white-space: nowrap; }

/* fan wrapper: mx-auto w-full + Primax fanClassName "max-w-none w-[175%] -mx-[37.5%] sm:mx-auto sm:w-full" */
.hero10__fan-wrap { width: 175%; max-width: none; margin: 0 -37.5%; } /* v4: 175 % for 7 cards (was 150 %) */
@media (min-width: 40rem) { .hero10__fan-wrap { width: 100%; margin: 0 auto; } }

/* relative flex w-full items-center justify-center */
.hero10__fan { position: relative; display: flex; width: 100%; align-items: center; justify-content: center; }

/* relative shrink-0 overflow-hidden rounded-xl shadow-xl outline outline-black/10 aspect-4/5 */
.hero10__card {
  position: relative; flex-shrink: 0; overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 5;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
  outline: 1px solid rgb(0 0 0 / .1);
  transform: translateY(var(--ty)) rotate(var(--rot));
}
/* img: size-full object-cover */
.hero10__card img { width: 100%; height: 100%; object-fit: cover; }

/* 5-card layout (component's fanLayout5): width, overlap margin, z, rotate, y, entrance x */
.hero10__card:nth-child(1) { width: 22%; margin-right: -4%; z-index: 0;  --rot: -10deg; --ty: 56px; --x: 96px; }
.hero10__card:nth-child(2) { width: 24%; margin-right: -4%; z-index: 10; --rot: -5deg;  --ty: 20px; --x: 48px; }
.hero10__card:nth-child(3) { width: 26%;                    z-index: 20; --rot: 0deg;   --ty: -8px; --x: 0px; }
.hero10__card:nth-child(4) { width: 24%; margin-left: -4%;  z-index: 10; --rot: 5deg;   --ty: 20px; --x: -48px; }
.hero10__card:nth-child(5) { width: 22%; margin-left: -4%;  z-index: 0;  --rot: 10deg;  --ty: 56px; --x: -96px; }

/* 7-card layout (component's fanLayout7, v4): used when the fan has the hero10__fan--7 class */
.hero10__fan--7 .hero10__card { margin: 0; }
.hero10__fan--7 .hero10__card:nth-child(1) { width: 15%; margin-right: -2.5%; z-index: 0;  --rot: -12deg; --ty: 64px; --x: 144px; }
.hero10__fan--7 .hero10__card:nth-child(2) { width: 16%; margin-right: -2.5%; z-index: 10; --rot: -8deg;  --ty: 36px; --x: 96px; }
.hero10__fan--7 .hero10__card:nth-child(3) { width: 17%; margin-right: -2.5%; z-index: 20; --rot: -4deg;  --ty: 12px; --x: 48px; }
.hero10__fan--7 .hero10__card:nth-child(4) { width: 19%;                      z-index: 30; --rot: 0deg;   --ty: -8px; --x: 0px; }
.hero10__fan--7 .hero10__card:nth-child(5) { width: 17%; margin-left: -2.5%;  z-index: 20; --rot: 4deg;   --ty: 12px; --x: -48px; }
.hero10__fan--7 .hero10__card:nth-child(6) { width: 16%; margin-left: -2.5%;  z-index: 10; --rot: 8deg;   --ty: 36px; --x: -96px; }
.hero10__fan--7 .hero10__card:nth-child(7) { width: 15%; margin-left: -2.5%;  z-index: 0;  --rot: 12deg;  --ty: 64px; --x: -144px; }

/* animation="subtle": same timings as the component's motion variants.
   Difference: plays on page load rather than on scroll into view (it is the first section). */
@media (prefers-reduced-motion: no-preference) {
  .hero10--animate .hero10__header,
  .hero10--animate .hero10__actions { animation: hero10-reveal .5s var(--hero-ease) both; }
  .hero10--animate .hero10__header  { animation-delay: .05s; }
  .hero10--animate .hero10__actions { animation-delay: .15s; }
  .hero10--animate .hero10__fan { animation: hero10-reveal .5s var(--hero-ease) .65s both; }
  .hero10--animate .hero10__card { animation: hero10-card .5s var(--hero-ease) both; }
  .hero10--animate .hero10__card:nth-child(1) { animation-delay: 1.15s; }
  .hero10--animate .hero10__card:nth-child(2) { animation-delay: 1.25s; }
  .hero10--animate .hero10__card:nth-child(3) { animation-delay: 1.35s; }
  .hero10--animate .hero10__card:nth-child(4) { animation-delay: 1.45s; }
  .hero10--animate .hero10__card:nth-child(5) { animation-delay: 1.55s; }
  .hero10--animate .hero10__card:nth-child(6) { animation-delay: 1.65s; }
  .hero10--animate .hero10__card:nth-child(7) { animation-delay: 1.75s; }
}
@keyframes hero10-reveal { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes hero10-card {
  from { transform: translateX(var(--x)) translateY(var(--ty)) rotate(var(--rot)); }
  to   { transform: translateX(0) translateY(var(--ty)) rotate(var(--rot)); }
}

/* Live-only button stays hidden until the Worker removes the hidden attribute on primaxjm.com. */
.hero10__btn[hidden] { display: none; }