/* Hero's Cache comic effects.
   1) Scroll: each section turns in like a comic page landing on the stack.
   2) Navigation: the next page slides up out of a collector's sleeve (View Transitions).
   Both are progressive: no JS or an older browser just gets the normal page.
   Both switch off for visitors who ask for reduced motion. */

html, body { overflow-x: clip; }

/* ---------- 1) Page turn on scroll ---------- */
/* Each page starts edge-on and swings down onto the stack: a small overshoot past flat,
   then it settles. Pages alternate the side they hinge on, like turning through a book.
   A spine shadow and a cast shadow fade as the page lands, and a light sheen sweeps
   across it. Only transform and opacity animate. --hc-p (perspective) is set per page
   by fx.js from its width, so wide desktop sections never swing through the camera. */
.fx .hc-page {
  --hc-p: 1000px;
  position: relative;
  transform-origin: left center;
  transform: perspective(var(--hc-p)) rotateY(-105deg);
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.fx .hc-page.hc-from-right {
  transform-origin: right center;
  transform: perspective(var(--hc-p)) rotateY(105deg);
}
.fx .hc-page.is-turned {
  animation: hc-turn-l 1.2s cubic-bezier(0.25, 0.7, 0.35, 1) both;
}
.fx .hc-page.hc-from-right.is-turned { animation-name: hc-turn-r; }
@keyframes hc-turn-l {
  0%   { transform: perspective(var(--hc-p)) rotateY(-105deg); opacity: 0; }
  12%  { opacity: 1; }
  66%  { transform: perspective(var(--hc-p)) rotateY(7deg); opacity: 1; }
  84%  { transform: perspective(var(--hc-p)) rotateY(-2.5deg); }
  100% { transform: perspective(var(--hc-p)) rotateY(0deg); opacity: 1; }
}
@keyframes hc-turn-r {
  0%   { transform: perspective(var(--hc-p)) rotateY(105deg); opacity: 0; }
  12%  { opacity: 1; }
  66%  { transform: perspective(var(--hc-p)) rotateY(-7deg); opacity: 1; }
  84%  { transform: perspective(var(--hc-p)) rotateY(2.5deg); }
  100% { transform: perspective(var(--hc-p)) rotateY(0deg); opacity: 1; }
}

/* Spine shadow on the hinge side, plus a soft shadow cast below the lifted page */
.fx .hc-page::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; bottom: -28px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.06) 62%, transparent 80%) top / 100% calc(100% - 28px) no-repeat,
    radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0.6), transparent 70%) bottom / 100% 28px no-repeat;
  opacity: 1;
}
.fx .hc-page.hc-from-right::after {
  background:
    linear-gradient(270deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.06) 62%, transparent 80%) top / 100% calc(100% - 28px) no-repeat,
    radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0.6), transparent 70%) bottom / 100% 28px no-repeat;
}
.fx .hc-page.is-turned::after { animation: hc-shade 1.2s ease-out both; }
@keyframes hc-shade {
  0%   { opacity: 1; }
  55%  { opacity: 0.8; }
  100% { opacity: 0; }
}

/* Light sheen that sweeps across the page as it lands */
.fx .hc-page::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -25%; right: -25%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.1) 46%, rgba(255, 255, 255, 0.26) 50%, rgba(255, 255, 255, 0.1) 54%, transparent 60%);
  opacity: 0;
  transform: translateX(-28%);
}
.fx .hc-page.hc-from-right::before { transform: translateX(28%); }
.fx .hc-page.is-turned::before { animation: hc-sheen-l 1.25s ease-out 0.15s both; }
.fx .hc-page.hc-from-right.is-turned::before { animation-name: hc-sheen-r; }
@keyframes hc-sheen-l {
  0%   { opacity: 0; transform: translateX(-28%); }
  30%  { opacity: 1; }
  75%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateX(28%); }
}
@keyframes hc-sheen-r {
  0%   { opacity: 0; transform: translateX(28%); }
  30%  { opacity: 1; }
  75%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateX(-28%); }
}

/* ---------- 2) Pulled from the collection ---------- */
@view-transition { navigation: auto; }

nav { view-transition-name: hc-nav; }

::view-transition { background: #07080c; }

::view-transition-old(root) {
  animation: hc-stash 0.4s cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: hc-pull 0.85s cubic-bezier(0.16, 0.84, 0.3, 1) both;
}
@keyframes hc-stash {
  to { transform: translateY(6%) scale(0.92); opacity: 0; filter: brightness(0.45); }
}
@keyframes hc-pull {
  0%   { transform: translateY(92%) rotate(2.5deg) scale(0.9); filter: brightness(0.7); }
  65%  { transform: translateY(-1.2%) rotate(-0.3deg) scale(0.985); filter: brightness(1); }
  100% { transform: none; }
}

/* The clear bag-and-board sleeve: a glare sweeps across, then the sleeve slips off */
.hc-sleeve {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.28) 45%, rgba(255, 255, 255, 0.06) 52%, transparent 62%) no-repeat,
    rgba(200, 220, 255, 0.06);
  background-size: 250% 100%, auto;
  background-position: 120% 0, 0 0;
  animation: hc-sleeve 1.1s ease-out forwards;
}
@keyframes hc-sleeve {
  0%   { background-position: 120% 0, 0 0; opacity: 1; }
  60%  { background-position: -40% 0, 0 0; opacity: 1; }
  100% { background-position: -40% 0, 0 0; opacity: 0; transform: translateY(-4%); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .fx .hc-page, .fx .hc-page.is-turned { transform: none; opacity: 1; transition: none; animation: none; }
  .fx .hc-page::after, .fx .hc-page::before { display: none; }
  .hc-sleeve { display: none; }
}