/* =========================================================================
   Hero Nova — scoped styles (.heronova) for index.html
   All selectors are scoped and keyframes prefixed hn- to avoid clashing
   with styles.css.
   ========================================================================= */

.heronova {
  --hn-deep: var(--green-deep);
  --hn-teal: var(--green-teal);
  --hn-bright: var(--green-bright);
  --hn-cream: #ffffff;
  --hn-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --hn-display: "DM Sans", system-ui, sans-serif;
  --hn-serif: "Newsreader", Georgia, serif;
  --hn-mono: "JetBrains Mono", monospace;
  --hn-medio-h: 82%;

  position: relative;
  height: 100vh;
  min-height: 700px;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: stretch;
  color: var(--hn-cream);
  background:
    radial-gradient(ellipse 100% 80% at 72% 8%, #14655d 0%, transparent 55%),
    radial-gradient(ellipse 90% 70% at 20% 100%, #0c4f49 0%, transparent 60%),
    linear-gradient(165deg, #0e544f 0%, #0a3f3a 55%, #072e2a 100%);
}
.heronova * { box-sizing: border-box; }

/* Mesh blobs */
.heronova .hn-orb {
  position: absolute; border-radius: 50%; filter: blur(70px);
  pointer-events: none; z-index: 0; will-change: transform;
  mix-blend-mode: screen;
}
.heronova .hn-orb--lime {
  width: 620px; height: 620px; top: -200px; right: -120px; opacity: 0.55;
  background: radial-gradient(circle, rgba(5,196,100,0.7) 0%, transparent 68%);
  animation: hn-drift1 16s var(--hn-ease) infinite alternate;
}
.heronova .hn-orb--teal {
  width: 560px; height: 560px; bottom: -200px; left: -140px; opacity: 0.6;
  background: radial-gradient(circle, rgba(13,160,150,0.7) 0%, transparent 70%);
  animation: hn-drift2 20s var(--hn-ease) infinite alternate;
}
.heronova .hn-orb--mint {
  width: 360px; height: 360px; top: 46%; left: 40%; opacity: 0.4;
  background: radial-gradient(circle, rgba(90,230,160,0.4) 0%, transparent 70%);
  animation: hn-drift3 14s var(--hn-ease) infinite alternate;
}
@keyframes hn-drift1 { to { transform: translate(-60px, 50px) scale(1.12); } }
@keyframes hn-drift2 { to { transform: translate(70px, -40px) scale(1.1); } }
@keyframes hn-drift3 { to { transform: translate(-40px, -50px) scale(1.18); } }

.heronova .hn-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 0%, transparent 78%);
}

.heronova .hn-grain {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.heronova .hn-vignette {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(ellipse 90% 90% at 50% 40%, transparent 55%, rgba(4,20,18,0.5) 100%);
}

/* Content grid */
.heronova .hn-wrap {
  position: relative; z-index: 4;
  width: 100%; max-width: 1480px; margin: 0 auto;
  padding: clamp(124px, 10vh, 160px) clamp(24px, 5vw, 80px) 20px;
  display: grid; grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(20px, 3vw, 56px); align-items: center;
}

.heronova .hn-copy { position: relative; z-index: 4; }

.heronova .hn-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--hn-mono); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--hn-cream);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  padding: 9px 16px; border-radius: 999px; backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(16px);
  animation: hn-rise 0.8s var(--hn-ease) 0.1s forwards;
}
.heronova .hn-pip {
  width: 8px; height: 8px; border-radius: 50%; background: var(--hn-bright);
  box-shadow: 0 0 0 0 rgba(5,196,100,0.6); animation: hn-pulse 2s infinite;
}
@keyframes hn-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(5,196,100,0.55); }
  50% { box-shadow: 0 0 0 7px rgba(5,196,100,0); }
}

.heronova .hn-title {
  font-family: var(--hn-display); font-weight: 600; color: var(--hn-cream);
  font-size: clamp(40px, 5.6vw, 82px); line-height: 0.98;
  letter-spacing: -0.03em; margin: 26px 0 0; text-wrap: balance;
}
.heronova .hn-title .hn-line { display: block; }
.heronova .hn-title .hn-line > span {
  display: inline-block; transform: translateY(36px); opacity: 0;
  animation: hn-linerise 0.9s var(--hn-ease) forwards;
}
.heronova .hn-title .hn-line:nth-child(1) > span { animation-delay: 0.16s; }
.heronova .hn-title .hn-line:nth-child(2) > span { animation-delay: 0.27s; }
.heronova .hn-title .hn-line:nth-child(3) > span { animation-delay: 0.38s; }
@keyframes hn-linerise { to { transform: translateY(0); opacity: 1; } }

.heronova .hn-shine {
  color: #e9fff4; font-family: var(--hn-serif); font-style: italic; font-weight: 400;
  text-shadow: 0 0 30px rgba(5,196,100,0.6), 0 2px 14px rgba(4,32,24,0.35);
  animation: hn-glow 3.6s ease-in-out infinite;
}
@keyframes hn-glow {
  0%,100% { text-shadow: 0 0 24px rgba(5,196,100,0.5), 0 2px 14px rgba(4,32,24,0.35); }
  50% { text-shadow: 0 0 40px rgba(5,196,100,0.85), 0 0 6px rgba(255,255,255,0.4), 0 2px 14px rgba(4,32,24,0.35); }
}

.heronova .hn-lede {
  font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6;
  color: rgba(255,255,255,0.82); max-width: 46ch; margin-top: 24px;
  opacity: 0; transform: translateY(16px);
  animation: hn-rise 0.8s var(--hn-ease) 0.5s forwards;
}
.heronova .hn-lede strong { color: #fff; font-weight: 600; }

.heronova .hn-kicker {
  font-family: var(--hn-serif); font-style: italic;
  font-size: clamp(16px, 1.3vw, 20px); color: var(--hn-bright); margin-top: 18px;
  opacity: 0; transform: translateY(16px);
  animation: hn-rise 0.8s var(--hn-ease) 0.62s forwards;
}

.heronova .hn-ctas {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px;
  opacity: 0; transform: translateY(16px);
  animation: hn-rise 0.8s var(--hn-ease) 0.72s forwards;
}
.heronova .hn-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--hn-display); font-size: 15px; font-weight: 600;
  padding: 16px 26px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
  transition: all 0.3s var(--hn-ease); position: relative; overflow: hidden;
}
.heronova .hn-btn--primary {
  background: var(--hn-bright); color: var(--text-inverse);
  box-shadow: 0 10px 36px -8px rgba(5,196,100,0.7), inset 0 1px 0 rgba(255,255,255,0.4);
}
.heronova .hn-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 18px 48px -8px rgba(5,196,100,0.85); }
.heronova .hn-gleam {
  position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: skewX(-18deg); animation: hn-gleam 3.4s ease-in-out infinite;
}
@keyframes hn-gleam { 0%,60% { left: -60%; } 100% { left: 130%; } }
.heronova .hn-btn--ghost {
  background: rgba(255,255,255,0.05); color: var(--hn-cream);
  border-color: rgba(255,255,255,0.28); backdrop-filter: blur(10px);
}
.heronova .hn-btn--ghost:hover { background: rgba(255,255,255,0.12); transform: translateY(-3px); }

.heronova .hn-stats {
  display: flex; gap: clamp(20px, 2.6vw, 40px); margin-top: 40px;
  opacity: 0; transform: translateY(16px);
  animation: hn-rise 0.8s var(--hn-ease) 0.84s forwards;
}
.heronova .hn-stat-n {
  font-family: var(--hn-display); font-weight: 600;
  font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -0.02em; line-height: 1; color: #fff;
}
.heronova .hn-stat-n sup { color: var(--hn-bright); font-size: 0.5em; font-family: var(--hn-serif); font-style: italic; }
.heronova .hn-stat-l { font-size: 12.5px; color: rgba(255,255,255,0.6); margin-top: 7px; max-width: 19ch; line-height: 1.4; }
.heronova .hn-stat + .hn-stat { border-left: 1px solid rgba(255,255,255,0.14); padding-left: clamp(20px, 2.6vw, 40px); }

@keyframes hn-rise { to { opacity: 1; transform: translateY(0); } }

/* Students stage */
.heronova .hn-stage { position: relative; align-self: stretch; min-height: 0; height: 100%; z-index: 3; }
.heronova .hn-stage-inner { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; }

.heronova .hn-student {
  position: absolute; bottom: 0; will-change: transform;
  transition: transform 0.5s var(--hn-ease), filter 0.5s var(--hn-ease); cursor: pointer;
}
.heronova .hn-student img {
  display: block; height: 100%; width: auto; max-width: none;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.45)); position: relative; z-index: 2;
}
.heronova .hn-halo {
  position: absolute; left: 50%; bottom: 6%; width: 120%; aspect-ratio: 1;
  transform: translateX(-50%); border-radius: 50%; z-index: 0; filter: blur(36px);
  opacity: 0.85; transition: opacity 0.5s var(--hn-ease), transform 0.5s var(--hn-ease);
}
.heronova .hn-ground {
  position: absolute; left: 50%; bottom: 2%; width: 78%; height: 42px;
  transform: translateX(-50%); z-index: 1; filter: blur(8px);
  background: radial-gradient(ellipse, rgba(0,0,0,0.45) 0%, transparent 70%);
}
.heronova .hn-ring {
  position: absolute; left: 50%; top: 50%; width: 116%; aspect-ratio: 1;
  transform: translate(-50%,-50%); border-radius: 50%;
  border: 1.5px dashed rgba(255,255,255,0.18); z-index: 0;
  animation: hn-spin 26s linear infinite;
}
@keyframes hn-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

.heronova .hn-student.hn-medio { height: var(--hn-medio-h); left: 50%; margin-left: calc(-16% - 70px); z-index: 2; animation: hn-float 7s var(--hn-ease) infinite; }
.heronova .hn-student.hn-medio .hn-halo { background: radial-gradient(circle, rgba(13,84,79,0.95), transparent 65%); box-shadow: 0 0 120px 30px rgba(13,84,79,0.4); }
.heronova .hn-student.hn-fundamental { height: calc(var(--hn-medio-h) * 0.76); left: 50%; margin-left: 8%; z-index: 3; animation: hn-float 6.2s var(--hn-ease) 0.4s infinite; }
.heronova .hn-student.hn-fundamental .hn-halo { background: radial-gradient(circle, rgba(9,114,116,0.9), transparent 66%); }
.heronova .hn-student.hn-infantil { height: calc(var(--hn-medio-h) * 0.6); left: 50%; margin-left: -40%; z-index: 4; animation: hn-float 5.6s var(--hn-ease) 0.8s infinite; }
.heronova .hn-student.hn-infantil .hn-halo { background: radial-gradient(circle, rgba(5,196,100,0.95), transparent 64%); box-shadow: 0 0 110px 24px rgba(5,196,100,0.45); }

@keyframes hn-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -16px; } }

.heronova .hn-student:hover { transform: scale(1.04) translateY(-8px); z-index: 9 !important; }
.heronova .hn-student.hn-medio:hover { z-index: 2 !important; }
.heronova .hn-student:hover img { filter: drop-shadow(0 40px 50px rgba(0,0,0,0.5)) saturate(1.08); }
.heronova .hn-student:hover .hn-halo { opacity: 1; transform: translateX(-50%) scale(1.12); }

.heronova .hn-chip {
  position: absolute; z-index: 6; display: flex; flex-direction: column; gap: 1px;
  background: rgba(7,34,30,0.66); border: 1px solid rgba(5,196,100,0.34);
  padding: 9px 14px; border-radius: 12px; box-shadow: 0 14px 34px -12px rgba(0,0,0,0.6);
  opacity: 0; transform: translateY(10px) scale(0.94);
  transition: all 0.45s var(--hn-ease); white-space: nowrap; pointer-events: none; will-change: transform;
}
.heronova .hn-student.is-in .hn-chip { opacity: 1; transform: translateY(0) scale(1); }
.heronova .hn-chip .hn-lvl { font-family: var(--hn-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hn-bright); }
.heronova .hn-chip .hn-age { font-family: var(--hn-display); font-weight: 600; font-size: 13px; color: #fff; }
.heronova .hn-chip::after {
  content: ""; position: absolute; width: 9px; height: 9px;
  background: rgba(7,34,30,0.66); border-right: 1px solid rgba(5,196,100,0.34);
  border-bottom: 1px solid rgba(5,196,100,0.34); bottom: -5px; left: 22px; transform: rotate(45deg);
}
.heronova .hn-chip.c-medio::after {
  left: auto;
  right: 22px;
}
.heronova .hn-chip.c-infantil { left: 4%; top: 52%; transition-delay: 0.9s; }
.heronova .hn-chip.c-fundamental { left: 8%; top: 56%; transition-delay: 1.05s; }
.heronova .hn-chip.c-medio { left: calc(4% - 80px); top: 6%; transition-delay: 1.2s; }

.heronova .hn-spark {
  position: absolute; z-index: 3; border-radius: 50%; background: #c9ffe6;
  pointer-events: none; box-shadow: 0 0 8px 2px rgba(5,196,100,0.8);
  animation: hn-twinkle linear infinite; opacity: 0;
}
@keyframes hn-twinkle {
  0% { opacity: 0; transform: translateY(10px) scale(0.4); }
  30% { opacity: 1; } 70% { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-30px) scale(1); }
}

.heronova .hn-corner {
  position: absolute; z-index: 7; bottom: 26px; right: clamp(20px,4vw,54px);
  display: flex; align-items: center; gap: 12px;
  font-family: var(--hn-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
  opacity: 0; animation: hn-rise 0.8s var(--hn-ease) 1.3s forwards;
}
.heronova .hn-corner .hn-dotline { width: 40px; height: 1px; background: rgba(255,255,255,0.3); }

/* Force-visible fallback if animations are paused while backgrounded */
.heronova.shown .hn-eyebrow,
.heronova.shown .hn-lede,
.heronova.shown .hn-kicker,
.heronova.shown .hn-ctas,
.heronova.shown .hn-stats,
.heronova.shown .hn-corner { opacity: 1 !important; transform: none !important; animation: none !important; }
.heronova.shown .hn-title .hn-line > span { opacity: 1 !important; transform: none !important; animation: none !important; }
.heronova.shown .hn-student.is-in .hn-chip,
.heronova.shown .hn-chip { opacity: 1 !important; transform: none !important; }

/* Nav over the dark hero (v2 only) */
body[data-hero="nova"] .nav:not(.is-scrolled) .nav-links a,
body[data-hero="nova"] .nav:not(.is-scrolled) .nav-item-label,
body[data-hero="nova"] .nav:not(.is-scrolled) .nav-aluno {
  color: rgba(255, 255, 255, 0.92);
}
body[data-hero="nova"] .nav:not(.is-scrolled) .nav-aluno { border-right-color: rgba(255,255,255,0.2); }

/* ── Responsive ──────────────────────────────────────────────────── */

/* Desktop: short viewports (e.g. laptop window < 770px tall) — avoid
   clipping content instead of forcing a rigid 100vh box */
@media (min-width: 1081px) and (max-height: 770px) {
  .heronova { height: auto; min-height: 100svh; }
}

/* Tablet: copy + stage stacked, stage below */
@media (max-width: 1080px) {
  .heronova { height: auto; min-height: 100svh; --hn-medio-h: 88%; }
  .heronova .hn-wrap {
    grid-template-columns: 1fr;
    padding-top: clamp(124px, 12vh, 160px);
    padding-bottom: 0;
    gap: 0;
  }
  .heronova .hn-copy { max-width: 600px; }
  .heronova .hn-stage { min-height: 52vh; height: 52vh; align-self: auto; }
  .heronova .hn-stage-inner { position: absolute; inset: 0; }
  .heronova .hn-student.hn-medio { margin-left: calc(-18% - 20px); }
  .heronova .hn-student.hn-fundamental { margin-left: 6%; }
  .heronova .hn-student.hn-infantil { margin-left: -42%; }
  .heronova .hn-chip.c-medio { left: 2%; top: 1%; }
  .heronova .hn-chip.c-fundamental { left: 6%; top: 50%; }
  .heronova .hn-stats { margin-top: 28px; }

  /* Title: "Educação que inspira" on one line, "gerações." larger below */
  .heronova .hn-title .hn-line:nth-child(1),
  .heronova .hn-title .hn-line:nth-child(2) {
    display: inline;
  }
  .heronova .hn-shine { font-size: 1.15em; }
}

/* Mobile: phones */
@media (max-width: 640px) {
  .heronova { height: auto; min-height: 0; --hn-medio-h: 90%; }
  .heronova .hn-wrap {
    padding-top: clamp(124px, 13vh, 160px);
    padding-bottom: 0;
  }
  .heronova .hn-title { font-size: clamp(32px, 10vw, 48px); }
  .heronova .hn-lede { font-size: 15px; max-width: 100%; }
  .heronova .hn-stats { gap: 14px; flex-wrap: wrap; margin-top: 20px; }
  .heronova .hn-stat + .hn-stat { padding-left: 14px; }
  .heronova .hn-ctas { gap: 10px; }
  .heronova .hn-btn { font-size: 14px; padding: 13px 20px; }

  .heronova .hn-stage { height: 46vh; min-height: 300px; }
  .heronova .hn-student.hn-medio { margin-left: calc(-18% - 10px); }
  .heronova .hn-student.hn-fundamental { margin-left: 8%; }
  .heronova .hn-student.hn-infantil { margin-left: -44%; }

  /* "gerações." even larger on mobile */
  .heronova .hn-title .hn-line:nth-child(3) { margin-top: 6px; }
  .heronova .hn-shine { font-size: 1.3em; }

  /* Remove "Conheça o Colégio" button on mobile */
  .heronova .hn-btn--ghost { display: none; }

  /* Remove "Matrículas Abertas" button on mobile (already in nav CTA) */
  .heronova .hn-btn--primary { display: none; }

  /* Remove "5 níveis" stat on mobile */
  .heronova .hn-stat:nth-child(2) { display: none; }
  .heronova .hn-stat:nth-child(3) { border-left: none; padding-left: 0; }

  /* Simplify chips on mobile */
  .heronova .hn-chip { padding: 6px 10px; border-radius: 8px; }
  .heronova .hn-chip .hn-age { font-size: 11px; }
  .heronova .hn-chip.c-medio { left: 1%; top: 4%; }
  .heronova .hn-chip.c-fundamental { left: 4%; top: 48%; }
  .heronova .hn-chip.c-infantil { left: 2%; top: 50%; }
  .heronova .hn-corner { display: none; }
  .heronova .hn-ring { display: none; }
}

/* Very small phones */
@media (max-width: 400px) {
  .heronova .hn-title { font-size: clamp(28px, 9vw, 38px); }
  .heronova .hn-stat-n { font-size: 22px; }
  .heronova .hn-stats { gap: 10px; }
  .heronova .hn-stat + .hn-stat { padding-left: 10px; }
  .heronova .hn-chip { display: none; }
  .heronova .hn-stage { height: 40vh; }
}

@media (prefers-reduced-motion: reduce) {
  .heronova * { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; }
  .heronova .hn-title .hn-line > span { transform: none; opacity: 1; }
}