/* ══════════════════════════════════════════════════════════════
   Small screens (< 1024px wide): the site asks to be seen on desktop.
   Figma: "on screens < 1024px wide" (1046:703643 / 1051:707460).
   The scene is the 852px-tall Figma frame: sky, clouds and words are
   pinned to the top, the ground and signpost to the bottom, and on short
   screens the whole scene scales down to fit the height (--ss-s, set by
   smallscreen.js). The desktop page stays loaded underneath, untouched,
   so widening the window again lands you exactly where you were.
   ══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "RX100";
  src: url("fonts/RX100-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* html.ss-small is set by smallscreen.js: straight away on load, then
   (after a resize settles) whenever the window crosses the 1024 line */
html.ss-small.ss-pre body { visibility: hidden; }
html.ss-small, html.ss-small body { overflow: hidden !important; }

.ss {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  background: #dce6f0;               /* Jasmine milk under 56% white */
  color: #21190d;
  font-family: "RX100", "Courier New", monospace;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.ss { opacity: 0; visibility: hidden; pointer-events: none; }
html.ss-small .ss { opacity: 1; visibility: visible; pointer-events: auto; }
/* once the page has settled, crossing the 1024 line crossfades rather than cuts */
.ss.ss--fade { transition: opacity 450ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 450ms; }
html.ss-small .ss.ss--fade { transition: opacity 450ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s; }

.ss__scene {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% / var(--ss-s, 1));
  height: calc(100% / var(--ss-s, 1));
  min-height: 852px;
  transform-origin: 0 100%;
  scale: var(--ss-s, 1);
}
.ss__scene > * { position: absolute; margin: 0; }
.ss img { display: block; user-select: none; -webkit-user-drag: none; }

/* bushes + buildings sit behind the ground line (y 789 of 852) */
.ss__bush--left  { left: 28px;  bottom: -25px; width: 606px; height: 268px; }
.ss__bush--right { left: 642px; bottom: -25px; width: 661px; height: 352px; }

.ss__cloud { top: 0; left: 0; will-change: translate; }
.ss__cloud--1 { width: 311px; height: 88px; }
.ss__cloud--2 { width: 689px; height: 178px; }
.ss__cloud--3 { width: 497px; height: 138px; }

.ss__words {
  top: 121px;
  left: 50%;
  width: 274px;
  translate: -50% 0;
  font-size: 22px;
  line-height: 26.4px;
  text-align: center;
}

/* stretches sideways on very wide, short scenes (phone held sideways) */
.ss__ground { left: 50%; bottom: 0; width: max(1512px, 100%); height: 63px; translate: -50% 0; }

/* the signpost: 278 x 475, its centre 17.5px right of the screen's centre */
.ss__post { left: calc(50% - 121.5px); bottom: 13px; width: 278px; height: 475px; }
.ss__post > * { position: absolute; }
.ss__base { left: 15px; top: -30px; width: 209px; height: 505px; }

.ss__sign {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-origin: var(--ox) var(--oy);
  transition: rotate 450ms cubic-bezier(0.34, 1.5, 0.64, 1), scale 200ms ease;
  outline: none;
}
.ss__sign img { width: 100%; height: 100%; }
.ss__sign--copy   { left: 42px; top: 85px;  width: 184px; height: 86px;  --ox: 73.5px; --oy: 43px; --tilt: 7deg; }
.ss__sign--resume { left: 8px;  top: 165px; width: 182px; height: 78px;  --ox: 107.5px; --oy: 39px; --tilt: -6deg; }
.ss__sign--email  { left: 19px; top: 214px; width: 236px; height: 145px; --ox: 96.5px; --oy: 72px; --tilt: 8deg; }
@media (hover: hover) {
  .ss__sign:hover { rotate: calc(var(--tilt) * 0.3); }
}
.ss__sign:active { scale: 0.97; }
.ss__sign:focus-visible { outline: 2px dashed #21190d; outline-offset: 4px; }

/* "Link copied!" */
.ss__toast {
  left: 50%;
  top: 300px;
  translate: -50% 6px;
  padding: 8px 14px;
  background: #21190d;
  color: #fdfcf7;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, translate 300ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 5;
}
.ss__toast.is-on { opacity: 1; translate: -50% 0; }

/* ── Entrance: only when the page is first seen on a small screen.
   Same choreography as the home park: bushes rise from behind the ground
   line, clouds puff in, the post pushes up out of the ground, each sign
   is hung on it and swings, then the words. ── */
.ss--intro [data-ss] { opacity: 0; }
.ss--intro [data-ss="rise"] { translate: -50% 14px; }
.ss--intro [data-ss="puff"] { scale: 0.85; }
.ss--intro [data-ss="horizon"] {
  opacity: 1;
  translate: 0 calc(var(--rise) * 1px);
  clip-path: inset(0 0 calc((var(--cut) + var(--rise)) * 1px) 0);
}
.ss--intro [data-ss="ground"] { translate: 0 100%; clip-path: inset(0 0 calc(100% + 4px) 0); }

.ss--intro.ss--go [data-ss] {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition:
    opacity 450ms ease var(--d, 0ms),
    translate 700ms cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms),
    scale 600ms cubic-bezier(0.34, 1.4, 0.64, 1) var(--d, 0ms);
}
.ss--intro.ss--go [data-ss="rise"] { translate: -50% 0; }
.ss--intro.ss--go [data-ss="puff"] {
  transition: opacity 450ms ease var(--d, 0ms), scale 600ms cubic-bezier(0.34, 1.4, 0.64, 1) var(--d, 0ms);
}
.ss--intro.ss--go [data-ss="horizon"] {
  clip-path: inset(0 0 calc(var(--cut) * 1px) 0);
  transition:
    translate 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms),
    clip-path 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms);
}
.ss--intro.ss--go [data-ss="ground"] {
  clip-path: inset(0 0 0 0);
  transition:
    opacity 1ms linear var(--d, 0ms),
    translate 750ms cubic-bezier(0.25, 1, 0.4, 1) var(--d, 0ms),
    clip-path 750ms cubic-bezier(0.25, 1, 0.4, 1) var(--d, 0ms);
}
.ss--intro.ss--go [data-ss="hang"] {
  transition: none;
  animation: ss-hang 1100ms linear var(--d, 0ms) both;
}
@keyframes ss-hang {
  0%   { opacity: 0; translate: 0 -46px; rotate: calc(var(--tilt) * 0.4); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  8%   { opacity: 1; }
  26%  { translate: 0 0; rotate: var(--tilt); animation-timing-function: cubic-bezier(0.33, 0, 0.3, 1); }
  50%  { rotate: calc(var(--tilt) * -0.45); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  70%  { rotate: calc(var(--tilt) * 0.2); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  86%  { rotate: calc(var(--tilt) * -0.07); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  100% { opacity: 1; translate: 0 0; rotate: 0deg; }
}

@media (prefers-reduced-motion: reduce) {
  .ss--intro [data-ss] { opacity: 1 !important; translate: none !important; scale: none !important; clip-path: none !important; animation: none !important; }
  .ss__words { translate: -50% 0 !important; }
  .ss__sign { transition: none; }
}