/* The index is deliberately sized to the supplied 1280×2125 reference artboard. */

.homepage-prototype {
  --ink: #060919;
  --purple: #6d2f6a;
  --gold: var(--gold-dynamic);
  --paper: #f2f2f7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
}

.homepage-prototype main {
  flex: 1 0 auto;
  overflow: hidden;
  background: var(--paper);
}

.homepage-prototype > .site-footer {
  margin-top: auto;
}

.homepage-prototype .skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 30;
  padding: 10px 14px;
  background: #fff;
  color: var(--ink);
  transform: translateY(-150%);
}

.homepage-prototype .skip-link:focus {
  transform: translateY(0);
}

.reference-home {
  width: 100%;
  margin: 0 auto;
}

.reference-hero {
  position: relative;
  height: 450px;
  overflow: hidden;
  isolation: isolate;
  background: var(--hero-surface);
}


.reference-home .nav-link.active {
  color: var(--cuhk-purple);
}

.reference-hero-image,
.reference-hero-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.reference-hero-image {
  z-index: -3;
  max-width: none;
  object-fit: cover;
  object-position: center 30%;
}

.reference-hero-video {
  filter: brightness(1.12);
}

.reference-hero-fallback {
  display: none;
  z-index: -3;
  max-width: none;
  object-fit: cover;
  object-position: center 49%;
}

.reference-video-slot {
  padding: var(--section-padding);
  background: #f2f2f7;
}

.reference-video-frame {
  position: relative;
  width: min(100%, 920px);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 18px;
  background: #171323;
  box-shadow: 0 16px 36px rgba(29, 17, 41, .14);
}

.reference-video-frame iframe,
.reference-video-frame .reference-video-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: contain;
  background: #000;
}

.reference-video-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 24px;
  color: #fff;
  text-align: center;
}

.reference-video-placeholder h2,
.reference-video-placeholder p {
  margin: 0;
}

.reference-video-placeholder h2 {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.reference-video-placeholder p {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.5;
  opacity: 0.92;
}

.reference-hero-copy {
  position: absolute;
  --hero-inset: var(--prototype-hero-desktop-inset);
  top: 14%;
  left: var(--hero-inset);
  width: min(691px, calc(100% - var(--hero-inset) - 48px));
  height: 192px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  isolation: isolate;
  gap: 24px;
  transform: none;
}

.reference-hero-copy h1 {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(36px, 5.55vw, 80px);
  font-weight: var(--fw-medium);
  letter-spacing: -.03em;
  line-height: 1.2;
  text-wrap: balance;
  text-shadow:
    0 2px 4px rgba(20, 15, 24, .22),
    0 8px 24px rgba(20, 15, 24, .18);
}

.reference-hero-content {
  min-width: 0;
}

.hero-title-accent,
.hero-title-purple {
  display: block;
  line-height: 96px;
}

.hero-title-accent {
  color: var(--hero-title-accent);
}

.hero-title-purple {
  color: var(--hero-title-purple);
  padding-left: clamp(48px, 7.3vw, 105px);
}


.reference-plan {
  height: 566px;
  overflow: hidden;
  background: #fff;
}

.reference-copy {
  width: min(1064px, calc(100% - 216px));
  margin: 0 auto;
  padding-top: 78px;
}

.reference-copy h2,
.reference-tiger-copy h2 {
  margin: 0;
  font-size: 48px;
  font-weight: var(--fw-medium);
  letter-spacing: -.045em;
  line-height: 1.1;
}

.reference-copy h2 {
  color: var(--ink);
}

.reference-copy p {
  max-width: 1063px;
  margin: 32px 0 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: var(--fw-light);
  letter-spacing: -.025em;
  line-height: 1.65;
}

.reference-copy p + p {
  margin-top: 31px;
}

.reference-highlight {
  color: var(--purple-dynamic);
  font-weight: var(--fw-medium);
}

.reference-read-more {
  display: inline-flex;
  width: 205px;
  height: 60px;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  border-radius: 30px;
  background: linear-gradient(90deg, var(--purple-dynamic), var(--purple-dark-royal));
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
  color: #fff;
  font-size: 16px;
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: 1;
  transition: transform .2s ease, box-shadow .2s ease;
}

.reference-read-more:hover,
.reference-read-more:focus-visible {
  color: #fff;
  box-shadow: 0 6px 8px rgba(0, 0, 0, .3);
  transform: translateY(-2px);
}

.reference-tiger-copy {
  position: relative;
  z-index: 3;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: 46px max(28px, calc((100% - 1064px) / 2)) 28px;
  background: #fff;
}

.reference-tiger-copy h2 {
  color: var(--ink);
}

.reference-tiger-copy p {
  max-width: 1064px;
  margin: 28px 0 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: var(--fw-light);
  letter-spacing: -.025em;
  line-height: 1.65;
}

/* ============================================================
   The TIGER's Leaps — a quiet stone stage
   The stones are the navigation. Hover or focus one to reveal the
   paw imprint; the category name sits over its soft cast
   shadow beneath.
   ============================================================ */

.reference-tiger {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  /* fill the space left by the header + footer so the whole composition sits
     within one viewport with the footer visible */
  min-height: calc(100vh - var(--tiger-chrome, 220px));
  padding: 0;
  background: #fff;
  isolation: isolate;
}

/* The tiger arrives as a quiet background reveal after the desktop stone
   sequence has completed. It never participates in layout or hit testing. */
@media (min-width: 768px) {
  .reference-tiger::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("../assets/tiger.svg") no-repeat 45% 25% /
      min(28vw, 300px) auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.8s cubic-bezier(.16, 1, .3, 1);
  }

  .reference-tiger.tiger-background-visible::before {
    opacity: 0.68;
  }
}

/* Tablet stone stage: keep the tiger above I and to the left of G so the
   background mark follows the ascending stone path instead of crowding G. */
@media (min-width: 768px) and (max-width: 1279px) {
  .reference-tiger::before {
    background-position: 28% 48%;
    background-size: min(18vw, 180px) auto;
  }
}

.tiger-sticky {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(16px, 2.5vw, 56px);
  /* the copy's left edge shares the "CUHK 2026-2030" (.reference-copy) rail so
     the headings align; the stone stage sits just right of the copy and may
     extend into the page margin (JS frames it so nothing clips) */
  width: min(1064px, calc(100% - 216px));
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0;
  overflow: visible;
}

/* --- left column: intro copy (fixed basis so the stage's free space is
   deterministic and JS can fit the group into it) --- */
.reference-tiger .reference-tiger-copy {
  position: relative;
  z-index: 3;
  flex: 0 0 clamp(200px, 30vw, 360px);
  min-width: 0;
  width: auto;
  padding: 0;
  background: transparent;
}

/* Give the desktop copy rail its own vertical breathing room so the TIGER
   section keeps a stable height alongside the stone stage. */
@media (min-width: 1280px) {
  .reference-tiger {
    min-height: max(640px, calc(100vh - var(--tiger-chrome, 220px)));
  }

  .reference-tiger .reference-tiger-copy {
    padding-top: clamp(28px, 3vw, 56px);
    padding-bottom: clamp(28px, 3vw, 56px);
  }

  .reference-tiger .mobile-leap-message {
    top: 12%;
    left: 69%;
    transform: translateX(-50%);
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .homepage-prototype .reference-tiger .mobile-leap-message {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin: 32px 0 18px;
    transform: none;
    text-align: center;
  }
}

/* --- right column: the stone stage ---
   The stones, shadows, labels and animations live in a single fixed-ratio
   design canvas (.stone-canvas, --base-w x --base-h). JS scales the canvas
   (--stage-scale) to fit the available space, and the .stone-stage box is
   sized to that same scaled footprint so nothing overflows. Only the wrapper
   is scaled — every internal relationship is preserved untouched. */
.stone-stage {
  position: relative;
  flex: 0 0 auto;
  --base-w: 400;
  --base-h: 520;
  --stage-scale: 1;
  /* optional nudge (JS frames the content; these just shift the framed box) */
  --stage-dx: 120px;
  --stage-dy: 0px;
  width: calc(var(--base-w) * 1px * var(--stage-scale));
  height: calc(var(--base-h) * 1px * var(--stage-scale));
  transform: translate(var(--stage-dx, 0px), var(--stage-dy, 0px));
}

.stone-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--base-w) * 1px);
  height: calc(var(--base-h) * 1px);
  transform: scale(var(--stage-scale));
  transform-origin: top left;
}

.stone {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  transform: translate(calc(-50% + var(--leap-x, 0px)), calc(-50% + var(--leap-y, 0px)));
  display: block;
  text-decoration: none;
  cursor: pointer;
}

.stone-img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  z-index: 2;
  pointer-events: none;
  transform: none;
}

/* One dormant imprint, painted directly from the paw SVG so it remains
   visible above the stone in browsers that do not render external masks. */
.stone-paw {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  height: auto;
  transform: translate(calc(-50% + var(--px, 0%)), calc(-50% + var(--py, 0%)))
              rotateZ(var(--rz,  32deg)) rotateX(var(--rx,  -20deg)) rotateY(var(--ry,  32deg))
              scale(var(--sc, 1));
  transform-origin: center;
  opacity: 0;
  mix-blend-mode: multiply;
  z-index: 3;
  pointer-events: none;
  transition: opacity .18s ease;
}

.stone-paw--t { --px: 10%; --py: 10%; --rz: 32deg; --rx: -20deg; --ry: 20deg; --sc: 1}
.stone-paw--i { --px: 41%; --py: -15%; --rz: 37deg; --rx: -18deg; --ry: 23deg;  --sc: 0.98}
.stone-paw--g { --px: 73%; --py: -28%; --rz: 38deg; --rx: -27deg; --ry: 26deg; --sc: 0.9}
.stone-paw--e { --px: 80%; --py: -29%; --rz: 32deg; --rx: -20deg; --ry: 20deg; --sc: 0.8}
.stone-paw--r { --px: 90%; --py: -30%; --rz: 32deg; --rx: -20deg; --ry: 20deg; --sc: 0.7}

/* Activating a stone (hover / focus) stamps the paw, then reveals a persistent
   label and shadow. Only the bright light wash is temporary. JS (re)triggers
   both by toggling .is-flash. */
.stone.is-flash .stone-paw {
  animation: stone-paw-flash 1.4s ease forwards;
}

.stone.is-flash .stone-label::before {
  animation: stone-shadow-reveal 1.4s ease forwards;
}

.stone.is-flash .stone-label-text {
  animation: stone-shadow-reveal 1.4s ease forwards;
}

/* While the pointer/focus remains on the stone or its label, keep the paw and
   reveal materials visible. The paw still fades when the pointer leaves; the
   label and shadow remain latched. */
.stone:is(:hover, :focus-visible) .stone-paw {
  animation: stone-paw-hover-hold .18s ease forwards;
}

.stone:is(:hover, :focus-visible) .stone-label::before {
  animation: stone-shadow-hover-hold .18s ease forwards;
}

.stone:is(:hover, :focus-visible) .stone-label-text {
  animation: stone-shadow-hover-hold .18s ease forwards;
}

@keyframes stone-paw-flash {
  0%   { opacity: 0; }
  9%   { opacity: .34; }
  32%  { opacity: .28; }
  100% { opacity: 0; }
}

@keyframes stone-shadow-reveal {
  0%   { opacity: 0; }
  28%  { opacity: .74; }
  100% { opacity: 1; }
}

@keyframes stone-paw-hover-hold {
  0%   { opacity: 0; }
  100% { opacity: .34; }
}

@keyframes stone-shadow-hover-hold {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes stone-light-flash {
  0%   { opacity: 0; }
  26%  { opacity: .48; }
  100% { opacity: 0; }
}

/* The caption is a hover/focus reveal shared by every stone: the (invisible
   tiger's) stone casts a soft ground shadow to the lower-right — light from the
   top-left — and the wording is laid onto that shadow like a projection. Shadow
   and word are one rotated unit, revealed together by a single diagonal wipe
   sweeping top-left -> bottom-right. */
.stone-label {
  position: absolute;
  --tilt: 6deg;
  left: calc(100% + 10px);
  top: calc(100% + 4px);
  width: max-content;
  box-sizing: border-box;
  padding: 4px 0 6px;
  text-align: left;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(0, 0) rotate(var(--tilt, 8deg));
  transform-origin: left center;
  clip-path: polygon(-40% -40%, -40% -40%, -40% -40%);
  transition: opacity .18s ease, transform .18s ease,
              clip-path .55s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .18s;
  isolation: isolate;
  z-index: 4;
  pointer-events: auto;
  cursor: pointer;
}

/* the cast shadow: dark enough to fully back the word, then trailing off into
   a lighter tail beyond it */
.stone-label::before {
  content: "";
  position: absolute;
  inset: -35px -74px -32px -68px;
  background:
    radial-gradient(48% 78% at 18% 50%,
      rgba(36, 31, 42, .64) 0%,
      rgba(36, 31, 42, .46) 42%,
      rgba(36, 31, 42, .2) 72%,
      rgba(36, 31, 42, 0) 100%),
    linear-gradient(108deg,
      rgba(36, 31, 42, .28) 16%,
      rgba(36, 31, 42, .12) 55%,
      rgba(36, 31, 42, 0) 100%);
  /* A softly blurred taper gives the projection a readable near edge without
     creating a hard polygon, side face or raised-looking beam. */
  border-radius: 46% 54% 58% 42% / 58% 42% 58% 42%;
  clip-path: polygon(0 46%, 10% 34%, 24% 24%, 58% 18%, 100% 30%,
                     100% 76%, 58% 82%, 24% 80%, 7% 66%);
  filter: blur(4.5px);
  z-index: 0;
  -webkit-mask-image: linear-gradient(108deg,
    #000 0%, #000 52%, rgba(0, 0, 0, .52) 78%, transparent 100%);
  mask-image: linear-gradient(108deg,
    #000 0%, #000 52%, rgba(0, 0, 0, .52) 78%, transparent 100%);
  opacity: 1;
}

/* the one-shot light: a bright wash occupying the SAME polygon as the cast
   shadow, so activating a stone flashes light across the shadow + word (not
   the stone). It rides the reveal wipe and fades out once. */
.stone-label::after {
  content: "";
  position: absolute;
  inset: -35px -74px -32px -68px;
  /* an even wash across the WHOLE shadow polygon (no directional fade), so the
     light shines the full shadow rather than only its near end */
  background:
    radial-gradient(90% 130% at 60% 80%,
      color-mix(in srgb, var(--cat) 52%, #fdffc1b2) 0%,
      color-mix(in srgb, var(--cat) 30%, #fdffc1b2) 82%,
      rgba(255, 255, 255, 0) 100%);
  border-radius: 46% 54% 58% 42% / 58% 42% 58% 42%;
  clip-path: polygon(0 46%, 10% 34%, 24% 24%, 58% 18%, 100% 30%,
                     100% 76%, 58% 82%, 24% 80%, 7% 66%);
  filter: blur(4.5px);
  opacity: 0;
  mix-blend-mode: screen;
  z-index: 3;
  pointer-events: none;
}

.stone.is-flash .stone-label::after {
  animation: stone-light-flash .72s ease forwards;
}

/* the word, laid onto the ground plane: strong clockwise X-axis tilt under
   perspective, plus a slight Y/Z yaw so it recedes along the shadow */
.stone-label-text {
  position: relative;
  display: block;
  z-index: 2;
  color: #f4f2f6;
  font-size: clamp(16px, 1.5vw, 24px);
  font-weight: 535;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .82);
  transform-origin: left bottom;
  transform: translate(-40px, -6px) perspective(560px)
             rotateX(69deg) rotateY(-8deg) rotateZ(22deg) scaleY(2.2);
  filter: blur(.3px);
  transition: color .18s ease;
}

.stone-mobile-list {
  display: none;
}

.mobile-leap-message {
  display: none;
}

/* The homepage uses one shared TIGER canvas at every responsive size. */
.homepage-prototype .reference-tiger {
  --tiger-canvas-width: clamp(76px, 13vw, 150px);
  --tiger-canvas-height: clamp(150px, 28vw, 300px);
  --tiger-canvas-gap: clamp(20px, 3vw, 36px);
}

.homepage-prototype .stone-stage,
.homepage-prototype .stone-label,
.homepage-prototype .stone-label::before,
.homepage-prototype .stone-label::after,
.homepage-prototype .stone-label-text {
  display: none;
}

.homepage-prototype .stone-mobile-list {
  display: grid;
  position: relative;
  width: calc(100% - var(--tiger-canvas-width) - var(--tiger-canvas-gap));
  margin: 0;
  border: 0;
  overflow: visible;
}

.homepage-prototype .stone-mobile-list-item {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 10px 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 535;
  line-height: 1.35;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}

.homepage-prototype .stone-mobile-list-item > * {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.homepage-prototype .stone-mobile-list-item > span {
  white-space: normal;
  overflow-wrap: break-word;
}

.homepage-prototype .stone-mobile-list-stone {
  display: block;
  width: 44px;
  height: auto;
}

.homepage-prototype .stone-mobile-list-item::after {
  content: "";
  position: absolute;
  top: -24%;
  bottom: -24%;
  left: 0;
  width: 48%;
  background: linear-gradient(108deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .08) 28%,
    rgba(255, 255, 255, .76) 50%,
    rgba(255, 255, 255, 0) 76%);
  filter: blur(5px);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-145%) skewX(-12deg);
  z-index: 2;
}

.homepage-prototype .stone-mobile-list-item:is(:hover, :focus-visible)::after,
.homepage-prototype .stone-mobile-list-item.is-sequence-flash::after {
  animation: stone-mobile-row-flash 1s cubic-bezier(.16, 1, .3, 1) both;
}

.homepage-prototype .stone-mobile-list-item:is(:hover, :focus-visible) .stone-mobile-list-stone,
.homepage-prototype .stone-mobile-list-item.is-sequence-flash .stone-mobile-list-stone {
  animation: stone-mobile-stone-glint 1s ease both;
}

.homepage-prototype .stone-mobile-list-item:focus-visible {
  outline: 2px solid var(--cuhk-purple);
  outline-offset: 4px;
}

.homepage-prototype .stone-mobile-list::after {
  content: "";
  position: absolute;
  top: 50%;
  right: auto;
  left: var(--tiger-first-frame-left,
    calc(100% + var(--tiger-canvas-gap)));
  z-index: 0;
  width: var(--tiger-canvas-width);
  height: var(--tiger-canvas-height);
  background: url("../assets/tiger.svg") no-repeat right center / contain;
  opacity: var(--tiger-opacity, .58);
  pointer-events: none;
  transform: translateY(-50%);
}

@media (min-width: 768px) {
  .homepage-prototype .reference-tiger .tiger-sticky {
    position: relative;
    display: grid;
    width: min(1064px, calc(100% - 216px));
    min-height: 0;
    margin: 0 auto;
    padding: 48px 0 72px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(28px, 5vw, 80px);
    align-items: start;
  }

  .homepage-prototype .reference-tiger .reference-tiger-copy {
    display: contents;
  }

  .homepage-prototype .reference-tiger h2 {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    margin: 0;
    text-align: left;
  }

  .homepage-prototype .reference-tiger p {
    grid-column: 1;
    grid-row: 2;
    width: auto;
    margin: 28px 0 0;
    text-align: left;
  }

  .homepage-prototype .reference-tiger .mobile-leap-message {
    position: relative;
    top: auto;
    left: auto;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    margin: 0 0 18px;
    transform: none;
  }

  .homepage-prototype .reference-tiger .stone-mobile-list {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    width: calc(100% - var(--tiger-canvas-width) - var(--tiger-canvas-gap));
    margin: 0;
  }

  .homepage-prototype .reference-tiger .reference-read-more {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    margin: 28px 0 0;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .homepage-prototype .reference-tiger .tiger-sticky {
    display: flex;
    flex-direction: column;
    width: calc(100% - 56px);
    padding: 40px 0 72px;
  }

  .homepage-prototype .reference-tiger h2,
  .homepage-prototype .reference-tiger p,
  .homepage-prototype .reference-tiger .mobile-leap-message,
  .homepage-prototype .reference-tiger .stone-mobile-list,
  .homepage-prototype .reference-tiger .reference-read-more {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    align-self: stretch;
  }

  .homepage-prototype .reference-tiger h2 {
    order: 1;
  }

  .homepage-prototype .reference-tiger p {
    order: 2;
  }

  .homepage-prototype .reference-tiger .mobile-leap-message {
    order: 3;
    margin: 32px 0 18px;
  }

  .homepage-prototype .reference-tiger .stone-mobile-list {
    order: 4;
    align-self: flex-start;
    width: calc(100% - var(--tiger-canvas-width) - var(--tiger-canvas-gap));
    margin: 0;
  }

  .homepage-prototype .reference-tiger .reference-read-more {
    order: 5;
    width: 205px;
    align-self: flex-start;
    margin-top: 28px;
  }
}

@media (min-width: 768px) {
  .homepage-prototype .reference-tiger .stone-mobile-list-item {
    min-height: 52px;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px;
    font-size: 16px;
  }

  .homepage-prototype .reference-tiger .stone-mobile-list-stone {
    width: 56px;
  }

  .reference-home .sprg-tiger-reveal .stone {
    animation: none;
  }

  .reference-tiger .mobile-leap-message {
    position: absolute;
    z-index: 4;
    display: block;
    margin: 0;
    color: var(--cuhk-purple);
    font-size: clamp(18px, 1.8vw, 28px);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.1;
    opacity: 0;
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .homepage-prototype .reference-tiger .stone-mobile-list-item {
    min-height: clamp(52px, 6.5vw, 68px);
    grid-template-columns: clamp(48px, 6vw, 64px) minmax(0, 1fr);
    gap: clamp(10px, 1.5vw, 16px);
    font-size: clamp(16px, 2vw, 21px);
    line-height: 1.3;
  }

  .homepage-prototype .reference-tiger .stone-mobile-list-stone {
    width: clamp(48px, 6vw, 64px);
  }
}

@media (min-width: 1280px) {
  .homepage-prototype .reference-tiger .reference-tiger-copy {
    display: flex;
    flex-direction: column;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-items: flex-start;
  }

  .homepage-prototype .reference-tiger .stone-mobile-list {
    width: 100%;
  }

  .homepage-prototype .reference-tiger .stone-mobile-list-item {
    min-height: 60px;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 10px;
    font-size: 28px;
  }

  .homepage-prototype .reference-tiger .stone-mobile-list-stone {
    width: 70px;
  }

}

.stone {
  transition: transform .36s cubic-bezier(.16, 1, .3, 1);
}

.sprg-tiger-reveal .stone {
  animation: sprg-stone-arrival .72s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--sprg-stone-index, 0) * 120ms);
}

@keyframes sprg-stone-arrival {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 18px)); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

.stone:hover,
.stone:focus-visible {
  transform: translate(calc(-50% + var(--leap-x, 0px)), calc(-50% + var(--leap-y, 4px)));
}

/* Reveal is latched by JS (.is-revealed) on the first hover/focus, so the
   shadow + word stay after the pointer leaves. One diagonal wipe reveals them
   together, sweeping from the top-left down to the bottom-right. */
.stone.is-revealed .stone-label {
  opacity: 1;
  visibility: visible;
  clip-path: polygon(-40% -40%, 240% -40%, -40% 240%);
  transition-delay: 0s;
}

.stone.is-revealed .stone-label-text { color: #fff; }

/* stone positions (diagonal T low-left largest -> R high-right smallest),
   per-category colour, and paw rotation following each step */
/* positions are % of the fixed 700x600 canvas; widths are fixed px (the whole
   canvas is scaled to fit, so no per-stone fluid sizing is needed). A tight
   diagonal keeps the stones close without their footprints overlapping. */
.stone--t { --x: 0%;  --y: 82%; --w: 160px; --cat: #66B7C4; --paw-rot: 55deg; }
.stone--i { --x: 22%; --y: 58%; --w: 148px; --cat: #67A85B; --paw-rot: 56deg; }
.stone--g { --x: 39%; --y: 37%; --w: 130px; --cat: #448DB5; --paw-rot: 55deg; }
.stone--e { --x: 58%; --y: 19%; --w: 118px; --cat: #7A438C; --paw-rot: 52deg; }
.stone--r { --x: 75%; --y: 2%; --w: 100px; --cat: #D09A34; --paw-rot: 50deg; }

.stone:focus-visible,
.reference-read-more:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 7px;
}

@media (max-width: 767px) {
  .reference-hero {
    height: auto;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .reference-hero-image,
  .reference-hero-fallback {
    height: var(--prototype-hero-mobile-height);
    bottom: auto;
  }

  .reference-hero-copy {
    --hero-inset: 24px;
    top: auto;
    left: 0;
    width: 100%;
    height: auto;
    height: auto;
    box-sizing: border-box;
    padding: 24px var(--content-pad);
    background: #fff;
    gap: 24px;
    position: relative;
    margin-top: 0;
    transform: none;
    text-shadow: none;
  }

  .reference-hero::after {
    display: none;
  }

  .reference-hero-content {
    width: 100%;
  }

  .reference-hero-copy h1 {
    font-size: clamp(36px, 5.55vw, 80px);
    background: transparent;
    text-shadow: none;
  }

  .hero-title-purple {
    padding-left: clamp(14px, 3.6vw, 62px);
  }

  .hero-title-accent,
  .hero-title-purple {
    line-height: .94;
  }

  .reference-plan {
    height: auto;
    min-height: 0;
  }

  .reference-copy,
  .reference-tiger-copy {
    width: calc(100% - 56px);
  }

  .reference-copy {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .reference-copy h2,
  .reference-tiger-copy h2 {
    font-size: 38px;
  }

  .reference-copy p,
  .reference-tiger-copy p {
    font-size: 17px;
    line-height: 1.55;
  }

}

/* Tablet portrait and phone use a stacked section. */
@media (max-width: 1279px) {
  .homepage-prototype main {
    overflow: visible;
  }

  .reference-tiger {
    display: block;
    min-height: max(640px, calc(100vh - var(--tiger-chrome, 220px)));
    padding: 0;
  }

  .tiger-sticky {
    position: static;
    display: block;
    justify-content: normal;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 40px 0 72px;
    overflow: visible;
  }

  .reference-tiger .reference-tiger-copy {
    flex: none;
    width: min(1064px, calc(100% - 216px));
    max-width: none;
    margin: 0 auto;
    padding-right: 0;
    padding-left: 0;
  }

  .stone-stage {
    --base-w: 700;
    --base-h: 600;
    --stage-dx: 0px;
    --stage-dy: 0px;
    margin: 72px auto 140px;
  }

  /* Tablet uses the same artboard coordinates as desktop; only the outer
     layout changes to copy row followed by illustration row. */
  /* Match tiger.html's tablet artboard coordinates. */
  .stone--t { --x: 0%; --y: 82%; --w: 160px; }
  .stone--i { --x: 22%; --y: 58%; --w: 148px; }
  .stone--g { --x: 39%; --y: 37%; --w: 130px; }
  .stone--e { --x: 58%; --y: 19%; --w: 118px; }
  .stone--r { --x: 75%; --y: 2%; --w: 100px; }

  .reference-tiger .stone-label {
    width: min(260px, 30vw);
    white-space: normal;
  }

  .reference-tiger .mobile-leap-message {
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, 700px);
    margin: 12px auto -48px;
    transform: none;
  }
}

/* The shared stylesheet keeps a 1440px artboard zoom from 768px upward.
   This homepage has a stacked tablet composition already, so remove that
   desktop-only scaling in the same range or the stones and copy become tiny. */
@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    --pad: 24px;
    --content-pad: 24px;
    --content-inset: 24px;
    --desktop-scale: 1;
  }

  html { overflow-x: hidden; }

  .reference-plan {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .reference-copy {
    padding-bottom: 96px;
  }

  body.homepage-prototype {
    width: 100%;
  }

  body.homepage-prototype > main,
  body.homepage-prototype > .site-footer {
    width: 100%;
    max-width: none;
    zoom: 1;
  }

  .reference-tiger .tiger-sticky {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 40px 0 72px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .reference-tiger .reference-tiger-copy {
    display: contents;
    width: auto;
    margin: 0;
  }

  .reference-tiger .reference-tiger-copy > h2,
  .reference-tiger .reference-tiger-copy > p,
  .reference-tiger .reference-tiger-copy > .reference-read-more,
  .reference-tiger .stone-stage {
    grid-column: 1;
  }

  .reference-tiger .reference-tiger-copy > h2 {
    grid-row: 1;
    width: min(1064px, calc(100% - 48px));
    margin-right: auto;
    margin-left: auto;
  }

  .reference-tiger .reference-tiger-copy > p {
    grid-row: 2;
    width: min(1064px, calc(100% - 48px));
    margin-right: auto;
    margin-left: auto;
  }

  .reference-tiger .stone-stage {
    grid-row: 4;
    margin: 76px auto 0;
  }

  .reference-tiger .reference-tiger-copy > .reference-read-more {
    grid-row: 3;
    justify-self: start;
    margin-top: 32px;
    margin-left: max(24px, calc((100% - 1064px) / 2));
  }

  .homepage-prototype .reference-tiger-copy h2 {
    font-size: clamp(38px, 6vw, 56px);
  }
}

/* Match tiger.html's tablet artboard: the tiger is anchored to the stage's
   top-left and the canvas keeps the same fluid footprint instead of being
   reframed by the homepage fit calculation. */
@media (min-width: 768px) and (max-width: 1023px) {
  .reference-tiger::before {
    display: none;
  }

  .reference-tiger .stone-stage {
    position: relative;
    width: min(800px, calc(100vw - 48px));
    height: clamp(520px, 72vw, 680px);
    max-width: none;
    margin: 0 auto;
    --stage-scale: 1;
  }

  .reference-tiger .stone-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url("../assets/tiger.svg") no-repeat -28px -28px /
      min(38vw, 320px) auto;
    opacity: .68;
  }

  .reference-tiger .stone-stage .stone-canvas {
    z-index: 1;
    width: 100%;
    height: 100%;
    left: clamp(56px, 10vw, 80px);
    transform: none;
  }
}

/* Phone layout: keep the stone path large and centered, then move the full
   priority names into a readable list below it. Hide the desktop projection
   and use small stone thumbnails instead of circular markers. */
@media (max-width: 799px) {
  .stone-stage {
    display: block;
    margin-right: auto;
    margin-left: auto;
  }

  .stone-label {
    display: block;
  }

  .stone-label::before,
  .stone-label::after {
    display: block;
  }

  .stone-label-text {
    display: block;
  }

  .stone-mobile-list {
    display: none;
  }

  .stone-mobile-list-item {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 58px;
    padding: 10px 0;
    border-bottom: 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 535;
    line-height: 1.35;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
  }

  .stone-mobile-list-item::after {
    content: "";
    position: absolute;
    top: -24%;
    bottom: -24%;
    left: 0;
    width: 48%;
    background: linear-gradient(108deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, .08) 28%,
      rgba(255, 255, 255, .76) 50%,
      rgba(255, 255, 255, 0) 76%);
    filter: blur(5px);
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-145%) skewX(-12deg);
    z-index: 2;
  }

  .stone-mobile-list-item > * {
    position: relative;
    min-width: 0;
    z-index: 1;
  }

  .stone-mobile-list-item > span {
    white-space: normal;
    overflow-wrap: break-word;
  }

  .stone-mobile-list-stone {
    display: block;
    width: 44px;
    height: auto;
  }

  .stone-mobile-list-item:is(:hover, :focus-visible)::after {
    animation: stone-mobile-row-flash 1s cubic-bezier(.16, 1, .3, 1) both;
  }

  .stone-mobile-list-item.is-sequence-flash::after {
    animation: stone-mobile-row-flash 1s cubic-bezier(.16, 1, .3, 1) both;
  }

  .stone-mobile-list-item:is(:hover, :focus-visible) .stone-mobile-list-stone {
    animation: stone-mobile-stone-glint 1s ease both;
  }

  .stone-mobile-list-item.is-sequence-flash .stone-mobile-list-stone {
    animation: stone-mobile-stone-glint 1s ease both;
  }

  .stone-mobile-list-item:focus-visible {
    outline: 2px solid var(--cuhk-purple);
    outline-offset: 4px;
  }
}

/* Below 768px, use the compact readable list. From 768px upward the desktop
   stone stage remains the only representation. */
@media (max-width: 767px) {
  .reference-tiger {
    --mobile-tiger-width: clamp(76px, 24vw, 120px);
    --mobile-tiger-height: clamp(150px, 48vw, 240px);
    --mobile-tiger-gap: clamp(12px, 4vw, 24px);
    min-height: 0;
  }

  .reference-tiger::before {
    display: none;
  }

  .stone-stage,
  .tiger-stone-stage .stone-stage {
    display: none;
  }

  .stone-label,
  .stone-label::before,
  .stone-label::after,
  .stone-label-text {
    display: none;
  }

  .stone-mobile-list,
  .tiger-stone-stage .stone-mobile-list {
    display: grid;
    position: relative;
    width: min(520px, 100%);
    margin: 12px 0 0;
    border-top: 0;
    overflow: visible;
  }

  /* Keep the mobile reading action after the complete TIGER list. */
  .reference-tiger .tiger-sticky {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(100% - 56px);
    margin: 0 auto;
    padding: 40px 0;
  }

  .reference-tiger .reference-tiger-copy {
    display: contents;
  }

  .reference-tiger h2 {
    order: 1;
    width: 100%;
    margin-top: 46px;
    text-align: left;
  }

  .reference-tiger p {
    order: 2;
    width: 100%;
    text-align: left;
  }

  .reference-tiger .stone-mobile-list {
    order: 3;
    position: relative;
    z-index: 1;
    width: calc(100% - var(--mobile-tiger-width) - var(--mobile-tiger-gap));
    align-self: flex-start;
    margin-left: 0;
    margin-right: 0;
  }

  .reference-tiger .mobile-leap-message {
    order: 3;
    position: relative;
    z-index: 1;
    display: block;
    width: min(520px, 100%);
    align-self: center;
    margin: 0;
    padding: 0 0 18px;
    color: var(--cuhk-purple);
    font-size: clamp(18px, 5vw, 24px);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.1;
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
  }

  .reference-tiger .stone-mobile-list::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(-1 * (var(--mobile-tiger-width) + var(--mobile-tiger-gap)));
    z-index: 0;
    width: var(--mobile-tiger-width);
    height: var(--mobile-tiger-height);
    background: url("../assets/tiger.svg") no-repeat right center / contain;
    opacity: .58;
    pointer-events: none;
    transform: translateY(-50%);
  }

  .reference-tiger .reference-read-more {
    order: 5;
    align-self: flex-start;
    margin-top: 28px;
  }
}

@keyframes stone-mobile-row-flash {
  0% {
    opacity: 0;
    transform: translateX(-145%) skewX(-12deg);
  }
  18% { opacity: .78; }
  54% { opacity: .34; }
  100% {
    opacity: 0;
    transform: translateX(235%) skewX(-12deg);
  }
}

@keyframes stone-mobile-stone-glint {
  0%, 100% { filter: brightness(1); }
  24%, 44% {
    filter: brightness(1.15) drop-shadow(0 0 7px rgba(255, 255, 255, .48));
  }
}

@media (min-width: 1280px) {
  .homepage-prototype .reference-tiger .mobile-leap-message {
    position: relative;
    top: auto;
    left: auto;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    margin: 0 0 18px;
    justify-self: stretch;
    align-self: start;
    transform: none;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reference-hero-video {
    display: none;
  }

  .reference-hero-fallback {
    display: block;
  }

  html { scroll-behavior: auto; }

  .stone-label,
  .stone-label::before,
  .stone-label-text {
    transition: none !important;
    clip-path: none;
  }

  .stone-label::before {
    opacity: 1;
    transform: scaleX(1);
  }

  /* no paw stamp or light flash; the label still reveals instantly on activate */
  .stone.is-flash .stone-paw,
  .stone.is-flash .stone-label::before,
  .stone.is-flash .stone-label::after,
  .stone.is-flash .stone-label-text,
  .stone:is(:hover, :focus-visible) .stone-paw,
  .stone:is(:hover, :focus-visible) .stone-label::before,
  .stone:is(:hover, :focus-visible) .stone-label-text { animation: none; }
  .stone-label::after { display: none; }

  .stone-mobile-list-item::after,
  .stone-mobile-list-stone {
    animation: none;
    filter: none;
  }
}