/* ══════════════════════════════════════════════════════════════
   "Gehen wir rein": Overlay
   Designraster: 3840 × 2160. Alle Maße sind echte 4K-Pixel,
   die Stage wird per JS auf die Fenstergröße skaliert.
   ══════════════════════════════════════════════════════════════ */

@font-face{font-family:'GWR Display';src:url('fonts/spacegrotesk-700.woff2') format('woff2');font-weight:700;font-display:block}
@font-face{font-family:'GWR Display';src:url('fonts/spacegrotesk-500.woff2') format('woff2');font-weight:500;font-display:block}
@font-face{font-family:'GWR Body';src:url('fonts/poppins-400.woff2') format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'GWR Body';src:url('fonts/poppins-600.woff2') format('woff2');font-weight:600;font-display:block}
@font-face{font-family:'GWR YT';src:url('fonts/roboto-400.woff2') format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'GWR YT';src:url('fonts/roboto-500.woff2') format('woff2');font-weight:500;font-display:block}
@font-face{font-family:'GWR YT';src:url('fonts/roboto-700.woff2') format('woff2');font-weight:700;font-display:block}

:root{
  /* AgentZ */
  --green:#00dc82; --green-lt:#4dffab; --green-dk:#00a862;
  --black:#0a0a0a; --white:#fafafa; --muted:#8b968f;
  --stroke:rgba(255,255,255,.10);
  --shadow:0 24px 70px rgba(0,0,0,.55);

  /* YouTube hell */
  --yt-bg:#fff; --yt-ink:#0f0f0f; --yt-ink2:#606060;
  --yt-fill:#f2f2f2; --yt-line:#d9d9d9;
  --yt-shadow:0 30px 90px rgba(0,0,0,.42),0 6px 18px rgba(0,0,0,.14);

  --font-d:'GWR Display','Space Grotesk',system-ui,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji';
  --font-b:'GWR Body','Poppins',system-ui,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji';
  --font-y:'GWR YT',Roboto,Arial,system-ui,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji';

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --back:cubic-bezier(.34,1.56,.64,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;background:transparent!important;overflow:hidden}
body{font-family:var(--font-b);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

.stage{
  position:fixed;top:0;left:0;width:3840px;height:2160px;
  transform-origin:0 0;
  transform:scale(var(--scale,1)) translate(var(--ox,0px),var(--oy,0px));
  pointer-events:none;
}

.safezone{display:none}
.show-safe .safezone{
  display:block;position:absolute;left:0;right:0;bottom:0;height:432px;
  border-top:3px dashed rgba(0,220,130,.6);background:rgba(0,220,130,.05);
}
.show-safe .safezone span{position:absolute;top:16px;left:24px;font:600 30px var(--font-b);color:var(--green);letter-spacing:.08em}

/* ══════════════════════════════════════════════════════════════
   BAUCHBINDEN: AgentZ-Look
   ══════════════════════════════════════════════════════════════ */
.lt{
  position:absolute;bottom:170px;display:flex;align-items:stretch;
  opacity:0;visibility:hidden;
  transition:opacity .26s var(--ease-io),visibility 0s .26s;
}
.lt--left {left:170px}
.lt--right{right:170px;flex-direction:row-reverse}
.lt.is-in{opacity:1;visibility:visible;transition:opacity .28s var(--ease-io),visibility 0s}

.lt__bar{
  width:16px;border-radius:8px;
  background:linear-gradient(180deg,var(--green-lt),var(--green));
  box-shadow:0 0 40px rgba(0,220,130,.75);
  transform:scaleY(0);transform-origin:bottom center;
  transition:transform .2s var(--ease-io);
}
.lt.is-in .lt__bar{transform:scaleY(1);transition:transform .4s var(--ease)}

.lt__panel{
  position:relative;overflow:hidden;
  margin-left:20px;min-width:700px;max-width:1580px;
  background:linear-gradient(100deg,rgba(10,10,10,.94),rgba(20,24,21,.90));
  border:2px solid var(--stroke);border-radius:12px;
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06);
  clip-path:inset(0 100% 0 0);
  transition:clip-path .24s var(--ease-io);
}
.lt--right .lt__panel{margin-left:0;margin-right:20px;clip-path:inset(0 0 0 100%)}
.lt.is-in .lt__panel{clip-path:inset(0 0 0 0);transition:clip-path .5s var(--ease) .08s}

.lt__sheen{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(0,220,130,.16) 48%,rgba(255,255,255,.10) 52%,transparent 62%);
  transform:translateX(-120%);
}
.lt.is-in .lt__sheen{animation:sheen 1s var(--ease) .38s both}
@keyframes sheen{to{transform:translateX(120%)}}

.lt__inner{padding:40px 62px 44px}
.lt--right .lt__inner{text-align:right}
.lt__head{display:flex;align-items:center;gap:26px}
.lt--right .lt__head{flex-direction:row-reverse}

.lt__name{
  font:700 82px/1 var(--font-d);letter-spacing:-.015em;color:var(--white);
  text-shadow:0 4px 24px rgba(0,0,0,.6);
  opacity:0;transform:translateX(-34px);
  transition:opacity .14s linear,transform .14s var(--ease-io);
}
.lt--right .lt__name{transform:translateX(34px)}
.lt.is-in .lt__name{opacity:1;transform:none;transition:opacity .36s linear .26s,transform .5s var(--ease) .26s}

.lt__role{
  font:600 24px/1 var(--font-b);letter-spacing:.16em;
  color:var(--black);background:var(--green);
  padding:11px 20px 10px;border-radius:6px;white-space:nowrap;
  box-shadow:0 0 30px rgba(0,220,130,.45);
  opacity:0;transform:translateY(10px) scale(.9);
  transition:opacity .12s linear,transform .12s var(--ease-io);
}
.lt.is-in .lt__role{opacity:1;transform:none;transition:opacity .28s linear .4s,transform .45s var(--back) .4s}

.lt__slogan{
  margin-top:16px;max-width:1420px;
  font:400 38px/1.28 var(--font-b);color:#c8d3cc;
  text-shadow:0 2px 14px rgba(0,0,0,.5);
  opacity:0;transform:translateX(-26px);
  transition:opacity .14s linear,transform .14s var(--ease-io);
}
.lt--right .lt__slogan{transform:translateX(26px);margin-left:auto}
.lt.is-in .lt__slogan{opacity:1;transform:none;transition:opacity .4s linear .38s,transform .55s var(--ease) .38s}

.lt__progress{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.07)}
.lt__progress i{
  display:block;height:100%;width:100%;transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,var(--green),var(--green-lt));
  box-shadow:0 0 18px rgba(0,220,130,.7);
}
.lt--right .lt__progress i{transform-origin:right center}

/* ══════════════════════════════════════════════════════════════
   YOUTUBE-KARTEN
   Alle Karten liegen übereinander: es ist immer nur eine sichtbar.
   ══════════════════════════════════════════════════════════════ */
.yt{
  position:absolute;left:0;right:0;bottom:175px;
  display:grid;justify-items:center;align-items:end;
}
.ytc{
  grid-area:1/1;
  background:var(--yt-bg);color:var(--yt-ink);
  font-family:var(--font-y);
  border-radius:40px;padding:40px 52px;
  box-shadow:var(--yt-shadow);
  position:relative;
  opacity:0;visibility:hidden;
  transform:translateY(64px) scale(.94);
  transition:opacity .18s linear,transform .22s var(--ease-io),visibility 0s .22s;
}
.ytc.is-on{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .26s linear,transform .42s var(--back),visibility 0s;
}
.ytc__row{display:flex;align-items:center;gap:52px}
.ytc__row--col{flex-direction:column;align-items:stretch;gap:26px}
.ytc__say{
  font:500 40px/1.2 var(--font-y);color:var(--yt-ink);white-space:nowrap;
  opacity:0;transform:translateX(-14px);
  transition:opacity .2s linear,transform .3s var(--ease);
}
.ytc.is-on .ytc__say{opacity:1;transform:none;transition-delay:.16s}

/* ── Kanalzeile ── */
.chan{display:flex;align-items:center;gap:28px}
.chan__av{
  width:118px;height:118px;border-radius:50%;flex:none;overflow:hidden;
  display:grid;place-items:center;background:var(--yt-fill);
}
.chan__av img{width:100%;height:100%;object-fit:cover;display:block}
.chan__txt{display:flex;flex-direction:column;gap:6px}
.chan__txt b{font:500 48px/1.15 var(--font-y);letter-spacing:-.01em}
.chan__txt span{font:400 30px/1.2 var(--font-y);color:var(--yt-ink2)}

/* Abo-Button und "Abonniert"-Pill liegen übereinander → kein Sprung */
.subswap{display:grid;justify-items:end;align-items:center}
.subswap>*{grid-area:1/1}

.ytbtn{
  position:relative;overflow:hidden;border:0;cursor:default;white-space:nowrap;
  height:108px;padding:0 54px;border-radius:54px;
  background:var(--green);color:#0a2a1c;
  font:500 42px/1 var(--font-y);letter-spacing:.01em;
  box-shadow:0 10px 34px rgba(0,220,130,.34);
  transition:transform .14s var(--ease-io),opacity .18s linear;
}
.ytbtn--sm{height:80px;padding:0 40px;border-radius:40px;font-size:32px}
.ytbtn.is-press{transform:scale(.94)}
/* Vollständig aus dem Rendering nehmen: opacity:0 allein lässt in
   Chromium/OBS einen Geisterschatten des box-shadow stehen. */
.ytbtn.is-gone{
  opacity:0;transform:scale(.86);pointer-events:none;
  box-shadow:none;visibility:hidden;
  transition:opacity .18s linear,transform .14s var(--ease-io),
             box-shadow .12s linear,visibility 0s .2s;
}
/* Ripple darf nur während des Drucks existieren */
.ytbtn:not(.is-press) .ytbtn__rip,
.pill__b:not(.is-press) .pill__rip{opacity:0!important;transform:translate(-50%,-50%) scale(0)!important}
.ytbtn__rip{
  position:absolute;left:50%;top:50%;width:60px;height:60px;border-radius:50%;
  background:rgba(255,255,255,.6);transform:translate(-50%,-50%) scale(0);opacity:0;
}
.ytbtn.is-press .ytbtn__rip{animation:rip .55s var(--ease) forwards}
@keyframes rip{0%{transform:translate(-50%,-50%) scale(0);opacity:.75}100%{transform:translate(-50%,-50%) scale(16);opacity:0}}

/* ── "Abonniert" mit Glocke ── */
.subbed{
  display:flex;align-items:center;gap:22px;
  height:108px;padding:0 34px 0 40px;border-radius:54px;
  background:var(--yt-fill);color:var(--yt-ink);
  font:500 40px/1 var(--font-y);white-space:nowrap;
  opacity:0;transform:scale(.86);pointer-events:none;
  transition:opacity .2s linear,transform .34s var(--back);
}
.subbed.is-on{opacity:1;transform:none}
.subbed--solo{opacity:1;transform:none}
.subbed__bell{position:relative;display:grid;place-items:center;width:60px;height:60px}
.subbed__bell .ic{grid-area:1/1;width:54px;height:54px;transition:opacity .18s linear,color .25s}
.subbed__bell .ic--f{opacity:0}
.subbed__bell.is-on .ic--o{opacity:0}
.subbed__bell.is-on .ic--f{opacity:1;color:var(--green-dk)}
.subbed__bell.is-ring .ic{animation:ring .9s var(--ease)}
@keyframes ring{
  0%,100%{transform:rotate(0)} 12%{transform:rotate(-21deg)} 26%{transform:rotate(17deg)}
  40%{transform:rotate(-12deg)} 54%{transform:rotate(8deg)} 70%{transform:rotate(-4deg)} 85%{transform:rotate(2deg)}
}
.subbed__bell .dot{
  position:absolute;top:-2px;right:-2px;width:22px;height:22px;border-radius:50%;
  background:var(--green);border:3px solid var(--yt-fill);
  opacity:0;transform:scale(0);transition:opacity .16s linear,transform .34s var(--back);
}
.subbed__bell.is-on .dot{opacity:1;transform:none;transition-delay:.24s}
.subbed__car{width:36px;height:36px;color:var(--yt-ink2)}


/* ── Like / Dislike ── */
.pill{display:flex;align-items:center;height:112px;border-radius:56px;background:var(--yt-fill);flex:none}
.pill__b{
  position:relative;overflow:hidden;border:0;background:none;cursor:default;
  display:flex;align-items:center;gap:20px;height:100%;padding:0 38px;
  color:var(--yt-ink);font:500 42px/1 var(--font-y);border-radius:56px 0 0 56px;
}
.pill__b--dis{padding:0 36px;border-radius:0 56px 56px 0}
.pill__b .ic{width:56px;height:56px;color:var(--yt-ink)}
.pill__sep{width:2px;height:56px;background:var(--yt-line);flex:none}
.pill__rip{
  position:absolute;left:34%;top:50%;width:50px;height:50px;border-radius:50%;
  background:rgba(0,0,0,.14);transform:translate(-50%,-50%) scale(0);opacity:0;
}
.pill__b.is-press .pill__rip{animation:rip .55s var(--ease) forwards}

.thumbwrap{position:relative;display:grid;place-items:center;width:56px;height:56px}
.thumbwrap .ic{grid-area:1/1;transition:opacity .16s linear,color .25s}
.thumbwrap .ic--f{opacity:0}
.pill.is-liked .thumbwrap .ic--o{opacity:0}
.pill.is-liked .thumbwrap .ic--f{opacity:1;color:var(--green-dk)}
.pill.is-liked .thumbwrap{animation:pop .6s var(--back)}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.38) rotate(-12deg)}100%{transform:scale(1) rotate(0)}}

.burst{position:absolute;inset:0;pointer-events:none}
.burst i{
  position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:50%;
  background:var(--green-dk);opacity:0;
}
.burst.go i{animation:burst .8s var(--ease) forwards;animation-delay:var(--bd,0s)}
@keyframes burst{
  0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}
  70%{opacity:.85}
  100%{opacity:0;transform:translate(calc(-50% + var(--bx)),calc(-50% + var(--by))) scale(.2)}
}

/* Zahl, die um eins hochspringt (<i>/<em> nicht kursiv setzen) */
.num{display:inline-block;font-style:normal;transition:transform .15s var(--ease-io),opacity .15s linear}
.num.up  {transform:translateY(-.72em);opacity:0}
.num.down{transform:translateY(.72em);opacity:0;transition:none}

/* ── Kommentar ── */
.ytc--comment{width:1880px}
.cmt{display:flex;align-items:flex-start;gap:30px}
.cmt__av{
  width:92px;height:92px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--green),var(--green-dk));color:#062a1a;
  font:500 44px/1 var(--font-y);
}
.cmt__field{flex:1;padding-top:12px}
.cmt__line{position:relative;display:flex;align-items:center;min-height:56px;gap:3px}
.cmt__line span{font:400 38px/1.3 var(--font-y);color:var(--yt-ink)}
/* Platzhalter liegt über der Zeile, damit der getippte Text links beginnt */
.cmt__ph{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  color:var(--yt-ink2)!important;transition:opacity .18s linear;
}
.cmt__ph.is-gone{opacity:0}
.caret{width:3px;height:46px;background:var(--yt-ink);flex:none;opacity:0}
.ytc--comment.is-typing .caret{animation:blink .95s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.cmt__rule{position:relative;height:3px;background:var(--yt-line);margin-top:14px}
.cmt__rule i{
  position:absolute;inset:0;background:var(--yt-ink);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .4s var(--ease);
}
.ytc--comment.is-typing .cmt__rule i{transform:scaleX(1)}
.cmt__foot{display:flex;align-items:center;justify-content:space-between;gap:40px;padding-left:122px}
.cmt__hint{font:400 30px/1 var(--font-y);color:var(--yt-ink2)}
#cmtBtn{opacity:.35;transition:opacity .25s linear,transform .14s var(--ease-io),background .25s}
#cmtBtn.is-live{opacity:1}

/* ══════════════════════════════════════════════════════════════
   MAUSZEIGER
   ══════════════════════════════════════════════════════════════ */
.cursor{
  position:absolute;left:0;top:0;width:76px;height:108px;
  opacity:0;pointer-events:none;z-index:50;
  transform:translate(var(--cx,0px),var(--cy,0px));
  transition:transform var(--cdur,.95s) var(--ease-io),opacity .3s linear;
}
.cursor.is-vis{opacity:1}
.cursor.no-move{transition:opacity .3s linear!important}
/* Der Klick sitzt auf dem Symbol, nicht auf dem Rahmen: sonst würde die Skalierung die Position mitverschieben. */
.cursor__ic{
  display:block;width:100%;height:100%;transform-origin:12% 8%;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.55));
}
.cursor.is-click .cursor__ic{animation:clicky .32s var(--ease-io)}
@keyframes clicky{0%,100%{transform:scale(1)}45%{transform:scale(.72)}}

.debug{
  position:fixed;top:10px;left:10px;z-index:99;display:none;
  font:500 13px/1.5 ui-monospace,monospace;color:#00dc82;
  background:rgba(0,0,0,.8);padding:8px 12px;border-radius:8px;
  border:1px solid rgba(0,220,130,.3);white-space:pre;
}
.debug.on{display:block}

/* ══════════════════════════════════════════════════════════════
   MITGLIEDSCHAFT
   Ein Panel, in dem die Vorteile nacheinander durchlaufen.
   Bewusst ohne vorgeschaltete Kanalzeile: die zeigt schon der Abo-CTA.
   ══════════════════════════════════════════════════════════════ */


/* Das Panel bleibt flach: Kopf, Trenner, wechselnder Vorteil, Button */
.ytc--mem{padding:38px 48px}
.mem{display:flex;align-items:center;gap:44px}

.mem__head{display:flex;align-items:center;gap:26px;flex:none}
.mem__av{width:112px;height:112px;border-radius:50%;overflow:hidden;flex:none;background:var(--yt-fill)}
.mem__av img{width:100%;height:100%;object-fit:cover;display:block}
.mem__title{display:flex;flex-direction:column;gap:8px}
.mem__title b{font:500 44px/1.1 var(--font-y);color:var(--yt-ink);white-space:nowrap}
.mem__title span{font:400 30px/1.1 var(--font-y);color:var(--yt-ink2);white-space:nowrap}
.mem__title i{font-style:normal;font-weight:500;color:var(--green-dk)}

.mem__sep{width:3px;height:120px;background:var(--yt-line);flex:none;border-radius:2px}

/* Vorteile liegen übereinander, damit die Karte nicht springt */
.mem__body{width:1180px;flex:none;display:flex;flex-direction:column;gap:20px}
.perks{display:grid;min-height:132px;align-items:center}
.perk{
  grid-area:1/1;display:flex;align-items:center;gap:30px;
  opacity:0;transform:translateY(26px);
  transition:opacity .2s linear,transform .28s var(--ease-io);
}
.perk.is-on{opacity:1;transform:none;transition:opacity .3s linear,transform .5s var(--ease)}
.perk.is-out{opacity:0;transform:translateY(-26px)}
.perk .ic{width:76px;height:76px;flex:none;color:var(--green-dk)}
.perk div{display:flex;flex-direction:column;gap:8px}
.perk b{font:500 46px/1.15 var(--font-y);color:var(--yt-ink)}
.perk span{font:400 32px/1.2 var(--font-y);color:var(--yt-ink2)}

.dots{display:flex;gap:14px}
.dots i{
  width:56px;height:7px;border-radius:4px;background:var(--yt-line);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.dots i.is-on{background:var(--green-dk);transform:scaleY(1.4)}

/* Der blaue Abschluss-Button aus dem echten Mitgliedschafts-Dialog */
.ytbtn--blue{
  flex:none;background:#065fd4;color:#fff;
  box-shadow:0 10px 34px rgba(6,95,212,.34);
  display:grid;place-items:center;
}
.ytbtn--blue .ytbtn__label,.ytbtn--blue .ytbtn__done{
  grid-area:1/1;display:flex;align-items:center;gap:16px;white-space:nowrap;
  font:500 40px/1 var(--font-y);
  transition:opacity .22s linear,transform .34s var(--ease);
}
.ytbtn--blue .ytbtn__done{opacity:0;transform:translateY(16px)}
.ytbtn--blue .ytbtn__done .ic{width:40px;height:40px}
.ytbtn--blue.is-done{background:var(--green-dk);box-shadow:0 10px 34px rgba(0,168,98,.34)}
.ytbtn--blue.is-done .ytbtn__label{opacity:0;transform:translateY(-16px)}
.ytbtn--blue.is-done .ytbtn__done{opacity:1;transform:none}

/* Schlussbild: die Leiste schrumpft auf eine schmale Dankeskarte.
   Breite und Hoehe werden dafuer per JS fixiert, weil auto sich nicht
   animieren laesst. overflow:hidden haelt den alten Inhalt im Rahmen,
   solange er noch ausblendet. */
.ytc--mem{
  overflow:hidden;
  transition:opacity .18s linear,transform .22s var(--ease-io),visibility 0s .22s,
             width .5s var(--ease),height .5s var(--ease);
}
.ytc--mem.is-on{
  transition:opacity .26s linear,transform .42s var(--back),visibility 0s,
             width .5s var(--ease),height .5s var(--ease);
}
.ytc--mem.is-thanks{padding:0}

/* Der Panelinhalt geht zuerst, erst danach zieht sich die Karte zusammen */
.mem{transition:opacity .19s linear,transform .26s var(--ease-io)}
.mem.is-gone{opacity:0;transform:scale(.97);pointer-events:none;position:absolute;top:0;left:0}

.thanks{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:34px;
  padding:36px 50px;opacity:0;pointer-events:none;
}
/* Im Fluss bestimmt der Inhalt die Kartengröße: so sitzt das Schlussbild
   passgenau statt in einem zu breiten Rahmen. */
.thanks.is-flow{position:static;inset:auto;width:max-content}
.thanks.is-on{opacity:1}

.thanks__av{
  position:relative;width:128px;height:128px;border-radius:50%;flex:none;
  background:var(--yt-fill);
  box-shadow:0 0 0 5px var(--green);
  opacity:0;transform:scale(.6);
}
.thanks.is-on .thanks__av{
  opacity:1;transform:none;
  transition:opacity .26s linear .06s,transform .55s var(--back) .06s;
}
.thanks__av img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.thanks__tick{
  position:absolute;right:-6px;bottom:-2px;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--green);border:5px solid var(--yt-bg);
  opacity:0;transform:scale(0);
}
.thanks__tick .ic{width:28px;height:28px;color:#0a2a1c}
.thanks.is-on .thanks__tick{
  opacity:1;transform:none;
  transition:opacity .2s linear .42s,transform .5s var(--back) .42s;
}

.thanks__txt{display:flex;flex-direction:column;gap:10px}
.thanks__txt b,.thanks__txt span{opacity:0;transform:translateY(14px)}
.thanks.is-on .thanks__txt b{
  opacity:1;transform:none;
  transition:opacity .3s linear .2s,transform .5s var(--ease) .2s;
}
.thanks.is-on .thanks__txt span{
  opacity:1;transform:none;
  transition:opacity .3s linear .32s,transform .5s var(--ease) .32s;
}
.thanks__txt b{font:500 52px/1.1 var(--font-y);color:var(--yt-ink);white-space:nowrap;letter-spacing:-.01em}
.thanks__txt span{font:400 31px/1.1 var(--font-y);color:var(--yt-ink2);white-space:nowrap}