/* Menu button (like the reference's outlined button beside Store) + full-screen menu,
   the touch-screen hint on the hero, the "copied" toast and press feedback for touch. */

/* ---- menu button: same height as the Resume button, at the far right ---- */
.cta { right: calc(var(--r) * (1.25 + 4.5 + 0.75)); }
.menu-btn {
  --h: calc(4.5 * var(--r));
  position: fixed;
  top: calc(1.25 * var(--r));
  right: calc(1.25 * var(--r));
  z-index: 22;
  width: var(--h);
  height: var(--h);
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: calc(0.74 * var(--r));
  background: transparent;
  color: #282c20;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.75s cubic-bezier(0.65, 0.05, 0, 1), background-color 0.4s, scale 0.2s;
}
@media (max-width: 479px) {
  .cta { right: calc(var(--r) * (1.25 + 4.7 + 0.75)); }
  .menu-btn { --h: calc(4.7 * var(--r)); }
}
html.is-scrolled .menu-btn, html.menu-open .menu-btn { color: #f4f4ed; }
.menu-btn__bars, .menu-btn__bars::before, .menu-btn__bars::after { position: absolute; display: block; }
.menu-btn__bars { inset: 0; }
.menu-btn__bars::before, .menu-btn__bars::after {
  content: '';
  left: 50%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.45s cubic-bezier(0.7, 0, 0.3, 1), width 0.45s cubic-bezier(0.7, 0, 0.3, 1);
}
/* two offset strokes, like the reference's icon */
.menu-btn__bars::before { top: 41%; width: 28%; transform: translateX(-30%); }
.menu-btn__bars::after { top: 57%; width: 28%; transform: translateX(-70%); }
html.menu-open .menu-btn__bars::before { width: 34%; transform: translate(-50%, 4.5px) rotate(45deg); }
html.menu-open .menu-btn__bars::after { width: 34%; transform: translate(-50%, -4.5px) rotate(-45deg); }
.menu-btn:focus-visible { outline: 2px solid #d2ff00; outline-offset: 3px; }

/* ---- full-screen menu ---- */
.menu {
  --mx: 100%; --my: 0%;
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  background: #1c1e17;
  color: #f4f4ed;
  font: 450 clamp(16px, 1.2vw, 19px) / 1.5 'Footer Sans', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  visibility: hidden;
  clip-path: circle(0 at var(--mx) var(--my));
  transition: clip-path 0.8s cubic-bezier(0.7, 0, 0.3, 1), visibility 0s linear 0.8s;
}
html.menu-open .menu { visibility: visible; clip-path: circle(150vmax at var(--mx) var(--my)); transition: clip-path 0.8s cubic-bezier(0.7, 0, 0.3, 1); }
html.menu-open .wordmark, html.menu-open .cta { z-index: 21; }
html.menu-open .wordmark-top { fill: #c8cbbd; }
html.menu-open .wordmark-bottom { fill: #ebeee0; }

.menu__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 100em;
  margin: 0 auto;
  padding: max(18vh, 7em) 8vw 6vh 16vw;
}
.menu__label {
  margin: 0 0 1.2em;
  font-size: 0.6em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(244, 244, 237, 0.5);
}
.menu__links { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(244, 244, 237, 0.15); padding-top: 0.6em; }
.menu__links li { overflow: hidden; }
.menu__links a {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  color: inherit;
  text-decoration: none;
  font-size: clamp(42px, 6.4vw, 104px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  -webkit-tap-highlight-color: transparent;
}
.menu__num { padding-top: 0.55em; font-size: 0.16em; letter-spacing: 0.04em; color: #d2ff00; }
.menu__text {
  display: block;
  transform: translateY(105%);
  transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1), color 0.3s;
}
html.menu-open .menu__text { transform: none; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(0.25s + var(--i, 0) * 0.07s), color 0.3s; }
.menu__links li:nth-child(2) { --i: 1; } .menu__links li:nth-child(3) { --i: 2; } .menu__links li:nth-child(4) { --i: 3; } .menu__links li:nth-child(5) { --i: 4; }
@media (hover: hover) { .menu__links a:hover .menu__text { color: #d2ff00; } }
.menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 2em 5em;
  opacity: 0;
  transition: opacity 0.3s;
}
html.menu-open .menu__foot { opacity: 1; transition: opacity 0.6s 0.55s; }
.menu__mail, .menu__socials a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(244, 244, 237, 0.35); }
.menu__socials { display: flex; gap: 1.5em; margin: 0; }
@media (max-width: 720px) {
  .menu__inner { padding: 22vh 1.5em 5vh; }
  .menu__links a { font-size: 13vw; }
  .menu__foot { gap: 1.6em 3em; }
}
html.menu-open, html.menu-open body { overflow: hidden; }

/* ---- hero hint for touch screens (there is no cursor to discover the helmet with) ---- */
.drag-hint {
  position: absolute;
  left: 50%;
  bottom: calc(6vh + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  display: none;
  align-items: center;
  gap: 0.7em;
  padding: 0.65em 1.1em 0.65em 0.8em;
  border-radius: 999px;
  background: rgba(40, 44, 32, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #f4f4ed;
  font: 450 14px / 1 'Footer Sans', Arial, sans-serif;
  letter-spacing: 0.01em;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 0.5s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.drag-hint.is-on { opacity: 1; transform: translate(-50%, 0); }
.drag-hint__finger { position: relative; width: 2.2em; height: 1em; }
.drag-hint__finger::before {             /* a track */
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(244, 244, 237, 0.35);
}
.drag-hint__finger::after {              /* a fingertip sliding along it */
  content: ''; position: absolute; top: 50%; left: 0; width: 0.75em; height: 0.75em; margin-top: -0.375em;
  border-radius: 50%; background: #d2ff00;
  animation: drag-hint 1.6s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate;
}
@keyframes drag-hint { to { left: calc(100% - 0.75em); } }
@media (hover: none) and (pointer: coarse) { .drag-hint { display: flex; } }

/* ---- "copied" toast ---- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  padding: 0.75em 1.2em;
  border-radius: 999px;
  background: #d2ff00;
  color: #282c20;
  font: 450 15px / 1 'Footer Sans', Arial, sans-serif;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 0.3s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---- press feedback on touch screens (no hover there) ---- */
.cta, .mag, .work-row, .menu-btn { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .cta, .mag, .work-row { transition: scale 0.2s cubic-bezier(0.34, 1.4, 0.64, 1); }
  .cta:active, .menu-btn:active { scale: 0.94; }
  .mag:active { scale: 0.96; }
  .mag:active .mag__fill { transform: translate3d(0, 0, 0); transition: transform 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
  .btn-pill:active .mag__text { color: var(--f-on-accent); transition-delay: 0s; }
  .work-row:active { scale: 0.985; }
  .work-row__links a:active, .link-under:active, .menu__links a:active .menu__text { color: #d2ff00; }
}
@media (prefers-reduced-motion: reduce) {
  .menu, .menu__text, .menu__foot, .drag-hint, .toast { transition: none !important; }
  .drag-hint__finger::after { animation: none; }
}

/* ---- hero: availability (bottom left) and scroll cue (bottom centre) ---- */
.hero-status, .scroll-cue { transition: opacity 0.5s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
html.is-scrolled .hero-status, html.is-scrolled .scroll-cue { opacity: 0; transform: translateY(10px); pointer-events: none; }
.hero-status {
  position: absolute;
  left: calc(1.25 * var(--r));
  bottom: calc(1.25 * var(--r) + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.75em 1.1em 0.75em 0.95em;
  border: 1px solid rgba(40, 44, 32, 0.14);
  border-radius: calc(0.54 * var(--r) + 4px);
  background: rgba(252, 252, 250, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #282c20;
  font: 450 clamp(13px, 0.95vw, 16px) / 1.25 'Footer Sans', Arial, sans-serif;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.hero-status b { display: block; font-weight: 600; }
.hero-status__sub { display: block; color: rgba(40, 44, 32, 0.65); }
.hero-status__dot {
  position: relative;
  flex: none;
  width: 0.6em; height: 0.6em;
  border-radius: 50%;
  background: #6ad13a;
}
.hero-status__dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit;
  animation: cv-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: calc(1.25 * var(--r) + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  margin-left: -2em;
  width: 4em;
  color: #fff;
  mix-blend-mode: difference;       /* readable on the white studio and on the dark jacket */
  font: 450 11px / 1 'Footer Sans', Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
}
.scroll-cue i { position: relative; display: block; width: 1px; height: 2.6em; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
.scroll-cue i::after {
  content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 45%; background: #fff;
  animation: scroll-cue 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes scroll-cue { from { transform: translateY(-100%); } to { transform: translateY(230%); } }
.menu__status { display: flex; align-items: center; gap: 0.6em; margin: 0; }
@media (max-width: 720px) {
  .hero-status { padding: 0.6em 0.9em 0.6em 0.75em; font-size: 13px; }
  .hero-status__sub { display: none; }
  .scroll-cue { left: auto; right: calc(1.25 * var(--r)); margin-left: 0; width: auto; }
  .drag-hint { bottom: calc(1.25 * var(--r) + 64px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue i::after, .hero-status__dot::after { animation: none; } }

/* ---- hero headline: bottom left, above the availability pill; white with a difference blend
   so it reads black on the studio white and white on the jacket ---- */
.hero-head {
  position: absolute;
  left: calc(1.25 * var(--r));
  bottom: calc(1.25 * var(--r) + 4.6em + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  max-width: min(46vw, 760px);
  color: #fff;
  mix-blend-mode: difference;
  font-family: 'Footer Sans', Arial, sans-serif;
  pointer-events: none;
  transition: opacity 0.5s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
html.is-scrolled .hero-head { opacity: 0; transform: translateY(14px); }
.hero-head__eyebrow { margin: 0 0 0.9em; font-size: clamp(11px, 0.85vw, 14px); letter-spacing: 0.08em; text-transform: uppercase; }
.hero-head__title {
  margin: 0;
  font-weight: 450;
  font-size: clamp(30px, 3.9vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.hero-head__title span { display: block; }
.hero-head__sub { margin: 0.9em 0 0; font-size: clamp(12px, 0.95vw, 16px); line-height: 1.4; opacity: 0.85; }
@media (max-width: 720px) {
  .hero-head { right: calc(1.25 * var(--r)); max-width: none; bottom: calc(1.25 * var(--r) + 3.6em + env(safe-area-inset-bottom, 0px)); }
  .hero-head__title { font-size: 9.2vw; }
  .hero-head__sub { display: none; }
  .drag-hint { bottom: auto; top: calc(1.25 * var(--r) + 4.7 * var(--r) + 14px); }
}

/* ---- "Play with the helmet" (bottom right): the reveal is opt-in ---- */
.helmet-btn {
  position: absolute;
  right: calc(1.25 * var(--r));
  bottom: calc(1.25 * var(--r) + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.25em 0.85em 1em;
  border: 1px solid #d2ff00;
  border-radius: 999px;
  background: #d2ff00;
  color: #282c20;
  font: 600 clamp(13px, 0.95vw, 16px) / 1 'Footer Sans', Arial, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 0 0 rgba(210, 255, 0, 0.55);
  animation: helmet-pulse 2.4s ease-out infinite;
  transition: opacity 0.5s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s, color 0.3s, scale 0.2s;
}
.helmet-btn:hover { scale: 1.04; }
.helmet-btn:active { scale: 0.96; }
.helmet-btn:focus-visible { outline: 2px solid #282c20; outline-offset: 3px; }
.helmet-btn__icon { font-size: 1.15em; line-height: 1; }
.helmet-btn.is-loading { animation: none; cursor: progress; }
.helmet-btn.is-loading .helmet-btn__icon { animation: helmet-spin 0.9s linear infinite; }
.helmet-btn.is-on { animation: none; background: rgba(252, 252, 250, 0.82); border-color: rgba(40, 44, 32, 0.25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@keyframes helmet-pulse { 0% { box-shadow: 0 0 0 0 rgba(210, 255, 0, 0.55); } 70%, 100% { box-shadow: 0 0 0 14px rgba(210, 255, 0, 0); } }
@keyframes helmet-spin { to { transform: rotate(360deg); } }
html.is-scrolled .helmet-btn { opacity: 0; transform: translateY(10px); pointer-events: none; }
/* the helmet's credit only matters while it is on screen; it sits above the button */
.scroll-page .hero__credit { display: none; bottom: calc(1.25 * var(--r) + 4.2em); }
.scroll-page .hero.helmet-on .hero__credit { display: block; }
@media (max-width: 720px) {
  .scroll-cue { display: none; }
  .helmet-btn { padding: 0.7em 1em 0.7em 0.85em; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .helmet-btn { animation: none; } }

/* phones: the headline sits over the face and jacket, where the difference blend turns
   muddy; plain white over a dark fade reads everywhere */
@media (max-width: 720px) {
  .hero-head { mix-blend-mode: normal; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
  .hero-head::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: calc(-1.25 * var(--r)); right: calc(-1.25 * var(--r));
    top: -10vh; bottom: -20vh;
    background: linear-gradient(to bottom, rgba(18, 20, 14, 0) 0%, rgba(18, 20, 14, 0.12) 18%, rgba(18, 20, 14, 0.55) 42%, rgba(18, 20, 14, 0.85) 100%);
  }
  .hero-head__eyebrow { opacity: 0.9; }
}

/* ---- Race mode button: chequered flag, a light lapping the edge, speed stripes on hover,
   F1 start lights while the helmet loads ---- */
@property --lap { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.race-btn {
  padding: 0;                    /* the body carries the padding; the lap ring sits outside it */
  border: 0;
  background: none;
  box-shadow: none;
  animation: none;
  border-radius: 14px;
  isolation: isolate;
}
.race-btn__lap {                 /* the racing line: a bright segment running round the border */
  position: absolute; inset: -2px; z-index: -1;
  border-radius: 16px;
  background: conic-gradient(from var(--lap), transparent 0 72%, rgba(210, 255, 0, 0.0) 72%, #fff 86%, #d2ff00 92%, transparent 100%);
  animation: race-lap 2.2s linear infinite;
}
@keyframes race-lap { to { --lap: 360deg; } }
.race-btn__body {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.7em 1.1em 0.7em 0.8em;
  border-radius: 14px;
  background: #d2ff00;
  color: #1c1e17;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(40, 44, 32, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}
.race-btn__body::after {         /* speed stripes */
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(-62deg, transparent 0 14px, rgba(28, 30, 23, 0.09) 14px 20px);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.3s;
  animation: race-stripes 0.9s linear infinite;
  pointer-events: none;
}
@keyframes race-stripes { from { background-position: 0 0; } to { background-position: -46px 0; } }
.race-btn:hover .race-btn__body::after, .race-btn.is-loading .race-btn__body::after { opacity: 1; }
.race-btn:hover { scale: 1; }
.race-btn:hover .race-btn__body { transform: skewX(-6deg); }
.race-btn__body { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.race-btn__flag {
  position: relative; z-index: 1;
  flex: none;
  width: 1.9em; height: 1.9em;
  border-radius: 5px;
  background: repeating-conic-gradient(#1c1e17 0 25%, #fff 0 50%) 0 0 / 0.63em 0.63em;
  transform: skewX(-8deg);
  box-shadow: 0 0 0 2px rgba(28, 30, 23, 0.85);
}
.race-btn__text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; text-align: left; }
.race-btn__text b {
  font: 800 1.12em/1 'Hero Sans', 'Footer Sans', Arial, sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transform: skewX(-8deg);
}
.race-btn__text small { margin-top: 0.35em; font: 450 0.74em/1.1 'Footer Sans', Arial, sans-serif; opacity: 0.75; }
.race-btn__lights { display: none; position: relative; z-index: 1; gap: 4px; }
.race-btn__lights i { width: 0.62em; height: 0.62em; border-radius: 50%; background: rgba(28, 30, 23, 0.35); box-shadow: inset 0 0 0 1.5px rgba(28, 30, 23, 0.6); }
.race-btn.is-loading .race-btn__lights, .race-btn.is-go .race-btn__lights { display: flex; }
.race-btn.is-loading .race-btn__flag, .race-btn.is-go .race-btn__flag { display: none; }
.race-btn.is-loading .race-btn__lights i { animation: race-light 0.2s steps(1) forwards; }
.race-btn.is-loading .race-btn__lights i:nth-child(2) { animation-delay: 0.2s; }
.race-btn.is-loading .race-btn__lights i:nth-child(3) { animation-delay: 0.4s; }
.race-btn.is-loading .race-btn__lights i:nth-child(4) { animation-delay: 0.6s; }
.race-btn.is-loading .race-btn__lights i:nth-child(5) { animation-delay: 0.8s; }
@keyframes race-light { to { background: #ff2a1f; box-shadow: 0 0 8px #ff2a1f, inset 0 0 0 1.5px #a3130c; } }
.race-btn.is-go .race-btn__lights i { background: #2fd12f; box-shadow: 0 0 8px #2fd12f; }
.race-btn.is-loading { cursor: progress; }
.race-btn.is-on .race-btn__lap { animation-duration: 1.1s; }
.race-btn.is-on .race-btn__body { background: #1c1e17; color: #f4f4ed; }
.race-btn.is-on .race-btn__body::after { background: repeating-linear-gradient(-62deg, transparent 0 14px, rgba(210, 255, 0, 0.12) 14px 20px); background-size: 200% 100%; opacity: 1; }
.race-btn.is-on .race-btn__flag { box-shadow: 0 0 0 2px #d2ff00; }
.race-btn:focus-visible { outline: none; }
.race-btn:focus-visible .race-btn__body { outline: 2px solid #282c20; outline-offset: 3px; }
@media (max-width: 720px) { .race-btn { font-size: 12px; } .race-btn__body { padding: 0.65em 0.95em 0.65em 0.7em; } }
@media (prefers-reduced-motion: reduce) { .race-btn__lap, .race-btn__body::after { animation: none; } }