/* UniFind landing page: motion layer. Everything here is switched off under
   prefers-reduced-motion (html.no-motion) and when scripts don't run (no html.js). */

html { scroll-behavior: smooth; background: var(--bg); }
html[data-theme='light'] { background: #f3f5f2; }
.lp { position: relative; overflow-x: clip; }
section[id] { scroll-margin-top: 76px; }
.lp-hero, .lp-nav { position: relative; z-index: 2; }
.lp-nav { position: sticky; z-index: 30; }

/* Scroll progress, top of the page. */
.lp-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 40; background: var(--go); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* Nav tightens after 24px. */
.lp-nav__in { transition: height 0.25s ease; }
.lp-nav { transition: box-shadow 0.25s ease, background-color 0.25s ease; }
.lp-nav.is-stuck { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.5); }
.lp-nav.is-stuck .lp-nav__in { height: 60px; }
.lp-links a { position: relative; transition: color 0.2s ease, background-color 0.2s ease; }
.lp-links a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--go); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.25s ease; }
.lp-links a:hover::after, .lp-links a.is-here::after { transform: scaleX(1); }
.lp-links a.is-here { color: var(--ink); }

/* Hero background: a quiet moving campus map (or media/hero.mp4 when it exists). */
.lp-herobg { position: fixed; inset: 0; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; overflow: hidden; transform-origin: 50% 40%; }
.lp-herobg.is-covered, .lp-hero.is-covered { visibility: hidden; }
.lp-herobg canvas, .lp-herobg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-herobg canvas { opacity: 0.55; }
.lp-herobg video { opacity: 0; transition: opacity 0.8s ease; }
.lp-herobg.has-video video { opacity: 1; }
.lp-herobg.has-video canvas { display: none; }
/* A scrim in the page colour keeps the text readable over any footage, in light and dark. */
.lp-herobg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 70% at 22% 38%, var(--bg) 0%, transparent 75%); opacity: 0.85; }
.lp-herobg.has-video::after { opacity: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 94%, transparent) 0%, color-mix(in srgb, var(--bg) 78%, transparent) 45%, color-mix(in srgb, var(--bg) 45%, transparent) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 30%); }
@media (max-width: 1040px) { .lp-herobg.has-video::after { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, transparent) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 55%, var(--bg) 100%); } }

/* Buttons: lift, press, arrow nudge. */
.lp .lp-cta { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, background-color 0.2s ease; will-change: transform; }
.lp .lp-cta svg { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.lp .lp-cta:hover { box-shadow: 0 14px 28px -14px var(--go); }
.lp .lp-cta:hover svg { transform: translateX(4px); }
.lp .lp-cta:active { transform: scale(0.97) !important; }
.lp .lp-cta--ghost:hover { box-shadow: none; background: var(--surface-raised); }

/* Feature cards: lift, a soft light that follows the pointer, icon pop. */
.lp-feat { position: relative; overflow: hidden; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease; }
.lp-feat::before { content: ''; position: absolute; inset: 0; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), var(--go-halo), transparent 70%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.lp-feat > * { position: relative; }
.lp-feat__ic { transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1), background-color 0.3s ease, color 0.3s ease; }
@media (hover: hover) {
  .lp-feat:hover { transform: translateY(-6px); border-color: var(--go); box-shadow: 0 24px 40px -28px rgba(0, 0, 0, 0.5); }
  .lp-feat:hover::before { opacity: 1; }
  .lp-feat:hover .lp-feat__ic { transform: scale(1.08) rotate(-6deg); background: var(--go); color: var(--on-go); }
  .lp-persona__media img, .lp-chapter__img img { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
  .lp-persona:hover .lp-persona__media img { transform: scale(1.06); }
  .lp-persona { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease; }
  .lp-persona:hover { transform: translateY(-4px); border-color: var(--line-strong); }
  .lp-step { transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
  .lp-step:hover { border-color: var(--go); transform: translateY(-4px); }
  .lp-face { transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
  .lp-faces:hover .lp-face { transform: translateY(-3px); }
  .lp-faces:hover .lp-face:nth-child(2) { transition-delay: 0.04s; }
  .lp-faces:hover .lp-face:nth-child(3) { transition-delay: 0.08s; }
  .lp-faces:hover .lp-face:nth-child(4) { transition-delay: 0.12s; }
  .lp-faces:hover .lp-face:nth-child(5) { transition-delay: 0.16s; }
  .lp-foot__col a { transition: color 0.2s ease, transform 0.2s ease; }
  .lp-foot__col a:hover { transform: translateX(3px); }
  .lp-brand .lp-mark { transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
  .lp-brand:hover .lp-mark { transform: rotate(-8deg) scale(1.06); }
}

/* Float: the hero phone and its cards drift 6px (uses `translate`, so it never fights a transform). */
@keyframes lp-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
html.js:not(.no-motion) [data-motion='float'] { animation: lp-float 6s ease-in-out infinite; }
html.js:not(.no-motion) .lp-float--a { animation: lp-float 6s ease-in-out 0.8s infinite; }
html.js:not(.no-motion) .lp-float--b { animation: lp-float 7s ease-in-out 1.6s infinite; }

/* Pulse: live dot and the final pin. */
@keyframes lp-pulse { 0% { box-shadow: 0 0 0 0 rgba(180, 240, 106, 0.45); } 70%, 100% { box-shadow: 0 0 0 22px rgba(180, 240, 106, 0); } }
html.js:not(.no-motion) [data-motion='pulse'] { animation: lp-pulse 2.2s ease-out infinite; }
@keyframes lp-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.6; } }
html.js:not(.no-motion) .lp-pill .uf-dot-live { animation: lp-dot 1.8s ease-in-out infinite; }

/* Start states for things that animate in (only when the script is running). */
html.js:not(.no-motion) [data-motion='fade-up'],
html.js:not(.no-motion) [data-motion='stagger-item'] { opacity: 0; }
html.js:not(.no-motion) [data-motion='pop'] { opacity: 0; }
/* The picture is clipped, not its frame, so the frame can still be "seen" entering the screen. */
html.js:not(.no-motion) [data-motion='reveal'] img { clip-path: inset(100% 0 0 0); }
/* Headlines: letter by letter, each fading in and sharpening. Words never break. */
.lp-w { display: inline-block; white-space: nowrap; }
.lp-c { display: inline-block; will-change: opacity, filter; }
html.js:not(.no-motion) .lp-head .lp-h2, html.js:not(.no-motion) .lp-final__copy .lp-h2, html.js:not(.no-motion) .lp-about__copy .lp-h2 { opacity: 0; }

/* The story slides up over the hero like a sheet. */
.lp-story { position: relative; z-index: 3; border-radius: 40px 40px 0 0; margin-top: -40px; box-shadow: 0 -30px 60px -40px rgba(0, 0, 0, 0.6); }
.lp-hero { padding-bottom: 152px; }
.lp-story ~ section, .lp-story ~ footer { position: relative; z-index: 3; }
/* Sections that sit in the centred column still need a full-width ground over the pinned hero. */
.lp-section, .lp-about { background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); }
@media (min-width: 1041px) and (min-height: 780px) {
  html.js:not(.no-motion) .lp-hero { position: sticky; top: 56px; }
}
/* How it works pins on a tall desktop screen; the steps take turns. */
@media (min-width: 1041px) and (min-height: 820px) {
  html.js:not(.no-motion) .lp-how { height: calc(100vh + 1100px); padding-top: 0; padding-bottom: 0; }
  html.js:not(.no-motion) .lp-how > .lp-wrap { position: sticky; top: 60px; padding-top: 36px; padding-bottom: 24px; }
  .lp-how.is-pinned .lp-head { margin-bottom: 32px; }
  .lp-how.is-pinned .lp-step > * { opacity: 0.4; transition: opacity 0.6s ease; }
  .lp-how.is-pinned .lp-step { scale: 0.94; transition: scale 0.7s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease; }
  .lp-how.is-pinned .lp-step.is-active > * { opacity: 1; }
  .lp-how.is-pinned .lp-step.is-active { scale: 1; border-color: var(--go); }
}
@media (max-width: 640px) { .lp-story { border-radius: 28px 28px 0 0; margin-top: -28px; } .lp-hero { padding-bottom: 108px; } }

/* The hero phone tilts a little towards the pointer (desktop only). */
@media (min-width: 1041px) {
  .lp-hero__art { perspective: 1200px; }
  .lp-hero__phone { transition: rotate 0.3s ease-out; transform-style: preserve-3d; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp-progress, .lp-herobg canvas, .lp-herobg video { display: none; }
}

.lp-about__img { transform-origin: 50% 50%; will-change: transform; }
.lp-about__img img { scale: 1.08; }