/* Kerr University homepage hero: title entrance + contained crest medallion stage.
   Page-scoped to index.html only. All selectors are new class/id names or
   are scoped under .hero--home so nothing here touches the shared .hero
   banner styles used across the rest of the site. */

:root {
  --ku-ease-settle: cubic-bezier(.16, .84, .24, 1);
}

/* ================= INTRO OVERLAY ================= */
/* Lives as a sibling of .hero (not nested inside it) so its position:fixed
   layer is never clipped by .hero's overflow:hidden. */
.ku-intro {
  position: fixed;
  inset: 0;
  z-index: 500; /* below header.site (1000) so nav stays usable during the intro */
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(70% 70% at 50% 46%, #4a0d12 0%, var(--ku-crimson-deep, #4f0d12) 72%, #160406 100%);
  transition: opacity .9s ease, visibility .9s;
}
.ku-intro.done { opacity: 0; visibility: hidden; pointer-events: none; }

.ku-intro-title {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(94vw, 1180px);
  align-items: baseline;
  font-family: "Kerr Display", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 9.5vw, 8.4rem);
  line-height: 1;
  letter-spacing: -.01em;
}
.ku-intro-left { text-align: right; padding-right: .22em; }
.ku-intro-right { text-align: left; padding-left: .22em; position: relative; }

.ku-iw-left, .ku-iw-right {
  display: inline-block;
  opacity: 0;
  position: relative; /* .ku-tm-mark anchors to this word's own box, not the wider grid cell */
  background-image: linear-gradient(100deg, var(--ku-gold-light, #f0d98f) 8%, var(--ku-gold, #c7a14a) 65%, #a8823a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  will-change: transform, opacity, filter;
}
.ku-iw-left { animation: kuFlyL .78s var(--ku-ease-settle) .15s forwards; }
.ku-iw-right { animation: kuFlyR .78s var(--ku-ease-settle) .15s forwards; }
@keyframes kuFlyL {
  0% { opacity: 0; transform: translateX(-92vw) scale(1.08); filter: blur(3px); }
  62% { opacity: 1; transform: translateX(.8%) scale(1); filter: blur(0); }
  78% { transform: translateX(-.4%); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes kuFlyR {
  0% { opacity: 0; transform: translateX(92vw) scale(1.08); filter: blur(3px); }
  62% { opacity: 1; transform: translateX(-.8%) scale(1); filter: blur(0); }
  78% { transform: translateX(.4%); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
.ku-intro-title.impact .ku-iw-left { animation: kuFlyL .78s var(--ku-ease-settle) .15s forwards, kuShake .25s ease-out .82s; }
.ku-intro-title.impact .ku-iw-right { animation: kuFlyR .78s var(--ku-ease-settle) .15s forwards, kuShake .25s ease-out .82s; }
@keyframes kuShake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1.5px, 1px); }
  50% { transform: translate(1.2px, -1px); }
  75% { transform: translate(-.6px, .6px); }
  100% { transform: translate(0, 0); }
}

.ku-shockwave {
  position: absolute; left: 50%; top: 50%;
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 1px solid var(--ku-gold-light, #f0d98f);
  opacity: 0;
  animation: kuShock .66s ease-out .84s 1;
}
@keyframes kuShock {
  0% { opacity: .95; transform: scale(0); }
  70% { opacity: .25; }
  100% { opacity: 0; transform: scale(56); }
}
.ku-flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .55), transparent 40%);
  opacity: 0; pointer-events: none;
  animation: kuFlash .41s ease-out .82s 1;
}
@keyframes kuFlash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }

.ku-tm-mark {
  /* Keep the mark visibly beyond UNIVERSITY rather than touching its Y. */
  position: absolute; top: -.04em; right: -1.38em;
  font-family: "Libre Franklin", "Manrope", sans-serif; font-weight: 700;
  font-size: .20em; letter-spacing: .03em; color: var(--ku-gold-light, #f0d98f);
  opacity: 0; transform: translateY(-2.4em);
  animation: kuTmDrop .41s var(--ku-ease-settle) 1s forwards;
}
@keyframes kuTmDrop {
  0% { opacity: 0; transform: translateY(-2.4em); }
  72% { opacity: 1; transform: translateY(.06em); }
  100% { opacity: 1; transform: translateY(0); }
}

.ku-intro-title::before {
  content: ""; position: absolute; top: 0; left: -30%; width: 16%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
  animation: kuSweep .74s ease-out 1.21s 1;
}
@keyframes kuSweep { 0% { opacity: 0; left: -30%; } 12% { opacity: .9; } 55% { opacity: .5; } 100% { opacity: 0; left: 120%; } }

.ku-intro-sub {
  position: absolute; bottom: 14%; left: 0; right: 0; text-align: center;
  font-family: "Libre Franklin", sans-serif;
  font-size: .78rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ku-gold-light, #f0d98f); opacity: 0;
  animation: kuFadeUp .57s ease-out 1.46s forwards;
}
@keyframes kuFadeUp { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } }

/* ================= RESTING LAYOUT: crest centered above the headline ================= */
/* The medallion is the singular hero focal point: centered, above the title,
   with the copy stacked underneath it. Not a two-column split. */
.hero--home .hero-grid {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.hero--home .hero-ctas { justify-content: center; }
.hero--home .trust-row { justify-content: center; }
.hero--home .lede { max-width: 56ch; }

.hero--home .crest-stage {
  order: -1;
  width: min(520px, 84vw);
  margin: clamp(1rem, 3vw, 1.8rem) auto clamp(2rem, 5vw, 3rem);
}
.crest-stage {
  position: relative;
  height: min(46vh, 460px);
  border-radius: 8px;
}

/* crest-visual is the fixed-height stage the medallion/glow/fallback fill.
   min-height/width/right/top: 0/auto cancel ku-brand.css's older sitewide
   .ku-webgl rule (a min-height:540px full-bleed layout from before this
   stage existed) which was silently forcing the canvas taller than this
   container and pushing the medallion down into the headline below it. */
.crest-visual { position: absolute; inset: 0; }
.crest-visual .ku-webgl,
.crest-visual canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  min-height: 0; min-width: 0; top: 0; right: 0; opacity: 1;
}

.crest-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 1;
  transition: opacity .6s ease;
}
.crest-fallback img {
  width: min(64%, 360px);
  border-radius: 6px;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .5));
}
.hero--home.ku-scene-ready .crest-fallback { opacity: 0; }
.crest-stage.ku-no-webgl canvas { display: none; }

/* Wordmark reappears under the medallion once the crest has settled,
   echoing the intro overlay's title in a smaller resting-state size. */
.crest-title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: .35em;
  font-family: "Kerr Display", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 9.5vw, 8.4rem);
  line-height: 1;
  letter-spacing: -.005em;
  margin-bottom: .9rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s var(--ku-ease-settle), transform .9s var(--ku-ease-settle);
}
.crest-title.on { opacity: 1; transform: none; }
.crest-title-word {
  background-image: linear-gradient(100deg, var(--ku-gold-light, #f0d98f) 8%, var(--ku-gold, #c7a14a) 65%, #a8823a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.crest-title-tm { font-size: .34em; vertical-align: super; margin-left: .05em; }

.crest-glow {
  position: absolute; inset: -10%;
  background: radial-gradient(45% 45% at 50% 46%, rgba(240, 217, 143, .32), transparent 68%);
  opacity: 0; transition: opacity 1.1s ease; pointer-events: none;
}
.crest-glow.on { opacity: 1; }

/* ================= FLOATING FOUNDER-VIDEO TEASER ================= */
/* Positioned relative to .hero-grid (the centered column) so it hovers near
   the crest's corner regardless of hero width. Pops up late (JS-timed, well
   after the crest settles), gently bobs, and auto-retreats if ignored. */
.founder-card {
  position: absolute;
  top: 2%;
  right: clamp(-8px, 2vw, 12px);
  width: min(180px, 26vw);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 48px -16px rgba(0, 0, 0, .65), 0 0 0 1px rgba(199, 161, 74, .4);
  opacity: 0;
  transform: translate(20px, -16px) scale(.92);
  transition: opacity .6s var(--ku-ease-settle), transform .6s var(--ku-ease-settle);
  z-index: 3;
}
.founder-card.ku-float-in {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  animation: kuFloatBob 4.6s ease-in-out .6s infinite;
}
.founder-card.ku-playing { animation: none; transform: translate(0, 0) scale(1); }
.founder-card.ku-float-out {
  opacity: 0;
  transform: translate(46px, -34px) scale(.9);
  animation: none;
  pointer-events: none;
  transition-duration: .5s;
}
@keyframes kuFloatBob {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-5px, -9px) rotate(-1.1deg); }
}

/* The founder thumbnail should introduce Digby, not be hidden by a giant
   generic play circle. Keep the control clear, tactile, and secondary. */
.founder-card .play-fab {
  z-index: 2;
  width: 44px;
  height: 44px;
  background: rgba(255, 252, 244, .9);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3), 0 0 0 1px rgba(240, 217, 143, .55);
}
.founder-card .vthumb { z-index: 1; }
.founder-card .play-fab svg {
  width: 17px;
  height: 17px;
  margin-left: 2px;
}

.founder-close {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%; border: none;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 14px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.founder-close:hover { background: rgba(0, 0, 0, .75); }

/* Full-screen founder-video experience. It lives inside the homepage so an
   ending video returns the visitor exactly where they began. */
body.founder-video-open { overflow: hidden; }
.founder-video-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .32s ease, visibility .32s; }
.founder-video-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.founder-video-backdrop { position: absolute; inset: 0; background: rgba(17, 3, 6, .88); backdrop-filter: blur(12px); }
.founder-video-dialog { position: relative; z-index: 1; width: min(1100px, 94vw); max-height: 92vh; padding: clamp(.7rem, 1.6vw, 1rem); border: 1px solid rgba(240, 217, 143, .48); border-radius: 22px; background: linear-gradient(145deg, rgba(122, 20, 25, .96), rgba(50, 6, 10, .98)); box-shadow: 0 36px 100px rgba(0, 0, 0, .65), 0 0 0 1px rgba(199, 161, 74, .15) inset; transform: translateY(18px) scale(.97); transition: transform .38s var(--ku-ease-settle); }
.founder-video-modal.is-open .founder-video-dialog { transform: translateY(0) scale(1); }
.founder-video-dialog .eyebrow { margin: .3rem .5rem .75rem; color: var(--ku-gold-light, #f0d98f); }
.founder-video-player { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #090303; }
.founder-video-player iframe { width: 100%; height: 100%; border: 0; display: block; }
.founder-video-close { position: absolute; z-index: 2; top: -14px; right: -14px; width: 40px; height: 40px; border: 1px solid rgba(240, 217, 143, .65); border-radius: 50%; background: var(--ku-cream, #fbf6ea); color: var(--ku-crimson-deep, #4f0d12); font: 400 2rem/1 "Kerr Sans", sans-serif; cursor: pointer; box-shadow: 0 8px 26px rgba(0, 0, 0, .4); }
.founder-video-close:hover { transform: scale(1.08); background: #fff; }
@media (max-width: 560px) { .founder-video-modal { padding: 1rem; } .founder-video-dialog { width: 100%; border-radius: 16px; } .founder-video-close { top: -10px; right: -4px; } }

/* reduced motion: skip straight to the resting state, no animation anywhere */
.ku-reduced-motion .ku-intro { display: none; }
.ku-reduced-motion .founder-card { transition: none; animation: none !important; }
.ku-reduced-motion .founder-card.ku-float-in { transform: translate(0, 0) scale(1); }
.ku-reduced-motion .crest-fallback { transition: none; }

@media (max-width: 900px) {
  .ku-intro-title { font-size: clamp(1.5rem, 13vw, 3.4rem); }
  .ku-tm-mark { right: -1.28em; font-size: .19em; }
  .hero--home .crest-stage { width: min(360px, 80vw); margin-bottom: 1.75rem; }
  .crest-stage { height: 36vh; }
  .crest-title { font-size: clamp(1.3rem, 6.5vw, 2rem); }
  .founder-card { width: min(150px, 34vw); top: -4px; right: 4%; }
  /* the label wraps to 2-3 lines and covers most of the small floating
     card at this size; the photo + play button already say "video" */
  .founder-card .vtag { display: none; }
}

@media (max-width: 560px) {
  /* "UNIVERSITY" is the long word: at narrow widths it must still fit inside
     its half of the equal-width grid without overflowing the viewport. */
  .ku-intro-title { font-size: clamp(1.15rem, 8.6vw, 1.9rem); }
  .ku-tm-mark { right: -1.18em; font-size: .18em; }
  .ku-intro-sub { font-size: .66rem; letter-spacing: .18em; padding: 0 1rem; }
}