/* proplr - shared styles */

:root {
  --cream: #f6f4ef;
  --cream-2: #efebe2;
  --ink: #151515;
  --ink-2: #4a4740;
  --muted: #7a756b;
  --line: rgba(21, 21, 21, 0.1);
  --yellow: #f5a524;
  --coral: #e8553a;
  --blue: #3378e6;
  --sky: #9cc3f0;
  --peach: #f6c9a6;

  --bg: var(--cream);
  --fg: var(--ink);
  --card: #ffffff;

  --font: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(20px, 5vw, 64px);
  --max: 1200px;
  --radius: 28px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3 { line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; margin: 0; font-weight: 700; }

p { margin: 0; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
  color: var(--ink);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.site-header.on-dark { color: #fff; }

.site-header.solid {
  background: rgba(246, 244, 239, 0.85);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--line);
  color: var(--ink);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.03em;
}

.brand svg { width: 30px; height: 30px; transition: transform 0.6s cubic-bezier(.3,.7,.2,1); }
.brand:hover svg { transform: rotate(240deg); }
.brand .hub { fill: currentColor; }

.nav { display: flex; gap: clamp(16px, 3vw, 36px); font-size: 15px; font-weight: 500; }
.nav a { text-decoration: none; opacity: 0.85; }
.nav a:hover { opacity: 1; }

/* ---------- Hero (home) ---------- */

.hero-track { position: relative; height: 260vh; }

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #f8ece0;
}

.hero-media {
  position: absolute;
  inset: 0;
  transform-origin: 50% 45%;
  will-change: transform;
}

.hero-media video,
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-media { container-type: size; }
.hero-media video { opacity: 0; }
.hero-media video.on { opacity: 1; }

/* Fallback when video can't play: the still frame drifts slowly so the sky never looks frozen. */
.hero-media.still video { display: none; }
.hero-media.still img { animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift {
  from { transform: scale(1.02) translate3d(-0.6%, 0.4%, 0); }
  to { transform: scale(1.08) translate3d(0.6%, -0.6%, 0); }
}

/* The sea of clouds below the propeller, drifting slowly sideways. It lines up with the
   video's own clouds (same crop, same scale) and fades into them at the top. */
.cloud-sea {
  --vw: max(100cqw, 177.78cqh);  /* rendered video width with object-fit: cover */
  --vh: calc(var(--vw) * 0.5625);
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--vh) * 0.339);
  bottom: calc((100cqh - var(--vh)) / 2);
  background: url(/assets/img/cloud-sea-v2.jpg) repeat-x 0 0 / auto 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 45%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 45%);
  opacity: 0;
  transition: opacity 4s ease;
  animation: sea 150s linear infinite;
  pointer-events: none;
}
.cloud-sea.on { opacity: 1; }
@keyframes sea {
  from { background-position-x: calc(var(--vw) * -1); }
  to { background-position-x: 0; }
}

/* Haze that rolls in as you scroll, then becomes the page itself. */
.hero-fog {
  position: absolute;
  inset: 0;
  /* A warm sunset glow in the haze, so the colour journey starts right away. */
  background:
    radial-gradient(65% 55% at 50% 50%, rgba(255, 210, 172, 0.85), rgba(255, 210, 172, 0) 72%),
    radial-gradient(120% 90% at 50% 55%, rgba(248, 236, 224, 0.6), #f8ece0 70%);
  opacity: 0;
  will-change: opacity;
}

.hero-statement {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-inline: var(--gutter);
  text-align: center;
  pointer-events: none;
}

.hero-statement h1 {
  font-size: clamp(40px, 7.4vw, 112px);
  max-width: 12ch;
  color: var(--ink);
}

.hero-statement h1 span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  will-change: transform, opacity;
}

.hero-statement h1 .accent-y { color: var(--yellow); }
.hero-statement h1 .accent-c { color: var(--coral); }
.hero-statement h1 .accent-b { color: var(--blue); }

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(80, 40, 30, 0.35);
}

.scroll-hint i {
  width: 1px;
  height: 44px;
  background: linear-gradient(#fff, rgba(255, 255, 255, 0));
  animation: drip 2.2s ease-in-out infinite;
  transform-origin: top;
}

@keyframes drip {
  0% { transform: scaleY(0); opacity: 1; }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- Sections ---------- */

.section { padding-block: clamp(80px, 12vw, 160px); }

.lede {
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 24ch;
  color: var(--ink);
}

.lede em { font-style: normal; color: var(--muted); }

.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.12s; }
.reveal.d2 { transition-delay: 0.24s; }
.reveal.d3 { transition-delay: 0.36s; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}

.split > * { min-width: 0; }

.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: clamp(56px, 8vw, 96px);
  border-top: 1px solid var(--line);
  padding-top: 32px;
}

.values h3 { font-size: 20px; letter-spacing: -0.01em; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.values h3::before { content: ''; width: 10px; height: 22px; border-radius: 50%; background: var(--dot, var(--yellow)); transform: rotate(var(--tilt, 0deg)); }
.values p { color: var(--ink-2); font-size: 16px; }

/* App card */

.app-card {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(160deg, #3b2760 0%, #4a3270 45%, #5c3a76 100%);
  color: #fff;
  text-decoration: none;
  min-height: 520px;
  isolation: isolate;
}

.app-card .copy {
  padding: clamp(32px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-width: 0;
}

.app-card .app-icon { display: block; width: clamp(60px, 6vw, 76px); height: auto; margin-top: 28px; border-radius: 22%; box-shadow: 0 10px 24px rgba(20, 12, 40, 0.35); }
.app-card h3 { font-size: clamp(44px, 6vw, 80px); }
.app-card p { font-size: clamp(18px, 1.6vw, 22px); color: rgba(255, 255, 255, 0.8); max-width: 30ch; margin-top: 16px; }

.app-card .media { position: relative; overflow: hidden; min-height: 320px; }

.app-card .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.app-card:hover .media img { transform: scale(1.05); }

/* Wander Goose's card shows the evening meadow from its page, built from the same art: a 2:1
   stage anchored to the bottom, cropped so the tree and the goose both fit. */
.app-card .app-scene { background: linear-gradient(180deg, #4a3270 0%, #6e4580 30%, #9c5a86 55%, #d67b5e 82%, #e58a4e 100%); }
.app-card .app-scene .sun { position: absolute; right: -4%; bottom: 46%; width: 56%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ffc27e 0 22%, rgba(255, 179, 107, 0.55) 23% 36%, rgba(255, 158, 107, 0) 70%); }
.app-card .app-scene .cloud { position: absolute; inset: auto; left: var(--x); top: var(--y); width: var(--w); height: auto; opacity: 0.85; animation: scene-drift var(--t) ease-in-out infinite alternate; }
.app-card .app-scene .stage { position: absolute; left: -8%; bottom: 0; width: 160%; aspect-ratio: 2 / 1; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); transform-origin: 50% 100%; }
.app-card:hover .app-scene .stage { transform: scale(1.04); }
.app-card .app-scene img { position: static; inset: auto; width: 100%; height: auto; max-width: none; object-fit: initial; transition: none; }
.app-card:hover .app-scene img:not(.cloud) { transform: none; }
.app-card .app-scene .layer { position: absolute; inset: auto; left: -4%; width: 108%; }
.app-card .app-scene .mountains { bottom: 34%; height: 30%; }
.app-card .app-scene .hills { bottom: 26%; height: 22%; }
.app-card .app-scene .ground { bottom: -3%; height: 43%; }
.app-card .app-scene .it { position: absolute; left: var(--l); bottom: var(--b); width: var(--w); }
.app-card .app-scene .sway { position: relative; transform-origin: 50% 100%; animation: scene-sway 5s ease-in-out infinite alternate; }
.app-card .app-scene .it > img.sway { animation-duration: 4s; }
.app-card .app-scene .perch { position: absolute; left: var(--px); top: var(--py); width: var(--pw); translate: calc(var(--fx) * -100%) calc(var(--fy) * -100%); scale: -1 1; }
.app-card .app-scene .peck { transform-origin: 50% 90%; animation: scene-peck var(--d, 6s) ease-in-out infinite; }
@keyframes scene-drift { to { transform: translateX(var(--dx)); } }
@keyframes scene-sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg); } }
@keyframes scene-peck { 0%, 78%, 100% { transform: rotate(0); } 84% { transform: rotate(-9deg); } 90% { transform: rotate(0); } }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 12px 20px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}

.pill.dark { background: var(--ink); color: #fff; }
.pill .arrow { transition: transform 0.3s ease; }
a.pill:hover .arrow, .app-card:hover .pill .arrow { transform: translateX(4px); }

/* Contact */

.contact {
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius);
  padding: clamp(40px, 7vw, 96px);
  position: relative;
  overflow: hidden;
}

.contact > :not(.spinner) { position: relative; z-index: 1; }
.contact h2 { font-size: clamp(40px, 6vw, 88px); max-width: 12ch; }
.contact .email {
  display: inline-block;
  margin-top: 32px;
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  border-bottom: 2px solid var(--yellow);
  word-break: break-all;
}

.contact .spinner {
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: clamp(220px, 34vw, 420px);
  height: auto;
  opacity: 0.9;
  animation: spin 9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Footer */

.site-footer { padding-block: 40px 56px; font-size: 14px; color: var(--muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--ink); }

/* ---------- Inner pages ---------- */

.page-top { padding-top: calc(72px + clamp(48px, 8vw, 112px)); }

.page-title { font-size: clamp(44px, 7vw, 96px); }

.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.02em; margin: 56px 0 12px; }
.prose h3 { font-size: 19px; letter-spacing: -0.01em; margin: 28px 0 8px; }
.prose p, .prose li { color: var(--ink-2); }
.prose p + p { margin-top: 14px; }
.prose ul { padding-left: 20px; margin: 12px 0; }
.prose li + li { margin-top: 8px; }
.prose strong { color: var(--ink); }
.prose a { text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.meta { color: var(--muted); font-size: 15px; margin-top: 16px; }

.table-wrap { overflow-x: auto; margin: 16px 0; }
table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 520px; }
th, td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
th { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
td { color: var(--ink-2); }

/* Birdie page */

.birdie-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.birdie-hero > * { min-width: 0; }

.birdie-hero .photo {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-width: 100%;
}

.birdie-hero .photo img { width: 100%; height: 100%; object-fit: cover; }

.birdie-hero p.big { font-size: clamp(20px, 2vw, 26px); color: var(--ink-2); margin-top: 24px; max-width: 30ch; }

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature {
  background: var(--card);
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 1px 0 var(--line);
}

.feature .num { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: 0.1em; }
.feature h3 { font-size: 22px; letter-spacing: -0.02em; margin: 14px 0 8px; }
.feature p { color: var(--ink-2); font-size: 16px; }

.faq details { border-bottom: 1px solid var(--line); padding-block: 20px; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 19px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-weight: 400; font-size: 24px; line-height: 1; transition: transform 0.3s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 12px; color: var(--ink-2); }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .split, .app-card, .birdie-hero { grid-template-columns: 1fr; }
  .app-card .media { order: -1; min-height: 280px; }
  .app-card .app-scene .stage { left: -6%; width: 112%; }
  .app-card .app-scene .sun { right: 4%; bottom: 36%; width: 40%; }
  .values, .features { grid-template-columns: 1fr; }
  .contact .spinner { width: 170px; right: -70px; bottom: -70px; opacity: 0.55; }
  .nav { gap: 18px; }
}

@media (max-width: 480px) {
  body { font-size: 17px; }
  .nav a.hide-sm { display: none; }
  .brand { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .contact .spinner, .scroll-hint i, .app-scene .sway, .app-scene .peck, .app-scene .cloud { animation: none; }
}

/* ---------- Home: one long sky, from sunset to dusk ---------- */

.journey {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Fallback; site.js pins the colour stops to the sections. */
  background: linear-gradient(180deg, #f8ece0 0%, #fbe8d8 30%, #f1d3cc 48%, #d8c4e0 64%, #7a6da6 80%, #2e3263 92%, #1c1f3d 100%);
}

.journey > .section { position: relative; z-index: 2; }

/* Soft cloud banks drifting between sections, made from the hero's own clouds. */
.bank {
  --h: clamp(180px, 22vw, 320px);
  position: absolute;
  z-index: 1;
  height: var(--h);
  background: url(/assets/img/cloud-sea-v2.jpg) repeat-x 0 0 / auto 100%;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 35%, transparent 100%);
  opacity: 0.55;
  pointer-events: none;
  will-change: transform;
  animation: bank-drift 140s linear infinite;
}
.bank-1 { width: 75%; left: -18%; }
.bank-2 { width: 70%; right: -16%; animation-duration: 170s; animation-direction: reverse; filter: hue-rotate(-12deg) saturate(.9); opacity: .5; }
.bank-3 { width: 90%; left: -10%; filter: brightness(.55) saturate(.7) hue-rotate(-25deg); opacity: .45; animation-duration: 200s; }
@keyframes bank-drift {
  from { background-position-x: 0; }
  to { background-position-x: calc(var(--h) * -5.2459); }
}

/* The paper plane that follows you down the page. */
.flight {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  overflow: visible;
  pointer-events: none;
}
.flight .plane { filter: drop-shadow(0 6px 10px rgba(40, 30, 70, 0.35)); opacity: 0; transition: opacity 0.6s ease; }
.flight.ready .plane { opacity: 1; }

/* More room between sections for the clouds to breathe. */
.journey #apps,
.journey #contact { padding-top: clamp(120px, 14vw, 200px); }

/* Contact sits in the evening sky: a light glass panel instead of a black card. */
.journey .contact {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #f6f4ef;
}
.journey .contact .eyebrow { color: rgba(246, 244, 239, 0.65); }

.site-footer.dusk { background: #1c1f3d; color: rgba(246, 244, 239, 0.55); }
.site-footer.dusk a:hover { color: #f6f4ef; }

.site-header.dusk {
  background: rgba(28, 31, 61, 0.72);
  color: #f6f4ef;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .bank { animation: none; }
  .flight { display: none; }
}