/* PiP Pro: the Ferrari float demo, ported from the extension's welcome page
   (2026-07-22). Self-contained: this file + pip-float-demo.js + one script
   include. Styles extracted verbatim from welcome.html with design tokens
   flattened to literals; z-indexes 9990-9992 sit above site content. */
  /* ---- floating demo player (hairline rim; the film provides the colour) */
  .float-demo{
    position:fixed;right:26px;bottom:26px;z-index:9992;
    width:min(340px, calc(100vw - 32px));
    border-radius:16px;
    background:rgba(10,12,18,0.9);
    border:1px solid rgba(255,255,255,0.13);
    box-shadow:0 24px 60px rgba(0,0,0,0.62);
    opacity:0;
  }
  /* The float performs the product's own gesture on arrival: it pops out at
     the centre of the screen, larger, then glides down into its corner and
     settles, exactly like real PiP leaving a page. The entrance IS the demo. */
  .float-demo.pp-arrive{animation:fd-arrive 1.5s cubic-bezier(.16,1,.3,1) .6s both;}
  @keyframes fd-arrive{
    0%{
      opacity:0;
      transform:translate(calc(-50vw + 50% + 26px), calc(-50vh + 50% + 26px)) scale(1.5);
    }
    22%{opacity:1;}
    78%{transform:translate(0,0) scale(0.985);}
    100%{opacity:1;transform:none;}
  }
  .float-demo[hidden]{display:none;}
  .fd-inner{position:relative;border-radius:15px;overflow:hidden;background:#05070C;}
  .fd-veil{
    position:absolute;inset:0;z-index:3;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    text-align:center;padding:14px;overflow:hidden;
    background:rgba(6,8,13,0.985);
    transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .85s ease, background .5s ease;
  }
  .fd-veil::after{
    content:"";position:absolute;top:-60%;left:-35%;width:55%;height:220%;
    transform:rotate(10deg);
    background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.05) 50%, transparent 58%);
    animation:veil-sheen 4.6s ease-in-out infinite;
  }
  @keyframes veil-sheen{0%,100%{left:-45%;}55%{left:120%;}56%,99%{left:120%;}}
  /* Hover tease, THIRSTY tuning (owner 2026-07-21). The trigger is the
     STATIC inner frame, never the veil itself: a lifting veil that carries
     its own :hover un-hovers at the bottom edge and oscillates (the stutter
     bug). Anchored to .fd-inner, the veil can lift freely while the cursor
     stays "on" the float. Click is still the only way through. */
  .fd-inner:hover .fd-veil:not(.drop){
    transform:translateY(-16%);
    background:rgba(6,8,13,0.84);
  }
  .fd-inner:hover .fd-veil:not(.drop)::after{animation-duration:0.95s;}
  .fd-inner:hover .fd-veil:not(.drop) .v-cue{animation:cue-throb 0.72s ease-in-out infinite;}
  @keyframes cue-throb{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.16);}
  }
  .float-demo:has(.fd-inner:hover):has(.fd-veil:not(.drop)){
    transform:translateY(-4px) scale(1.025);
    box-shadow:0 32px 80px rgba(0,0,0,0.7), 0 0 44px rgba(0,229,255,0.10);
  }
  .float-demo{transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1);}
  .fd-veil.drop{transform:translateY(106%);opacity:0;pointer-events:none;}
  .fd-veil .v-mark{font-size:13.5px;font-weight:700;}
  .fd-veil .v-mark i{font-style:normal;background:linear-gradient(90deg,#00E5FF,#FF2D78);
    -webkit-background-clip:text;background-clip:text;color:transparent;}
  .fd-veil .v-line{margin:0;font-size:11.5px;color:rgba(255,255,255,0.52);max-width:24ch;line-height:1.5;}
  .fd-veil .v-cue{
    margin-top:4px;font-size:9.5px;font-weight:700;letter-spacing:0.2em;
    color:#0A0C12;padding:6px 14px;border-radius:999px;background:#fff;
  }
  .fd-bar{
    display:flex;align-items:center;gap:8px;
    padding:8px 11px;cursor:grab;user-select:none;
    background:rgba(9,11,17,0.98);border-bottom:1px solid rgba(255,255,255,0.09);
    font-size:10.5px;font-weight:600;letter-spacing:0.02em;color:rgba(255,255,255,0.52);
  }
  .fd-bar:active{cursor:grabbing;}
  .fd-dot{width:6px;height:6px;border-radius:50%;flex:none;background:linear-gradient(90deg,#00E5FF,#FF2D78);}
  .fd-bar span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .fd-x{flex:none;background:none;border:0;cursor:pointer;font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
    font-size:13px;line-height:1;padding:2px 4px;color:rgba(255,255,255,0.30);}
  .fd-x:hover{color:rgba(255,255,255,0.94);}
  .fd-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000
    url("https://i.ytimg.com/vi/tYSo0LsHhvo/hqdefault.jpg") center/cover;}
  .fd-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
  /* Interaction shield: once the film is PLAYING (bridge posts the event),
     this transparent layer eats every click and hover, so YouTube's pause /
     hover chrome (title card, Share, Watch-later, More-videos wall, logo)
     can never be summoned. Hidden during the poster state so YouTube's own
     play button stays clickable (that click is the sound gesture). */
  /* CINEMA MODE (owner 2026-07-21): while the film truly plays, the page
     sinks dark and one spotlight holds the float. A STATE, not per-caption
     flashes: enters on the bridge's real "playing", exits on end / close /
     scroll-away. Sits UNDER the float (46) and the consent bar (50). */
  /* stage move: applied only during the enter/exit glides so dragging
     stays 1:1 the rest of the time */
  .float-demo.fd-stage-move{transition:left .7s cubic-bezier(.16,1,.3,1), top .7s cubic-bezier(.16,1,.3,1), width .7s cubic-bezier(.16,1,.3,1);}
  .cine-veil{
    position:fixed;inset:0;z-index:9990;pointer-events:none;
    --cx:50vw;--cy:50vh;--r1:220px;--r2:430px;
    background:radial-gradient(circle at var(--cx) var(--cy),
      rgba(4,6,10,0) 0, rgba(4,6,10,0) var(--r1),
      rgba(4,6,10,0.74) var(--r2), rgba(4,6,10,0.78) 100%);
    opacity:0;transition:opacity .7s ease, backdrop-filter 1s ease, -webkit-backdrop-filter 1s ease;
  }
  .cine-veil.on{opacity:1;}
  /* the 46-48s breather in the track: the room holds its breath */
  .cine-veil.hush{-webkit-backdrop-filter:brightness(0.72);backdrop-filter:brightness(0.72);}
  /* the drop (0:29): the room sinks one notch deeper and stays there */
  .cine-veil::before{
    content:"";position:absolute;inset:0;
    background:radial-gradient(circle at var(--cx) var(--cy),
      rgba(3,4,8,0) 0, rgba(3,4,8,0) var(--r1),
      rgba(3,4,8,0.30) var(--r2), rgba(3,4,8,0.34) 100%);
    opacity:0;transition:opacity .8s ease;
  }
  .cine-veil.deep::before{opacity:1;}
  /* punch pulse: the spotlight ring surges once per punch caption */
  .cine-veil::after{
    content:"";position:absolute;border-radius:50%;
    left:calc(var(--cx) - var(--r1));top:calc(var(--cy) - var(--r1));
    width:calc(var(--r1) * 2);height:calc(var(--r1) * 2);
    box-shadow:0 0 140px 36px rgba(0,229,255,0.34), inset 0 0 80px rgba(255,45,120,0.16);
    opacity:0;
  }
  .cine-veil.pulse::after{animation:cine-surge .45s cubic-bezier(.16,.8,.3,1);}
  /* later SOFT captions: a quiet pink breath on the spotlight rim, light
     blooming AT the float instead of across the room (the full pink sweep
     plays only once, on the first soft caption) */
  .cine-veil.breathe::after{animation:cine-breath 1.5s ease-in-out;}
  @keyframes cine-breath{
    0%{opacity:0;transform:scale(0.99);
      box-shadow:0 0 60px 10px rgba(255,45,120,0), inset 0 0 40px rgba(255,45,120,0);}
    40%{opacity:1;
      box-shadow:0 0 95px 24px rgba(255,45,120,0.17), inset 0 0 65px rgba(255,45,120,0.11);}
    100%{opacity:0;transform:scale(1.02);
      box-shadow:0 0 60px 10px rgba(255,45,120,0), inset 0 0 40px rgba(255,45,120,0);}
  }
  @keyframes cine-surge{
    0%{opacity:0;transform:scale(0.92);}
    18%{opacity:1;}
    100%{opacity:0;transform:scale(1.14);}
  }
  /* THUNDER (owner 2026-07-21, v3): soft build-up captions roll one gentle
     pink swell across the whole browser; punch captions crack a cyan-white
     strobe + bolt across the entire screen ON TOP of the ring surge. */
  /* punch impact: the float takes the hit, a 0.3s bass-hit shudder */
  .float-demo.fd-jolt{animation:fd-jolt .3s cubic-bezier(.3,.7,.3,1);}
  @keyframes fd-jolt{
    0%{transform:scale(1);}
    30%{transform:scale(1.013) translateY(-1px);}
    62%{transform:scale(0.996) translateY(0.5px);}
    100%{transform:scale(1);}
  }
  .cine-thunder{
    position:fixed;inset:0;z-index:9991;pointer-events:none;opacity:0;overflow:hidden;
  }
  .cine-thunder::before{
    content:"";position:absolute;inset:0;
    background:radial-gradient(130% 100% at 50% 0%,
      rgba(255,214,232,0.38) 0%, rgba(255,45,120,0.2) 42%, rgba(255,45,120,0) 74%);
  }
  .cine-thunder::after{
    content:"";position:absolute;top:-20%;bottom:-20%;left:-45%;width:34%;
    transform:skewX(-18deg);
    background:linear-gradient(90deg,
      rgba(255,45,120,0) 0%, rgba(255,170,205,0.32) 50%, rgba(255,45,120,0) 100%);
    filter:blur(16px);
  }
  .cine-thunder.soft-strike{animation:th-sheet-soft 1.05s ease-in-out;}
  .cine-thunder.soft-strike::after{animation:th-sweep 1.05s ease-in-out;}
  .cine-thunder.strike{animation:th-sheet .56s ease-out;}
  .cine-thunder.strike::before{
    background:radial-gradient(130% 100% at 50% 0%,
      rgba(255,255,255,0.5) 0%, rgba(0,229,255,0.32) 36%, rgba(0,229,255,0) 72%);
  }
  .cine-thunder.strike::after{
    background:linear-gradient(90deg,
      rgba(0,229,255,0) 0%, rgba(160,240,255,0.75) 44%,
      rgba(255,255,255,0.95) 50%, rgba(160,240,255,0.75) 56%, rgba(0,229,255,0) 100%);
    filter:blur(6px);
    animation:th-sweep .56s cubic-bezier(.2,.6,.2,1);
  }
  /* lightning in the track's groove: the whole strike lives one beat
     (0.56s at 107.7 BPM) and the second flash lands one EIGHTH NOTE
     (279ms = 50%) after the first, so the strobe plays the music */
  @keyframes th-sheet{
    0%{opacity:0;}
    4%{opacity:1;}
    22%{opacity:.2;}
    50%{opacity:.85;}
    100%{opacity:0;}
  }
  @keyframes th-sweep{
    from{transform:skewX(-18deg) translateX(0);}
    to{transform:skewX(-18deg) translateX(520%);}
  }
  @keyframes th-sheet-soft{
    0%{opacity:0;}
    32%{opacity:.75;}
    62%{opacity:.4;}
    100%{opacity:0;}
  }
  .fd-shield{position:absolute;inset:0;z-index:1;display:none;cursor:default;}
  .fd-shield.on{display:block;}
  .fd-cine{
    position:absolute;left:0;right:0;bottom:11%;z-index:2;pointer-events:none;
    display:flex;flex-direction:column;align-items:center;gap:3px;
    text-align:center;padding:0 12px;
    opacity:0;transform:translateY(9px);
    transition:opacity .8s ease, transform .8s ease;
  }
  .fd-cine.on{opacity:1;transform:none;}
  .fd-cine .c-t{font-family:"Space Grotesk","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;font-size:14.5px;font-weight:700;letter-spacing:0.22em;color:#fff;
    white-space:nowrap;line-height:1.2;
    text-shadow:0 2px 16px rgba(0,0,0,0.9);}
  /* sentence-length titles shrink to keep ONE clean line inside the card;
     the short dramatic hits (ADS? DEAD. / GHOST MODE) keep the big cut */
  .fd-cine .c-t.long{font-size:12.5px;letter-spacing:0.14em;}
  .fd-cine .c-s{font-size:10.5px;letter-spacing:0.08em;color:rgba(255,255,255,0.78);
    text-shadow:0 2px 10px rgba(0,0,0,0.85);}
  .fd-cine .c-line{width:46px;height:2px;border-radius:2px;margin-top:4px;background:linear-gradient(90deg,#00E5FF,#FF2D78);}
  .fd-cine.punch{transition:none;}
  .fd-cine.punch.on{animation:cine-punch .34s cubic-bezier(.2,1.35,.3,1) both;}
  @keyframes cine-punch{
    0%{opacity:0;transform:scale(1.22);}
    60%{opacity:1;transform:scale(0.99);}
    100%{opacity:1;transform:scale(1);}
  }
  .fd-cine.punch .c-t{font-size:17px;letter-spacing:0.26em;
    text-shadow:0 2px 18px rgba(0,0,0,0.95);}
  .fd-cine.punch .c-t.long{font-size:13.5px;letter-spacing:0.16em;}
  .fd-cine.punch .c-line{width:74px;}
  .fd-finale{
    position:absolute;inset:0;z-index:4;pointer-events:none;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    text-align:center;padding:16px;
    background:rgba(5,7,12,0.92);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    opacity:0;transition:opacity .7s ease;
  }
  .fd-finale.on{opacity:1;pointer-events:auto;}
  .fd-finale .f-big{margin:0;font-family:"Space Grotesk","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;font-size:20px;font-weight:700;letter-spacing:-0.01em;
    background:linear-gradient(90deg,#00E5FF,#FF2D78);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .fd-finale .f-sub{margin:0 0 6px;font-size:11.5px;color:rgba(255,255,255,0.52);max-width:30ch;line-height:1.5;}
  .fd-finale .f-go{
    border:0;cursor:pointer;font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;font-weight:700;font-size:12.5px;
    color:#0A0C12;padding:11px 22px;border-radius:999px;background:#fff;
    transition:transform .25s cubic-bezier(.16,1,.3,1);
  }
  .fd-finale .f-go:hover{transform:translateY(-1px);}

  /* ---- pinned toast ---- */

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .float-demo,.float-demo.pp-arrive{opacity:1;animation:none;transition:none;}
  .fd-veil::after{animation:none;}
  .fd-inner:hover .fd-veil:not(.drop) .v-cue{animation:none;}
  .fd-inner:hover .fd-veil:not(.drop){transform:none;background:rgba(6,8,13,0.985);}
  .float-demo:has(.fd-inner:hover):has(.fd-veil:not(.drop)){transform:none;}
  .fd-cine{transition:opacity .3s ease;transform:none;}
  .fd-cine.punch.on{animation:none;opacity:1;}
  .fd-finale{transition:opacity .3s ease;}
  .cine-veil{transition:none;}
  .cine-veil::before{transition:none;}
  .cine-veil.pulse::after{animation:none;}
  .cine-veil.breathe::after{animation:none;}
  .cine-thunder.strike,.cine-thunder.soft-strike{animation:none;}
  .cine-thunder.strike::after,.cine-thunder.soft-strike::after{animation:none;}
  .float-demo.fd-jolt{animation:none;}
  .float-demo.fd-stage-move{transition:none;}
}

/* ---- HERO-SLOT MODE (v3, owner 2026-07-22): the card looks EXACTLY like
   the welcome page float (its own colour-dot bar, "Sample float.", the X),
   seated where the Product Tour mock used to be. The mock's shells stay in
   the DOM as invisible structure (the parallax script measures
   .hero-player-body) but draw nothing. Playback happens IN PLACE: no
   centring, no growth; the pop-out to <body> is purely mechanical (fixed
   positioning + drag need a transform-free ancestor). ---- */
.hero-player{background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible;}
.hero-player::before{display:none;}
.hero-player-body{aspect-ratio:auto;background:none;display:block;overflow:visible;}
.hero-player-body::before{display:none;}
.pp-hero-demo{position:relative;}
.float-demo{position:relative;right:auto;bottom:auto;width:100%;opacity:1;}
.float-demo.pp-arrive{animation:none;}
.float-demo.pp-staged{position:fixed;right:auto;bottom:auto;z-index:9992;}