/* Giri reel motion kit — stylesheet.
   Colors, fonts, weights, spacing and radii are the Giri Design System
   (templates/tokens.css) at video scale: web px x3 for the 1080x1920 frame.
   The DS defines no display size, so display sizes come from the type scale below:
   the DS body (48px) times one ratio per scene, never a guessed size
   (skills/design-craft/references/typography.md; checked by scripts/type_scale.py).
   Font stacks are written out (not var()) because the HyperFrames font resolver
   does not expand CSS variables. */

:root {
  --paper: #F6F3EA;   /* Paper */
  --oat: #EBEBDF;     /* Oatmilk */
  --ink: #0D0D0D;     /* Ink */
  --ink-700: #3B352C; /* muted ink */
  --orange: #E9631A;  /* Atomic Orange */
  --t-sm: 39px;
  --t-md: 48px;
  --t-lg: 60px;
  --t-xl: 96px;
  --s1: 12px;
  --s2: 24px;
  --s3: 48px;
  --s4: 72px;
  --s5: 96px;
  --r-sm: 18px;
  --r-md: 36px;
  --r-lg: 72px;
}

/* ── scenes ─────────────────────────────────────────────────────────────── */

.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  box-sizing: border-box;
  font-family: "Geist", "Segoe UI", sans-serif;
  color: #0D0D0D;
}
.scene *,
.scene *::before,
.scene *::after {
  box-sizing: border-box;
}
/* Grounds. layer "full" = .scene.on-*, layer "split" = .panel-top.on-*,
   layer "overlay" = no ground at all (the talking head shows through the MOV). */
.on-paper { background: #F6F3EA; }
.on-oat { background: #EBEBDF; }
.on-ink { background: #0D0D0D; color: #F6F3EA; }
.on-orange { background: #E9631A; color: #F6F3EA; }

/* split: graphic panel in the top half, bottom half left clear for the presenter */
.panel-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 1080px;
  height: 960px;
  overflow: hidden;
}
.panel-center {
  position: absolute;
  inset: 220px 96px 48px 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
}

/* Instagram UI owns the top 220px and bottom 320px; 96px side margins */
.center {
  position: absolute;
  inset: 220px 96px 320px 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
}
/* overlay zones keep the presenter's face (the middle of the frame) clear */
.zone-top,
.zone-lower {
  position: absolute;
  left: 96px;
  right: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.zone-top { top: 250px; }
.zone-lower { bottom: 380px; }

/* ── type ───────────────────────────────────────────────────────────────── */

.display {
  margin: 0;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Type scale: size = base x ratio^n. Put one ratio class on the scene root - it sets the
   vibe and how big the jumps between levels are - and size every text with a .tsN step.
   Base = the scene's main reading text (the DS body unless the scene sets --base).
   Defaults on :root so a ratio class on any ancestor (scene root or panel) wins. */
:root { --base: 48px; --ratio: 1.414; }
.scale-golden { --ratio: 1.618; } /* dramatic, premium: hooks, hero words, title cards */
.scale-sqrt2 { --ratio: 1.414; }  /* modern, geometric: tech explainers (default) */
.scale-fourth { --ratio: 1.333; } /* balanced: headline + subhead */
.scale-third { --ratio: 1.25; }   /* soft: text-heavy cards, lists, UI mockups */
.scale-minor { --ratio: 1.2; }    /* subtle, editorial: quotes, magazine layouts */
/* Fixed display names = the default (sqrt2) steps 2-5; .dxl is also the DS title. */
.dxl { font-size: 96px; }
.d1 { font-size: 136px; }
.d2 { font-size: 192px; }
.d3 { font-size: 271px; }

.kicker {
  margin: 0;
  font-family: "Geist", "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 39px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3B352C;
}
.on-ink .kicker,
.on-orange .kicker { color: #EBEBDF; }

.body {
  margin: 0;
  font-family: "Geist", "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 48px;
  line-height: 1.55;
  text-wrap: balance; /* no lone last word on 2-4 line text */
}
.body-lg { font-size: 60px; line-height: 1.15; font-weight: 500; }
.accent { color: #E9631A; }
.muted { color: #3B352C; }
/* scale steps last, so a step beats the role classes' own sizes (.kicker, .body) */
.ts-2 { font-size: calc(var(--base) / var(--ratio) / var(--ratio)); }
.ts-1 { font-size: calc(var(--base) / var(--ratio)); }
.ts0 { font-size: var(--base); }
.ts1 { font-size: calc(var(--base) * var(--ratio)); }
.ts2 { font-size: calc(var(--base) * var(--ratio) * var(--ratio)); }
.ts3 { font-size: calc(var(--base) * var(--ratio) * var(--ratio) * var(--ratio)); }
.ts4 { font-size: calc(var(--base) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)); }
.ts5 { font-size: calc(var(--base) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)); }
.ts6 { font-size: calc(var(--base) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)); }
.ts7 { font-size: calc(var(--base) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)); }

/* split characters/words (Kit.split) */
.ch,
.wd {
  display: inline-block;
  will-change: transform, opacity, filter;
}

/* ── elements (Higgsfield grammar in DS colors) ────────────────────────── */

/* OUTLINE TYPE: fill = the ground color, stroke = ink; .fl floods orange over it */
.outline {
  position: relative;
  display: inline-block;
}
.outline .ol {
  display: block;
  color: #F6F3EA;
  -webkit-text-stroke: 8px #0D0D0D;
  paint-order: stroke fill;
}
.on-ink .outline .ol {
  color: #0D0D0D;
  -webkit-text-stroke-color: #F6F3EA;
}
.outline .fl {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  color: #E9631A;
  -webkit-text-stroke: 8px #E9631A;
  paint-order: stroke fill;
  clip-path: inset(0% 100% 0% 0%);
}

/* PILL: rounded orange capsule, paper text */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 144px;
  padding: 0 72px;
  border-radius: 72px;
  background: #E9631A;
  color: #F6F3EA;
  font-family: "Anton", sans-serif;
  font-size: 96px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.pill.sm {
  height: 96px;
  padding: 0 48px;
  font-size: 60px;
}
.pill.ink { background: #0D0D0D; color: #F6F3EA; }
.pill.paper { background: #F6F3EA; color: #0D0D0D; }

/* CHIP: solid paper plate so text reads over any footage */
.chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 36px 60px 42px;
  border-radius: 36px;
  background: #F6F3EA;
  color: #0D0D0D;
}

/* BADGE: rounded orange square, check draws itself */
.badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 36px;
  background: #E9631A;
}
.badge.sm { width: 84px; height: 84px; border-radius: 18px; }
.badge svg { width: 64%; height: 64%; overflow: visible; }
.badge path {
  fill: none;
  stroke: #F6F3EA;
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* BRACKETS: four orange corners around .bracketed */
.bracketed {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 60px;
}
.bk {
  position: absolute;
  width: 60px;
  height: 60px;
  border: 0 solid #E9631A;
  opacity: 0;
}
.bk-tl { left: 0; top: 0; border-left-width: 10px; border-top-width: 10px; border-top-left-radius: 18px; }
.bk-tr { right: 0; top: 0; border-right-width: 10px; border-top-width: 10px; border-top-right-radius: 18px; }
.bk-bl { left: 0; bottom: 0; border-left-width: 10px; border-bottom-width: 10px; border-bottom-left-radius: 18px; }
.bk-br { right: 0; bottom: 0; border-right-width: 10px; border-bottom-width: 10px; border-bottom-right-radius: 18px; }

/* STRIKE: thick orange bar through .struck text */
.struck {
  position: relative;
  display: inline-block;
}
.strike {
  position: absolute;
  left: -4%;
  top: 50%;
  width: 108%;
  height: 0.12em;
  margin-top: -0.06em;
  border-radius: 18px;
  background: #E9631A;
}

/* UNDERLINE: thick rounded bar under a line */
.underline {
  display: block;
  width: 100%;
  height: 24px;
  border-radius: 18px;
  background: #E9631A;
}

/* ── UI mockups ─────────────────────────────────────────────────────────── */

.window {
  position: absolute;
  overflow: hidden;
  border: 3px solid #0D0D0D;
  border-radius: 36px;
  background: #EBEBDF;
}
.window .bar {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 90px;
  padding: 0 36px;
  border-bottom: 3px solid #0D0D0D;
  background: #F6F3EA;
  font-weight: 500;
  font-size: 39px;
}
.window .bar i {
  display: block;
  width: 24px;
  height: 24px;
  border: 3px solid #0D0D0D;
  border-radius: 50%;
}
.window .bar span { margin-left: 18px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: 108px;
  padding: 0 48px;
  border: 3px solid #0D0D0D;
  border-radius: 18px;
  background: #F6F3EA;
  color: #0D0D0D;
  font-family: "Geist", "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 48px;
  white-space: nowrap;
}
.btn.primary { border-color: #E9631A; background: #E9631A; color: #F6F3EA; }
.btn.ink { background: #0D0D0D; color: #F6F3EA; }

.card {
  border: 3px solid #0D0D0D;
  border-radius: 36px;
  background: #EBEBDF;
  padding: 48px;
}
.on-oat .card { background: #F6F3EA; }

.rec-dot {
  display: inline-block;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #E9631A;
}

/* cursor hotspot = element origin; Kit moves it with x/y */
.cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 50;
  width: 72px;
  height: 72px;
  opacity: 0;
  pointer-events: none;
}
.cursor svg { width: 100%; height: 100%; overflow: visible; }
.cursor path { fill: #0D0D0D; stroke: #F6F3EA; stroke-width: 4; stroke-linejoin: round; }
.ripple {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 49;
  width: 96px;
  height: 96px;
  border: 6px solid #E9631A;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}