/* Terminal 42 hero, concept "The trip is the window". */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --ink: #120e0c;
  --bone: #f4eee6;
  --bone-2: rgba(244, 238, 230, .78);
  --bone-3: rgba(244, 238, 230, .56);
  --hair: rgba(244, 238, 230, .26);
  --dusk: #f2b48d;

  --f-wide: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* the agency's own typeface inside its trip link (Marisol's brand, not ours) */
  --f-agency: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

  --gut: clamp(20px, 4.45vw, 76px);
  --t-hl: clamp(44px, 6.8vw, 150px);
  --t-say: clamp(38px, 5.6vw, 118px);
  --t-cap: clamp(12px, .9vw, 15px);
  --t-lab: clamp(10px, .72vw, 12px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* phone geometry, read by hero.js too: outer radius, titanium band, bezel (fractions of phone width) */
  --k-r: .158;
  --k-b: .0125;
  --k-z: .034;
  --k-pcy: .5;
  --ph: min(74svh, 150vw);
  --pw: calc(var(--ph) * .4865);
  --pr: calc(var(--pw) * var(--k-r));
  --pi: calc(var(--pw) * (var(--k-b) + var(--k-z)));
  --sr: calc(var(--pr) - var(--pi));
}

* { box-sizing: border-box; }
html { background: var(--ink); color: var(--bone); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--bone);
  font: 400 15px/1.45 var(--f-wide); font-stretch: 100%;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, ol, figure { margin: 0; padding: 0; }
ol { list-style: none; }
[hidden] { display: none !important; }

/* the mark: Terminal solid, 42 outlined (same device as 42LAB) */
.mark { font-family: var(--f-wide); font-stretch: 125%; font-weight: 640; letter-spacing: -.01em; white-space: nowrap; }
.mark .o { color: transparent; -webkit-text-stroke: .05em var(--mark-ink, var(--bone)); }

/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 60; display: none; place-items: center; align-content: center; gap: 18px;
  background: var(--ink); color: var(--bone);
}
.js .loader { display: grid; }
.rm .loader { display: none; }
.loader__mark { font-size: 15px; opacity: 0; filter: blur(10px); }
.loader__bar { width: 64px; height: 1px; background: rgba(244, 238, 230, .14); overflow: hidden; }
.loader__bar i { display: block; height: 100%; width: 100%; background: var(--bone); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- nav ---------- */
.nav {
  position: fixed; z-index: 40; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + clamp(16px, 2.2vw, 30px)) var(--gut) 0;
  pointer-events: none;
}
.nav a { pointer-events: auto; text-decoration: none; }
.nav__brand { display: inline-flex; align-items: baseline; gap: 10px; font-size: clamp(15px, 1.15vw, 19px); }
.nav__by { font-family: var(--f-mono); font-size: var(--t-lab); letter-spacing: .06em; color: var(--bone-3); }
.nav__links { display: flex; gap: clamp(18px, 2.2vw, 36px); font-size: var(--t-cap); font-stretch: 112%; font-weight: 450; }
.nav__links a { position: relative; color: var(--bone-2); transition: color .3s; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .45s var(--ease-out); }
.nav__links a:hover { color: var(--bone); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
:is(a, button):focus-visible { outline: 2px solid var(--dusk); outline-offset: 4px; border-radius: 4px; }

/* ---------- stage ---------- */
.stage { position: relative; z-index: 1; height: 100svh; min-height: 520px; overflow: hidden; isolation: isolate; background: #2b2f3f; }

.world, .world__far, .world__near { position: absolute; inset: 0; }
.world { overflow: hidden; }
.world__far { overflow: hidden; }
.ph { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; transform-origin: 50% 50%; }
.ph--far { filter: brightness(.6) saturate(1.12) contrast(1.04); transform: scale(1.04); will-change: transform; }
.world__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(55% 40% at 80% 40%, rgba(255, 168, 116, .2), transparent 70%),
    radial-gradient(120% 90% at 50% 46%, transparent 38%, rgba(14, 10, 12, .55) 100%),
    linear-gradient(180deg, rgba(14, 10, 12, .35) 0%, transparent 22%, transparent 70%, rgba(14, 10, 12, .5) 100%);
}
/* the near photo is only seen through the phone's screen; JS keeps this clip in step with the camera */
.world__near {
  clip-path: inset(
    calc(var(--k-pcy) * 100% - var(--ph) / 2 + var(--pi))
    calc(50% - var(--pw) / 2 + var(--pi))
    calc(100% - var(--k-pcy) * 100% - var(--ph) / 2 + var(--pi))
    calc(50% - var(--pw) / 2 + var(--pi))
    round var(--sr));
}
.ph--near { will-change: transform; }

/* ---------- the phone ---------- */
.hand { position: absolute; left: 50%; top: calc(var(--k-pcy) * 100%); width: var(--pw); height: var(--ph); margin: calc(var(--ph) / -2) 0 0 calc(var(--pw) / -2); pointer-events: none; }
.hand__shadow, .device { position: absolute; inset: 0; border-radius: var(--pr); transform-origin: 50% 50%; }
.hand__shadow {
  box-shadow:
    0 calc(var(--pw) * .02) calc(var(--pw) * .03) rgba(6, 4, 8, .45),
    0 calc(var(--pw) * .12) calc(var(--pw) * .2) calc(var(--pw) * -.04) rgba(6, 4, 10, .55),
    0 calc(var(--pw) * .34) calc(var(--pw) * .5) calc(var(--pw) * -.1) rgba(6, 4, 10, .6);
  clip-path: inset(-60% -60% -60% -60% round var(--pr));
  will-change: transform, opacity;
}
.device {
  box-shadow:
    inset 0 0 0 calc(var(--pw) * var(--k-b)) #8d8782,
    inset 0 0 0 var(--pi) #060607,
    0 0 0 .5px rgba(0, 0, 0, .7);
}
/* titanium band */
.device::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: calc(var(--pw) * var(--k-b));
  background:
    linear-gradient(90deg, rgba(255, 214, 180, .55), transparent 18%, transparent 82%, rgba(255, 196, 160, .35)),
    conic-gradient(from 215deg at 50% 50%, #e9e4de, #77726d 9%, #b9b3ac 18%, #5a5652 30%, #d5cfc8 42%, #6c6763 55%, #cdc6be 68%, #625e5a 80%, #e9e4de);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* inner lip of the bezel catching light */
.device::after {
  content: ""; position: absolute; inset: calc(var(--pw) * var(--k-b)); border-radius: calc(var(--pr) - var(--pw) * var(--k-b));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.device__key { position: absolute; width: calc(var(--pw) * .012); border-radius: 2px; background: linear-gradient(90deg, #4f4b48, #b5aea7 55%, #6d6864); }
.device__key--a { left: calc(var(--pw) * -.011); top: 17.5%; height: 4.2%; }
.device__key--b { left: calc(var(--pw) * -.011); top: 25%; height: 7.6%; }
.device__key--c { left: calc(var(--pw) * -.011); top: 34%; height: 7.6%; }
.device__key--d { right: calc(var(--pw) * -.011); top: 27%; height: 11.5%; }

/* ---------- the trip link on the screen ---------- */
.scr {
  position: absolute; inset: var(--pi); border-radius: var(--sr); overflow: hidden; container-type: inline-size;
  color: #f3ebdf; font-family: var(--f-wide); font-stretch: 100%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), inset 0 0 6px rgba(0, 0, 0, .35);
}
.scr__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16, 20, 34, .3) 0%, rgba(16, 20, 34, 0) 18%, rgba(16, 20, 34, 0) 40%, rgba(14, 17, 29, .62) 66%, rgba(12, 14, 24, .9) 100%);
}
.scr__top { position: absolute; inset: 0 0 auto; padding: 4.6cqw 7.5cqw 0; }
.sb { display: flex; justify-content: space-between; align-items: center; height: 7cqw; font-size: 4.3cqw; font-weight: 600; letter-spacing: .01em; }
.sb__time { padding-left: 2.5cqw; }
.sb__icons { display: inline-flex; gap: 1.6cqw; align-items: center; padding-right: 1cqw; }
.sb__icons svg { height: 3.3cqw; width: auto; fill: currentColor; }
.ag { display: flex; align-items: center; gap: 2.6cqw; margin-top: 6cqw; }
.ag__logo { display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 50%; background: #16181f; box-shadow: 0 0 0 .3cqw rgba(243, 235, 223, .18); font: italic 4.2cqw/1 var(--f-agency); }
.ag__name { font-size: 3.1cqw; font-weight: 640; letter-spacing: .16em; text-transform: uppercase; }

.scr__body { position: absolute; left: 7.5cqw; right: 7.5cqw; bottom: 12cqw; transform-origin: 50% 70%; }
.tl-chip { display: inline-flex; align-items: center; gap: 1.8cqw; padding: 1.7cqw 3.4cqw 1.7cqw 2.8cqw; border-radius: 99px; background: #efe6d8; color: #1b1a1d; font-size: 3.35cqw; font-weight: 560; }
.tl-chip i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #e4a03b; box-shadow: 0 0 0 .8cqw rgba(228, 160, 59, .25); }
.tl-kick { margin-top: 5cqw; font-size: 2.75cqw; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(243, 235, 223, .78); }
.tl-title { margin-top: 1.6cqw; font: italic 400 13.4cqw/.94 var(--f-agency); letter-spacing: -.02em; }
.tl-sub { margin-top: 2.6cqw; font-size: 3.5cqw; color: rgba(243, 235, 223, .8); }
.tl-card { display: flex; align-items: center; gap: 3.4cqw; margin-top: 5cqw; padding: 3.2cqw 4cqw; border-radius: 3.6cqw; background: #efe6d8; color: #19181c; box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, .25); }
.tl-card__d { display: grid; justify-items: center; padding-right: 3.4cqw; border-right: 1px solid rgba(25, 24, 28, .18); font-size: 2.5cqw; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #6f6a64; }
.tl-card__d b { font: 400 7.6cqw/1 var(--f-agency); letter-spacing: 0; color: #19181c; }
.tl-card__x { display: grid; gap: .8cqw; flex: 1; }
.tl-card__k { font-size: 2.5cqw; font-weight: 640; letter-spacing: .14em; text-transform: uppercase; color: #c4801f; }
.tl-card__t { font: italic 5.2cqw/1.05 var(--f-agency); }
.tl-card__i { width: 4.4cqw; height: 4.4cqw; color: #c4801f; }
.scr__home { position: absolute; left: 50%; bottom: 2.4cqw; width: 36cqw; height: 1.4cqw; margin-left: -18cqw; border-radius: 99px; background: rgba(243, 235, 223, .85); }
.scr__island { position: absolute; left: 50%; top: 3.6cqw; width: 30cqw; height: 8.8cqw; margin-left: -15cqw; border-radius: 99px; background: #000; }
.scr__glare {
  position: absolute; inset: 0; border-radius: inherit; mix-blend-mode: screen; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 26%, transparent 38%, transparent 72%, rgba(255, 236, 214, .06) 100%);
}

/* ---------- hero copy ---------- */
.copy { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hl { position: absolute; inset: 0; font-size: var(--t-hl); font-weight: 520; font-stretch: 125%; line-height: .9; letter-spacing: -.035em; }
.hl__a, .hl__b { position: absolute; display: grid; }
.hl__a { left: var(--gut); top: calc(var(--k-pcy) * 100% - var(--ph) * .36); }
.hl__b { right: var(--gut); bottom: calc(100% - var(--k-pcy) * 100% - var(--ph) * .34); justify-items: end; text-align: right; }
.hl__ln { display: block; white-space: nowrap; will-change: transform; }
.cap { position: absolute; left: var(--gut); bottom: calc(var(--gut) + 3.6em); width: min(23vw, 300px); font-size: var(--t-cap); line-height: 1.42; font-stretch: 108%; }
.cap__k { font-family: var(--f-mono); font-size: var(--t-lab); letter-spacing: .12em; text-transform: uppercase; color: var(--dusk); margin-bottom: .9em; }
.cap__t { color: var(--bone-2); }
.cap::before { content: ""; display: block; width: 28px; height: 1px; background: var(--hair); margin-bottom: 1.2em; }
.lab { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(18px, 2.4vw, 34px)); font-family: var(--f-mono); font-size: var(--t-lab); line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-3); }
.lab--l { left: var(--gut); }
.lab--r { right: var(--gut); text-align: right; }

/* ---------- the statement over the dusk ---------- */
.say { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.say__ph { display: none; }
.say__sky, .cam__sky { position: absolute; inset: 0; opacity: 0; background: linear-gradient(170deg, rgba(22, 24, 44, .58) 0%, rgba(22, 24, 44, .26) 34%, rgba(22, 24, 44, 0) 56%); }
.say__dim, .cam__dim {
  position: absolute; inset: 0; opacity: 0;
  background:
    linear-gradient(0deg, rgba(14, 12, 16, .55) 0%, rgba(14, 12, 16, 0) 48%),
    linear-gradient(90deg, rgba(14, 12, 16, .66) 0%, rgba(14, 12, 16, .42) 55%, rgba(14, 12, 16, .3) 100%);
}
.say__in { position: absolute; left: var(--gut); right: var(--gut); top: clamp(96px, 15svh, 190px); }
.say__a, .say__b { font-size: var(--t-say); font-weight: 520; font-stretch: 125%; line-height: .95; letter-spacing: -.035em; }
.say__b { margin-top: .42em; }
.say__a .word, .say__b .word, .hl .word { display: inline-block; }
.say__cr { position: absolute; left: var(--gut); right: calc(50% + 160px); bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(18px, 2.4vw, 34px)); font-family: var(--f-mono); font-size: var(--t-lab); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-3); opacity: 0; }

.say__cr span { white-space: nowrap; }
.say__cr span + span::before { content: "· "; }

/* ---------- CTA pill ---------- */
.cta {
  position: fixed; z-index: 45; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(16px, 2.4vw, 30px));
  display: inline-flex; align-items: center; gap: 6px; padding: 6px; border-radius: 99px; text-decoration: none;
  background: rgba(30, 24, 22, .3); box-shadow: inset 0 0 0 1px rgba(244, 238, 230, .16), 0 10px 30px rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  translate: -50% 0;
}
.cta__pill { display: inline-flex; align-items: center; height: clamp(44px, 2.9vw, 56px); padding: 0 clamp(20px, 1.6vw, 28px); border-radius: 99px; background: var(--bone); color: var(--ink); font-size: clamp(15px, 1vw, 18px); font-weight: 600; font-stretch: 116%; letter-spacing: -.01em; white-space: nowrap; transition: background .3s; }
.cta__dot { display: grid; place-items: center; width: clamp(44px, 2.9vw, 56px); height: clamp(44px, 2.9vw, 56px); border-radius: 50%; background: var(--bone); color: var(--ink); transition: transform .5s var(--ease-out), background .3s; }
.cta__dot svg { transition: transform .5s var(--ease-out); }
.cta:hover .cta__dot { transform: translateX(3px); }
.cta:hover .cta__dot svg { transform: rotate(45deg); }
.cta:hover .cta__pill, .cta:hover .cta__dot { background: #fff; }
.cta:active .cta__pill, .cta:active .cta__dot { background: #e7ded2; }

/* film grain over everything */
.grain {
  position: fixed; inset: -50%; z-index: 50; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* initial states for the intro (only when JS runs with motion) */
.motion .hl__w, .motion .say__a, .motion .say__b, .motion .cap, .motion .lab, .motion .nav, .motion .cta,
.motion .hand { opacity: 0; }
.hl__w { display: inline-block; }
/* if the script never takes over, the loader steps aside on its own */
.js .loader { animation: loader-failsafe .01s 4s forwards; }
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }

/* lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* ---------- phone and portrait layouts ---------- */
@media (orientation: portrait) {
  :root { --ph: min(56svh, 118vw); --k-pcy: .5; --t-hl: clamp(40px, 12.4vw, 92px); --t-say: clamp(34px, 10.4vw, 80px); }
  .hl__a { top: auto; bottom: calc(100% - var(--k-pcy) * 100% + var(--ph) / 2 - .08em); }
  .ph { transform-origin: 50% 0%; }
  .hl__b { bottom: calc(100% - var(--k-pcy) * 100% - var(--ph) * .5 - .1em); transform: translateY(50%); }
  .cap, .lab { display: none; }
  .say__in { top: clamp(84px, 11svh, 150px); }
}
@media (max-width: 720px) {
  .cta__pill { height: 46px; padding: 0 22px; }
  .cta__dot { width: 46px; height: 46px; }
  .say__cr { right: var(--gut); bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); }
  .say__cr span { display: block; }
  .say__cr span + span::before { content: none; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .cap { display: none; }
}

/* ---------- reduced motion: a complete, still hero, then the statement as its own frame ---------- */
.rm .stage { overflow: visible; margin-bottom: max(100svh, 560px); }
.rm .say { top: 100%; bottom: auto; height: max(100svh, 560px); overflow: hidden; isolation: isolate; }
.rm .say__ph { display: block; position: absolute; inset: 0; z-index: -1; }
.rm .say__ph img { width: 100%; height: 100%; object-fit: cover; }
.rm .say__dim { opacity: .62; }
.rm .say__cr { opacity: 1; }