/* ═══════════════ SHARED TAPE STYLES ═══════════════
   Loaded by prototype-hybrid-tape.html and prototype-onboarding.html.
   Extracted so the two prototypes cannot drift apart — the exact bug
   this component was built to fix. Edit here, not in either page. */

@font-face { font-family:'TapePencil'; src:url('fonts/pencil.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'TapeBlocky'; src:url('fonts/blocky.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'TapeScript'; src:url('fonts/script.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'TapeBrush';  src:url('fonts/brush.otf')  format('opentype'); font-display:swap; }

  /* ═══════════════ THE CASSETTE ═══════════════
     Four stacked layers, every one pinned in % of the tape's own box:
       1  shell art      (SVG, takes colour from TAPE_SHELLS)
       2  paper label    (DOM, live text — font stays switchable)
       3  stickers       (DOM, absolutely placed)
       4  hub assembly   (SVG overlay: capsule + hubs + tape window)
     Layer 4 sits ON TOP of the label, which is what the reference does and
     what makes the silhouette read as a cassette. */
  @keyframes hubSpin { from{transform:rotate(0)} to{transform:rotate(360deg)} }

  .tape { position:relative; aspect-ratio:1.604; filter:drop-shadow(0 6px 16px rgba(60,40,30,0.28)); }
  .tape-layer { position:absolute; inset:0; width:100%; height:100%; display:block; }
  .tape-over { pointer-events:none; }

  .tape-label { position:absolute; overflow:hidden;
    box-shadow:0 1px 2px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(0,0,0,0.10); }
  /* Spans the writing band and centres within it, rather than being pinned by
     `top`. Pinning made the name read top-anchored and pushed it toward the
     rule as it got bigger; centred, it grows symmetrically. */
  /* No overflow:hidden here — script faces put ink outside their content box
     (Vanquisher reaches 5% above it) and the band was shearing the tops off.
     The label's own overflow:hidden still contains anything that runs long. */
  .tape-title { position:absolute; left:3.5%; right:3.5%; white-space:nowrap;
    line-height:1.05; display:flex; align-items:center; }
  /* inline-block so its box hugs the glyphs — the write sweep has to start at
     the first letter, not at the far edge of a full-width centred container.
     padding-right leaves room for script tails so the clip can't shear them. */
  /* Padding on BOTH sides now: Vanquisher's swashes reach 4.5% left of origin
     and 5.3% past the advance width, and a left-padding of 0 sheared them. */
  .tape-ink { display:inline-block; padding:0 0.16em; }

  /* write — continuous ink sweep, eased like a real stroke. Top/bottom/left
     insets are negative so the sweep only ever clips from the right; at 0 they
     trimmed ink that sits outside the content box. */
  @keyframes inkIn {
    from { clip-path:inset(-40% 100% -40% -12%); }
    to   { clip-path:inset(-40% -12% -40% -12%); }
  }
  .tape-ink.write { animation-name:inkIn; animation-timing-function:cubic-bezier(0.33,0.72,0.36,1);
    animation-fill-mode:both; }

  /* type — one glyph at a time. All glyphs stay in the layout and only reveal,
     so a centred label doesn't reflow on every keystroke of the animation. */
  .ch { display:inline-block; opacity:0; }
  .ch.on { opacity:1; }
  @keyframes stampIn { from { opacity:0; transform:scale(1.22); } to { opacity:1; transform:scale(1); } }
  .ch.stamp.on { animation:stampIn 130ms ease-out both; }
  .tape-rule { position:absolute; left:3.5%; right:3.5%; height:1px; opacity:0.55; }
  .tape-foot { position:absolute; left:3.5%; right:3.5%; display:flex;
    justify-content:space-between; align-items:center; }
  .tape-foot span { font-family:'Courier New',monospace; letter-spacing:0.1em; white-space:nowrap; }

  /* A sticker sits flat on the shell: a tight contact shadow and no lift.
     `live` is only added when the parent passes drag handlers, so a display-only
     tape keeps the layer inert and unclickable. */
  .sticker { position:absolute; pointer-events:none; transform-origin:50% 50%;
    transition:filter .16s ease, box-shadow .16s ease; }
  .sticker.live { pointer-events:auto; cursor:grab; touch-action:none; }
  .sticker img, .sticker svg {
    width:100%; height:auto; display:block; user-select:none; -webkit-user-drag:none;
    filter:drop-shadow(0 1px 1.5px rgba(0,0,0,0.34));
  }
  .sticker.sel img { filter:drop-shadow(0 0 0 2px rgba(255,255,255,0.9))
                            drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }

  /* Peeling: while dragged it lifts off the surface — grows a little, tips out
     of plane, and trades the tight contact shadow for a wide soft one cast
     further away. The shadow moving away from the art is what reads as height. */
  .sticker.peel { cursor:grabbing; z-index:9; }
  .sticker.peel img {
    filter:drop-shadow(0 10px 12px rgba(40,20,10,0.42));
    transform:scale(1.1) rotate(-2.5deg);
    transition:transform .13s cubic-bezier(0.2,0.8,0.3,1), filter .13s ease;
  }
  .sticker img { transition:transform .16s cubic-bezier(0.2,0.8,0.3,1), filter .16s ease; }

  .sticker-x {
    position:absolute; top:-9px; right:-9px; width:22px; height:22px; padding:0;
    border-radius:50%; cursor:pointer; border:1.5px solid #fff;
    background:#c2402c; color:#fff; font:600 14px/1 'Figtree',sans-serif;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 1px 4px rgba(0,0,0,0.4); pointer-events:auto;
  }

  /* Typing straight onto the label — an input wearing the label's typography,
     so there is no second field to keep in sync. */
  .tape-input {
    width:100%; border:none; background:transparent; padding:0; margin:0;
    font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit;
    outline:none; min-width:0;
  }
  .tape-input::placeholder { color:currentColor; opacity:0.30; }

  /* Tapping the name is how a tape gets renamed, and only where a parent passed
     `onNameTap`. It fills the writing band — measured at 283 × 48 on the
     customiser's 340px tape, so it clears 44 on both axes with no expander at
     all — and it draws
     nothing: the affordance is the name, and a box around it would be furniture
     printed on artwork. */
  .tape-name-hit {
    position:absolute; inset:0; padding:0; border:none; background:transparent;
    cursor:pointer;
  }

  .hub-g { transform-box:fill-box; transform-origin:center; }
  .hub-g.spin      { animation:hubSpin 1.15s linear infinite; }
  .hub-g.spin-slow { animation:hubSpin 2.3s linear infinite; }
  .hub-g.spin-fast { animation:hubSpin 0.75s linear infinite; }

  .sheen { position:absolute; inset:0; pointer-events:none; border-radius:2.6%;
    background:linear-gradient(118deg,rgba(255,255,255,0.32) 0%,rgba(255,255,255,0.09) 30%,rgba(255,255,255,0) 50%); }