/* ==========================================================================
   croon.tv — the one screen.

   #399 (9/2) put the words on the photograph; #506 (9/8) changed what the
   photograph is (a 1990s cel-anime frame, Midjourney niji 6 with the style
   fixed by --sref) and, with it, the layout: the woman stands in the right
   half of the picture, so the words stand in the left column instead of the
   centre. The ribbon that used to cross the screen is gone — 9/8 裁定「何を
   どう表してるのかよくわからない」—— and the switch it was trying to show is
   now the headline's own word, which turns through the languages.

   Values are still CroonBrand.swift's, through docs/design-system.md: the
   ground, the three inks, iOS's own corner. The one orange does one job and
   that job is the turning word (the App Store button is white — 9/8 裁定).
   ========================================================================== */

@font-face {
  /* Shippori Mincho B1 SemiBold (OFL; #407, 9/3). Subset to the headline and
     to the language names the word turns through (#506, 9/8): 10 KB. */
  font-family: "Shippori Mincho CROON";
  src: url("/assets/shippori-mincho-b1-semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  /* Spectral SemiBold (OFL; #457, 9/5), the wordmark's face — and, since #506,
     the headline's face when the page is in English. */
  font-family: "Spectral CROON";
  src: url("/assets/spectral-semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --ground: #0B0A09;
  --text: #F6F3EF;
  --muted: #A9A19A;
  --soft: #7F7871;
  --brand: #FF9900;
  --page-top: max(48px, 12.2dvh);
  --page-bottom: max(50px, 9.6dvh);
  --page-side: clamp(20px, 6vw, 96px);
  --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; }

/* ---- the photograph. No pixel is darkened wholesale; the gradients fall on
        the bands the type sits in — the left column and the foot. */
.photo { position: absolute; inset: 0; overflow: hidden; }
.photo img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 64% 40%;
}
.photo::before, .photo::after { content: ""; position: absolute; }
.photo::before {
  /* the left column, where the words stand */
  inset: 0;
  background: linear-gradient(100deg,
    rgba(0,0,0,.9) 0%, rgba(0,0,0,.78) 22%, rgba(0,0,0,.5) 42%,
    rgba(0,0,0,.12) 60%, rgba(0,0,0,0) 74%);
}
.photo::after {
  left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.55) 46%, rgba(0,0,0,.9));
}

/* フィルム粒子。絵はセル画のスキャンなので、文字の側にも同じ粒を薄く敷いて
   一枚の画面にする。 */
.grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: .10; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

/* ---- 文字の柱は画面の端ではなく版面の左の段に立つ。右の段は絵に譲る。 */
.shell {
  position: relative; z-index: 1;
  height: 100%; max-width: 1320px; margin: 0 auto;
  padding: var(--page-top) var(--page-side) var(--page-bottom);
  display: grid; grid-template-columns: minmax(0, 52%) 1fr; align-items: center;
}

.stack {
  grid-column: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left;
}

/* #480 / 14: one vector for the mark and Spectral SemiBold. It now stands at
   the head of the column of words rather than centred over the photograph. */
.lockup {
  --word-size: clamp(33px, 1.9vw + 24px, 46.56px);
  margin: 0 0 34px;
  height: calc(var(--word-size) * .660);
  color: #fff;
}
.lockup .croon-horizontal-lockup {
  transform: translateY(calc(var(--word-size) * -.089));
}

/* The one sentence, in two fixed lines: 「世界中の声を」/「◯◯で聞く」.
   30 on a phone up to 50 on a desktop, −0.02em, 1.36 (#407). */
h1 {
  margin: 0;
  font-family: "Shippori Mincho CROON", "Hiragino Mincho ProN", serif;
  font-weight: 600;
  font-size: clamp(30px, 3.1vw + 18px, 50px);
  line-height: 1.36;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 28px rgba(0,0,0,.8);
}
h1 .line { display: block; }
h1 .nb { white-space: nowrap; }
/* 英語の見出しはワードマークと同じ Spectral（明朝の欧文を使わない）。 */
h1[lang="en"] { font-family: "Spectral CROON", Georgia, serif; letter-spacing: -0.01em; }

/* The turning word. This is the page's one orange (design-system rule 1):
   it marks the thing that changes, and 「で聞く」 travels with its width so
   the two never come apart and never leave a gap. */
.rotator {
  display: inline-block; vertical-align: baseline;
  position: relative; height: 1.36em; width: 6em;
  /* 縦だけ切る。横を切らないので、幅が追いつく前でも語の末尾が欠けない。 */
  overflow: visible; clip-path: inset(0 -100vw 0 0);
  white-space: nowrap;
  transition: width .52s cubic-bezier(.22, 1, .36, 1);
}
.reel {
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  will-change: transform;
}
.reel span {
  display: block; height: 1.36em; line-height: 1.36em;
  color: var(--brand);
  font-family: inherit, "Apple SD Gothic Neo", "Hiragino Sans", sans-serif;
  white-space: nowrap;
}

.lead {
  margin: 16px 0 0; max-width: 34ch;
  font-size: clamp(14px, .6vw + 12px, 16px); line-height: 1.9;
  color: var(--muted);
  text-shadow: 0 1px 18px rgba(0,0,0,.9);
}
.lead .nb { white-space: nowrap; }

/* The way in. White while the App Store listing does not exist yet
   (9/8 裁定: orange was 「鬱陶しい」 and the orange has one job elsewhere). */
.cta {
  margin-top: 22px;
  height: 52px; padding: 0 26px; border: 0; border-radius: 26px;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--text); color: rgba(11,10,9,.72);
  font: 600 17px/1 var(--sf);
  cursor: default;
}
.cta svg { width: 19px; height: 19px; fill: currentColor; }

.foot {
  margin-top: 30px;
  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; text-underline-offset: 3px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@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; }
  .stack > :nth-child(5) { animation-delay: .24s; }

  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
}

/* スマホ。横に逃げ場がないので一段に戻し、文字は下の帯に立つ。 */
@media (max-width: 899px) {
  .photo img { object-position: 74% 34%; }
  .photo::before {
    background: linear-gradient(180deg,
      rgba(0,0,0,.52) 0%, rgba(0,0,0,.1) 32%, rgba(0,0,0,.62) 70%, rgba(0,0,0,.94) 100%);
  }
  .shell { grid-template-columns: 1fr; align-items: end; }
  .lead { max-width: 100%; }
  .lockup { margin-bottom: 26px; }
}