/* ---------- hero ---------- */
.hero { padding-top: 96px; }

/* "HI, I AM" types in (ink), an Enter keycap appears and presses itself, then a navy fill wipes up over
   the same row and HAYWARD types in white on it; the gold caret ends after the name */
.type-hero { padding-block: var(--s-2); }
.type { position: relative; display: grid; color: var(--text); line-height: .8; cursor: default; user-select: none; }
.type.is-ready { cursor: text; }
.type__line { grid-area: 1 / 1; padding: .1em .14em .06em .06em; }
.type.is-covered .type__line:not(.type__name) { visibility: hidden; }
/* row 1: text on the left, keycap pinned right with the same inset as the text has on the left */
.type__line:has(.type__key) { display: flex; align-items: center; justify-content: space-between; gap: .3em; padding-right: .095em; } /* .06em + the H's left side bearing */
.type__ch { display: inline-block; opacity: 0; }
.type__ch.is-typed { animation: strike 280ms var(--ease-out) forwards; }
@keyframes strike {
  0%   { opacity: 0; clip-path: inset(46% 0 46% 0); transform: translateY(5%) scaleX(1.04); }
  55%  { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(-1.5%); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
}
.type__base { display: inline-block; width: 0; height: 0; vertical-align: baseline; }

/* Enter keycap: square like the site's buttons, with a solid ink base it sinks into when pressed.
   A little depth: the face shades from top to bottom, a light lip on top, a darker rim below, and a soft ground shadow */
.type__key { --lip: inset 0 .16em 0 rgba(255, 255, 255, .95), inset 0 -.22em 0 rgba(11, 21, 48, .1);
  display: inline-flex; align-items: flex-end; justify-content: space-between; gap: 1.2em; flex: none; position: relative; top: .19em; min-width: 5.4em; padding: .9em .8em .7em; /* centred on the cap height, base included */
  font: 600 .12em/1 var(--font-body); text-transform: lowercase; letter-spacing: .02em; color: var(--text); text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 35%, var(--surface-2) 100%); border: 2px solid var(--text);
  box-shadow: var(--lip), 0 .45em 0 var(--text), 0 .8em 1em -.35em rgba(11, 21, 48, .35); opacity: 0; transform: translateY(-.6em); }
.type__key span:last-child { font-size: 1.5em; line-height: .8; }
.type__key.is-in { animation: key-in 300ms var(--ease-out) forwards; }
.type__key.is-in.is-pressed { animation: key-press 420ms var(--ease-out) forwards; background: linear-gradient(180deg, #FCD34D 0%, var(--caret) 100%); }
@keyframes key-in { to { opacity: 1; transform: none; } }
@keyframes key-press {
  0%   { opacity: 1; transform: none; box-shadow: var(--lip), 0 .45em 0 var(--text), 0 .8em 1em -.35em rgba(11, 21, 48, .35); }
  35%  { opacity: 1; transform: translateY(.45em); box-shadow: var(--lip), 0 0 0 var(--text), 0 .15em .3em -.1em rgba(11, 21, 48, .3); }
  100% { opacity: 1; transform: translateY(.12em); box-shadow: var(--lip), 0 .33em 0 var(--text), 0 .6em .8em -.35em rgba(11, 21, 48, .3); }
}

/* navy cover: wipes up from the bottom over row 1 */
.type__name { position: relative; isolation: isolate; color: var(--on-accent); }
.type__name::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: scaleY(0); transform-origin: bottom; }
.type__name.is-covering::before { animation: cover-rise 560ms var(--ease-out) forwards; }
@keyframes cover-rise { to { transform: scaleY(1); } }

.type__caret { position: absolute; left: 0; top: 0; width: .07em; height: .7em; margin-left: .02em; background: var(--caret); will-change: transform; animation: blink 1.05s steps(1) infinite; }
.type.is-typing .type__caret, .type.is-following .type__caret { animation: none; }
.type.is-rising .type__caret { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .type__ch { opacity: 1; } .type__caret { animation: none; }
  .type__name.is-covering::before { animation: none; transform: none; }
}

/* ---------- statement + CTA tiles ---------- */
.hero__bar { display: grid; grid-template-columns: 1fr auto; gap: var(--s-8); align-items: end; margin-top: var(--s-8); padding-bottom: var(--s-9); }
.hero__bar .statement { margin: var(--s-3) 0 0; font-size: calc(clamp(2.5rem, 1.2rem + 4.2vw, 5.5rem) * var(--display-scale)); max-width: 9ch; }

.tiles { display: flex; gap: var(--s-4); }
.tile { width: clamp(150px, 17vw, 232px); display: grid; border: var(--rule); color: var(--text); transition: border-color 420ms var(--ease-out); }
.tile:hover, .tile:focus-visible { border-color: var(--hover-light); }
.tile picture, .tile img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; }
.tile .icon { transition: transform 420ms var(--ease-out); }
.tile:hover .icon { transform: translateX(4px); }
.tile__label { position: relative; isolation: isolate; overflow: hidden; display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 var(--s-4); border-top: var(--rule); transition: color 420ms var(--ease-out); }
.tile__label::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hover-light); transform: scaleX(0); transform-origin: right; transition: transform 420ms var(--ease-out); }
.tile:hover .tile__label, .tile:focus-visible .tile__label { color: var(--on-hover-light); }
.tile:hover .tile__label::before, .tile:focus-visible .tile__label::before { transform: scaleX(1); transform-origin: left; }
/* navy tile: the frame stays navy and gold sweeps through the label */
.tile--primary, .tile--primary:hover, .tile--primary:focus-visible { border-color: var(--accent); }
.tile--primary .tile__label { background: var(--accent); color: var(--on-accent); border-top-color: var(--accent); }
.tile--primary .tile__label::before { background: var(--hover-navy); }
.tile--primary:hover .tile__label, .tile--primary:focus-visible .tile__label { color: var(--on-hover-navy); }

/* tiles stay beside the statement down to tablet; on phones they become two slim rows */
@media (max-width: 900px) { .hero__bar { gap: var(--s-5); } .tiles { gap: var(--s-3); } }
@media (max-width: 640px) {
  .hero__bar { grid-template-columns: 1fr; gap: var(--s-6); }
  .tiles { flex-direction: column; gap: var(--s-3); }
  .tile { width: 100%; grid-template-columns: 112px 1fr; }
  .tile picture { border-right: var(--rule); }
  .tile--primary picture { border-right-color: var(--accent); }
  .tile__label { border-top: 0; min-height: 64px; }
}