/* Alternative homepages C–F (stack-3 to stack-6.html): a headline with a short text
   under it, and 9:16 cards moving through the middle of the screen, a different way
   on each page. Follows the "Website 2026"
   frame in Figma (1518×768). Loaded after style.css by stack-3.html. */

@font-face {
  font-family: "SF Pro Display";
  src: url("fonts/SFProDisplay-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

.intro {
  position: absolute;
  left: 2.3vw;          /* 35px on the 1518px frame */
  top: 4.2vh;           /* 32px on the 768px frame */
  padding: 0;
  z-index: 2;
}

/* SF Pro Display Light, 60px / 1.05, 743px wide on the frame */
.headline {
  width: 48.9vw;
  margin: 0;
  font-family: "SF Display Light", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: min(3.95vw, 7.8vh);
  line-height: 1.05;
}

/* SF Pro Text Regular, 14px / 1.4, 478px wide, 60px under the headline */
.body {
  width: 34.2em;
  max-width: calc(100vw - 2 * var(--pad));
  margin-top: min(3.95vw, 7.8vh); /* the 60px gap scales with the headline */
  font-family: "SF Pro Text", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 0.923vw, 17px); /* 14px on the frame */
  line-height: 1.4;
}

/* The card sits over the text; no counter, captions or shadow */
.track { z-index: 3; perspective: 900px; perspective-origin: 50% 50%; }
.meta, .now { display: none !important; }
/* Same card for the stack-4/5/6 options */
.stage .card {
  border-radius: 10px;
  box-shadow: none;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

/* Wander */
.stage[data-layout="wander"] .card {
  border-radius: 0;
  transform-origin: 0 0;
  transition: filter 0.6s ease, opacity 0.6s ease;
}
/* Blurred by default (also while moving); the settled centre image comes into focus */
.stage[data-layout="wander"] .card { filter: blur(14px); opacity: 0.55; }
.stage[data-layout="wander"] .card.is-center { filter: none; opacity: 1; }
.stage[data-layout="wander"] .card.is-center { z-index: 2; }
/* Hovering anywhere on the headline opens three small white buttons under the name: Instagram, LinkedIn, email */
.name { position: relative; cursor: pointer; outline: none; }
.name-menu {
  position: absolute;
  left: 0; top: 100%;
  display: flex;
  gap: 6px;
  margin-top: -6px;
  font-family: "SF Pro Text", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(12px, 0.82vw, 15px);
  line-height: 1;
  white-space: nowrap;
  visibility: hidden;
  transition: visibility 0s linear 0.45s;
}
/* An invisible bridge, so the pointer can travel from the text to the buttons */
.name-menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 6px; }
.headline:hover .name-menu, .headline:focus-within .name-menu, .headline.is-open .name-menu { visibility: visible; transition: visibility 0s; }
/* Each button floats in a moment after the one before it */
.name-menu a {
  padding: 0.6em 1em;
  border-radius: 999px;
  color: #111;
  text-decoration: none;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(.2, .7, .2, 1), background 0.25s ease;
}
.name-menu a:nth-child(2) { transition-delay: 0.06s; }
.name-menu a:nth-child(3) { transition-delay: 0.12s; }
.headline:hover .name-menu a, .headline:focus-within .name-menu a, .headline.is-open .name-menu a { opacity: 1; transform: none; }
.name-menu a:hover, .name-menu a:focus-visible { background: #e9e9ec; outline: none; }

/* Frame names above each image, small and sharp, like frames on a Figma canvas */
.label-frame { display: none; }
.stage[data-layout="wander"] .label { z-index: 3; opacity: 0.55; transition: opacity 0.6s ease; }
.stage[data-layout="wander"] .label.is-center { opacity: 1; }
.stage[data-layout="wander"] .label-box { display: flex; gap: 10px; white-space: nowrap; overflow: hidden; }
.stage[data-layout="wander"] .label-num,
.stage[data-layout="wander"] .label-cat,
.stage[data-layout="wander"] .label-credits { display: none; }
.stage[data-layout="wander"] .label-frame,
.stage[data-layout="wander"] .label-title {
  display: block;
  position: static;
  transform: none !important;
  font-family: "SF Pro Text", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.01em;
  color: #fff;
}
.stage[data-layout="wander"] .label-title { opacity: 0.6; overflow: hidden; text-overflow: ellipsis; }
/* The grid fills the screen here, so the text sits above it */
.stage[data-layout="wander"] .intro { z-index: 4; }

@media (max-width: 767px) {
  .intro { left: var(--pad); right: var(--pad); top: 20px; }
  .headline { width: auto; font-size: min(9vw, 4.8vh); }
  .body { margin-top: 1em; font-size: 13px; }
}

/* Experiment (stack-4b): the settled centre image rises over the text; the blurred
   ones stay under it, so the text reads only while the view is moving */
.cover .stage[data-layout="wander"] .track { z-index: auto; perspective: none; }
.cover .stage[data-layout="wander"] .card.is-center { z-index: 5; }
/* Hovering the text brings it back to the front and blurs the centre image again.
   The cards let the pointer through, so the text under them still catches the hover. */
@media (hover: hover) {
  .cover .stage[data-layout="wander"] .card { pointer-events: none; }
  .cover .stage[data-layout="wander"]:has(.headline:hover, .body p:hover) .card.is-center {
    z-index: auto;
    filter: blur(14px);
    opacity: 0.55;
  }
}

/* Wander on phones: the headline alone, a little larger, with the three contact
   buttons always showing under it. The intro's bottom padding makes room for them,
   so the centre image (placed below the intro) never covers them. */
@media (max-width: 767px) {
  .stage[data-layout="wander"] .headline { position: relative; font-size: min(11.5vw, 6.2vh); }
  .stage[data-layout="wander"] .body { display: none; }
  .stage[data-layout="wander"] .intro { padding-bottom: 52px; }
  .stage[data-layout="wander"] .name { position: static; cursor: auto; }
  .stage[data-layout="wander"] .name-menu { top: 100%; margin-top: 16px; font-size: 13px; visibility: visible; transition: none; }
  .stage[data-layout="wander"] .name-menu::before { display: none; }
  .stage[data-layout="wander"] .name-menu a { opacity: 1; transform: none; transition: background 0.25s ease; }
  /* The blurred images fade into the grey at the top and bottom of the screen, so
     they don't stop in a hard line where the browser's bars begin */
  .stage[data-layout="wander"]::before,
  .stage[data-layout="wander"]::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 16vh;
    z-index: 3;
    pointer-events: none;
  }
  .stage[data-layout="wander"]::before { top: 0; background: linear-gradient(var(--bg), transparent); }
  .stage[data-layout="wander"]::after { bottom: 0; background: linear-gradient(transparent, var(--bg)); }
}