/* Round three (drafts D, E and F): the pieces added on top of lounge.css. */

/* the flip as a hero: big planes, paddles either side of the dots */
.flip--hero .flip__stage { width: min(1120px, 100%); aspect-ratio: 3.3 / 1; }
.flip--hero .flip__slide img { filter: drop-shadow(0 30px 34px rgba(28,31,28,.18)); }
.flip__controls .paddle { background: var(--tile-2); }
.paddle svg { width: 16px; height: 16px; }
.flip__labels b { font-size: 19px; }
.flip__labels .fact { font-size: 14px; color: var(--accent); font-variant-numeric: tabular-nums; }

/* the pinned flip with a large name beside it (draft E) */
.flip-side .sticky { grid-template-columns: 1fr; }
.flip-side .names { position: relative; height: 5.6em; margin-top: clamp(16px, 3vh, 36px); }
.flip-side .names > * { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); transition: opacity var(--dur-names) var(--ease), transform var(--dur-names) var(--ease); display: grid; gap: 8px; align-content: start; justify-items: center; text-align: center; }
.flip-side .names > .on { opacity: 1; transform: none; }
.flip-side .names b { font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; letter-spacing: -0.005em; line-height: 1.1; }
.flip-side .names span { color: var(--soft); font-size: 17px; max-width: 30em; }
.flip-side .count { font-size: 14px; color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 600; text-align: center; }

/* full-bleed photograph that settles as you scroll off it (draft E) */
.photo-hero { padding: 0; position: relative; height: min(100vh, 1000px); overflow: hidden; background: var(--bg-2); }
.photo-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transform: scale(calc(1 + (1 - var(--p, 1)) * 0.28)); transform-origin: 50% 40%; will-change: transform; }
.photo-hero .copy { position: absolute; left: 0; right: 0; bottom: clamp(24px, 6vw, 80px); }
.photo-hero .card-glass { gap: 16px; }

/* horizontal row of app screens (draft E) */
.screens .card { background: var(--tile); display: grid; grid-template-rows: auto 1fr; padding: 28px 28px 0; gap: 18px; flex-basis: min(340px, 78vw); }
.screens .card .cap { display: grid; gap: 4px; }
.screens .card .cap b { font-size: 19px; }
.screens .card .cap span { font-size: 14px; color: var(--soft); }
.screens .card img { width: 86%; margin: 0 auto; align-self: end; border-radius: 30px 30px 0 0; box-shadow: 0 0 0 1px var(--line), 0 20px 40px -20px rgba(28,31,28,.35); }

/* a wide device picture (draft E, F) */
.wide figure { margin: clamp(48px, 6vw, 80px) auto 0; width: min(1180px, 100%); }
.wide figure img { width: 100%; border-radius: 20px; }
.wide figcaption { font-size: 12px; color: var(--soft); margin-top: 12px; text-align: center; }

/* two photographs side by side */
.duo .grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); margin-top: clamp(40px, 6vw, 72px); }
.duo figure { margin: 0; display: grid; gap: 14px; }
.duo figure img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 24px; }
.duo figure:nth-child(2) { margin-top: clamp(40px, 8vw, 120px); }
.duo figcaption { display: grid; gap: 4px; }
.duo figcaption b { font-size: 19px; }
.duo figcaption span { color: var(--soft); font-size: 15px; max-width: 28em; }
@media (max-width: 734px) { .duo .grid { grid-template-columns: 1fr; } .duo figure:nth-child(2) { margin-top: 0; } }

/* one plane that crosses the screen as the section passes (draft F) */
.flyby { overflow: hidden; padding-block: clamp(72px, 9vw, 128px); }
.flyby .copy { display: grid; gap: 12px; }
.flyby .copy .fact { color: var(--accent); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.flyby .craft { margin: clamp(32px, 5vw, 64px) auto 0; width: min(1000px, 90%); transform: translateX(calc((var(--p, 0.5) - 0.5) * var(--travel, 60%))); will-change: transform; }
.flyby .craft img { width: 100%; filter: drop-shadow(0 26px 30px rgba(28,31,28,.16)); }
.flyby.small .craft { width: min(720px, 70%); }
.flyby.thin .craft { width: min(1100px, 96%); }
.flyby.alt { background: var(--bg-2); }
.flyby.right .copy { justify-items: end; text-align: right; }
.flyby.dark .craft img { filter: drop-shadow(0 26px 40px rgba(0,0,0,.6)); }

/* the wall as a hero: every column drifts on its own, alternate columns the other way (draft F) */
.wall-hero { position: relative; padding: 0; height: min(100vh, 1040px); min-height: 640px; overflow: hidden; background: var(--bg); }
.wall-hero .wall { position: absolute; inset: -4% 0 0; height: auto; margin: 0; padding-inline: var(--gutter); mask-image: none; -webkit-mask-image: none; }
.wall-hero .wall__col { margin-top: 0 !important; padding-bottom: clamp(12px, 2vw, 28px); animation: drift-up 90s linear infinite; } /* linear: a conveyor, not an entrance */
.wall-hero .wall__col:nth-child(even) { animation-name: drift-down; animation-duration: 110s; }
@keyframes drift-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes drift-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.wall-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 48% at 50% 52%, rgba(236,238,233,.94), rgba(236,238,233,.55) 62%, rgba(236,238,233,0)); pointer-events: none; }
.wall-hero .copy { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; text-align: center; gap: 20px; padding-inline: var(--gutter); }
.wall-hero .copy .t-lead { max-width: 26em; color: var(--ink); opacity: .72; }
@media (prefers-reduced-motion: reduce) { .wall-hero .wall__col { animation: none; } }

/* download on each tile */
.wall figure .dl { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: rgba(236,238,233,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transform: scale(.9); transition: opacity var(--dur-tile-action) var(--ease), transform var(--dur-tile-action) var(--ease); }
.wall figure .dl svg { width: 16px; height: 16px; }
.wall figure:hover .dl, .wall figure .dl:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .wall figure .dl { opacity: 1; transform: none; } }

/* dark continuation: a phone on black straight after the write-on */
.onblack { padding-top: 0; text-align: center; }
.onblack img { width: min(760px, 92%); margin: 0 auto; }
.onblack .t-lead { margin: 24px auto 0; max-width: 30em; }

/* the watch face as a still object */
.watch figure.face { width: min(380px, 70%); border-radius: 0; overflow: visible; }

/* two screens that stand up together */
.pair .grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 64px); align-items: end; margin-top: clamp(40px, 6vw, 72px); }
.pair .tilt { display: grid; gap: 18px; justify-items: center; text-align: center; }
.pair .tilt img { width: min(320px, 90%); border-radius: 40px; }
.pair .tilt b { font-size: 19px; }
.pair .tilt span { color: var(--soft); font-size: 15px; max-width: 22em; }
@media (max-width: 734px) { .pair .grid { grid-template-columns: 1fr; } }

/* small screens */
.price .figure { white-space: nowrap; }
@media (max-width: 734px) {
  .wall-hero::after { background: linear-gradient(rgba(236,238,233,.55), rgba(236,238,233,.9) 30%, rgba(236,238,233,.9) 70%, rgba(236,238,233,.55)); }
  .price .figure { font-size: 52px; }
}