/* Cracked tokens for the effects studio (/creators, an effect, My videos, a video): Parade at night
   (research/flashstar/design-lab/system/parade.css), the same two colours as the homepage swapped: warm charcoal paper,
   cream ink, one amber and it is the next step, the two Funnel faces, no gradients and no grain. */
:root{
 --bg:#16130e;--bg-deep:#100e0a;--surface:#221e18;--surface-raised:#2a251e;--surface-pressed:#332d25;--media-bg:#0d0b08;
 --ink:#f4eee4;--muted:#b8b0a3;--faint:#948b7d;
 --line:rgba(244,238,228,.1);--line-strong:rgba(244,238,228,.18);
 --accent:#f5a524;--accent-hover:#ffb83d;--accent-pressed:#e8981a;--link:#f5b54a;
 --accent-tint:rgba(245,165,36,.14);--accent-ring:rgba(245,165,36,.5);
 --error:#ff8f7a;--error-surface:#3a241c;--success:#c5dc9a;--on-accent:#16130e;
 --glass:rgba(34,30,24,.6);--glass-strong:rgba(22,19,14,.86);--scrim:rgba(0,0,0,.82);--color-backdrop:rgba(10,8,6,.62);

 /* flat: Parade has no gradients; the scrim over media stays so words read on a video */
 --grad-surface:linear-gradient(#221e18,#221e18);
 --grad-raised:linear-gradient(#2a251e,#2a251e);
 --grad-accent:linear-gradient(#f5a524,#f5a524);
 --grad-scrim:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.5) 40%,rgba(0,0,0,0) 70%);
 --ambient:none;
 --noise:none;

 /* light: the top highlight and the hairline ring replace flat borders */
 --hi:inset 0 1px 0 rgba(244,238,228,.05);
 --ring:0 0 0 1px rgba(244,238,228,.08);
 --ring-media:inset 0 0 0 1px rgba(255,255,255,.1);

 /* elevation: several soft layers, never one hard drop */
 --elev-1:0 1px 1px rgba(0,0,0,.28),0 3px 8px -2px rgba(0,0,0,.38);
 --elev-2:0 1px 2px rgba(0,0,0,.3),0 10px 20px -8px rgba(0,0,0,.55),0 24px 48px -20px rgba(0,0,0,.6);
 --elev-3:0 2px 4px rgba(0,0,0,.3),0 18px 36px -14px rgba(0,0,0,.65),0 44px 88px -28px rgba(0,0,0,.75);
 --elev-sheet:0 -1px 0 rgba(255,255,255,.08),0 -28px 64px -16px rgba(0,0,0,.75);
 --glow-accent:0 24px 72px -28px rgba(245,165,36,.4);

 /* buttons: Parade's amber, flat, with a soft warm lift; everything else an outline */
 --btn-primary:0 14px 40px -18px rgba(245,165,36,.45);
 --btn-primary-press:0 4px 12px -8px rgba(0,0,0,.5);
 --btn-primary-hover:0 14px 36px -16px rgba(245,165,36,.55);
 --btn-secondary:inset 0 0 0 1px rgba(244,238,228,.16);

 /* type */
 --body:'Funnel Sans',-apple-system,BlinkMacSystemFont,sans-serif;--display:'Funnel Display',sans-serif;
 --text-caption:.75rem;--text-small:.875rem;--text-body:1rem;--text-lead:1.0625rem;--text-emphasis:1.25rem;
 --text-title:1.5rem;--text-sheet:1.75rem;--text-heading:2.125rem;--text-display:2.5rem;--text-desktop:3.5rem;
 --track-display:-.045em;--track-title:-.035em;--track-tight:-.015em;

 /* space and shape */
 --space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-xxl:48px;
 --radius-sm:10px;--radius-control:14px;--radius-media:20px;--radius-card:22px;--radius-sheet:28px;--radius-pill:999px;
 --nav-h:56px;--dock-h:136px;

 /* motion: presses are quick, entries are slow and heavy, sheets use a spring-like curve (Linear, Vaul) */
 /* design/MOTION.md: Emil Kowalski's ease-out for anything arriving or leaving, the Vaul curve for the sheet, press in
    fast and out slower, exits about half an entry. --rise is how far content travels in; reduced motion sets it to 0. */
 --ease-out:cubic-bezier(.23,1,.32,1);--ease-press:cubic-bezier(.23,1,.32,1);--ease-sheet:cubic-bezier(.32,.72,0,1);--ease-in-out:cubic-bezier(.77,0,.175,1);
 --dur-micro:100ms;--dur-release:160ms;--dur-hover:180ms;--dur-enter:400ms;--dur-sheet:500ms;--dur-pop:260ms;--dur-exit:220ms;--dur-reveal:700ms;
 --rise:8px;--press:.97;
 --z-nav:15;--z-sticky:20;
}
/* the one wordmark, "Cracked." with its amber dot (the same as public/premiere.css .pm-mark) */
.pm-mark{display:inline-flex;align-items:center;gap:2px;font:700 21px/1 var(--display);letter-spacing:-.02em;color:var(--ink);text-decoration:none;white-space:nowrap}
.pm-mark::after{content:"";width:7px;height:7px;margin-top:9px;border-radius:50%;background:var(--accent)}
/* Arriving from another Cracked page (public/arrive.js): no entry motion, the page is simply there. Entry motion stays for
   the first page of a visit (design/MOTION.md §1). The delays are the staggered entries, which would otherwise hold
   those pieces invisible for a beat. */
html.from-inside{--dur-enter:0s}
html.from-inside :is(.op-hero-top,.op-hero-copy,.op-trio,.effect-grid>*,#journey-form){animation-delay:0s}