/* ============================================================
   The landing page. Every value is a styles.css token.
   ============================================================ */

/* ---------- Hero: the icon and name, the headline, a sentence, the
   button, and the demo below them ---------- */
/* at least the window's height with its content centred in it; taller
   content just makes it taller, so the page scrolls instead of clipping */
.hero { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: var(--space-8) var(--gutter); text-align: center; }
/* spaced by gaps, no margins: 24px between the icon and each line of text,
   40px from the text to the button, 64px to the demo and 64px on to the
   features */
/* full width up to the container: auto margins alone would shrink it to its
   widest line of text, and the demo with it */
.hero-copy { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); width: 100%; max-width: var(--container); margin: 0 auto; }
.hero-intro { display: flex; flex-direction: column; align-items: center; gap: var(--space-7); }
.hero-text { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.hero-brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.hero-icon { width: var(--icon-hero); height: var(--icon-hero); filter: var(--icon-shadow); }
.hero-name { font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; }
/* 11em wide, so the headline breaks as "Names your screenshots / by what's
   in them" */
.hero h1 { max-width: 11em; font-size: var(--text-headline); font-weight: var(--weight-bold); letter-spacing: var(--track-headline); line-height: var(--leading-none); }
.hero-body { max-width: var(--measure); color: var(--secondary); font-size: var(--text-body-lg); line-height: var(--leading-snug); }
/* the button, and which Macs it runs on 24px under it */
.hero-actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.hero-requires { color: var(--secondary); font-size: var(--text-label); }
.hero-requires a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

/* the bubble, and the button to play it again 16px under it */
.demo { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); width: 100%; max-width: var(--bubble-w); }

/* ---------- The screenshot demo: a small Mac desktop in a bubble ----------
   Three times, a screenshot is taken: the desktop flashes, macOS's floating
   thumbnail slides in at the bottom right and out again, and the file
   lands on the desktop at the top right, already renamed, as the rename
   pill drops in at the top. Everything is placed inside the bubble, which
   clips it. */
.bubble {
  position: relative;
  width: 100%;
  max-width: var(--bubble-w);
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: var(--radius-bubble);
  background: var(--desktop-image) center / cover;
  box-shadow: var(--bubble-shadow);
  text-align: left;
}
/* the hairline sits inside the edge, over everything the bubble holds */
.bubble::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--bubble-edge); pointer-events: none; }

.flash { position: absolute; inset: 0; z-index: 4; background: var(--flash); opacity: 0; pointer-events: none; }
.flash.on { animation: flash var(--duration) ease-out; }
@keyframes flash { 30% { opacity: 1; } }

/* the three screenshots: photos from Unsplash (Rohit Tandon, Kelly Sikkema,
   Chris Ried) */
.shot { position: relative; overflow: hidden; background: center / cover; }
.shot-mountain { background-image: url("assets/shots/mountain.jpg"); }
.shot-forms { background-image: url("assets/shots/forms.jpg"); }
.shot-code { background-image: url("assets/shots/code.jpg"); }

/* macOS's floating thumbnail */
.float {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 3;
  width: var(--float-w);
  height: var(--float-h);
  border: var(--float-rim) solid var(--file-rim);
  /* concentric with the bubble's corner it sits in */
  border-radius: calc(var(--radius-bubble) - var(--space-3));
  box-shadow: var(--float-shadow);
  transform: translateX(calc(100% + var(--space-3) * 2));
  transition: transform var(--duration-slow) var(--ease-spring);
}
.float.in { transform: none; }

/* the rename pill: black, turning to frosted glass along its lower edge */
.pill {
  position: absolute;
  top: var(--pill-top);
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--pill-gap);
  height: var(--pill-h);
  padding: 0 var(--pill-pad-end) 0 var(--pill-pad-start);
  border-radius: var(--radius-full);
  background: linear-gradient(var(--pill-bg) 0%, var(--pill-bg) 60%, var(--pill-frost) 100%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  color: var(--pill-ink);
  font-size: var(--pill-text);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  transform: translate(-50%, var(--pill-hidden));
  transition: transform var(--duration-rise) ease-in;
}
/* the app's own motion: in on its spring, out with a quick ease-in */
.pill.in, .goo-pill.in { transform: translate(-50%, 0); transition: transform var(--duration-drop) var(--ease-pill); }

/* the pinch (filter in index.html): everything in .goo is drawn black,
   blurred and cut at half opacity. The tab sits just above the window's top
   edge, so it only shows where the pill's copy is near enough to join it */
.filters { position: absolute; }
.goo { position: absolute; top: calc(-1 * var(--goo-bleed)); left: 0; right: 0; z-index: 1; height: var(--goo-h); filter: url(#goo); pointer-events: none; }
.goo-tab { position: absolute; top: 0; left: 50%; width: var(--goo-tab-w); height: var(--goo-bleed); background: var(--pill-bg); transform: translateX(-50%); }
/* only the pill's top half: the frosted foot below it stays see-through */
.goo-pill {
  position: absolute;
  top: calc(var(--goo-bleed) + var(--pill-top));
  left: 50%;
  width: var(--pill-w, 0);
  height: calc(var(--pill-h) / 2);
  border-radius: var(--radius-full) var(--radius-full) 0 0;
  background: var(--pill-bg);
  transform: translate(-50%, var(--pill-hidden));
  transition: transform var(--duration-rise) ease-in;
}
.pill .shot { flex: none; width: var(--pill-thumb-w); height: var(--pill-thumb-h); border-radius: var(--radius-xs); }
.pill-undo { display: flex; align-items: center; height: var(--chip-h); padding: 0 var(--chip-pad-x); border-radius: var(--radius-full); background: var(--pill-chip); font-weight: var(--weight-semibold); }

/* files on the desktop, from the top right down, as Finder places them,
   starting below the menu bar */
.desktop { position: absolute; top: calc(var(--space-1) + var(--menubar-h) + var(--space-3) + var(--space-2)); right: var(--space-5); display: flex; flex-direction: column; }
.file {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: var(--file-w);
  height: var(--file-slot);
  transition: opacity var(--duration) ease, transform var(--duration) var(--ease-spring);
}
.file.landing { opacity: 0; transform: scale(0.6); }
.file .shot { width: var(--file-thumb-w); height: var(--file-thumb-h); border: 2px solid var(--file-rim); border-radius: var(--radius-file); box-shadow: var(--thumb-shadow); }
/* bold, as Finder draws them on the desktop */
.file-label { color: var(--pill-ink); text-align: center; font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: var(--leading-tight); text-shadow: var(--label-shadow); overflow-wrap: anywhere; }

/* a simple menu bar along the top, after Sleeve's: no bar, just the Apple
   logo and the app's name on the left and the clock on the right */
.menubar {
  position: absolute;
  top: var(--space-1);
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--menubar-h);
  padding: 0 var(--menubar-pad);
  color: var(--menubar-ink);
  font-size: var(--menubar-text);
  font-weight: var(--weight-medium);
  filter: var(--menubar-shadow);
}
.menubar-app { display: flex; align-items: center; gap: var(--space-4); }
.menubar-app svg { width: var(--apple-logo); height: var(--apple-logo); filter: var(--menubar-text-shadow); transform: translateY(calc(-1 * var(--apple-logo-lift))); }
.menubar-app span { font-weight: var(--weight-bold); letter-spacing: var(--track-tight); transform: scale(1.1); filter: var(--menubar-text-shadow); }
.menubar-clock { display: flex; gap: var(--menubar-clock-gap); filter: var(--menubar-text-shadow); }

/* the dock along the bubble's foot, after Alcove's: a frosted tray
   with the app's icon and three empty slots */
.dock {
  position: absolute;
  left: 50%;
  bottom: var(--dock-inset);
  z-index: 1;
  isolation: isolate;
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-dock);
  transform: translateX(-50%);
}
/* the frost, rounded with border-radius rather than the smoothed clip-path:
   inside the bubble's rounded clip, Chrome blurs a clip-pathed backdrop out
   to its square box. Then a 1px rim inside its edge, bright along the top and
   fading out down the sides */
.dock::before, .dock::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.dock::before { background: var(--dock-fill); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15); backdrop-filter: blur(var(--glass-blur)) saturate(1.15); border-radius: var(--radius-dock); }
.dock::after { background: var(--dock-sheen); clip-path: var(--dock-rim); -webkit-mask-image: linear-gradient(to bottom, var(--mask-solid) 0%, var(--mask-solid) 24%, transparent 70%); mask-image: linear-gradient(to bottom, var(--mask-solid) 0%, var(--mask-solid) 24%, transparent 70%); }
.dock-icon { width: var(--dock-icon); height: var(--dock-icon); filter: var(--dock-icon-shadow); }
.dock-slot { width: var(--dock-icon); height: var(--dock-icon); border-radius: var(--radius-slot); background: var(--dock-fill); }

/* ---------- Features: six lines, an icon and a headline each ----------
   three across, then two; narrower than the bubble and centred */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); width: 100%; max-width: var(--features-w); }
.feature { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.feature svg { width: var(--icon-feature); height: var(--icon-feature); color: var(--secondary); }
.feature h3 { font-size: var(--text-xl); font-weight: var(--weight-medium); letter-spacing: var(--track-title); line-height: var(--leading-snug); }
@media (max-width: 900px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* a phone keeps two across, closer together */
@media (max-width: 560px) {
  .features { column-gap: var(--space-5); }
}

/* play it again: small and quiet, a pill with an icon before its label */
.btn-replay {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-sm);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--btn-quiet-bg);
  color: var(--primary);
  font: inherit;
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--duration-fast), opacity var(--duration-fast);
}
.btn-replay svg { width: var(--icon-sm); height: var(--icon-sm); }
.btn-replay:hover:not(:disabled) { background: var(--btn-quiet-bg-hover); }
/* while it plays */
.btn-replay:disabled { opacity: 0.4; cursor: default; }

/* ---------- Footer: the year and name, and a link to the store ----------
   as wide as the features, below a hairline */
.footer { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); width: calc(100% - 2 * var(--gutter)); max-width: var(--features-w); margin: 0 auto; padding-block: var(--space-7); border-top: 1px solid var(--separator); color: var(--secondary); font-size: var(--text-label); }
.footer a { transition: color var(--duration-fast); }
.footer a:hover { color: var(--primary); }

/* in a narrow bubble the files would run into the pill */
@media (max-width: 760px) {
  .desktop { display: none; }
}

/* a phone: less space around everything, a taller bubble so the pill and
   thumbnail have room, and a dock of just the app's icon, drawn smaller, so
   the thumbnail doesn't land on it. Its rim is shaped for the full tray, so
   it goes too */
@media (max-width: 560px) {
  .hero { padding-block: var(--space-7); }
  .hero-copy { gap: var(--space-7); }
  .hero-intro { gap: var(--space-5); }
  .bubble { aspect-ratio: 4 / 3; }
  .dock { transform: translateX(-50%) scale(0.72); transform-origin: bottom center; }
  .dock-slot, .dock::after { display: none; }
  /* the pill spans most of the bubble, so the menu bar keeps just the Apple
     logo and the time, either side of it */
  .menubar-app span, .menubar-day { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .flash, .goo { display: none; }
  .float, .pill, .pill.in, .file { transition: opacity var(--duration) ease; }
  .float { transform: none; opacity: 0; }
  .float.in { opacity: 1; }
  .pill { transform: translate(-50%, 0); opacity: 0; }
  .pill.in { opacity: 1; }
  .file.landing { transform: none; }
}