/* Shared behaviour for inner pages (projects, experience, contacts, about…):
   the centred hero card and the entrance animations. */

html:has(body[data-page]) {
  scroll-behavior: smooth;
}

/* ---------- Big centred card (experience, contacts, about…) ----------
   Designed at 1152×648 on a 1440×900 screen. It always fills the width minus
   144px on each side. Height is 16:9 when the screen allows, otherwise whatever
   fits with 64px above and below. Keep in sync with wideCard() in js/transition.js. */

:root {
  --wide-width: calc(100vw - 288px);
  --wide-height: min(var(--wide-width) * 9 / 16, 100vh - 128px - var(--label-height) - var(--label-gap));
  /* One design pixel inside the big card: 1px at 1440×900, scaled by the tighter side elsewhere */
  --u: min(var(--wide-width) / 1152, var(--wide-height) / 648);
}

.page-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 64px 144px;
}

.card__body--wide {
  width: var(--wide-width);
  height: var(--wide-height);
  padding: calc(36 * var(--u));
  border-radius: calc(6 * var(--u));
}

/* ---------- Hero card entrance ---------- */

.hero {
  --text-delay: 0.5s;

  opacity: 0;
  transform: translateY(40px);
}

.is-loaded .hero {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.9s var(--ease-out),
    transform 1.2s var(--ease-out);
  transition-delay: 0.1s;
}

/* Arriving from home: the card is already in place, only its text types in */
.from-home .hero {
  --text-delay: 0.15s;

  transition: none;
}

/* ---------- Cards appearing one after another ---------- */

[data-reveal] {
  /* Text types in shortly after its card starts to appear */
  --text-delay: calc(var(--delay, 0s) + 0.3s);

  opacity: 0;
  transform: translateY(80px);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.9s var(--ease-out),
    transform 1.1s var(--ease-out);
  transition-delay: var(--delay, 0s);
}

/* Letters wait for their card, not for the page */
[data-reveal]:not(.is-visible) .char {
  opacity: 0;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  html:has(body[data-page]) {
    scroll-behavior: auto;
  }

  .hero,
  [data-reveal],
  [data-reveal]:not(.is-visible) .char {
    opacity: 1;
    transform: none;
    transition: none !important;
  }
}