/* 3D and motion effects. Decorative only; every rule is off under prefers-reduced-motion. */

/* ---- scroll reveal (only when JS has run) ---- */
.js .reveal { opacity: 0; transform: perspective(900px) translateY(46px) rotateX(16deg) scale(.96); transform-origin: 50% 100%;
  transition: opacity .4s cubic-bezier(.2, .7, .2, 1), transform .4s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 45ms); }   /* content arrives twice as fast after a scroll */
.js .reveal.in { opacity: 1; transform: none; }

/* ---- tilt cards ---- */
.fx-tilt { position: relative; transform-style: preserve-3d; will-change: transform;
  transition: transform .18s ease-out, box-shadow .25s; }
.fx-tilt.tilting { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(14px);
  box-shadow: 0 22px 44px rgba(18, 40, 90, .22); }
.fx-tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .55), transparent 55%); }
.fx-tilt.tilting::after { opacity: .7; }

.stats b { background: linear-gradient(90deg, var(--navy), #2f5ec4); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }
.btn { transition: transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(217, 165, 33, .4); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .fx-tilt.tilting { transform: none; }
}

/* until the 3D scene has started (known from the last visit), show the navy backdrop only, so the flat light page never flashes */
html.gl-soon:not(.gl), html.gl-soon:not(.gl) body { background: #0b1a3d; }
html.gl-soon:not(.gl) body > * { opacity: 0; }
/* ---- whole-site 3D world (scene.js adds html.gl only when WebGL works) ---- */
#world { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.gl body { background: transparent; }
.gl main { perspective: 1200px; perspective-origin: 50% 40%; }
.gl .hero { background: none; animation: none; }
.gl .hero h1 { text-shadow: 0 4px 30px rgba(0, 0, 0, .45); }
.gl .hero-inner { max-width: 38.75rem; }
.gl .site-header { background: rgba(11, 26, 61, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: rgba(255, 255, 255, .12); }
.gl .brand, .gl .brand-text small, .gl .nav a { color: #e8edff; }
.gl .nav a:hover { color: var(--gold); }
.gl .nav-toggle { color: #fff; border-color: rgba(255, 255, 255, .35); }
@media (max-width: 800px) { .gl .nav.open { background: rgba(11, 26, 61, .95); } }
.gl .section, .gl .section.alt { background: none; }
.gl main .section > .wrap { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  transform-style: preserve-3d; transform: rotateX(var(--px, 0deg)) translateZ(var(--pz, 0px)); transition: transform .25s ease-out; }
.gl .stats { margin-top: 0; }
.gl .stats > div { background: rgba(255, 255, 255, .92); }
.gl .site-footer { background: rgba(11, 26, 61, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.gl .tabs, .gl .note { position: relative; }
/* inner pages: the footer sits at the bottom of the window even when the page is short, so the 3D object beside the text is never under it */
.gl.page-sub body { min-height: 100svh; display: flex; flex-direction: column; }
.gl.page-sub body > main { flex: 1 0 auto; }
/* in a 3D section a flat control is coplanar with the section, so clicks landed on the section instead; lift the tabs off it */
.gl .tabs { translate: 0 0 24px; }
@media (prefers-reduced-motion: reduce) { .gl main .section > .wrap { transform: none; } }
.gl body { overflow-x: clip; }

/* ---- layout that leaves room for each 3D station: text on one side, the model on the other ---- */
@media (min-width: 900px) {
  .gl #programs > .wrap, .gl #news > .wrap { width: min(43.75rem, 100% - 2rem); margin-left: max(1rem, calc((100% - 70rem) / 2)); margin-right: auto; }
  .gl #about > .wrap, .gl #admissions > .wrap, .gl #contact > .wrap { width: min(43.75rem, 100% - 2rem); margin-right: max(1rem, calc((100% - 70rem) / 2)); margin-left: auto; }
  .gl #about .two-col { grid-template-columns: 1fr; gap: 12px; }
}

/* ---- HUD: where you are on the journey ---- */
.hud { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 20; display: none; flex-direction: column; gap: 14px; }
@media (min-width: 1100px) { .gl .hud { display: flex; } }
.hud a { display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; text-decoration: none; color: #cfd9ff; font-size: .78rem; font-weight: 600; }
.hud i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .25); border: 2px solid rgba(255, 255, 255, .5);
  transition: transform .25s, background .25s, box-shadow .25s; }
.hud span { opacity: 0; transform: translateX(8px); transition: opacity .25s, transform .25s; background: rgba(11, 26, 61, .85); padding: 3px 10px; border-radius: 999px; }
.hud a:hover span, .hud a.on span, .hud a:focus-visible span { opacity: 1; transform: none; }
.hud a.on i { background: var(--gold); border-color: #fff; transform: scale(1.5); box-shadow: 0 0 14px 3px rgba(217, 165, 33, .8); }
.nav a[aria-current="location"] { color: var(--gold); box-shadow: inset 0 -3px 0 var(--gold); border-radius: 0; }

/* inner pages: text panel on the left, the 3D station on the right */
@media (min-width: 900px) {
  .gl.page-sub main .section > .wrap:not(.narrow) { width: min(53.75rem, 100% - 2rem); margin-left: max(1rem, calc((100% - 70rem) / 2)); margin-right: auto; }
}

/* ---- no flat slabs: headings, text and components float directly in the 3D scene ---- */
.gl main .section h2, .gl main .page-title, .gl main .section > .wrap > h1 { color: #fff; text-shadow: 0 3px 22px rgba(0, 0, 0, .6); }
.gl main .section .note, .gl main .meta, .gl main .lead-dark, .gl .more-note, .gl .videos + p { color: #d6dcf0; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.gl main .section .link, .gl main .prose a, .gl main .details dd a { color: var(--gold); }
.gl main .details dd, .gl main .pager, .gl main .video figcaption, .gl main .thumbs span, .gl main .downloads { color: #e8edff; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.gl main .video figcaption { font-size: 1rem; }
.gl main .prose { color: #e8edff; padding: clamp(16px, 3vw, 28px); border-radius: 18px; border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(160deg, rgba(24, 46, 104, .62), rgba(11, 26, 61, .5)); box-shadow: 0 18px 40px rgba(0, 0, 0, .3); }
.gl main .prose h2, .gl main .prose h3 { color: #fff; }
.gl main .prose .card h3 { color: var(--navy); }
.gl main .prose .card p { color: var(--muted); }
.gl main .form .notice, .gl main .form label { color: var(--text); }

/* ---- one section per screen: every home-page section fills the window below the header, snaps into place and cross-fades,
   so two sections are never shown on top of each other ---- */
.gl:not(.page-sub) { scroll-snap-type: y proximity; }
.gl:not(.page-sub) main > section {
  min-height: calc(100svh - var(--header-h, 77px)); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(.75rem, 3vh, 2.5rem); scroll-snap-align: start; transform-style: preserve-3d;
  opacity: var(--vis, 1); translate: 0 calc((1 - var(--vis, 1)) * 40px);
}
.gl:not(.page-sub) main > section.hero { gap: clamp(48px, 11vh, 120px); padding-block: clamp(.75rem, 3vh, 2.5rem); }
.gl:not(.page-sub) main > section.hero { justify-content: flex-start; }
.gl:not(.page-sub) .hero .hero-inner { margin-block: auto; }
/* the four numbers sit in a slim row along the bottom-left, clear of the globe and its pictures */
.gl:not(.page-sub) .hero .stats { margin: 0 0 0 max(16px, calc((100% - 1120px) / 2)); width: min(560px, 100% - 32px); gap: 10px; grid-template-columns: repeat(4, 1fr); }
.gl:not(.page-sub) .hero .stats > div { padding: 6px 8px; border-radius: 12px; }
.gl:not(.page-sub) .hero .stats b { font-size: clamp(1.05rem, 2.6vh, 1.4rem); transform: none; line-height: 1.25; }
.gl:not(.page-sub) .hero .stats > div { padding-top: 10px; }
.gl:not(.page-sub) .hero .stats span { font-size: .72rem; }
@media (max-width: 640px) { .gl:not(.page-sub) .hero .stats { grid-template-columns: repeat(2, 1fr); } }
.gl:not(.page-sub) main > section.is-away { pointer-events: none; }
/* type and spacing follow the window height as well as its width */
.gl:not(.page-sub) .hero h1 { font-size: clamp(1.8rem, min(5vw, 7.4vh), 3.5rem); margin-bottom: .3em; }
.gl:not(.page-sub) .hero .lead { font-size: clamp(1rem, 2.4vh, 1.2rem); }
.gl:not(.page-sub) main .section h2 { font-size: clamp(1.4rem, min(3vw, 4.4vh), 2.2rem); }
.gl:not(.page-sub) .stats > div { padding: clamp(10px, 2vh, 20px); }
.gl:not(.page-sub) .steps li, .gl:not(.page-sub) .card { padding: clamp(12px, 2vh, 20px); }
@media (max-height: 640px) { .gl:not(.page-sub) .hero .actions { margin-top: 10px; } .gl:not(.page-sub) .tabs { margin: 8px 0; } }
@media (prefers-reduced-motion: reduce) { .gl:not(.page-sub) { scroll-snap-type: none; } .gl:not(.page-sub) main > section { opacity: 1; translate: none; } }

/* ---- campus lens: Street View opens as a round window over the globe ---- */
/* the descent to the campus (Google 3D map, drawn by world/flyin.js): behind the page content like #world, with its own small controls above it */
.flyin[hidden] { display: none; }
.flyin canvas, .flyin-scrim { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; opacity: var(--fly, 0); pointer-events: none; }
.flyin-sv { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; border: 0; opacity: var(--sv, 0); pointer-events: none; }      /* fixed Street View photo, not interactive */
.flyin-scrim { z-index: -1; background: linear-gradient(90deg, rgba(5, 12, 30, .78) 0%, rgba(5, 12, 30, .55) 34%, rgba(5, 12, 30, 0) 62%); }
.flyin-tag, .flyin-back, .flyin-credit { position: fixed; z-index: 8; opacity: 0; transition: opacity .5s; pointer-events: none; }
.flyin-tag { right: 6vw; top: 96px; padding: 5px 16px; border-radius: 999px; background: var(--gold); color: var(--navy-dark); font-weight: 700; font-size: .85rem; }
.flyin-back { right: 6vw; bottom: 34px; padding: 9px 22px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .85); background: rgba(11, 26, 61, .85); color: #fff; font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; }
.flyin-back:hover { background: var(--gold); color: var(--navy-dark); }
.flyin-credit { left: 12px; bottom: 8px; display: flex; align-items: center; gap: 8px; max-width: 70vw; font-size: .68rem; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.flyin-credit img { background: rgba(255, 255, 255, .92); border-radius: 4px; padding: 2px 5px; box-sizing: content-box; }
.flyin.open .flyin-tag, .flyin.open .flyin-credit { opacity: 1; }
.flyin.open .flyin-back { opacity: 1; pointer-events: auto; }
.flyin:not([hidden]) .flyin-credit { opacity: .9; }
@media (prefers-reduced-motion: reduce) { .flyin { display: none; } }

/* going to another page: the page content lifts away while the camera flies on, and the next page arrives from behind */
html.leaving main, html.leaving .site-footer { opacity: 0; transform: scale(1.05); transition: opacity .45s ease, transform .5s ease; pointer-events: none; }
html.arriving main, html.arriving .site-footer { animation: fx-arrive .8s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes fx-arrive { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }