/* Itaca University — intro animada (pantalla de carga de la página de inicio).
   Todo vive bajo el prefijo .itaca-intro / #itaca-intro-* para no chocar con styles.css.
   Los colores de marca vienen de :root en styles.css (--itaca-*); el resto son tonos propios de la intro. */
.itaca-intro {
  --itaca-intro-teal-900: #06625f;
  --itaca-intro-teal-700: var(--itaca-teal, #09918d);        /* emblema / color principal */
  --itaca-intro-teal-500: var(--itaca-teal-light, #2bb2aa);  /* curvas de esquina */
  --itaca-intro-teal-300: #7fd3cc;
  --itaca-intro-glow: #5ff0e6;                               /* partículas */
  --itaca-intro-ink: var(--itaca-gray, #404242);             /* "Itaca" y "UNIVERSITY" */
  --itaca-intro-paper: var(--itaca-paper, #f4f6f7);          /* fondo claro */
  --itaca-intro-night: #020606;                              /* fondo de la intro */
  --itaca-intro-font-brand: "Uncial Antiqua", serif;
  --itaca-intro-font-sans: "Montserrat", system-ui, sans-serif;
  --itaca-intro-ease: cubic-bezier(.16, .84, .24, 1);

  position: fixed; inset: 0; z-index: 2147483000;
  background: var(--itaca-intro-night); overflow: hidden;
  font-family: var(--itaca-intro-font-sans);
  opacity: 1; transition: opacity .8s ease;
}
.itaca-intro, .itaca-intro *, .itaca-intro *::before, .itaca-intro *::after { box-sizing: border-box; margin: 0; padding: 0; }
.itaca-intro--out { opacity: 0; pointer-events: none; }

/* Scroll de la página bloqueado mientras se muestra */
html.itaca-intro-lock, html.itaca-intro-lock body { overflow: hidden !important; overscroll-behavior: none; }

/* ---------- capas ---------- */
.itaca-intro-canvas, .itaca-intro-brand, .itaca-intro-whiteout { position: absolute; inset: 0; }
.itaca-intro-canvas { width: 100%; height: 100%; display: block; z-index: 2; }
.itaca-intro-whiteout {
  z-index: 5; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, #fff 0%, #f2fffd 55%, #d9f7f4 100%);
  transition: opacity .75s ease-out;
}
.itaca-intro-whiteout.itaca-intro-on { opacity: 1; transition: opacity .25s ease-in; }

.itaca-intro-brand { z-index: 1; background: var(--itaca-intro-paper); overflow: hidden; visibility: hidden; }
.itaca-intro--play .itaca-intro-brand { visibility: visible; }
.itaca-intro-facets, .itaca-intro-corners, .itaca-intro-ribbon { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- curvas de esquina ---------- */
.itaca-intro-corner { transition: transform 1.2s var(--itaca-intro-ease), opacity 1.2s; }
.itaca-intro-corner--tl { transform: translate(-18%, -25%); opacity: 0; }
.itaca-intro-corner--br { transform: translate(18%, 25%); opacity: 0; }
.itaca-intro--play .itaca-intro-corner { transform: none; opacity: 1; }

/* ---------- destellos (ticks) ---------- */
.itaca-intro-spark { position: absolute; width: 70px; height: 70px; transform: scale(0) rotate(var(--r, 0deg)); opacity: 0; }
.itaca-intro--play .itaca-intro-spark { animation: itaca-intro-spark .7s var(--itaca-intro-ease) forwards, itaca-intro-pulse 3.2s 1.6s ease-in-out infinite; }
.itaca-intro-spark i {
  position: absolute; left: 50%; bottom: 50%; width: 7px; height: 30px; margin-left: -3.5px;
  background: linear-gradient(to top, transparent, var(--itaca-intro-teal-700));
  clip-path: polygon(50% 0, 100% 100%, 0 100%); transform-origin: 50% 100%;
}
.itaca-intro-spark i:nth-child(1) { transform: rotate(-38deg) translateY(-6px); }
.itaca-intro-spark i:nth-child(2) { transform: rotate(0deg) translateY(-6px); height: 30px; }
.itaca-intro-spark i:nth-child(3) { transform: rotate(38deg) translateY(-6px); opacity: .35; }
@keyframes itaca-intro-spark { to { transform: scale(1) rotate(var(--r, 0deg)); opacity: 1; } }
@keyframes itaca-intro-pulse { 50% { transform: scale(.88) rotate(var(--r, 0deg)); opacity: .7; } }

/* ---------- logo ----------
   Emblema y curva van en em (font-size del wordmark) para conservar las proporciones del logo oficial en cualquier pantalla. */
.itaca-intro-logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; width: min(78vw, 520px); z-index: 3;
  font-size: clamp(56px, 13vw, 124px);
}
.itaca-intro-emblem { width: 1.48em; aspect-ratio: 1; position: relative; opacity: 0; }
.itaca-intro-emblem > svg, .itaca-intro-emblem > img { width: 100%; height: 100%; max-width: none; display: block; object-fit: contain; }
.itaca-intro-emblem::after {
  content: ""; position: absolute; inset: -60%; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(140,255,245,.45) 30%, transparent 65%);
}
.itaca-intro--play .itaca-intro-emblem { animation: itaca-intro-emblem-in 1s .1s var(--itaca-intro-ease) forwards; }
.itaca-intro--play .itaca-intro-emblem::after { animation: itaca-intro-flare 1.1s .1s ease-out forwards; }
@keyframes itaca-intro-emblem-in { from { opacity: 0; transform: scale(.55); filter: blur(12px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes itaca-intro-flare { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.4); } }

.itaca-intro-wordmark { position: relative; width: 100%; margin-top: -2%; }
.itaca-intro-title {
  font-family: var(--itaca-intro-font-brand); font-weight: 400; color: var(--itaca-intro-ink);
  font-size: 1em; line-height: 1; text-align: center; letter-spacing: .02em;
  position: relative; z-index: 2; clip-path: inset(0 100% 0 0); filter: blur(6px);
}
.itaca-intro--play .itaca-intro-title { animation: itaca-intro-wipe 1s .4s var(--itaca-intro-ease) forwards; }
@keyframes itaca-intro-wipe { to { clip-path: inset(0 0 0 0); filter: blur(0); } }

/* Curva del logo (img/brand/itaca-curva.svg): sus trazos guía (.itaca-intro-draw) se "dibujan";
   si un SVG solo tuviera rellenos, se revela con un barrido. Caja calibrada sobre la línea base de "Itaca". */
.itaca-intro-orbit { position: absolute; left: calc(50% - 2.463em); top: -.229em; width: 4.939em; height: 1.421em; z-index: 1; overflow: visible; display: block; }
.itaca-intro-draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.itaca-intro--play .itaca-intro-draw { animation: itaca-intro-draw 1s .6s var(--itaca-intro-ease) forwards; }
.itaca-intro-orbit--wipe { clip-path: inset(0 100% 0 0); }
.itaca-intro--play .itaca-intro-orbit--wipe { animation: itaca-intro-reveal 1s .6s var(--itaca-intro-ease) forwards; }
.itaca-intro-pop { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.itaca-intro--play .itaca-intro-pop { animation: itaca-intro-pop .45s 1.35s cubic-bezier(.3, 1.8, .5, 1) forwards; }
@keyframes itaca-intro-draw { to { stroke-dashoffset: 0; } }
@keyframes itaca-intro-reveal { to { clip-path: inset(0 0 0 0); } }
@keyframes itaca-intro-pop { to { transform: scale(1); } }

.itaca-intro-univ {
  font-weight: 600; color: var(--itaca-intro-ink); font-size: clamp(13px, 2.9vw, 24px); line-height: 1.6;
  letter-spacing: .9em; margin-right: -.35em; opacity: 0; margin-top: .15em;
}
.itaca-intro--play .itaca-intro-univ { animation: itaca-intro-univ 1.1s .85s var(--itaca-intro-ease) forwards; }
@keyframes itaca-intro-univ { to { letter-spacing: .35em; opacity: 1; } }
.itaca-intro-underline {
  height: 2px; width: 45%; margin-top: .7rem; transform: scaleX(0);
  background: linear-gradient(90deg, transparent, var(--itaca-intro-teal-700) 20%, var(--itaca-intro-teal-700) 80%, transparent);
}
.itaca-intro--play .itaca-intro-underline { animation: itaca-intro-line .9s 1.2s var(--itaca-intro-ease) forwards; }
@keyframes itaca-intro-line { to { transform: scaleX(1); } }

/* brillo que barre el logo al final */
.itaca-intro-logo::after {
  content: ""; position: absolute; inset: -10% -20%; pointer-events: none; z-index: 4;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%);
  transform: translateX(-120%); mix-blend-mode: soft-light;
}
.itaca-intro--play .itaca-intro-logo::after { animation: itaca-intro-sheen 1.4s 1.9s ease-in-out forwards; }
@keyframes itaca-intro-sheen { to { transform: translateX(120%); } }

/* ---------- control ---------- */
.itaca-intro-ctrl { position: absolute; right: 16px; bottom: 16px; z-index: 10; display: flex; gap: 8px; }
.itaca-intro-skip {
  font: 600 12px/1.2 var(--itaca-intro-font-sans); letter-spacing: .08em; text-transform: uppercase;
  padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(9,145,141,.5); cursor: pointer;
  background: rgba(255,255,255,.12); color: var(--itaca-intro-teal-300);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.itaca-intro-skip:focus-visible { outline: 2px solid var(--itaca-intro-teal-300); outline-offset: 2px; }
.itaca-intro--light .itaca-intro-skip { color: var(--itaca-intro-teal-700); background: rgba(255,255,255,.6); }
.itaca-intro--light .itaca-intro-skip:focus-visible { outline-color: var(--itaca-intro-teal-700); }

/* Movimiento reducido: el JS salta directo a la escena final; aquí se congelan las animaciones en su estado final */
@media (prefers-reduced-motion: reduce) {
  .itaca-intro *, .itaca-intro *::before, .itaca-intro *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important;
  }
}