/* Bassignac — coming soon
   Tokens live in :root; every value below is the one specified in the design brief. */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/figtree-latin.woff2') format('woff2');
  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: 'Figtree';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/figtree-latin-ext.woff2') format('woff2');
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --stage: #000;
  --veil: rgba(4, 4, 8, .33);
  --accent: #F5479F;
  --ink-45: rgba(255, 255, 255, .45);
  --ink-60: rgba(255, 255, 255, .6);
  --ink-72: rgba(255, 255, 255, .72);
  --ink-82: rgba(255, 255, 255, .82);
  --ink-95: rgba(255, 255, 255, .95);
  /* One knob for the whole centre block — mark, logline, pill, email and the
     gaps between them all scale from it. 1 = the original sizes. */
  --block: .9;
  --edge-x: clamp(18px, 3vw, 40px);
  --edge-y: clamp(18px, 3vh, 34px);
  --font: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--stage);
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: var(--font);
  font-weight: 400;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .7);
  outline-offset: 3px;
}

/* ── Stage ─────────────────────────────────────────────────────────────── */

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--stage);
  cursor: crosshair;
}

/* 1. The film */
.reel { position: absolute; inset: 0; }

.clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

/* 2. Veil */
.veil { position: absolute; inset: 0; background: var(--veil); }

/* 3. Centre column */
.column {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* The group sits low, not centred — it reads against the lower third of the
     film and leaves the frame's subject visible above it. The bottom padding
     is what keeps it clear of the player row and the wordmark. */
  justify-content: flex-end;
  padding: 6vh 5vw clamp(84px, 13vh, 150px);
  text-align: center;
}

/* Everything the emblem carries with it. The drag transform lands here, not on
   the emblem, so the mark, the wordmark, the logline, the pill and the email
   travel as one piece. */
.group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(clamp(18px, 2.4vh, 30px) * var(--block));
  will-change: transform;
}

/* ── The mark ──────────────────────────────────────────────────────────── */

/* No card any more: the lock-up carries the centre on its own, so it gets a
   little more presence and a deeper shadow to hold up against the footage. */
/* The lock-up is two files so the emblem can be picked up on its own. The
   percentages below are the geometry of the original single SVG: the emblem is
   77.7963% of the lock-up's width, the wordmark 97.7222%, and the gap between
   them 4.9444% of that same width. Both viewBoxes stay centred on the original
   x axis, so at rest the pair is pixel-identical to the file it came from. */
.lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(clamp(180px, 21vw, 320px) * var(--block));
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  animation: rise 1.2s 0s ease both;
}
.lockup img {
  display: block;
  width: 100%;
  height: auto;
  opacity: .9;
  filter: drop-shadow(0 18px 38px rgba(0, 0, 0, .55));
}

.lockup__mark {
  display: block;
  width: 77.7963%;
  cursor: grab;
  touch-action: none;          /* the pointer belongs to the drag, not the page */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.lockup__mark:active,
.lockup__mark.is-held { cursor: grabbing; }
.lockup__mark.is-held img { opacity: 1; }
.lockup__mark img { transition: opacity .25s ease; }
.lockup__mark:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 6px; }

.lockup__word {
  width: 97.7222%;
  margin-top: 4.9444%;
}

/* ── Text ──────────────────────────────────────────────────────────────── */

.logline {
  margin: 0;
  font-size: calc(clamp(11px, 1.1vw, 16px) * var(--block));
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink-72);
  margin-right: -.34em;
  animation: rise 1.2s .1s ease both;
}

.pill {
  display: flex;
  align-items: center;
  gap: calc(7px * var(--block));
  margin: 0;
  padding: calc(5px * var(--block)) calc(13px * var(--block));
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  /* floored: 9px * .6 would be 5.4px, below the legibility of tracked caps */
  font-size: max(7px, calc(9px * var(--block)));
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #fff;
  animation: rise 1.2s .2s ease both;
}
.pill__dot {
  width: calc(7px * var(--block));
  height: calc(7px * var(--block));
  border-radius: 999px;
  background: var(--accent);
  animation: breathe 2.6s ease-in-out infinite;
}

.email {
  margin-top: calc(14px * var(--block));
  font-size: calc(clamp(12px, 1.05vw, 15px) * var(--block));
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-82);
  transition: color .5s ease;
  animation: rise 1.2s .3s ease both;
}
.email:hover, .email:focus-visible { color: #fff; }

/* ── Player ────────────────────────────────────────────────────────────── */

.player {
  position: absolute;
  left: var(--edge-x);
  bottom: max(var(--edge-y), env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-60);
  cursor: pointer;
  transition: color .5s ease;
  animation: fade 1.6s .8s ease both;
}
.player:hover { color: var(--ink-95); }

.player__toggle {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: inherit;
  display: block;
}
.player__glyph {
  display: block;
  width: 10px;
  font-size: 9px;
  line-height: 1;
  text-align: center;
}

.player__label {
  font-size: 9px;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .8;
}

.track {
  position: relative;
  width: clamp(70px, 9vw, 120px);
  height: 1px;
  background: rgba(255, 255, 255, .25);
}
.track__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  width: 0%;
  background: var(--accent);
}
/* A real <input type="range"> for keyboard seeking, stripped of every native
   part and laid over the 1px line. Kept transparent rather than opacity:0 so
   the focus ring still paints. */
.track__seek {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 16px;
  margin: 0;
  padding: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
}
.track__seek::-webkit-slider-runnable-track { height: 16px; background: transparent; border: 0; }
.track__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 16px; background: transparent; border: 0; }
.track__seek::-moz-range-track { height: 16px; background: transparent; border: 0; }
.track__seek::-moz-range-progress { background: transparent; }
.track__seek::-moz-range-thumb { width: 10px; height: 16px; background: transparent; border: 0; }
.track__seek:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 4px; }

/* ── Bottom-right wordmark ─────────────────────────────────────────────── */

/* ── The studio door ───────────────────────────────────────────────────── */

/* Top right, opposite the wordmark. Borrows the pill's glass so it reads as
   part of the page rather than a control bolted onto it, and says only the one
   word — what it opens is nobody else's business. */
.login {
  position: absolute;
  top: max(var(--edge-y), env(safe-area-inset-top, 0px));
  right: var(--edge-x);
  z-index: 3;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  font-size: 9.5px;
  letter-spacing: .28em;
  text-indent: .28em;
  text-transform: uppercase;
  color: var(--ink-72);
  animation: fade 1.6s .9s ease both;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}

.login:hover,
.login:focus-visible {
  color: var(--ink-95);
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .34);
}

.mark {
  position: absolute;
  right: var(--edge-x);
  bottom: max(var(--edge-y), env(safe-area-inset-bottom, 0px));
  margin: 0;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-45);
  animation: fade 1.6s .6s ease both;
}

/* ── Motion ────────────────────────────────────────────────────────────── */

@keyframes rise   { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
@keyframes fade   { from { opacity: 0 } to { opacity: 1 } }
@keyframes breathe { 0%, 100% { opacity: .5 } 50% { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  .lockup, .logline, .pill, .email, .player, .mark, .login { animation: none; }
  .pill__dot { animation: none; opacity: 1; }
  .clip { transition: none; }
}

/* ── Narrow viewports ──────────────────────────────────────────────────── */

/* Keeps the two bottom rows from colliding on narrow screens. Every string
   stays on the page. */
@media (max-width: 639px) {
  .mark { font-size: 10px; letter-spacing: .24em; }
}
@media (max-width: 400px) {
  .track { width: clamp(48px, 14vw, 70px); }
}

@media (max-height: 460px) {
  .column { gap: clamp(10px, 1.6vh, 18px); padding: 4vh 5vw clamp(56px, 14vh, 84px); }
  .email { margin-top: 6px; }
}