/*
  Sections
  New mid page content added in the second design pass: the full bleed
  photo mosaic, the narrative photo block, redesigned stat cards, the
  registration steps, and the CTA hover reveal. Kept in its own file
  since these are additions layered on top of the original components.
*/

/* Scroll reveal, used across every new section below */

.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal { opacity: 1; transform: none; }
}

/* ================= Photo mosaic, full bleed ================= */

.photo-mosaic-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: clamp(16px, 4vw, 64px);
  padding-block: 8px 64px;
}

.photo-mosaic {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 58px);
  gap: 14px;
  max-width: 1400px;
  margin-inline: auto;
}

.mosaic-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-surface-raised);
}

.mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.mosaic-item:hover img {
  transform: scale(1.04);
}

.mosaic-1 { grid-column: 1 / 8; grid-row: 1 / 7; }
.mosaic-2 { grid-column: 8 / 13; grid-row: 1 / 4; }
.mosaic-3 { grid-column: 8 / 13; grid-row: 4 / 7; }

.mosaic-selfie {
  position: absolute;
  left: 6%;
  bottom: -34px;
  width: 168px;
  aspect-ratio: 1;
  border: 6px solid var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transform: rotate(-5deg);
  z-index: 2;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.mosaic-selfie:hover {
  transform: rotate(-1deg) translateY(-4px);
}

.mosaic-selfie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-mosaic-caption {
  max-width: 1400px;
  margin-inline: auto;
  margin-top: 56px;
  padding-inline: 4px;
}

@media (max-width: 860px) {
  .photo-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 12px;
  }
  .mosaic-1, .mosaic-2, .mosaic-3 {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
  .mosaic-selfie {
    position: static;
    width: 140px;
    margin-top: 14px;
    transform: rotate(-3deg);
  }
  .photo-mosaic-caption { margin-top: 20px; }
}

/* ================= Narrative photo block ================= */

.narrative-section {
  padding-block: 40px 88px;
}

.narrative-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 32px;
  align-items: center;
}

.narrative-lead {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background-color: var(--color-surface-raised);
}

.narrative-lead img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.narrative-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.narrative-stack .narrative-thumb:nth-child(2) {
  margin-top: 32px;
}

.narrative-thumb {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background-color: var(--color-surface-raised);
}

.narrative-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.narrative-pull {
  margin-top: 36px;
  max-width: 640px;
}

.narrative-pull p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  line-height: 1.35;
  color: var(--color-text);
}

@media (max-width: 860px) {
  .narrative-grid { grid-template-columns: 1fr; }
  .narrative-stack { flex-direction: row; }
  .narrative-stack .narrative-thumb:nth-child(2) { margin-top: 0; }
  .narrative-thumb { aspect-ratio: 4 / 3; }
}

@media (max-width: 480px) {
  .narrative-stack { flex-direction: column; }
  .narrative-stack .narrative-thumb:nth-child(2) { margin-top: 0; }
}

/* ================= Stat cards, redesigned ================= */

.stat-section {
  padding-block: 8px 88px;
}

.stat-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 20px;
  align-items: end;
}

.stat-row .stat-card:nth-child(2) {
  margin-top: 34px;
}

.stat-row .stat-card:nth-child(3) {
  margin-top: 14px;
}

.stat-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  background-color: var(--color-surface);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 3px;
  background-color: var(--color-accent);
  border-radius: 0 0 3px 3px;
}

.stat-card .stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}

.stat-card .stat-label {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .stat-row {
    grid-template-columns: 1fr 1fr;
  }
  .stat-row .stat-card:nth-child(1) {
    grid-column: 1 / -1;
  }
  .stat-row .stat-card:nth-child(2),
  .stat-row .stat-card:nth-child(3) {
    margin-top: 0;
  }
}

@media (max-width: 480px) {
  .stat-row {
    grid-template-columns: 1fr;
  }
}

/* ================= Registration steps, shown as a path ================= */

.steps-section {
  padding-block: 8px 96px;
}

.steps-path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 48px;
}

.steps-path::before {
  content: '';
  position: absolute;
  top: 21px;
  left: calc(12.5% - 2px);
  right: calc(12.5% - 2px);
  height: 0;
  border-top: 2px dashed var(--color-border);
  z-index: 0;
}

.step-item {
  position: relative;
  z-index: 1;
}

.step-medallion {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-bg);
  border: 2px solid var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 20px;
}

.step-item h4 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.step-item p {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
  max-width: 240px;
}

@media (max-width: 860px) {
  .steps-path {
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
  }
  .steps-path::before {
    top: 21px;
    left: calc(25% - 2px);
    right: calc(25% - 2px);
  }
}

@media (max-width: 560px) {
  .steps-path {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .steps-path::before {
    top: 0;
    bottom: 0;
    left: 21px;
    right: auto;
    width: 0;
    height: auto;
    border-top: none;
    border-left: 2px dashed var(--color-border);
  }
  .step-item {
    padding-left: 64px;
    padding-bottom: 36px;
  }
  .step-item:last-child {
    padding-bottom: 0;
  }
  .step-medallion {
    position: absolute;
    top: 0;
    left: 0;
    margin-bottom: 0;
  }
}

/* ================= Abstract brand mark ================= */

.hero-mark {
  position: absolute;
  top: -8%;
  right: 4%;
  width: clamp(560px, 60vw, 980px);
  transform: rotate(-10deg);
  z-index: 0;
  pointer-events: none;
}

.hero-mark svg {
  width: 100%;
  height: auto;
  display: block;
}

.hero-mark svg .mark-fill {
  fill: var(--color-primary);
  fill-opacity: 0.185;
}

html[data-theme="dark"] .hero-mark svg .mark-fill {
  fill-opacity: 0.09;
}

@media (max-width: 1024px) {
  .hero-mark {
    width: clamp(440px, 62vw, 640px);
    top: -2%;
    right: -18%;
  }
}

@media (max-width: 768px) {
  .hero-mark {
    width: clamp(380px, 78vw, 520px);
    top: auto;
    bottom: -2%;
    right: -22%;
  }
  .hero-mark svg .mark-fill {
    fill-opacity: 0.185;
  }
  html[data-theme="dark"] .hero-mark svg .mark-fill {
    fill-opacity: 0.27;
  }
}

@media (max-width: 480px) {
  .hero-mark {
    width: clamp(300px, 82vw, 400px);
    bottom: 10%;
    left: -15%;
  }
}

.footer-band {
  position: relative;
  overflow: hidden;
}

.footer-mark {
  position: absolute;
  bottom: -12%;
  left: 4%;
  width: clamp(180px, 19vw, 260px);
  transform: rotate(6deg);
  z-index: 0;
  pointer-events: none;
}

.footer-mark svg {
  width: 100%;
  height: auto;
  display: block;
}

.footer-mark svg .mark-fill {
  fill: var(--color-primary);
  fill-opacity: 0.16;
}

html[data-theme="dark"] .footer-mark svg .mark-fill {
  fill-opacity: 0.19;
}

.footer-band > .container {
  position: relative;
  z-index: 1;
}

/* ================= CTA hover reveal ================= */

.cta-panel-inner {
  position: relative;
}

.cta-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-accent);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.glass-panel:hover .cta-hint {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .cta-hint { transition: none; }
}

/* ================= Hero real-photo accent, desktop and mobile ================= */
/* Rebuilt per direction: the previous small floating tile read as an
   orphaned thumbnail next to the large abstract JT mark, with dead
   space around it and no clear reason to exist at that scale. This
   version commits to real presence on desktop instead of apologizing
   for itself. It sits directly against the CTA buttons as part of the
   same visual block, sized to hold its own next to the Camper Card
   across the layout, using the source photo's actual portrait shape
   rather than forcing a square crop that would lose the faces. */

.hero-photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-photo-bg img {
  position: absolute;
  top: 0;
  left: -6%;
  width: clamp(480px, 44vw, 680px);
  height: 100%;
  object-fit: cover;
  object-position: 38% 18%; /* reframe up and left, away from the pink object */
  -webkit-mask-image:
    linear-gradient(90deg, black 0%, black 20%, transparent 52%),
    linear-gradient(180deg, transparent 0%, black 12%, black 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, black 0%, black 20%, transparent 52%),
    linear-gradient(180deg, transparent 0%, black 12%, black 82%, transparent 100%);
  mask-composite: intersect;
}

/* Scrim: guarantees text contrast regardless of what's under it,
   independent of the mask fade above */
.hero-photo-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-bg) 55%, transparent) 0%,
    color-mix(in srgb, var(--color-bg) 25%, transparent) 30%,
    transparent 55%);
  z-index: 1;
}

.hero-photo-bg-caption {
  position: absolute;
  left: clamp(20px, 4vw, 48px);
  bottom: 24px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background-color: rgba(14, 14, 15, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: #F7F3EC;
}

@media (max-width: 1024px) {
  .hero-photo-bg img {
    width: clamp(360px, 58vw, 480px);
    left: -10%;
    -webkit-mask-image: linear-gradient(90deg, black 0%, black 35%, transparent 72%);
    mask-image: linear-gradient(90deg, black 0%, black 35%, transparent 72%);
  }
}

@media (max-width: 768px) {
  .hero-photo-bg {
    inset: 0;
  }

  .hero-photo-bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: 50% 25%;
    -webkit-mask-image: linear-gradient(180deg, black 0%, black 45%, transparent 92%);
    mask-image: linear-gradient(180deg, black 0%, black 45%, transparent 92%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }

  .hero-photo-bg::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--color-bg) 40%, transparent) 0%,
      color-mix(in srgb, var(--color-bg) 70%, transparent) 60%,
      var(--color-bg) 100%);
  }

  .hero-photo-bg-caption {
    display: inline-flex;
    left: 16px;
    bottom: auto;
    top: 220px;
  }

  .hero-content {
    padding-top: 100px;
  }
}