/* AUNM Campus Journey v2: one sticky film aerial, one slow push-in, six quiet hotspots.
   Scoped under .cj2. Uses the brand tokens if present (tokens.css), with fallbacks. */
.cj2 {
  --cj2-navy: var(--aunm-navy-900, #0e1d33);
  --cj2-navy-deep: var(--aunm-navy-950, #08121f);
  --cj2-gold: var(--aunm-gold-300, #d6b273);
  --cj2-gold-deco: var(--aunm-gold-500, #b8894a);
  --cj2-cream: var(--aunm-gold-100, #f2e0b8);
  --cj2-paper: var(--aunm-paper-100, #f6f1e6);
  --cj2-serif: var(--font-display, "Newsreader", "Iowan Old Style", Georgia, serif);
  --cj2-sans: var(--font-sans, "Public Sans", system-ui, sans-serif);
  --cj2-ease: cubic-bezier(.2, .7, .1, 1);
  --cj2-top: 0px;              /* height of a fixed header to keep clear of (e.g. 64px) */
  --cj2-len: 640vh;            /* scroll length of the journey: calm, generous dwell */
  position: relative;
  height: var(--cj2-len);
  background: var(--cj2-navy-deep);
  color: var(--cj2-paper);
}
.cj2 *, .cj2 *::before, .cj2 *::after { box-sizing: border-box; }

.cj2__stage {
  position: sticky; top: var(--cj2-top);
  height: calc(100vh - var(--cj2-top)); height: calc(100svh - var(--cj2-top));
  overflow: hidden; isolation: isolate;
  contain: layout paint;
}

/* The plate holds the image and the hotspots, so both move as one layer. */
.cj2__plate {
  position: absolute; left: 0; top: 0;
  width: 100%; aspect-ratio: 16 / 9;
  transform-origin: 0 0;
  will-change: transform;
}
.cj2__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: cover;
  user-select: none; -webkit-user-drag: none;
}

/* Quiet vignette: navy at the top and the bottom so text reads, nothing over the campus. */
.cj2__veil {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(rgba(8,18,31,.14), rgba(8,18,31,.14)),
    linear-gradient(to bottom, rgba(8,18,31,.55) 0%, rgba(8,18,31,0) 26%),
    linear-gradient(to top, rgba(8,18,31,.72) 0%, rgba(8,18,31,0) 34%);
}
/* Light film grain so the plate matches the rest of the site. */
.cj2__grain {
  position: absolute; inset: -50%; z-index: 3; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ Hotspots */
.cj2__spots { position: absolute; inset: 0; z-index: 4; }
.cj2-spot {
  position: absolute; width: 0; height: 0;
  --dx: 0px; --dy: -90px;          /* label offset from the ring (set per spot in JS) */
  --inv: 1;                        /* counter-scale so rings and type stay crisp during the push */
}
.cj2-spot__ring {
  position: absolute; left: -11px; top: -11px; width: 22px; height: 22px;
  border: 1px solid var(--cj2-gold); border-radius: 50%;
  transform: scale(calc(var(--inv) * .4)); opacity: 0;
  transition: transform 1.1s var(--cj2-ease), opacity .9s var(--cj2-ease), border-color .4s;
}
.cj2-spot__ring::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
  border-radius: 50%; background: var(--cj2-gold);
}
/* Leader line: an SVG hairline drawn from the ring to the label. */
.cj2-spot__line {
  position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none;
  width: 1px; height: 1px;
}
.cj2-spot__line line {
  stroke: var(--cj2-gold); stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--len, 200); stroke-dashoffset: var(--len, 200);
  opacity: .85;
  transition: stroke-dashoffset 1.2s var(--cj2-ease) .15s;
}
.cj2-spot__label {
  position: absolute; left: var(--dx); top: var(--dy);
  transform: translate(var(--ax, -50%), var(--ay, -100%)) translateY(8px) scale(var(--inv));
  transform-origin: var(--ox, 50%) var(--oy, 100%);
  padding: 10px 2px; min-height: 44px; display: flex; flex-direction: column; justify-content: flex-end;
  text-decoration: none; color: var(--cj2-paper); white-space: nowrap;
  opacity: 0;
  transition: opacity .9s var(--cj2-ease) .35s, transform 1.1s var(--cj2-ease) .35s;
  text-shadow: 0 1px 18px rgba(8,18,31,.95), 0 0 3px rgba(8,18,31,.85), 0 0 1px rgba(8,18,31,.9);
}
.cj2-spot__num {
  font-family: var(--cj2-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .24em;
  color: var(--cj2-gold); font-variant-numeric: lining-nums tabular-nums;
}
.cj2-spot__name {
  font-family: var(--cj2-serif); font-variation-settings: "opsz" 24; font-weight: 400;
  font-size: 17px; line-height: 1.2; letter-spacing: .005em;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  padding-bottom: 2px; transition: background-size .6s var(--cj2-ease), color .3s;
}
.cj2-spot__label:hover .cj2-spot__name,
.cj2-spot__label:focus-visible .cj2-spot__name { background-size: 100% 1px; color: #fff; }
.cj2-spot__label:focus-visible { outline: 1px solid var(--cj2-gold); outline-offset: 5px; }

/* Revealed */
.cj2-spot.is-on .cj2-spot__ring { opacity: 1; transform: scale(var(--inv)); }
.cj2-spot.is-on .cj2-spot__line line { stroke-dashoffset: 0; }
.cj2-spot.is-on .cj2-spot__label { opacity: .8; transform: translate(var(--ax, -50%), var(--ay, -100%)) scale(var(--inv)); }
/* The current one is fully lit; earlier ones settle back so the frame stays calm. */
.cj2-spot.is-current .cj2-spot__label,
.cj2.is-all .cj2-spot.is-on .cj2-spot__label { opacity: 1; }
.cj2-spot.is-current .cj2-spot__ring { box-shadow: 0 0 0 6px rgba(214,178,115,.14); }
.cj2-spot:not(.is-on) .cj2-spot__label:focus-visible { opacity: 1; transform: translate(var(--ax, -50%), var(--ay, -100%)) scale(var(--inv)); }

/* ------------------------------------------------------------ Copy (max 2 lines on screen) */
.cj2__copy {
  position: absolute; z-index: 5; left: clamp(20px, 5vw, 72px); bottom: clamp(36px, 8vh, 84px);
  max-width: min(36rem, 80vw); pointer-events: none;
}
.cj2__line {
  position: absolute; left: 0; bottom: 0; width: max-content; max-width: min(36rem, 80vw);
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity .9s var(--cj2-ease), transform 1.1s var(--cj2-ease);
}
.cj2__line.is-on { opacity: 1; transform: none; transition-delay: .25s; }
.cj2__line a { pointer-events: auto; }
.cj2__kicker {
  display: block; margin: 0 0 10px; font-family: var(--cj2-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--cj2-gold);
}
.cj2__title {
  margin: 0; font-family: var(--cj2-serif); font-variation-settings: "opsz" 72; font-weight: 300;
  font-size: clamp(30px, 4.2vw, 60px); line-height: 1.05; letter-spacing: -.012em; text-wrap: balance;
}
.cj2__sub {
  margin: 10px 0 0; font-family: var(--cj2-serif); font-style: italic; font-weight: 300;
  font-size: clamp(16px, 1.35vw, 20px); line-height: 1.4; color: var(--cj2-cream); text-wrap: pretty;
}

/* ------------------------------------------------------------ Progress hairline + counter */
.cj2__progress { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(246,241,230,.14); }
.cj2__bar { position: absolute; inset: 0; background: var(--cj2-gold-deco); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
.cj2__count {
  position: absolute; z-index: 5; right: clamp(20px, 5vw, 72px); bottom: clamp(36px, 8vh, 84px);
  font-family: var(--cj2-sans); font-size: 11px; font-weight: 600; letter-spacing: .24em; color: rgba(246,241,230,.7);
  font-variant-numeric: tabular-nums;
}
.cj2__count b { color: var(--cj2-gold); font-weight: 600; }
.cj2__tag {
  position: absolute; z-index: 5; right: clamp(20px, 5vw, 72px); top: clamp(20px, 4vh, 40px);
  font-family: var(--cj2-sans); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(246,241,230,.55);
}
.cj2__skip {
  position: absolute; z-index: 6; left: 16px; top: 16px; padding: 10px 14px; background: var(--cj2-paper); color: var(--cj2-navy);
  font: 600 12.5px/1 var(--cj2-sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .3s var(--cj2-ease), transform .3s var(--cj2-ease);
}
.cj2__skip:focus { opacity: 1; pointer-events: auto; transform: none; outline: 1px solid var(--cj2-gold); }

/* QA preview hook (?cj2p=) */
.cj2.is-preview .cj2__stage { position: fixed; inset: 0; height: 100vh; z-index: 99; }

/* ------------------------------------------------------------ Mobile cards (hidden on desktop) */
.cj2__cards { display: none; }

.cj2-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================ STATIC MODE
   Phones (no sticky scrub) and prefers-reduced-motion share it: no scroll length, no push, all labels on. */
.cj2.is-static { height: auto; }
.cj2.is-static .cj2__stage { position: relative; top: 0; height: auto; aspect-ratio: 16 / 9; max-height: 92vh; }
.cj2.is-static .cj2-spot__ring,
.cj2.is-static .cj2-spot__label,
.cj2.is-static .cj2-spot__line line,
.cj2.is-static .cj2__line { transition: none !important; }
.cj2.is-static .cj2__progress, .cj2.is-static .cj2__count { display: none; }

/* Reduced motion on desktop: the picture with every label, plus the closing line. */
.cj2.is-reduced .cj2__stage { aspect-ratio: auto; height: 100vh; height: 100svh; max-height: none; min-height: 560px; }

/* Phones: the aerial sits behind a swipeable row of center cards. */
@media (max-width: 767px) {
  .cj2.is-static .cj2__stage { aspect-ratio: auto; height: 78svh; min-height: 520px; max-height: 760px; }
  .cj2-spot__label { display: none; }               /* names live on the cards */
  .cj2-spot__line { display: none; }
  .cj2-spot__ring { left: -15px; top: -15px; width: 30px; height: 30px; display: grid; place-items: center; }
  .cj2-spot__ring::after { display: none; }
  .cj2-spot__ring::before {
    content: attr(data-n); font: 600 10.5px/1 var(--cj2-sans); letter-spacing: .04em; color: var(--cj2-gold);
    text-shadow: 0 0 6px rgba(8,18,31,.9);
  }
  .cj2-spot.is-current .cj2-spot__ring { background: rgba(14,29,51,.55); box-shadow: 0 0 0 5px rgba(214,178,115,.22); }
  .cj2__copy { top: 22px; bottom: auto; left: 16px; right: 16px; max-width: none; }
  .cj2__line { position: static; width: auto; max-width: none; }
  .cj2__line:not([data-line="intro"]) { display: none; }
  .cj2__title { font-size: 30px; }
  .cj2__tag { display: none; }
  .cj2__cards {
    display: flex; position: absolute; z-index: 6; left: 0; right: 0; bottom: 18px;
    gap: 12px; padding: 0 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .cj2__cards::-webkit-scrollbar { display: none; }
  .cj2-card {
    flex: 0 0 78%; scroll-snap-align: start; min-height: 150px;
    display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px;
    background: rgba(14,29,51,.78); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
    border-top: 1px solid var(--cj2-gold-deco); color: var(--cj2-paper); text-decoration: none;
  }
  .cj2-card__num { font: 600 10.5px/1 var(--cj2-sans); letter-spacing: .24em; color: var(--cj2-gold); }
  .cj2-card__name { font-family: var(--cj2-serif); font-size: 21px; line-height: 1.15; font-weight: 400; }
  .cj2-card__sub { font-family: var(--cj2-serif); font-style: italic; font-weight: 300; font-size: 15px; line-height: 1.35; color: var(--cj2-cream); }
  .cj2-card__go { margin-top: auto; font: 600 11px/1 var(--cj2-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--cj2-gold); }
  .cj2-card:focus-visible { outline: 1px solid var(--cj2-gold); outline-offset: -4px; }
  .cj2__veil { background:
      linear-gradient(to bottom, rgba(8,18,31,.7) 0%, rgba(8,18,31,0) 30%),
      linear-gradient(to top, rgba(8,18,31,.8) 0%, rgba(8,18,31,0) 45%); }
}

@media (prefers-reduced-motion: reduce) {
  .cj2 *, .cj2 *::before, .cj2 *::after { transition: none !important; animation: none !important; }
}