/* Mouthy — one phone in 3D. Flat designed page by default; html.motion turns the same sections into the phone. */

@font-face { font-family: "Unbounded"; font-weight: 800; font-display: swap; src: url("fonts/unbounded-800.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-weight: 400 500; font-display: swap; src: url("fonts/inter-tight.woff2") format("woff2"); }

:root {
  --yel: #e8ff3a;
  --bg: #050505;
  --ink: #f3f3ec;
  --mute: rgba(243, 243, 236, 0.62);
  --line: rgba(243, 243, 236, 0.14);
  --display: "Unbounded", system-ui, sans-serif;
  --body: "Inter Tight", system-ui, sans-serif;
  /* the phone: 9:19.5, sized from the viewport height on desktop, from the width on a phone */
  --ph: min(74vh, 760px);
  --pw: calc(var(--ph) * 9 / 19.5);
}
@media (max-width: 768px) {
  :root { --ph: min(64vh, calc(min(70vw, 300px) * 19.5 / 9)); --pw: calc(var(--ph) * 9 / 19.5); }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.5 var(--body); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
h1, h2, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
video { display: block; }
b { font-weight: 500; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 20; padding: 10px 14px; background: var(--yel); color: #000; font-weight: 500; text-decoration: none; border-radius: 8px; }
.skip:focus { top: 16px; }

/* ---------- header ---------- */
.top { display: flex; align-items: center; gap: 24px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.top__mark { font: 800 20px/1 var(--display); letter-spacing: -0.02em; text-transform: uppercase; color: var(--yel); text-decoration: none; }
.top__where { color: var(--mute); font-size: 14px; }
.top__nav { margin-left: auto; display: flex; gap: 18px; font-size: 14px; }
.top__nav a { color: var(--mute); text-decoration: none; }
.top__nav a:hover, .top__nav a:focus-visible { color: var(--ink); }
@media (max-width: 768px) {
  .top { padding: 16px; gap: 12px; }
  .top__where { display: none; }
  .top__nav { gap: 14px; font-size: 13px; }
}

/* ---------- flat page (no JS, reduced motion) ---------- */
.stage { display: block; }
.hero { padding: clamp(56px, 10vw, 120px) 24px 40px; max-width: 1200px; margin: 0 auto; }
.hero h1 { font: 800 clamp(44px, 9vw, 128px)/0.95 var(--display); letter-spacing: -0.03em; color: var(--yel); max-width: 9ch; }
.hero p { margin-top: 28px; max-width: 44ch; font-size: clamp(17px, 1.6vw, 21px); color: var(--mute); }

.around, .proxy, .hint, .island, .glass, .card__say { display: none; }

.pane { padding: 48px 24px; max-width: 1200px; margin: 0 auto; border-top: 1px solid var(--line); }
.pane > h2 { font: 800 clamp(26px, 3.6vw, 44px)/1 var(--display); letter-spacing: -0.02em; margin-bottom: 28px; }

.feed { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 900px) { .feed { grid-template-columns: repeat(3, 1fr); } }
.feed__item figure { position: relative; }
.feed__item video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; background: #111; }
.feed__item figcaption { display: flex; flex-direction: column; gap: 2px; padding: 12px 2px 0; font-size: 14px; }
.feed__item figcaption b { color: var(--ink); }
.feed__item figcaption span { color: var(--mute); }
.feed__note { margin-top: 20px; font-size: 13px; color: var(--mute); }

.row { display: none; }
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px 32px; }
.services li { display: flex; flex-direction: column; gap: 8px; }
.services b { font: 800 18px/1.2 var(--display); color: var(--yel); }
.services span { color: var(--mute); }
.numbers { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--mute); font-size: 15px; max-width: 70ch; }
.numbers b { color: var(--ink); }

.pane--card { padding-bottom: 72px; }
.pane--card > h2 { color: var(--yel); font-size: clamp(36px, 6vw, 84px); }
.card__from { display: flex; gap: 14px; color: var(--mute); font-size: 15px; }
.card__from b { color: var(--ink); }
.card__links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 24px; }
.card__links a { font: 500 clamp(20px, 2.6vw, 30px)/1.2 var(--body); color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--yel); padding-bottom: 2px; }
.card__links a:hover, .card__links a:focus-visible { color: var(--yel); }
.card__hours { margin-top: 20px; color: var(--mute); font-size: 15px; }

.foot { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--mute); }
.foot a { color: var(--mute); }

/* ---------- the phone (JS, motion allowed) ---------- */
.motion body { overflow-x: hidden; overscroll-behavior: none; }
.motion .proxy { display: block; width: 1px; height: 900vh; pointer-events: none; }
.motion .top { position: fixed; left: 0; right: 0; top: 0; z-index: 6; border: 0; background: linear-gradient(var(--bg), rgba(5, 5, 5, 0)); opacity: 0; transition: opacity 0.6s; }
.motion.ready .top { opacity: 1; }

.motion .stage { position: fixed; inset: 0; z-index: 1; overflow: hidden; perspective: 1400px; perspective-origin: 50% 50%; visibility: hidden; }
.motion.ready .stage { visibility: visible; }
.motion .hero, .motion .pane > h2, .motion .feed__note, .motion .services, .motion .numbers { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }

/* words around the phone */
.motion .around { display: block; position: absolute; inset: 0; z-index: 0; }
.motion .around > p { position: absolute; margin: 0; opacity: 0; will-change: transform, opacity; }
.motion .wordmark { left: 50%; top: 50%; transform: translate(-50%, -50%); font: 800 clamp(72px, 16.5vw, 300px)/0.85 var(--display); letter-spacing: -0.045em; color: var(--yel); white-space: nowrap; }
.motion .ltr { display: inline-block; }
.motion .tagline { right: calc(50% + var(--pw) / 2 + 48px); bottom: calc(50% - var(--ph) / 2); width: 24ch; text-align: right; font-size: 17px; color: var(--ink); }
.motion .lab { left: calc(50% + var(--pw) / 2 + 48px); top: calc(50% - var(--ph) / 2); font-size: 15px; color: var(--mute); width: 22ch; }
.motion .lab b { display: block; font: 800 clamp(40px, 5vw, 72px)/1 var(--display); color: var(--yel); letter-spacing: -0.03em; }
.motion .lab i { font-style: normal; display: block; font: 800 15px/1 var(--display); color: var(--mute); margin: 8px 0 14px; }
.motion .lab__t { display: block; color: var(--ink); font-size: 17px; }
.motion .head { left: 50%; transform: translateX(-50%); white-space: nowrap; font: 800 clamp(22px, 3vw, 40px)/1 var(--display); letter-spacing: -0.02em; }
.motion .head--work { top: calc(50% - var(--pw) / 2 - 56px); color: var(--ink); }
.motion .head--say { top: calc(50% - var(--pw) / 2 - 56px); color: var(--yel); font-size: clamp(30px, 5vw, 64px); }
.motion .hint { display: block; left: 50%; bottom: 28px; transform: translateX(-50%); font-size: 13px; color: var(--mute); letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 768px) {
  .motion .tagline { right: auto; left: 16px; top: 64px; transform: none; width: 26ch; text-align: left; font-size: 14px; }
  .motion .lab { left: 16px; right: 16px; top: calc(50% + var(--ph) / 2 + 14px); transform: none; width: auto; display: flex; align-items: baseline; gap: 10px; }
  .motion .lab b { font-size: 28px; }
  .motion .lab i { margin: 0; }
  .motion .lab__t { font-size: 15px; margin-left: auto; text-align: right; }
  .motion .head--work, .motion .head--say { top: 92px; }
  .motion .wordmark { font-size: 15vw; }
}

/* the phone itself: the rig takes the intro tween, the phone takes the pose from the frame loop */
.motion .rig { position: absolute; inset: 0; z-index: 1; transform-style: preserve-3d; }
.motion .phone { position: absolute; left: 50%; top: 50%; width: var(--pw); height: var(--ph); margin: calc(var(--ph) / -2) 0 0 calc(var(--pw) / -2); border-radius: calc(var(--pw) * 0.16); background: #161616; box-shadow: 0 0 0 1px #2a2a2a, 0 40px 90px rgba(0, 0, 0, 0.7), inset 0 0 0 2px #0a0a0a; will-change: transform; transform-style: flat; }
.motion .island { display: block; position: absolute; left: 50%; top: calc(var(--pw) * 0.045); width: calc(var(--pw) * 0.3); height: calc(var(--pw) * 0.085); margin-left: calc(var(--pw) * -0.15); border-radius: 999px; background: #000; z-index: 3; }
.motion .screen { position: absolute; inset: calc(var(--pw) * 0.025); border-radius: calc(var(--pw) * 0.14); overflow: hidden; background: #000; transform: translateZ(0); }

.motion .pane { position: absolute; margin: 0; padding: 0; border: 0; max-width: none; opacity: 0; visibility: hidden; will-change: opacity; }
.motion .pane--feed { inset: 0; }
.motion .pane--ticker, .motion.landscape .pane--card { left: 50%; top: 50%; width: var(--ph); height: var(--pw); margin: calc(var(--pw) / -2) 0 0 calc(var(--ph) / -2); transform: rotate(90deg); }
.motion .pane--card { inset: 0; }

/* feed: six items stacked, the track slides one screen per swipe */
.motion .feed { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 600%; will-change: transform; }
.motion .feed__item { height: calc(100% / 6); position: relative; }
.motion .feed__item figure { position: absolute; inset: 0; }
.motion .feed__item video { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.motion .feed__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 calc(var(--pw) * 0.07) calc(var(--pw) * 0.08); background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75)); padding-top: calc(var(--pw) * 0.3); font-size: calc(var(--pw) * 0.042); gap: 4px; }
.motion .feed__item figcaption b { font: 800 calc(var(--pw) * 0.06)/1.1 var(--display); color: var(--ink); letter-spacing: -0.01em; }
.motion .feed__item figcaption span { color: var(--yel); }

/* ticker: three rows run on the clock */
.motion .row { display: block; position: absolute; left: 0; width: 100%; white-space: nowrap; overflow: hidden; }
.motion .row__track { display: inline-block; will-change: transform; }
.motion .row__track span { display: inline-block; padding-right: 0.5em; }
.motion .row--a { top: 11%; font: 800 calc(var(--pw) * 0.14)/1 var(--display); color: var(--yel); letter-spacing: -0.02em; text-transform: uppercase; }
.motion .row--b { top: 46%; font: 500 calc(var(--pw) * 0.06)/1 var(--body); color: var(--ink); }
.motion .row--c { top: 64%; font: 800 calc(var(--pw) * 0.14)/1 var(--display); color: transparent; -webkit-text-stroke: 1px var(--yel); letter-spacing: -0.02em; text-transform: uppercase; }

/* card */
.motion .pane--card { display: flex; flex-direction: column; justify-content: space-between; padding: 7% 7%; background: var(--yel); color: #000; }
.motion .card__from { font-size: calc(var(--pw) * 0.034); color: rgba(0, 0, 0, 0.6); }
.motion .card__from b { color: #000; font: 800 calc(var(--pw) * 0.034)/1 var(--display); text-transform: uppercase; }
.motion .card__say { display: block; font: 800 calc(var(--pw) * 0.1)/0.95 var(--display); letter-spacing: -0.03em; color: #000; }
.motion.landscape .card__say { font-size: calc(var(--pw) * 0.12); }
.motion.landscape .pane--card { padding: 6% 7% 6% 12%; }
.motion .card__links { flex-direction: column; gap: calc(var(--pw) * 0.03); margin: 0; }
.motion .card__links a { font: 500 calc(var(--pw) * 0.05)/1.2 var(--body); color: #000; border-bottom-color: rgba(0, 0, 0, 0.35); }
.motion .card__links a:hover, .motion .card__links a:focus-visible { border-bottom-color: #000; color: #000; }
.motion .card__hours { margin: 0; font-size: calc(var(--pw) * 0.032); color: rgba(0, 0, 0, 0.6); }
.motion.landscape .card__links { flex-direction: row; gap: calc(var(--pw) * 0.08); }
.motion.landscape .card__links a { font-size: calc(var(--pw) * 0.045); }

/* glass: a soft reflection that never stops moving */
.motion .glass { display: block; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 120%; z-index: 4; pointer-events: none; will-change: transform; background: linear-gradient(112deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.09) 49%, rgba(255, 255, 255, 0.03) 52%, rgba(255, 255, 255, 0) 60%); }

/* footer is pinned and fades in with the card */
.motion .foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; justify-content: center; border: 0; opacity: 0; pointer-events: none; will-change: opacity; }
.motion .foot.is-on { pointer-events: auto; }