/* ==========================================================================
   croon.tv — the one screen (#399, 2026-09-02).

   Values are CroonBrand.swift's, through docs/design-system.md: the ground
   measured from the photograph's shadow, the three inks, #FF9900 doing one
   job, iOS's own corner, the cover face on the photograph and nowhere else.
   Nothing on this page scrolls; the photograph is the page and the words
   stand on its lower band, the way the app's own first screen does.
   ========================================================================== */

@font-face {
  /* Zen Old Mincho Black (OFL), subset to the fourteen characters of the
     headline: 4.1 KB against the app's 5.4 MB whole file. */
  font-family: "Zen Old Mincho CROON";
  src: url("/assets/zen-old-mincho-black.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

:root {
  --ground: #0B0A09;
  --text: #F6F3EF;
  --muted: #A9A19A;
  --soft: #7F7871;
  --brand: #FF9900;
  --page-top: 24px;
  --page-side: 16px;
  --page-bottom: 34px;
  --sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--ground);
  color: var(--text);
  font-family: var(--sf);
  -webkit-font-smoothing: antialiased;
}

.page {
  position: relative;
  height: 100dvh;
  padding: var(--page-top) var(--page-side) var(--page-bottom);
}

/* ---- the photograph, with a gradient laid over the bands the type sits in.
        No pixel is darkened wholesale (OnboardingHero: 「写真は暗くしない」). */
.photo { position: absolute; inset: 0; overflow: hidden; }
.photo img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 46%;
}
.photo::before, .photo::after { content: ""; position: absolute; left: 0; right: 0; }
.photo::before {
  top: 0; height: 250px;
  background: linear-gradient(to bottom, rgba(0,0,0,.78), rgba(0,0,0,.35), transparent);
}
.photo::after {
  bottom: 0; height: 46%;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.62) 46%, rgba(0,0,0,.93));
}

/* ---- what stands on it: lockup, headline, the way in, the two links. */
.stack {
  position: relative; z-index: 1;
  height: 100%;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

/* CroonMarkLockup, at the top of the page as on the app's cover, the
   sentence at the bottom (owner, 9/2 evening: 「上にロゴとアイコン、下に
   メッセージ」). The mark is the app icon itself — the ground, a white-10%
   hairline, an orange C at 56% of the side, iOS's 22.37% corner — one mark
   on every surface (#398). Its orange is the product's name, not a control,
   so it is not this page's one orange. 32/15 on a phone as in the app,
   44/18 on a desktop. */
.lockup { display: flex; align-items: center; gap: .3125em; margin-bottom: auto;
  --mk: clamp(32px, 2vw + 24px, 44px); font-size: var(--mk); }
.lockup .mark { width: var(--mk); height: var(--mk); display: block; }
.lockup .word {
  font-size: clamp(15px, .8vw + 12px, 18px); font-weight: 900;
  letter-spacing: .22em; padding-left: .22em; color: #fff;
}

/* The one sentence (2026-09-02 ruling). Mincho, because it stands on the
   photograph; 28 on a phone, up to 48 on a desktop — two points over #394's
   26 / 46 (「ワンツーピクセルぐらい引き上げる」, 9/2 evening: 32 / 60 was
   「デカすぎてダサい」), −0.02em, 1.36. */
h1 {
  margin: 0;
  font-family: "Zen Old Mincho CROON", "Hiragino Mincho ProN", serif;
  font-weight: 900;
  font-size: clamp(28px, 3.1vw + 16px, 48px);
  line-height: 1.36;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
h1 .lang { white-space: nowrap; }

/* The way in. #FF9900 is this page's one orange; while the App Store listing
   does not exist it is the disabled 35% and nothing else on the page is
   orange (design-system rule 1). Turning it into a link is one href. */
.cta {
  margin-top: 22px;
  height: 52px; padding: 0 26px; border: 0; border-radius: 26px;
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255, 153, 0, .35);
  color: rgba(0, 0, 0, .62);
  font: 600 17px/1 var(--sf);
  cursor: default;
}
.cta svg { width: 19px; height: 19px; fill: currentColor; }

.foot {
  margin-top: 22px;
  display: flex; gap: 22px;
  font-size: 12.5px; line-height: 1.4;
}
.foot a { color: var(--soft); text-decoration: none; }
.foot a:hover, .foot a:focus-visible { color: var(--muted); outline: none; }
.foot a:focus-visible { text-decoration: underline; }

@media (prefers-reduced-motion: no-preference) {
  /* The app's one motion: a line that has arrived rises 8pt in 0.32s. */
  .stack > * { animation: rise .32s ease-out both; }
  .stack > :nth-child(2) { animation-delay: .06s; }
  .stack > :nth-child(3) { animation-delay: .12s; }
  .stack > :nth-child(4) { animation-delay: .18s; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
}