/* ==========================================================================
   stage.css — the hero and its welcome, and the work: one section per
   project, real screenshots of the apps, and browser frames for the web work
   ========================================================================== */

/* Hero --------------------------------------------------------------------- */
.hero { display: grid; align-items: center; min-height: min(92vh, 900px); min-height: min(92svh, 900px); }
.hero__inner { width: 100%; max-width: var(--max); margin-inline: auto; padding: calc(var(--s9) + 56px) var(--gutter) var(--s9); }
.hero__title { margin: var(--s4) 0 var(--s5); }
.hero__tag { margin-bottom: var(--s3); }
.hero__sub { margin-bottom: var(--s6); }
.hero__cta { display: flex; gap: var(--s3); flex-wrap: wrap; }
@media (max-width: 599.98px) { .hero__cta .btn { flex: 1 1 100%; } }

/* The welcome ----------------------------------------------------------------
   Once per visit: a selection frame draws itself around the name, a caret
   types it, and the caret drops into the period. It plays on the real
   heading (welcome.js), so its last frame is the page. The head script adds
   .welcome-on before first paint; without it, none of this applies. */
html.welcome-on { overflow: hidden; scrollbar-gutter: stable; }
html.welcome-on :is(.rail, .pill, .footer, #atmos, #page > :not(#hero), .hero__inner > :not(.hero__title)) { opacity: 0; }
html.welcome-on .pill { transition: none; }
html.welcome-on .hero__title,
html.welcome-on .hero__title .accent { color: var(--ghost); }
html.welcome-on .hero__title { animation: welcome-ghost 600ms ease both; }
html.welcome-on .hero__title.is-landed .accent { color: var(--accent); }
::highlight(ac-typed) { color: var(--text); }
@keyframes welcome-ghost { from { opacity: 0; } }

.welcome { position: fixed; inset: 0; z-index: var(--z-welcome); }
.welcome__frame { position: absolute; left: 0; top: 0; pointer-events: none; }
.welcome__edge { position: absolute; background: var(--brand); }
.welcome__edge--t, .welcome__edge--b { left: 0; right: 0; height: 1px; transform: scaleX(0); }
.welcome__edge--l, .welcome__edge--r { top: 0; bottom: 0; width: 1px; transform: scaleY(0); }
.welcome__edge--t { top: 0; transform-origin: 0 0; }
.welcome__edge--r { right: 0; transform-origin: 0 0; }
.welcome__edge--b { bottom: 0; transform-origin: 100% 0; }
.welcome__edge--l { left: 0; transform-origin: 0 100%; }
.welcome__handle {
  position: absolute; width: 9px; height: 9px; margin: -4px 0 0 -4px;
  background: var(--bg); border: 1px solid var(--brand); transform: scale(0);
}
.welcome__handle--tl { left: 0; top: 0; }
.welcome__handle--tr { left: calc(100% - 1px); top: 0; }
.welcome__handle--br { left: calc(100% - 1px); top: calc(100% - 1px); }
.welcome__handle--bl { left: 0; top: calc(100% - 1px); }
.welcome__caret { position: absolute; left: 0; top: 0; width: 0; height: 0; background: var(--accent); opacity: 0; }
.welcome__skip {
  position: absolute; top: calc(var(--s4) + env(safe-area-inset-top)); right: var(--gutter);
  min-height: 44px; padding: 0 18px; border-radius: var(--r-round); border: 1px solid var(--line-strong);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
  opacity: 0; transition: color 120ms ease-out, border-color 120ms ease-out;
}
.welcome__skip:hover { color: var(--text); border-color: var(--text-3); }

/* The work ------------------------------------------------------------------ */
.work { padding-top: var(--section-y); }
.work__head { max-width: var(--max); margin-inline: auto; padding: 0 var(--gutter); display: flex; flex-direction: column; gap: var(--s3); }
.work__intro { max-width: 36rem; }

.project {
  max-width: var(--max); margin-inline: auto;
  padding: var(--s8) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--s7);
}
.project__text { min-width: 0; }
.project__icon { width: 64px; height: 64px; border-radius: 15px; margin-bottom: var(--s5); box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.project__eyebrow { margin-bottom: var(--s3); }
.project__title { margin-bottom: var(--s3); }
.project__kicker { color: var(--text-2); margin-bottom: var(--s4); }
.project__hook { margin-bottom: var(--s5); max-width: 32rem; }
.project__features { display: flex; flex-direction: column; max-width: 34rem; }
.project__features li { padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-body); font-weight: 500; color: var(--text-2); }
.project__features li:last-child { border-bottom: 1px solid var(--line); }
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s5); }
.badge { display: inline-flex; align-items: center; min-height: 44px; border-radius: 8px; transition: transform 160ms var(--ease-out); }
.badge img { height: 44px; width: auto; }

/* Screenshots: the App Store images, as they are. On phones they scroll sideways. */
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.shots img {
  width: 100%; height: auto; aspect-ratio: 600 / 1300; object-fit: cover;
  border-radius: 22px; background: var(--surface-2);
  border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.shots img:nth-child(2) { margin-top: var(--s6); }
@media (max-width: 1023.98px) {
  .shots {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s3);
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) var(--s3);
    scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .shots::-webkit-scrollbar { display: none; }
  .shots:focus-visible { outline-offset: -2px; }
  .shots img { flex: 0 0 auto; width: min(62vw, 260px); min-width: 0; scroll-snap-align: start; border-radius: 18px; }   /* explicit width: a loaded image must not grow */
  .shots img:nth-child(2) { margin-top: 0; }
}

@media (min-width: 1024px) {
  .project { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: var(--s9); min-height: min(100vh, 900px); }
  .project--flip { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .project--flip > .shots { order: -1; }
  .project--web { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); min-height: 0; align-items: start; padding-top: var(--s6); }   /* short text: right under the heading, level with the frame */
}

/* The web work: browser frames ------------------------------------------------ */
.web__visual { position: relative; padding-bottom: 14%; }
.browser {
  margin: 0; border-radius: 14px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-device);
}
.browser__bar { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.browser__dots { display: flex; gap: 6px; flex: none; }
.browser__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); }
.browser__url {
  flex: 1; min-width: 0; max-width: 60%; margin-inline: auto; padding: 0 10px; height: 22px; line-height: 22px;
  border-radius: 6px; background: var(--surface-3); text-align: center;
  font-size: 12px; font-weight: 500; letter-spacing: 0.01em; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.browser__shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: #F4E6E8; }
.browser--secondary { position: absolute; left: -5%; bottom: 0; width: 46%; }
.browser--secondary .browser__bar { height: 24px; gap: 8px; padding: 0 8px; }
.browser--secondary .browser__dots i { width: 7px; height: 7px; }
.browser--secondary .browser__url { height: 15px; line-height: 15px; font-size: 9px; border-radius: 4px; }
@media (max-width: 1023.98px) { .browser--secondary { left: auto; right: -2%; } }   /* one column: overhang inside the gutter */
@media (max-width: 599.98px) { .browser--secondary { width: 54%; } }