/* Terminal 42 landing: what every scene after the hero shares.
   The hero's tokens (hero.css) are the law; this file only adds the grounds the page travels through. */

:root {
  --cream: #f7f0e4;
  --cream-2: #efe5d4;
  --cocoa: #1c1512;
  --cocoa-2: #2a201b;
  --ink-w: #1d1511;
  --ink-2: rgba(29, 21, 17, .72);
  --ink-3: rgba(29, 21, 17, .52);
  --hair-ink: rgba(29, 21, 17, .2);
  --amber: #c4801f;

  --t-disp: clamp(96px, 15.5vw, 300px);
  --t-mid: clamp(26px, 2.5vw, 46px);
  --t-body: clamp(15px, 1.05vw, 18px);
  --pad-y: clamp(96px, 12svh, 150px);
}

.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.o42 { color: transparent; -webkit-text-stroke: .055em var(--o42-ink, currentColor); }

/* ---------- nav: mark, anchors, the live trip, one call ---------- */
.nav { color: var(--bone); }
.nav__links {
  position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + clamp(16px, 2.2vw, 30px)); translate: -50% 0;
  height: 1.6em; align-items: center;
}
.nav__links a { color: currentColor; opacity: .74; transition: opacity .3s; }
.nav__links a:hover, .nav__links a[aria-current="true"] { opacity: 1; }
.nav__act { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); font-size: var(--t-cap); font-stretch: 112%; font-weight: 450; }
.nav__act a { pointer-events: auto; text-decoration: none; }
.nav__trip { display: inline-flex; align-items: center; gap: 6px; opacity: .84; transition: opacity .3s; }
.nav__trip:hover { opacity: 1; }
.nav__trip svg { transition: transform .45s var(--ease-out); }
.nav__trip:hover svg { transform: translate(2px, -2px); }
.nav__cta {
  display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 99px;
  box-shadow: inset 0 0 0 1px currentColor; transition: background .3s, color .3s;
}
.nav__cta:hover { background: var(--bone); color: var(--ink); box-shadow: inset 0 0 0 1px var(--bone); }
.is-light .nav { color: var(--ink-w); --mark-ink: var(--ink-w); }
/* hero.css colours a hovered link bone; on the light grounds it keeps the nav's ink */
.is-light .nav__links a:hover, .is-light .nav__links a[aria-current="true"] { color: var(--ink-w); }

/* the nav steps out of the way while the page moves down under it, and comes back on the way up (Jesko does the same) */
.nav { transition: color .5s; }
.nav-ready .nav { transition: color .5s, translate .6s var(--ease-out), opacity .45s; }
.nav-away .nav { translate: 0 -110%; opacity: 0 !important; }
.nav-away .nav a { pointer-events: none; }
.rm.nav-away .nav { translate: none; }
.is-light .nav__by { color: var(--ink-3); }
.is-light .nav__cta:hover { background: var(--ink-w); color: var(--cream); box-shadow: inset 0 0 0 1px var(--ink-w); }

/* focus stays visible on the light grounds */
.is-light :is(a, button, input):focus-visible, .sc--brand :is(a, button, input):focus-visible, .pass :is(a, button):focus-visible { outline: 2px solid #8a4a12; outline-offset: 4px; }

/* the pill follows the ground, and steps aside where the boarding passes carry their own buttons */
.cta { transition: background .5s, box-shadow .5s, opacity .45s, transform .6s var(--ease-out); }
.pill-away .cta { opacity: 0 !important; transform: translateY(24px) !important; pointer-events: none; }
.cta__pill, .cta__dot { transition: background .5s, color .5s, transform .5s var(--ease-out); }
.is-light .cta { background: rgba(255, 250, 242, .34); box-shadow: inset 0 0 0 1px rgba(29, 21, 17, .14), 0 10px 30px rgba(60, 40, 20, .12); }
.is-light .cta__pill, .is-light .cta__dot { background: var(--ink-w); color: var(--cream); }
.is-light .cta:hover .cta__pill, .is-light .cta:hover .cta__dot { background: #000; }

/* ---------- the camera: fixed photographs behind the scenes (motion only) ---------- */
.cam { position: fixed; inset: 0; z-index: 0; display: none; overflow: hidden; background: var(--ink); pointer-events: none; }
.motion .cam { display: block; }
.cam__p { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform-origin: 50% 50%; will-change: transform, opacity; }
.cam__p--oia { opacity: 1; visibility: visible; }
.cam__sky, .cam__dim { opacity: 1; }
.cam__sh, .cam__bl { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--op, 50% 50%); }
.cam__bl { opacity: 0; }
.cam__veil { position: absolute; inset: 0; opacity: 0; }
.cam__veil--trip, .cam__veil--close { opacity: 1; }
.cam__p--cream { background: radial-gradient(120% 90% at 50% 40%, #fbf6ec 0%, var(--cream) 60%, var(--cream-2) 100%); }
.cam__shade { position: absolute; inset: 0; background: #0a0c15; opacity: 0; }
@media (orientation: portrait) {
  .cam__sh, .cam__bl { object-position: var(--op-p, 50% 50%); }
}

/* the hero hands its final frame to the camera */
.past-hero .stage { background: transparent; }
.past-hero .stage .world, .past-hero .say__sky, .past-hero .say__dim { visibility: hidden; }

/* ---------- scenes ---------- */
.sc { position: relative; z-index: 1; overflow-x: clip; }
.sc__f { position: relative; }
.bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; display: none; }
.bg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.bg__veil { position: absolute; inset: 0; }
/* without the camera (reduced motion, or the scripts did not run) each scene carries its own ground */
html:not(.motion) .bg { display: block; }
html:not(.motion) .sc { isolation: isolate; }
html:not(.motion) .sc[data-ground="cream"] { background: var(--cream); }

/* drawn objects keep their images' proportions (the width and height attributes are only hints) */
.pf img, .clean img, .print img { height: auto; }

/* shared: the agency's mark in miniature */
.mini-ag > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mini-ag > i { flex: none; }
.day__top .mini-ag, .clean__top .mini-ag { max-width: 72%; }
.mini-ag { display: inline-flex; align-items: center; gap: .7em; max-width: 100%; font-family: var(--f-wide); font-weight: 640; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.mini-ag i { display: inline-grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: #16181f; color: #f3ebdf; box-shadow: 0 0 0 1px rgba(243, 235, 223, .2); font: italic 400 1.05em/1 var(--f-agency); letter-spacing: 0; }

/* blur-to-focus: elements the scripts reveal start hidden only when the camera runs */
.motion [data-in] { opacity: 0; }

/* phones */
@media (max-width: 860px) {
  .nav__links { display: none; }
}
@media (max-width: 720px) {
  .nav__by { display: none; }
  .nav__act { gap: 14px; font-size: 13px; }
  .nav__cta { height: 32px; padding: 0 13px; }
}
@media (max-width: 360px) {
  .nav__trip { display: none; }
}