/* Plant Pad landing: the few rules the compiled site.css (from the plantpad-web build)
   does not already carry. Game art, the iPhone frame and the no-framework behaviours. */

.pp-mark { width: 2rem; height: 2rem; border-radius: 0.55rem; }

.pp-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.pp-contain { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 0.5rem; }

/* Hero art keeps the game crop's own proportions instead of the old 4:5 illustration. */
#top figure .aspect-\[4\/5\] { aspect-ratio: 1200 / 1009; }

/* Screens from the game, in a card well. */
.pp-shot { overflow: hidden; border-radius: 1rem; background: var(--color-sunk); padding: 0.75rem; }
.pp-shot img { display: block; width: 100%; height: auto; border-radius: 0.75rem; box-shadow: 0 0 0 1px var(--color-line); }
.pp-shot-narrow img { max-width: 15rem; margin-inline: auto; }

.pp-skies { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.pp-sky { display: block; width: 100%; height: auto; border-radius: 0.6rem; }

.pp-grow { position: absolute; left: 50%; bottom: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom;
  transform: translateX(-50%) scale(var(--s, 1)); transform-origin: center bottom; }

.pp-who-pad { height: 6.5rem; width: auto; }
.pp-who-shelf { height: 6.5rem; width: auto; border-radius: 0.75rem; box-shadow: 0 0 0 1px var(--color-line); }

.pp-leaf { color: #58CC02; }

.pp-download-pad { position: absolute; right: 4%; bottom: -6%; width: min(19rem, 38%); height: auto; opacity: 1; pointer-events: none; }
@media (max-width: 767px) { .pp-download-pad { position: relative; right: auto; bottom: auto; width: 9rem; display: block; margin: 0 0 1.5rem; } }

/* ---- iPhone 17 Pro Max frame -------------------------------------------------------
   Screen 1320 x 2868 px (440 x 956 pt). Corner, island and status-bar sizes are in pt
   expressed as a share of that 440 pt width, so the frame scales with its container. */
.pp-iphone { position: relative; border-radius: 15.5% / 7.2%; background: #1d1d1f; padding: 3.2%;
  box-shadow: inset 0 0 0 2px #3a3a3c, inset 0 0 0 5px #0b0b0c; }
.pp-iphone::before { content: ""; position: absolute; left: -1.1%; top: 18%; width: 1.1%; height: 6%; border-radius: 2px 0 0 2px; background: #2c2c2e; box-shadow: 0 9.5em 0 #2c2c2e; }
.pp-iphone-screen { position: relative; aspect-ratio: 1320 / 2868; overflow: hidden; border-radius: 12.7% / 5.85%; background: #fff; container-type: inline-size; }
.pp-screen { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s var(--ease-out-soft, ease); }
.pp-screen.is-on { opacity: 1; }
.pp-status { position: absolute; inset: 0 0 auto 0; height: 6.5%; display: flex; align-items: center; justify-content: space-between;
  padding: 0 7.5% 0 10%; color: #000; font-weight: 700; font-size: 3.9cqw; letter-spacing: -0.01em; z-index: 2; }
.pp-island { position: absolute; left: 50%; top: 2.55cqw; width: 28.6cqw; height: 8.4cqw; transform: translateX(-50%); border-radius: 999px; background: #000; }
.pp-sys { display: inline-flex; align-items: center; gap: 1.3cqw; }
.pp-sys svg { height: 2.7cqw; width: auto; fill: currentColor; }
.pp-sys svg:last-child { height: 2.9cqw; }
.pp-home { position: absolute; left: 50%; bottom: 1.8cqw; width: 32cqw; height: 1.15cqw; transform: translateX(-50%); border-radius: 999px; background: rgba(0,0,0,.85); z-index: 2; }

/* Demo pause/play glyph swap. */
#demo-pause .pp-icon-play { display: none; }
#demo-pause[aria-pressed="true"] .pp-icon-play { display: block; }
#demo-pause[aria-pressed="true"] .pp-icon-pause { display: none; }

/* Header gets a backdrop once the page scrolls (set by site.js). */
#site-header.is-scrolled { background: rgba(251, 248, 242, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--color-line); }

/* Scroll reveal. Content is visible without JS; site.js adds .js-reveal to <html>. */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out-soft, ease), transform 0.7s var(--ease-out-soft, ease); }
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
  .pp-screen { transition: none; }
}

/* Sections reached from a header link take focus for keyboard users; no ring on the section itself. */
section[tabindex="-1"]:focus, main[tabindex="-1"]:focus { outline: none; }