/* smocat: one courtyard at dusk. Sky, yard, bench, pack. */
@font-face { font-family: "Oswald"; src: url("/font/oswald-latin-var.woff2") format("woff2"); font-weight: 200 700; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("/font/space-mono-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bg: #1B1F6B; --ink: #F2ECDF; --accent: #F06BA8;
  --sky-1: #1B1F6B; --sky-2: #3A3FC0; --horizon: #E0459A;
  --cream: #E9E2D6; --pack-red: #C8282E; --warn-ink: #1A1A1A; --lamp: #F2B04A;
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Oswald", "Arial Narrow", sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
  --container: min(1200px, 100% - 2 * var(--s3));
  --reading: min(560px, 100% - 2 * var(--s3));
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  /* the scene box: the yard picture covering the viewport */
  --sw: max(100vw, 177.7lvh);
  --sh: max(56.28vw, 100lvh);
  --fx: .5;
}
html { background: var(--bg) url("/img/sky-dull.webp") center / cover fixed; }
body { background: transparent; overflow-x: hidden; font-weight: 500; letter-spacing: .01em; }
img { -webkit-user-drag: none; user-select: none; }
button { cursor: pointer; }

/* ---------- the world (fixed behind everything) ---------- */
.yard { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; }
.world { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: var(--sky-1); }
.layer { position: absolute; width: var(--sw); height: var(--sh);
  left: calc((100vw - var(--sw)) * var(--fx)); top: calc((100lvh - var(--sh)) * .5); will-change: translate; }
.sky { overflow: hidden; }
.sky-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 80%;
  animation: clouds 140s ease-in-out infinite alternate; }
.sky-2017 { opacity: 0; transition: opacity 4.5s var(--ease-soft); }
.is-2017 .sky-2017 { opacity: 1; transition-duration: 3s; }
@keyframes clouds { from { transform: scale(1.14) translateX(-4.5%); } to { transform: scale(1.14) translateX(4.5%); } }
.yard-img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the warm 2017 light falling on the yard (light, not an object) */
.ground::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: soft-light;
  background: linear-gradient(to top, rgba(255, 150, 120, .0) 30%, rgba(255, 120, 190, .75) 62%, rgba(255, 190, 120, .55));
  transition: opacity 4.5s var(--ease-soft); }
.is-2017 .ground::after { opacity: 1; transition-duration: 3s; }
.lamp-glow { position: absolute; left: 27.9%; top: 24%; width: 7%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 140, .55), rgba(242, 176, 74, .18) 40%, transparent 70%);
  mix-blend-mode: screen; animation: hum 5s ease-in-out infinite alternate; }
.lamp-glow.is-flicker { animation: flicker .9s steps(1) 1; }
@keyframes hum { from { opacity: .75; } to { opacity: 1; } }
@keyframes flicker { 0% { opacity: .2; } 15% { opacity: 1; } 30% { opacity: .1; } 45% { opacity: .9; } 60% { opacity: .3; } 100% { opacity: 1; } }

.air { position: fixed; inset: 0; width: 100vw; height: 100lvh; z-index: 3; pointer-events: none; }

/* ---------- the sky words ---------- */
.sky-words { position: absolute; z-index: 1; left: 52vw; top: max(5vh, 28px); width: min(34vw, 62vh); translate: -50% 0;
  text-align: center; }
.wordmark { margin: 0; line-height: 0; }
.wordmark img { width: 100%; height: auto; filter: drop-shadow(0 3px 0 rgba(27, 31, 107, .35));
  animation: write 1.8s var(--ease-out) .7s both; }
@keyframes write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.tagline { margin: var(--s1) 0 0; font-size: clamp(18px, 1.35vw, 24px); line-height: 1.3; color: var(--ink);
  text-shadow: 0 2px 0 rgba(27, 31, 107, .45); animation: rise 1.2s var(--ease-out) 1.4s both; }
.ticker { font-weight: 700; color: #FFD9EC; margin-right: .25em; }
.lore { margin: var(--s2) auto 0; max-width: 30ch; font-size: clamp(18px, 1.25vw, 22px); line-height: 1.4; font-weight: 400;
  color: rgba(242, 236, 223, .92); text-shadow: 0 2px 0 rgba(27, 31, 107, .45); animation: rise 1.2s var(--ease-out) 1.7s both; }
.risk { margin: var(--s2) auto 0; max-width: 34ch; font-size: 16px; line-height: 1.35; font-weight: 400;
  color: rgba(242, 236, 223, .62); animation: rise 1.2s var(--ease-out) 1.9s both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- the bench ---------- */
.bench { position: absolute; z-index: 2; left: 1vw; bottom: 3.5vh; width: min(50vw, 118vh); aspect-ratio: 1100 / 815; }
.cat { position: absolute; inset: 0; transform-origin: 35% 100%; animation: breathe 4.6s ease-in-out infinite; }
.frame { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .7s var(--ease-soft); }
.frame[data-frame="idle"] { opacity: 1; }
.frame.is-on { opacity: 1; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.004, 1.008); } }

.photo { position: absolute; left: 66%; top: 31%; width: 19%; min-width: 118px; padding: 0; border: 0; background: none;
  rotate: -7deg; transform-origin: 50% 100%; filter: drop-shadow(0 6px 6px rgba(20, 14, 40, .45));
  transition: transform .6s var(--ease-soft), filter .25s ease-out; animation: drop-in 1s var(--ease-out) 2.1s both; }
.photo img { width: 100%; height: auto; }
.photo-label { position: absolute; left: 4%; right: 4%; bottom: 3.5%; height: 18%; display: grid; place-items: center;
  font: 600 clamp(16px, 1.05vw, 20px)/1 var(--font-display); color: #2B2550; letter-spacing: .02em; white-space: nowrap; }
.photo:hover { transform: translateY(-8px) rotate(4deg); transition: transform .25s var(--ease-pop); }
.photo:active { transform: translateY(-2px) rotate(4deg) scale(.97); transition-duration: .035s; }
.photo.is-off { cursor: default; opacity: 1; transform: translateY(-14px) rotate(7deg) scale(1.04); filter: drop-shadow(0 12px 10px rgba(20, 14, 40, .4)) brightness(1.08); }
@keyframes drop-in { from { opacity: 0; transform: translateY(-30px) rotate(-10deg); } to { opacity: 1; transform: none; } }

/* ---------- the subtitle ---------- */
.subtitle { position: absolute; z-index: 4; left: 58vw; top: 57vh; width: min(22vw, 420px); translate: -50% 0; margin: 0;
  text-align: center; pointer-events: none; }
.subtitle span { display: inline-block; text-wrap: balance; font: 500 clamp(22px, 1.75vw, 32px)/1.25 var(--font-display); color: #FFF7E8; letter-spacing: .02em;
  text-shadow: 0 0 2px #241B4A, 0 2px 0 #241B4A, 2px 0 0 #241B4A, -2px 0 0 #241B4A, 0 -2px 0 #241B4A, 0 4px 14px rgba(36, 27, 74, .6);
  opacity: 0; transform: translateY(8px); transition: opacity 1.4s var(--ease-soft), transform 1.4s var(--ease-soft); }
.subtitle.is-on span { opacity: 1; transform: none; }

/* ---------- the pack ---------- */
.pack { position: absolute; z-index: 5; right: 4vw; bottom: 2vh; width: min(25.5vw, 44vh); aspect-ratio: 807 / 1231;
  container-type: inline-size; animation: pack-in 1.3s var(--ease-out) 1.2s both; }
.pack-img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(-10px 14px 14px rgba(20, 14, 40, .5)); }
@keyframes pack-in { from { opacity: 0; transform: translateY(30%) rotate(4deg); } to { opacity: 1; transform: none; } }
.warning { position: absolute; left: 11.6%; right: 10.7%; top: 41.9%; bottom: 33.2%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2.2cqw; padding: 2cqw 4cqw; color: var(--warn-ink); text-align: center; }
.warning-head { position: absolute; left: 10%; right: 10%; top: 33.9%; height: 6%; margin: 0; display: grid; place-items: center;
  font: 700 max(16px, 5.4cqw)/1 var(--font-display); color: var(--warn-ink); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.ca { display: block; width: 100%; font: 400 max(16px, 4.6cqw)/1.3 var(--font-mono); color: var(--warn-ink); }
.ca.is-empty { font: 500 max(16px, 5cqw)/1.25 var(--font-display); }
.copy { flex: none; min-height: 44px; min-width: 40%; padding: .7em 1.2em; border: 3px solid var(--warn-ink); border-radius: 6px;
  background: var(--warn-ink); color: #fff; font: 700 max(16px, 4.6cqw)/1 var(--font-display); text-transform: uppercase; letter-spacing: .05em;
  transition: transform .6s var(--ease-soft), background .2s; }
.copy:hover { transform: translateY(-2px); transition: transform .25s var(--ease-pop); }
.copy:active { transform: translateY(1px) scale(.97); transition-duration: .035s; }
.copy.is-off { background: transparent; color: var(--warn-ink); }

.pack-links { position: absolute; left: 7%; right: 7%; top: 71%; bottom: 4.5%; display: flex; flex-direction: column; gap: 2cqw; }
.btn { position: relative; display: flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px;
  padding: .5em .6em .55em; text-decoration: none; background: url("/img/btn-cream.webp") center / 100% 100% no-repeat;
  color: var(--warn-ink); font: 700 max(16px, 4.8cqw)/1.05 var(--font-display); letter-spacing: .02em;
  transition: transform .6s var(--ease-soft), filter .25s ease-out; }
.btn img { flex: none; width: 1.35em; height: 1.35em; object-fit: contain; }
.btn-buy { flex: 1.25; background-image: url("/img/btn-red.webp"); color: #FFF4E2; font-size: max(16px, 5.4cqw); text-shadow: 0 2px 0 rgba(90, 10, 14, .5); }
.btn-buy img { width: 1.5em; height: 1.5em; }
.btn-row { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.btn:hover { transform: translateY(-3px); filter: brightness(1.06); transition: transform .25s var(--ease-pop), filter .25s; }
.btn:active { transform: translateY(2px) scale(.98); transition-duration: .035s; }
.btn.is-off { filter: grayscale(.85) brightness(.95); transform: none; }

.curtain { position: fixed; inset: 0; z-index: 10; background: #0B0A1E; pointer-events: none; animation: lights-up 1.6s ease-out .15s both; }
@keyframes lights-up { to { opacity: 0; visibility: hidden; } }

/* ---------- mid screens ---------- */
@media (max-width: 1100px) and (min-aspect-ratio: 1/1) {
  .sky-words { left: 50vw; width: min(40vw, 58vh); }
  .subtitle { left: 57vw; width: 24vw; }
}

/* ---------- phones and portrait: scene first, the pack below on the same ground ---------- */
@media (max-aspect-ratio: 1/1) {
  :root { --fx: .22; }
  .yard { display: flex; flex-direction: column; align-items: center; min-height: 0; overflow: visible; overflow-x: clip; }
  .sky-words { position: relative; left: auto; top: auto; translate: none; width: min(86vw, 520px);
    margin-top: max(5svh, 24px); }
  .bench { position: relative; left: auto; bottom: auto; width: min(104vw, 760px); margin: max(2svh, 8px) 0 0 -4vw; align-self: flex-start; }
  .photo { left: 62%; top: 24%; width: 28%; }
  .subtitle { position: relative; left: auto; top: auto; bottom: auto; translate: none; order: 0; width: min(90vw, 520px); margin: -2svh 0 0;
    min-height: 2.6em; }
  .pack { position: relative; right: auto; bottom: auto; width: min(92vw, 420px); margin: var(--s4) 0 var(--s5); }
}
@media (max-aspect-ratio: 1/1) and (max-height: 700px) {
  .lore { font-size: 17px; }
}
@media (max-width: 360px) {
  .tagline, .lore, .risk { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .sky-img { animation: none; transform: scale(1.14); }
  .curtain { display: none; }
}