/* Prova — hero. The word PROVA gives up its O, which becomes the symbol (logo motion study 03).
   At rest: the symbol on the left; on the right, the statement on the symbol's cap line and the way to
   write to Prova on its baseline, so the column is held at both ends. The company record closes the screen. */

main { flex: 1; display: flex; }

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-6) var(--gutter) var(--space-12);
}

/* The stage keeps the word's bottom edge on the symbol's baseline at every size.
   Its width is capped by the height left between the bar and the record, so the whole story fits one screen. */
.hero__frame {
  position: relative;
  container-type: inline-size;
  width: min(100%, calc((100svh - var(--bar-height) - 190px) * 3468 / 1300));
}
.hero__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3468 / 1300;
}

/* Narrow portrait screens (phones, tablets held upright). Sideways phones keep the wide layout. */
@media ((max-width: 899px) and (orientation: portrait)) or ((max-width: 700px) and (max-height: 420px)) {
  .hero { justify-content: center; padding-bottom: clamp(20px, 4svh, 88px); }
  .hero__frame { width: max(min(100%, calc((100svh - var(--bar-height) - 320px) * 3468 / 2500)), min(100%, 240px)); }
  .hero__stage { aspect-ratio: 3468 / 2500; }
}
/* Phones carry a two-row top bar, so the logo gives up a little height to keep Home on one screen. */
@media ((max-width: 599px) and (orientation: portrait)) {
  .hero__frame { width: max(min(100%, calc((100svh - var(--bar-height) - 350px) * 3468 / 2500)), min(100%, 240px)); }
}

.hero__mark {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none; /* only the drawn shapes take the pointer */
}
.hero__mark:focus-visible { outline: none; }
.hero__mark:focus-visible::after {
  content: "";
  position: absolute;
  left: calc(var(--ring-x, 0px) - 8px);
  top: calc(var(--ring-y, 0px) - 8px);
  width: calc(var(--ring-w, 100%) + 16px);
  height: calc(var(--ring-h, 100%) + 16px);
  outline: 2px solid var(--magenta);
}
.hero__mark:disabled,
.hero__mark:disabled .sq,
.hero__mark:disabled .pt,
.hero__mark:disabled .sym { cursor: default; }
.hero__mark svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: opacity 280ms var(--ease-arrive);
}
.hero__mark svg.is-fading { opacity: 0; }
.hero__mark .sq,
.hero__mark .pt,
.hero__mark .sym { pointer-events: visiblePainted; cursor: pointer; }

.hero__statement {
  width: max-content;
  max-width: min(var(--measure), calc(100vw - 2 * var(--gutter)));
  margin-top: var(--space-8);
  font-family: var(--font-display);
  font-size: min(112px, max(var(--display-m), 4.6cqw)); /* grows with the logo */
  font-weight: 600;
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking);
  line-height: 1.02;
  text-wrap: balance;
}
.hero__contact {
  margin-top: var(--space-6);
  font-size: var(--text-lead);
}
.hero__contact a { font-weight: 500; }

/* Wide layout, only when the script can measure: statement on the symbol's cap line, contact on its baseline. */
@media not (((max-width: 899px) and (orientation: portrait)) or ((max-width: 700px) and (max-height: 420px))) {
  .js .hero__statement,
  .js .hero__contact {
    position: absolute;
    left: 58.333cqw;
    max-width: min(var(--measure), calc(100vw - 2 * var(--gutter) - 58.333cqw));
    margin: 0;
  }
  .js .hero__statement { top: var(--cap-top, 0px); }
  .js .hero__contact { bottom: 0; transform: translateY(var(--baseline-shift, 0px)); }
}

/* Phones held sideways: the logo is short, so the line drops to the display floor and stays clear of the email. */
@media (orientation: landscape) and (max-height: 500px) {
  .hero__statement { font-size: 30px; }
}

/* Hidden only while the script runs the intro. Without JavaScript everything simply shows. */
.js .hero__statement,
.js .hero__contact {
  opacity: 0;
  translate: 0 14px;
  transition: opacity var(--dur-slow) var(--ease-arrive), translate var(--dur-slow) var(--ease-arrive);
}
.js .hero__contact { transition-delay: 160ms; }
.js .hero.is-done .hero__statement,
.js .hero.is-done .hero__contact {
  opacity: 1;
  translate: 0 0;
}

/* If the script fails to load, show the words after a moment anyway. */
.js:not(.hero-ok) .hero__statement,
.js:not(.hero-ok) .hero__contact { animation: hero-failsafe 0s linear 1.5s forwards; }
@keyframes hero-failsafe { to { opacity: 1; translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .js .hero__statement, .js .hero__contact { transition: none; }
}