/* Shared base for the animated YouTube and live-stream pieces. Values come from tokens/tayfcet.css. */
html, body { margin: 0; padding: 0; overflow: hidden; }
body { background: transparent; -webkit-font-smoothing: antialiased; font-kerning: normal; }
.hf-root { position: relative; width: 1920px; height: 1080px; overflow: hidden; transform-origin: 0 0; color: var(--color-ink); font-family: var(--font-text); }
.clip { position: absolute; inset: 0; }
.ground { background: #FFFFFF; }
.ground.mint { background: var(--color-mint-white); }
svg.stage { position: absolute; inset: 0; width: 1920px; height: 1080px; overflow: visible; }

/* letters: one gradient across the word (TH.slice sets each letter's slice) */
.ch { display: inline-block; white-space: pre; }
.wi { display: inline-block; white-space: nowrap; }
.grad .ch { background-image: var(--gradient-brand); background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }

/* wordmark under the mark, dikey lockup proportions (TH sets top and font-size) */
.word { position: absolute; left: 0; right: 0; text-align: center; font-family: var(--font-display); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; white-space: nowrap; }

/* 60 degree wipe: --p 0 = hidden, 1 = shown; the edge leans like the 60 degree axis. --o = height / sqrt(3) */
.wipe { --p: 1; --o: 60px; clip-path: polygon(0 -2px, calc(var(--p) * (100% + var(--o))) -2px, max(0px, calc(var(--p) * (100% + var(--o)) - var(--o))) calc(100% + 40px), 0 calc(100% + 40px)); }
/* (max(): at --p 0 nothing is left of the box, so a hidden card shows no shadow wedge) */

/* overlay card: white, ink text (tayf mürekkebi), gradient only as an accent */
.card { position: absolute; background: #FFFFFF; border-radius: 24px; color: var(--color-ink);
  box-shadow: 0 22px 44px -20px rgba(0,68,90,.30), 0 2px 8px rgba(0,68,90,.07); }
.kick { font: 600 17px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--color-tayf-blue-700); }
.hairline { position: absolute; height: 3px; border-radius: 3px; background: var(--gradient-brand); }
.btn { display: inline-flex; align-items: center; gap: 12px; height: 64px; padding: 0 30px; border-radius: 999px; background: var(--color-tayf-blue-700); color: #fff; font: 600 26px/1 var(--font-text); white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 999px; background: var(--color-mint-100); color: var(--color-tayf-blue-800); font: 600 17px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
svg.tri { display: block; flex: none; overflow: visible; }

/* notes overlay (?mod=not): safe areas and specs, never part of the render */
.ov { position: absolute; pointer-events: none; display: none; z-index: 50; }
html.mod-not .ov { display: block; }
.ov.safe { border: 2px dashed rgba(29,111,140,.75); }
.ov.zone { border: 2px dashed rgba(29,111,140,.75); background: rgba(101,184,218,.08); }
.ov.tag { font: 600 15px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--color-tayf-blue-700); padding: 7px 9px; border-radius: 4px; white-space: nowrap; }

/* full-frame band between two 60 degree edges: --a leading edge, --b trailing edge (0 = left of the frame, 1 = past
   the right edge). --o = frame height / sqrt(3) = 623.54 px at 1080. Used by the chapter card and the stinger. */
.band { position: absolute; inset: 0; --a: 0; --b: 0; --o: 623.54px;
  clip-path: polygon(calc(var(--b) * (100% + var(--o))) 0, calc(var(--a) * (100% + var(--o))) 0, calc(var(--a) * (100% + var(--o)) - var(--o)) 100%, calc(var(--b) * (100% + var(--o)) - var(--o)) 100%); }