/* The base portrait stays fixed. Registered eye/expression states only alter
   their small facial regions; the tear and fold act on that same portrait. */
.hero-grid { opacity: .065; }
.loading-screen {
  position: absolute; z-index: 100; inset: 0; display: block;
  background: var(--navy); color: var(--pink); opacity: 1;
  transition: opacity 280ms ease; pointer-events: all;
}
.loading-screen span {
  position: absolute; top: 4.5svh; right: 5vw;
  font-size: clamp(9rem, 18vw, 21rem); font-weight: 800;
  line-height: .9; letter-spacing: -.105em; font-variant-numeric: tabular-nums;
}
.story-hero:not([data-phase="loading"]) .loading-screen { opacity: 0; pointer-events: none; }
.story-hero[data-phase="open"] .loading-screen,
.story-hero[data-phase="tearing"] .loading-screen { visibility: hidden; }

.hero-header, .hero-hint, .hero-counter { opacity: var(--hero-ui-opacity, 1); transition: opacity 300ms ease; }
.story-hero[data-phase="loading"] .hero-header,
.story-hero[data-phase="loading"] .hero-hint,
.story-hero[data-phase="loading"] .hero-counter,
.story-hero[data-phase="zooming"] .hero-header,
.story-hero[data-phase="zooming"] .hero-hint,
.story-hero[data-phase="zooming"] .hero-counter { opacity: 0; }

.hero-title {
  z-index: 3; top: clamp(.8rem, 2.3svh, 2rem); left: 2.4vw; right: auto;
  font-size: clamp(5.6rem, 12.5vw, 14rem); line-height: 1.04;
  letter-spacing: .005em; opacity: 0; white-space: nowrap;
  transform: translateY(.48em); transform-origin: 0 50%;
  clip-path: inset(-.6em 100% -.6em 0);
  transition: opacity 450ms var(--ease-out), transform 1300ms var(--ease-out), clip-path 1450ms var(--ease-in-out);
}
.story-hero[data-title-visible="true"] .hero-title {
  opacity: var(--title-opacity, 1); transform: translateY(0);
  clip-path: inset(-.6em 0 -.6em 0);
}
.hero-title span { margin-left: .13em; letter-spacing: -.012em; }
.hero-signature {
  position: absolute; z-index: 9; top: clamp(1.15rem, 3svh, 2.5rem);
  left: clamp(1.2rem, 2.6vw, 3.2rem); color: var(--pink);
  font-size: clamp(1.45rem, 2.7vw, 3rem); font-weight: 800;
  letter-spacing: -.035em; line-height: 1;
  opacity: var(--signature-opacity, 0); pointer-events: none;
}

.portrait-rig {
  z-index: 5; bottom: -39svh; height: min(125svh, 1120px);
  opacity: 1;
  transform: translate3d(calc(-50% + var(--portrait-shift-x, 0px)), var(--portrait-rise, 0px), 0) rotate(var(--portrait-turn, 0deg)) scale(var(--portrait-scale, 1));
  transform-origin: 50% 50%; will-change: transform;
}
.hero-peel-canvas {
  position: absolute; z-index: 6; inset: 0; width: 100%; height: 100%;
  opacity: var(--peel-opacity, 0); pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .hero-peel-canvas { display: none; } }
.story-hero[data-phase="loading"] .portrait-rig { opacity: 0; }
.portrait-fold-static, .portrait-visual, .portrait-fold, .portrait-fold__visual, .portrait-image, .portrait-opening-cover, .portrait-fold img, .tear-seam {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.portrait-fold-static { z-index: 3; opacity: var(--portrait-image-opacity, 1); }
.portrait-visual { z-index: 1; }
.portrait-image, .portrait-opening-cover, .portrait-fold img { object-fit: contain; }
.portrait-opening-cover { z-index: 3; clip-path: inset(0); }
.story-hero[data-phase="open"] .portrait-opening-cover { opacity: 0; }
.portrait-image--gaze {
  opacity: 0;
  /* Only the eyeball openings are borrowed from directional frames. Brows,
     sockets and under-eye skin always remain the original portrait pixels. */
  -webkit-mask-image:
    radial-gradient(ellipse 10.2% 3.85% at 37.88% 41.97%, #000 70%, rgba(0, 0, 0, .82) 82%, transparent 100%),
    radial-gradient(ellipse 10.2% 3.85% at 58.50% 41.97%, #000 70%, rgba(0, 0, 0, .82) 82%, transparent 100%);
  mask-image:
    radial-gradient(ellipse 10.2% 3.85% at 37.88% 41.97%, #000 70%, rgba(0, 0, 0, .82) 82%, transparent 100%),
    radial-gradient(ellipse 10.2% 3.85% at 58.50% 41.97%, #000 70%, rgba(0, 0, 0, .82) 82%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.portrait-image--expression,
.portrait-fold .portrait-fold__expression {
  opacity: var(--expression-opacity, 0);
  visibility: hidden;
  -webkit-mask-image:
    radial-gradient(ellipse 10.5% 5.4% at 37.9% 42%, #000 78%, transparent 100%),
    radial-gradient(ellipse 10.5% 5.4% at 60.1% 42%, #000 78%, transparent 100%),
    radial-gradient(ellipse 15.5% 7.8% at 49% 61.5%, #000 78%, transparent 100%);
  mask-image:
    radial-gradient(ellipse 10.5% 5.4% at 37.9% 42%, #000 78%, transparent 100%),
    radial-gradient(ellipse 10.5% 5.4% at 60.1% 42%, #000 78%, transparent 100%),
    radial-gradient(ellipse 15.5% 7.8% at 49% 61.5%, #000 78%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.tear-seam {
  display: none; z-index: 4; fill: none; stroke: #fff; stroke-width: 16;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0;
  -webkit-mask-image: url('./assets/portrait-full.png');
  mask-image: url('./assets/portrait-full.png');
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.portrait-fold {
  z-index: 5; opacity: 0; clip-path: polygon(0 100%, 0 100%, 0 100%);
  transform-origin: var(--fold-origin-x, 50%) var(--fold-origin-y, 50%); transform-style: preserve-3d;
  transform: rotate3d(1, 1.16, 0, var(--fold-angle, 0deg));
  backface-visibility: hidden; will-change: transform;
}
.portrait-fold img { backface-visibility: hidden; }
.story-hero[data-folding="true"] .portrait-fold { opacity: var(--fold-opacity, 1); }

.icon-tray {
  z-index: 1; top: 8%; left: 16%; width: 68%; height: 33%;
  perspective: 950px;
  clip-path: none; opacity: 0; transform: translateY(27%) scale(.82);
  transition: opacity 420ms ease, transform 950ms cubic-bezier(.18, 1.25, .32, 1);
}
.story-hero[data-icons-visible="true"] .icon-tray {
  opacity: 1;
  transform: translateY(var(--icon-peel-rise, 0px)) scale(1);
}
.story-hero[data-peeling="true"] .icon-tray { transition: none; }
.icon-tray[data-offscreen="true"] { opacity: 0 !important; visibility: hidden; }
.icon-link { pointer-events: none; }
.story-hero[data-phase="open"] .icon-link { pointer-events: auto; }
.icon-link img { filter: drop-shadow(0 .4rem .35rem rgba(9, 12, 30, .18)); }
.icon-link--about { z-index: 4; left: 0; top: 20%; width: 31%; transform: rotate(-11deg) rotateY(-9deg); }
.icon-link--campus { z-index: 3; left: 22%; top: 1%; width: 34%; transform: rotate(6deg) rotateY(7deg); }
.icon-link--internship { z-index: 5; left: 47%; top: 19%; width: 34%; transform: rotate(-7deg) rotateY(-7deg); }
.icon-link--projects { z-index: 2; left: 74%; top: 15%; width: 28%; transform: rotate(9deg) rotateY(9deg); }
.icon-decor--star { z-index: 6; left: 10%; top: 2%; width: 11%; transform: rotate(-15deg); }
.icon-decor--flower { z-index: 6; left: 77%; top: 79%; width: 11%; transform: rotate(12deg); }
.icon-tooltip {
  position: absolute; z-index: 10; left: 0; top: 0; display: block;
  padding: .65rem 1rem; border-radius: .42rem;
  background: #fff; color: #171b25; white-space: nowrap;
  font-size: clamp(1.2rem, 1.4vw, 1.45rem); font-weight: 750;
  line-height: 1.1; box-shadow: 0 .4rem 1rem rgba(8, 13, 28, .18);
  opacity: 0; visibility: hidden; transform: translateY(.35rem);
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 160ms;
  pointer-events: none;
}
.icon-tooltip[data-visible="true"] { opacity: 1; visibility: visible; transform: translateY(0); }

.under-page {
  z-index: 2; justify-content: flex-end;
  padding-bottom: clamp(3.5rem, 9svh, 8rem);
  color: #fff; background: transparent;
}
.under-page__title { font-size: clamp(4.5rem, 9vw, 10rem); }
.chapters-intro { min-height: 100svh; color: #fff; background: var(--navy); }
.chapters-intro h2 em { color: var(--pink); }
.hero-hint, .hero-counter, .hero-header { z-index: 9; }

@media (max-width: 750px) {
  .loading-screen span { top: 7svh; right: 5vw; font-size: clamp(7rem, 35vw, 14rem); }
  .hero-title { top: 8svh; left: 1.2rem; font-size: clamp(2.25rem, 9.5vw, 4.2rem); }
  .portrait-rig { height: auto; width: min(136vw, 660px); bottom: -10svh; }
  .icon-tray { left: 17%; width: 66%; top: 9%; height: 33%; }
  .icon-tooltip { font-size: 1.05rem; padding: .52rem .78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .loading-screen { display: none; }
  .portrait-rig { transform: translateX(-50%) !important; opacity: 1 !important; }
  .hero-title { opacity: 1; transform: none; clip-path: none; }
  .icon-tray { opacity: 1; transform: none; }
  .icon-tooltip { transition: none; }
}