/* ============================================
   LANDING PAGE POLISH (index.html only: every rule is scoped to body[data-page="home"])
   - one container, one left and right edge for the logo, headings, text, cards and pale boxes
   - one spacing token between sections
   - one card style: the same corners and an even 3D layer on all four sides
   - the container and type grow modestly on wide screens
   - the reaction game behind the page, uncovered by the footer (curtain reveal)
   - company logo tooltips in the hero
============================================ */

/* ---------- landing-only tokens (the shared ones are in css/layout-tokens.css) ---------- */
body[data-page="home"] { background: #fff; }

/* The two pale boxes are exactly as wide as the container */
body[data-page="home"] .gw { width: 100%; margin: 8px 0 0; border-radius: 32px; }
body[data-page="home"] .work:not(.work-page) .work-grid {
  width: 100%;
  margin-left: 0;
  padding: clamp(22px, 4vw, 52px) clamp(16px, 3vw, 36px);
  border-radius: 32px;
}
/* the cards sit on the edges (their 3D layer is the same on every side, so no side padding is held back for it) */
body[data-page="home"] .work-grid-row { padding: 0; }
body[data-page="home"] .experience-grid { padding: 0; }

@media (min-width: 901px) {
  /* About: the text starts on the left edge, the wheel ends on the right edge */
  body[data-page="home"] .who-i-am-row { max-width: none; }
  body[data-page="home"] .who-i-am-copy { justify-self: start; }
  body[data-page="home"] .tools-orbit { margin: 0 0 0 auto; }
}

/* ---------- one spacing scale ---------- */
body[data-page="home"] .hero + .skills-strip { height: clamp(44px, 6vw, 84px); }   /* the part of the tilted strip that hangs below the hero */
body[data-page="home"] .who-i-am { padding: var(--section-gap) 0 0; }
@media (min-width: 901px) {
  /* the pinned About block carries 96px of its own under the nav, so the space above it is the rest of the token */
  html.js-reveal body[data-page="home"] .who-i-am { padding-top: max(0px, calc(var(--section-gap) - 96px)); }
  html.js-reveal body[data-page="home"] .who-i-am-inner { padding-bottom: 0; }
  body[data-page="home"] .who-i-am::after { display: none; }
  html.js-reveal body[data-page="home"] .who-i-am::after { display: block; }
}
/* The gap is a margin, not padding, so a card's 3D layer and shadow are never painted over by the next section */
body[data-page="home"] .experience,
body[data-page="home"] .work:not(.work-page),
body[data-page="home"] .brand-storytelling,
body[data-page="home"] .events { margin-top: var(--section-gap); padding-top: 0; padding-bottom: 0; }
body[data-page="home"] .events { padding-bottom: var(--section-gap); }
body[data-page="home"] .signpost-footer { margin-top: 0; }
body[data-page="home"] .signpost-footer::before { display: none; }   /* the white strip that used to hide the pale page behind */

/* ---------- one card style ---------- */
/* Same corners everywhere, and a 3D layer that goes evenly round all four sides (3px: another pixel thinner). */
body[data-page="home"] .exp-card,
body[data-page="home"] .exp-card:hover,
body:is([data-page="home"], [data-page="work"]) .work .work-card,
body[data-page="home"] .gw-item,
body[data-page="home"] .og-card,
body[data-page="home"] .og-feature-card {
  border-radius: var(--card-radius);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.92),
    0 0 0 1px var(--edge),
    0 0 0 2px var(--edge),
    0 0 0 3px var(--edge-deep),
    0 16px 26px -8px rgba(12, 0, 84, 0.3);
}
body[data-page="home"] .og-card { border-radius: min(var(--card-radius), 22%); }
body[data-page="home"] .og-card,
body[data-page="home"] .og-feature-card { --edge: #b6caf5; --edge-deep: #7fa2ee; }
body[data-page="home"] .exp-card:hover,
body:is([data-page="home"], [data-page="work"]) .work .work-card:hover,
body[data-page="home"] .gw-item:hover,
body[data-page="home"] .gw-item:focus-visible { --edge: #94b2f1; --edge-deep: #5d8aeb; }
body[data-page="home"] .exp-card:hover { box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.92),
    0 0 0 1px var(--edge), 0 0 0 2px var(--edge), 0 0 0 3px var(--edge-deep),
    0 16px 26px -8px rgba(12, 0, 84, 0.3); }
@media (hover: hover) {
  body[data-page="home"] .gw-item:hover,
  body[data-page="home"] .gw-item:focus-visible {
    box-shadow:
      inset 0 0 0 2px rgba(255, 255, 255, 0.92),
      0 0 0 1px var(--edge), 0 0 0 2px var(--edge), 0 0 0 3px var(--edge-deep),
      0 18px 28px -8px rgba(12, 0, 84, 0.34);
  }
}
/* pressing sinks the block straight down (no sideways shift), the layer losing two of its four pixels */
body:is([data-page="home"], [data-page="work"]) .work .work-card:active,
body[data-page="home"] .exp-card:active {
  translate: 0 2px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.92),
    0 0 0 1px var(--edge-deep),
    0 8px 12px -6px rgba(12, 0, 84, 0.3);
}
body[data-page="home"] .og-card:hover { box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.92),
    0 0 0 1px var(--edge), 0 0 0 2px var(--blue), 0 0 0 3px var(--blue),
    0 16px 26px -8px rgba(0, 82, 255, 0.45); }
body[data-page="home"] .og-card.is-featured { --edge: var(--blue); --edge-deep: var(--blue); }

/* ---------- hero: company logo tooltips ---------- */
.hero-worked-at-logo { position: relative; overflow: visible; cursor: default; }
.hero-worked-at-logo img { border-radius: 8px; }
.hero-worked-at-logo:focus-visible { outline: 2px solid var(--periwinkle); outline-offset: 3px; border-radius: 8px; }
.hero-worked-at-logo::after,
.hero-worked-at-logo::before {
  position: absolute;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 10;
}
.hero-worked-at-logo::after {                       /* the pill */
  content: attr(data-name);
  bottom: calc(100% + 9px);
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: calc(12px / var(--hc, 1));              /* about 12px on screen, even where the card is scaled down */
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(4, 0, 60, 0.35), 0 0 0 1px rgba(191, 212, 255, 0.35);
}
.hero-worked-at-logo::before {                      /* the little arrow */
  content: "";
  bottom: calc(100% + 3px);
  width: 8px; height: 8px;
  background: var(--navy);
  transform: translate(-50%, 4px) rotate(45deg);
  border-radius: 1px;
}
/* the first and last logos keep their pill inside the card instead of hanging past its edge */
.hero-worked-at-logo:first-child::after { left: 0; transform: translate(0, 4px); }
.hero-worked-at-logo:last-child::after { left: auto; right: 0; transform: translate(0, 4px); }
.hero-worked-at-logo:focus-visible::after, .hero-worked-at-logo.is-tip::after { opacity: 1; transform: translate(-50%, 0); }
.hero-worked-at-logo:first-child:focus-visible::after, .hero-worked-at-logo:first-child.is-tip::after,
.hero-worked-at-logo:last-child:focus-visible::after, .hero-worked-at-logo:last-child.is-tip::after { transform: translate(0, 0); }
.hero-worked-at-logo:focus-visible::before, .hero-worked-at-logo.is-tip::before { opacity: 1; transform: translate(-50%, 0) rotate(45deg); }
@media (hover: hover) {
  .hero-worked-at-logo:hover::after { opacity: 1; transform: translate(-50%, 0); }
  .hero-worked-at-logo:first-child:hover::after, .hero-worked-at-logo:last-child:hover::after { transform: translate(0, 0); }
  .hero-worked-at-logo:hover::before { opacity: 1; transform: translate(-50%, 0) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-worked-at-logo::after, .hero-worked-at-logo::before { transition: none; }
}