html { scroll-behavior: smooth; }
body { background: #FBF8F0; color: #33302C; font-feature-settings: "ss01"; }

/* The nav is fixed, so anchored sections must clear it instead of sliding underneath. */
[id] { scroll-margin-top: 5.5rem; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* layered, color-tinted shadows */
.shadow-elevated { box-shadow: 0 1px 2px rgba(42,79,34,0.07), 0 8px 20px -6px rgba(42,79,34,0.16); }
.shadow-floating { box-shadow: 0 2px 4px rgba(42,79,34,0.08), 0 16px 32px -8px rgba(42,79,34,0.22), 0 32px 64px -16px rgba(42,79,34,0.14); }
.shadow-gold-glow { box-shadow: 0 1px 2px rgba(200,155,28,0.15), 0 10px 28px -6px rgba(200,155,28,0.35); }

/* grain texture overlay */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* sun-ray signature motif */
.sunrays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(232,190,63,0.16) 0deg 4deg, transparent 4deg 16deg);
  -webkit-mask-image: radial-gradient(circle at 50% 100%, black 0%, black 35%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 100%, black 0%, black 35%, transparent 70%);
  animation: rotate-rays 140s linear infinite;
}
@keyframes rotate-rays { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sunrays { animation: none; } }

.ribbon-cut { clip-path: polygon(0 0, 100% 0, 100% 78%, 92% 100%, 8% 100%, 0 78%); }

/* Trazo dorado que resalta una frase dentro de un titular, sin tocar el color del
   texto: el dorado sobre pergamino no llega a 3:1 y como tinta no pasaría AA,
   pero de fondo detrás de la tinta forest sí funciona. Va como background y no
   como text-decoration para poder difuminar las puntas y controlar el grosor. */
.swash-underline {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(to right,
    rgba(217,165,24,0) 0%,
    rgba(217,165,24,0.5) 10%,
    rgba(217,165,24,0.5) 90%,
    rgba(217,165,24,0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.2em;
  background-position: 0 96%;
}

/* Enough weight through the middle for the kicker + headline to clear AA over a
   bright sky, without flattening the footage behind it. */
.hero-scrim {
  background: linear-gradient(to top, rgba(20,38,16,0.97) 0%, rgba(23,44,18,0.92) 26%, rgba(27,52,21,0.76) 48%, rgba(27,52,21,0.5) 70%, rgba(27,52,21,0.22) 100%);
}

.photo-treat { position: relative; }
.photo-treat img { display: block; }
.photo-treat::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(31,59,25,0.35), transparent 55%);
  mix-blend-mode: multiply;
}

.bar-fill { transition: width 1s cubic-bezier(0.16,1,0.3,1); }

/* Card hover: sube la tarjeta y profundiza la sombra al mismo tiempo.
   Vive acá y no como `hover:shadow-floating` porque las sombras del sitio son
   clases propias, y Tailwind no genera variantes de utilidades que no conoce.
   El bloque de `prefers-reduced-motion` del final ya neutraliza la transición. */
.card-lift { transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s cubic-bezier(0.16,1,0.3,1); }
.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 2px 4px rgba(42,79,34,0.08), 0 16px 32px -8px rgba(42,79,34,0.22), 0 32px 64px -16px rgba(42,79,34,0.14);
}

/* hero background video — cinematic montage of real school footage */
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* one-time "focus pull" as the hero opens, like a film fading in */
#hero-carousel { animation: hero-open 1.9s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes hero-open {
  from { filter: blur(18px) brightness(0.6); transform: scale(1.04); }
  to   { filter: blur(0) brightness(1); transform: scale(1); }
}

/* warm ambient light that gently breathes over the montage */
.hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(125% 85% at 50% 8%, rgba(232,190,63,0.16), transparent 58%);
  mix-blend-mode: soft-light;
  animation: hero-breathe 9s ease-in-out infinite;
}
@keyframes hero-breathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  #hero-carousel { animation: none; }
  .hero-glow { animation: none; opacity: 0.6; }
}

.hero-dot {
  width: 8px; height: 8px; border-radius: 9999px;
  background: rgba(251,248,240,0.4);
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.hero-dot.is-active { background: #E8BE3F; transform: scale(1.35); }
.hero-dot:hover { background: rgba(251,248,240,0.7); }

/* medallion badges for credentials */
.medal-ring {
  background: conic-gradient(from 180deg, #E8BE3F, #C89B1C, #F0D585, #C89B1C, #E8BE3F);
}
.medal-ribbon {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
}

/* sub-page hero: shorter than home, still uses hero-scrim + grain */
.page-hero { min-height: 46vh; }
@media (min-width: 640px) { .page-hero { min-height: 52vh; } }

/* extra legibility safety net for text sitting over photos */
.hero-text-shadow { text-shadow: 0 2px 16px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.5); }

/* …but text-shadow inherits, so it also landed on the filled buttons inside the
   hero and smeared their labels with a dark halo. A filled button brings its own
   background: the shadow buys it nothing and only costs legibility. The outlined
   button beside it sits directly on the photo, so that one keeps the shadow. */
.hero-text-shadow .bg-gold-500,
.hero-text-shadow .bg-gold-400,
.hero-text-shadow .bg-forest-700 { text-shadow: none; }

::selection { background: #E8BE3F; color: #1F3B19; }

/* Two-tone focus ring: the dark outline carries on parchment, the gold halo
   carries on forest and on the gold buttons themselves. */
:focus-visible {
  outline: 3px solid #1F3B19;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(217,165,24,0.95);
}

/* Card lifts are decoration — drop them when motion is not wanted. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}