/* Filmscape splash: one screen, logo, one line, one quiet contact. */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fonts/schibsted.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --ink: #1e2627;        /* tinted charcoal, from the logo's FILM */
  --ink-soft: #46524f;   /* secondary text on paper: 7.3:1 */
  --paper: #eef3f4;      /* cool paper, tinted toward the logo blue */
  --fs-blue: #0984bd;    /* SCAPE */
  --link: #066a99;       /* blue for text on paper: 5.3:1 */
  --sun: #f68722;        /* emblem orange */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
  --horizon: clamp(56px, 16dvh, 150px);      /* distance of the horizon from the bottom */
  --sun-r: clamp(18px, 3.2dvh, 34px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  height: 100vh; height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: "Schibsted Grotesk", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
::selection { background: var(--fs-blue); color: var(--paper); }

.splash {
  position: absolute; inset: 0 0 var(--horizon) 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(12px, 3dvh, 32px) clamp(20px, 6vw, 48px) 0;
  text-align: center;
}
.splash__logo { margin: 0; line-height: 0; }
.splash__logo img {
  display: block;
  width: min(440px, 76vw, 46dvh * 7.44);
  height: auto;
}
.splash__line {
  margin: clamp(14px, 3.6dvh, 32px) 0 0;
  max-width: 31em;
  font-size: clamp(0.95rem, 0.8rem + 0.7vw, 1.2rem);
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink-soft);
  text-wrap: balance;
}
.splash__contact { margin: clamp(10px, 2.4dvh, 22px) 0 0; font-size: clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem); }
.splash__contact a {
  display: inline-block; padding: 6px 2px;   /* >=24px target */
  color: var(--link); letter-spacing: 0.01em;
  text-decoration: underline 1px color-mix(in srgb, var(--fs-blue) 40%, transparent);
  text-underline-offset: 0.3em;
  transition: text-decoration-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.splash__contact a:hover { color: var(--ink); text-decoration-color: var(--fs-blue); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }

/* The emblem, quietly: a hairline horizon and a sun resting on it. */
.horizon {
  position: absolute; left: 0; right: 0; bottom: var(--horizon);
  width: 100%; height: 1px; overflow: visible;
}
.horizon__line { stroke: var(--fs-blue); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.55; }
.sun {
  position: absolute; left: 68%; bottom: var(--horizon);
  width: calc(var(--sun-r) * 2); height: var(--sun-r);
  transform: translateX(-50%);
  overflow: hidden;            /* the horizon hides what is below it */
}
.sun::before {
  content: ""; position: absolute; inset: 0;
  border-radius: var(--sun-r) var(--sun-r) 0 0;
  background: var(--sun);
}

/* Landscape phones: tighten so everything still fits. */
@media (max-height: 480px) and (orientation: landscape) {
  :root { --horizon: clamp(36px, 12dvh, 64px); --sun-r: clamp(12px, 3.4dvh, 18px); }
  .splash__logo img { width: min(360px, 50vw); }
  .splash__line { font-size: 0.9rem; max-width: 36em; }
}

@media (prefers-reduced-motion: no-preference) {
  .splash > * { animation: settle 900ms var(--ease-out) both; }
  .splash__line { animation-delay: 150ms; }
  .splash__contact { animation-delay: 300ms; }
  .horizon { animation: draw 1200ms var(--ease-out) 200ms both; transform-origin: 0 50%; }
  .sun::before { animation: rise 1600ms var(--ease-out) 500ms both; }
  @keyframes settle { from { opacity: 0; transform: translateY(8px); } }
  @keyframes draw { from { transform: scaleX(0); } }
  @keyframes rise { from { transform: translateY(100%); } }
}