/* ════════════════════════════════════════════════════════════════
   UNICORN -- creative OS sneak peek. Additive over the site's
   style.css (native nav/cursor/grain/footer/to-top). Site type
   (Ubuntu Sans Mono). Restrained scale. Peach -> lilac, one accent,
   peach lean. No strokes around boxes except the visible card ring.
   ════════════════════════════════════════════════════════════════ */

@property --uni-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.unicorn-body {
  --peach: #E8956A;                 /* --lilac is #c8a2ff from style.css */
  --uni-glow: linear-gradient(118deg, var(--peach), var(--lilac));
  --uni-glow-rev: linear-gradient(118deg, var(--lilac), var(--peach));
  --uni-2: #141019;
  background: var(--void);
  color: var(--text);
}

.uni-hero__title, .uni-sec__head h2, .uni-quote, .uni-def p,
.uni-card__k, .uni-stage__k, .uni-end, .uni-pull, .uni-frame__tie {
  font-family: var(--f-display); font-weight: 800; letter-spacing: -0.025em;
  text-wrap: balance; overflow-wrap: break-word; hyphens: none; margin: 0;
}
.uni-hero__title em, .uni-quote em, .uni-def p em, .uni-tl__i h3 em {
  font-style: normal; background: var(--uni-glow);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.uni-say em, .uni-split__copy p em, .uni-frame__read em, .uni-hero__lede em { font-style: normal; color: var(--text); }
.uni-tag em { font-style: normal; color: var(--peach); }

.whisper {
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.26em; color: var(--text-mute);
}
.whisper--accent { background: var(--uni-glow); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* the pixel unicorn -- CSS, not an image. cute, small, peach + lilac */
.uni-px {
  display: block; width: clamp(46px, 5vw, 72px); height: auto; margin: 0 0 18px;
  shape-rendering: crispEdges;
}
.uni-px .px-l { fill: var(--lilac); }
.uni-px .px-p { fill: var(--peach); }
.uni-grad { background: var(--uni-glow); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── ① hero ──────────────────────────────────────────────────── */
.uni-hero {
  position: relative; min-height: 100svh;
  padding: clamp(120px,17vh,200px) clamp(20px,5vw,80px) clamp(56px,9vh,104px);
  display: flex; flex-direction: column; justify-content: center; gap: clamp(26px,5vh,52px);
  max-width: 1460px; margin: 0 auto; overflow: hidden;
}
.uni-hero__inner { display: grid; grid-template-columns: minmax(0,0.78fr) minmax(0,1.22fr); align-items: center; gap: 0 clamp(32px,5vw,72px); }
@media (max-width: 940px) { .uni-hero__inner { grid-template-columns: 1fr; gap: 36px; } }
.uni-hero__copy { display: flex; flex-direction: column; gap: clamp(16px,3vh,26px); }
.uni-eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.uni-eyebrow__txt { font-family: var(--f-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.26em; background: var(--uni-glow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.uni-caret { width: 8px; height: 15px; background: var(--peach); display: inline-block; animation: uni-blink 1.05s steps(1) infinite; }
@keyframes uni-blink { 50% { opacity: 0; } }
.uni-hero__title { font-size: clamp(46px,7vw,92px); line-height: 0.96; letter-spacing: -0.04em; color: var(--text); }
.uni-hero__lede { font-family: var(--f-mono); font-size: clamp(13px,1.1vw,15px); line-height: 1.6; color: var(--text-dim); margin: 0; max-width: 38ch; }

.uni-term {
  position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--uni-2);
  /* colored peach/lilac halo retired 2026-06-06 — only the neutral
     depth shadow remains so the video lifts off the page without an
     ambient glow behind it. */
  box-shadow:
    0 40px 110px -38px rgba(0,0,0,0.85);
}
.uni-term video { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; transform: scale(1.015); }
.uni-term figcaption, .uni-cine figcaption {
  position: absolute; inset: auto 0 0 0; padding: 52px 22px 18px;
  background: linear-gradient(0deg, rgba(0,0,0,0.78), transparent);
  pointer-events: none; z-index: 2;
}
.uni-tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-dim); }

.uni-scroll {
  position: absolute; left: 50%; bottom: clamp(20px, 4vh, 44px); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.24em; color: var(--text-mute); text-decoration: none; transition: color 0.3s var(--ease);
}
.uni-scroll:hover { color: var(--peach); }
.uni-scroll svg { animation: uni-bob 2.4s ease-in-out infinite; }
@keyframes uni-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(3px)} }

/* audio buttons = the bold call to action: filled peach->lilac
   gradient, black text. the "clip" tag is the lighter one: gradient
   stroke + gradient text on a blurred dark backdrop (no opaque fill). */
.uni-sound {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  display: inline-flex; align-items: center; padding: 9px 16px; border: 0; border-radius: 100px;
  background: var(--uni-glow); color: var(--void); cursor: pointer; font-family: var(--f-mono);
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em;
  transition: filter 0.3s var(--ease);
}
.uni-sound:hover { filter: brightness(1.08); }
.uni-sound__on { display: none; }
.uni-sound[aria-pressed="true"] .uni-sound__on { display: inline; }
.uni-sound[aria-pressed="true"] .uni-sound__off { display: none; }

/* clip tag = subtle (back to the old look): plain dark pill, muted
   text, no gradient. the audio buttons are the ones that stand out. */
.uni-cliptag {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  display: inline-flex; padding: 7px 11px; border-radius: 100px; pointer-events: none;
  background: rgba(8,7,12,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--f-mono); font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.22em; color: var(--text);
}

/* ── section frame ───────────────────────────────────────────── */
.uni-sec { padding: clamp(78px,12vh,160px) clamp(20px,5vw,80px); }
.uni-sec__in { max-width: 1140px; margin: 0 auto; }
.uni-sec__head { margin: 0 0 clamp(32px,5vh,60px); }
.uni-sec__head .whisper { display: block; margin-bottom: 20px; }
.uni-sec__head h2 { font-size: clamp(30px,4.6vw,58px); line-height: 1.04; max-width: 20ch; color: var(--text); }

/* ── ② what it is -- cards with a clearly visible ring ───────── */
.uni-grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,2vw,22px); align-items: stretch; }
@media (max-width: 820px) { .uni-grid3 { grid-template-columns: 1fr; } }
.uni-card {
  position: relative; isolation: isolate; background: var(--uni-2);
  border-radius: var(--radius); padding: clamp(20px,3vh,30px);
  display: flex; flex-direction: column;
  box-shadow: 0 0 28px -16px color-mix(in oklch, var(--peach) 50%, transparent);
}
.uni-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--uni-ang), var(--peach), var(--lilac), var(--peach), var(--lilac), var(--peach));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.95; animation: uni-ring 6s linear infinite;
}
@keyframes uni-ring { to { --uni-ang: 360deg; } }
.uni-card__mark { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; object-position: 50% 8%; border-radius: 10px; margin-bottom: 16px; }
.uni-card--quest .uni-card__mark { object-position: 50% 8%; }
.uni-card--keep .uni-card__mark { object-position: 50% 7%; }
.uni-peach { color: var(--peach); }
.uni-card__k { display: block; font-size: clamp(15px,1.5vw,18px); letter-spacing: -0.01em; color: var(--text); margin-bottom: 12px; }
.uni-card p { font-family: var(--f-mono); font-size: 14px; line-height: 1.6; color: var(--text-dim); margin: 0; }
.uni-say { font-family: var(--f-mono); font-size: clamp(15px,1.5vw,18px); line-height: 1.65; color: var(--text-dim); margin: clamp(34px,5vh,60px) 0 0; max-width: 60ch; }
.uni-say em { font-style: normal; color: var(--text); }

/* ── ④ frame ─────────────────────────────────────────────────── */
.uni-frame .uni-sec__in { max-width: 1000px; }
.uni-frame > .uni-sec__in > .whisper { display: block; margin-bottom: clamp(24px,4vh,44px); }
.uni-quote { font-size: clamp(24px,3.4vw,44px); line-height: 1.14; color: var(--text); max-width: 22ch; }
.uni-quote em { background: var(--uni-glow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.uni-quote__by { font-family: var(--f-mono); font-size: 12px; color: var(--text-mute); margin: clamp(20px,3vh,32px) 0 0; letter-spacing: 0.04em; }
.uni-frame .uni-cine { margin: clamp(40px,6vh,80px) auto 0; max-width: 880px; }
.uni-frame .uni-cine--dim video { filter: brightness(0.55) saturate(0.94); }
.uni-frame__read { font-family: var(--f-mono); font-size: clamp(15px,1.5vw,19px); line-height: 1.62; color: var(--text-dim); max-width: 52ch; margin: clamp(38px,6vh,72px) 0 0; }
.uni-frame__read em { font-style: normal; color: var(--text); }
.uni-frame__tie { font-size: clamp(20px,2.6vw,34px); line-height: 1.18; color: var(--text); max-width: 24ch; margin: clamp(26px,4vh,46px) 0 0; }
.uni-frame__tie .whisper { display: block; font-weight: 600; margin-top: 14px; letter-spacing: 0.22em; }

/* ── ⑤ exploration ───────────────────────────────────────────── */
.uni-def { margin: clamp(8px,2vh,18px) 0 clamp(24px,4vh,44px); }
.uni-def p { font-size: clamp(17px,1.9vw,24px); line-height: 1.18; color: var(--text-dim); max-width: 34ch; }
.uni-def p em { background: var(--uni-glow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.uni-lead { font-family: var(--f-mono); font-size: clamp(15px,1.5vw,18px); line-height: 1.66; color: var(--text-dim); margin: 0 0 clamp(28px,5vh,52px); max-width: 62ch; }
.uni-still { margin: clamp(26px,4vh,52px) 0; border-radius: var(--radius); overflow: hidden; box-shadow: 0 40px 90px -45px rgba(0,0,0,0.8); }
.uni-still img { width: 100%; height: auto; display: block; }
.uni-still--wide img { aspect-ratio: 16/10; object-fit: cover; object-position: 50% 0; }
.uni-still figcaption { padding: 13px 18px; background: var(--uni-2); }
.uni-still figcaption .whisper { background: var(--uni-glow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.uni-quotes { list-style: none; margin: clamp(26px,4vh,52px) 0 0; padding: 0; display: grid; gap: clamp(16px,3vh,26px); max-width: 62ch; }
.uni-q { padding-left: 20px; border-left: 2px solid color-mix(in oklch, var(--peach) 55%, transparent); }
.uni-q p { font-family: var(--f-mono); font-size: clamp(15px,1.5vw,19px); line-height: 1.55; color: var(--text); margin: 0; }
.uni-pull { font-size: clamp(20px,2.6vw,34px); line-height: 1.22; color: var(--text); max-width: 28ch; margin: clamp(40px,6vh,80px) 0 clamp(24px,4vh,40px); }
.uni-pull::before { content: ""; display: block; width: 38px; height: 3px; border-radius: 3px; background: var(--uni-glow); margin-bottom: 22px; }

/* ── split ───────────────────────────────────────────────────── */
.uni-split { display: grid; grid-template-columns: minmax(0,0.82fr) minmax(0,1.18fr); gap: clamp(28px,5vw,72px); align-items: center; }
.uni-split--rev { direction: rtl; }
.uni-split--rev > * { direction: ltr; }
@media (max-width: 880px) { .uni-split, .uni-split--rev { grid-template-columns: 1fr; direction: ltr; } }
.uni-split__copy { display: grid; gap: 16px; }
.uni-split__copy p { font-family: var(--f-mono); font-size: clamp(14px,1.2vw,16px); line-height: 1.66; color: var(--text-dim); margin: 0; max-width: 42ch; }

/* ── footage block ───────────────────────────────────────────── */
.uni-cine { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--uni-2); box-shadow: 0 40px 100px -45px rgba(0,0,0,0.85); }
.uni-cine video { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; transform: scale(1.015); }

/* ── pivots -- start = lilac, now = peach ────────────────────── */
.uni-tl { list-style: none; margin: 0; padding: 0; }
.uni-tl__i { display: grid; grid-template-columns: clamp(50px,7vw,84px) 1fr; gap: clamp(16px,3vw,36px); padding: clamp(15px,2.2vh,24px) 0; border-top: 1px solid var(--rule); }
.uni-tl__i:last-child { border-bottom: 1px solid var(--rule); }
.uni-tl__k { font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--text-mute); padding-top: 5px; }
.uni-tl__i:first-child .uni-tl__k { color: var(--lilac); }
.uni-tl__i--now .uni-tl__k { color: var(--peach); }
.uni-tl__i h3 { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(15px,1.6vw,21px); line-height: 1.14; color: var(--text); margin: 0; }
.uni-tl__i h3 em { background: var(--uni-glow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.uni-tl__i p { font-family: var(--f-mono); font-size: 12px; line-height: 1.5; color: var(--text-mute); margin: 6px 0 0; }

/* ── shown clips -- bigger, asymmetric, the sound one biggest ── */
.uni-shown { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2.2vw,26px); margin-top: clamp(44px,8vh,100px); }
@media (max-width: 820px) { .uni-shown { grid-template-columns: 1fr; } }
.uni-shown .uni-cine video { aspect-ratio: 16/10; }
.uni-shown__big { grid-column: 1 / -1; }
.uni-shown__big video { aspect-ratio: 16/9 !important; }
.uni-shown .uni-cine--dim video { filter: brightness(0.46) contrast(1.08); }

/* ── ⑧ status ────────────────────────────────────────────────── */
.uni-stage-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2.4vw,28px); }
@media (max-width: 800px) { .uni-stage-grid { grid-template-columns: 1fr; } }
.uni-stage { background: var(--uni-2); border-radius: var(--radius); padding: clamp(24px,4vh,38px); }
.uni-stage__k { display: block; font-size: clamp(17px,1.9vw,24px); color: var(--text); margin-bottom: 20px; }
.uni-stage--now .uni-stage__k { color: var(--peach); }
.uni-stage--next .uni-stage__k { color: var(--lilac); }
.uni-stage ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.uni-stage li { font-family: var(--f-mono); font-size: 14px; line-height: 1.45; color: var(--text-dim); padding-left: 18px; position: relative; }
.uni-stage li::before { content: "\203A"; position: absolute; left: 0; color: var(--peach); }
.uni-stage--next li::before { color: var(--lilac); }

/* the old clamp capped at 150px, so every increase did nothing.
   higher ceiling = real breathing room above this line. */
.uni-end { font-size: clamp(22px,3vw,38px); line-height: 1.14; color: var(--text); margin: clamp(130px,20vh,300px) auto 0; max-width: 26ch; text-align: center; }

/* CTA -- site standard: default = void fill + gradient stroke +
   gradient text; hover = gradient fill + void text. (peach->lilac) */
.uni-cta {
  position: relative; display: block; width: max-content; margin: clamp(40px,7vh,72px) auto 0;
  padding: 17px 32px; border-radius: 100px; text-decoration: none;
  font-family: var(--f-mono); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  background: var(--uni-glow);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: color 0.3s var(--ease);
}
.uni-cta::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: var(--uni-glow);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.uni-cta::after { content: "  \2192"; }
.uni-cta:hover {
  background: var(--uni-glow);
  -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--void);
}

/* ── native chrome recoloured for this page (peach lean) ─────── */
.unicorn-body .nav { animation: none !important; box-shadow: none !important; }
/* side-only glow at low opacity — no full-perimeter halo or 1px stroke
   so the nav matches the landing page subtlety. */
@keyframes uni-navglow {
  0%,100% {
    box-shadow:
      -14px 0 50px -14px color-mix(in oklch, var(--peach) 22%, transparent),
       14px 0 50px -14px color-mix(in oklch, var(--peach) 22%, transparent);
  }
  50% {
    box-shadow:
      -18px 0 60px -12px color-mix(in oklch, var(--peach) 32%, transparent),
       18px 0 60px -12px color-mix(in oklch, var(--peach) 32%, transparent);
  }
}
.unicorn-body .to-top { border-color: color-mix(in oklch, var(--peach) 50%, transparent) !important; color: var(--peach) !important; }
.unicorn-body .to-top:hover { background: transparent !important; box-shadow: none !important; }
.unicorn-body .to-top svg { stroke: var(--peach) !important; }
/* footer: only "w/ soul" is gradient; eyebrow + email stay plain,
   email grows a gradient underline on hover (the stroke turns
   gradient) */
.unicorn-body .foot__title em {
  background: var(--uni-glow); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* keep .foot__mail fully native (consistent with the other footer
   buttons); only swap its hover gradient stroke to peach -> lilac */
.unicorn-body .foot__mail:hover {
  background:
    linear-gradient(var(--void), var(--void)) padding-box,
    linear-gradient(92deg, var(--peach), var(--lilac)) border-box;
  border: 1px solid transparent;
  color: var(--text);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .uni-caret, .uni-scroll svg, .uni-card::before, .unicorn-body .nav { animation: none !important; }
}

/* tiny music credit under the hero video, right aligned, very faint */
.uni-credit {
  grid-column: 2; margin: 3px 2px 0 0; text-align: right;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: lowercase; color: var(--text-mute); opacity: 0.75;
}
@media (max-width: 940px) { .uni-credit { grid-column: 1; text-align: left; } }