/* The hero's motion path, keyframes and Ease widget (hero-lens.js). The title
   sits above the path, playhead and diamonds and ignores the pointer, so a
   diamond under a letter can still be grabbed; only the Ease widget rides
   above the title. Page ground --pink, surface --paper, ink --wine, accent --violet. */
.hero-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.hero-track{fill:none;stroke:var(--violet);stroke-width:1.25;opacity:.75;transition:opacity .4s ease}
.intro.pointing .hero-track{opacity:.25}
.hero-head{fill:var(--violet)}
.hero-keys{position:absolute;inset:0;pointer-events:none;z-index:2}
.hero-key{position:absolute;left:0;top:0;width:28px;height:28px;margin:-14px 0 0 -14px;display:grid;place-items:center;cursor:grab;pointer-events:auto;touch-action:none}
.hero-key i{display:block;width:11px;height:11px;transform:rotate(45deg);background:var(--violet);box-shadow:0 0 0 3px var(--pink);transition:background-color .2s}
.hero-key:hover i,.hero-key.held i{background:var(--wine)}
.hero-key.held{cursor:grabbing}
.hero-timecode{position:absolute;left:0;top:14px;z-index:1;font-size:10px;letter-spacing:.06em;color:var(--violet);pointer-events:none}
.no-select,.no-select *{user-select:none;-webkit-user-select:none}

/* Ease: a cheat-console tool. It arrives and leaves like the study switches
   (study-console.css); the wrapper owns that motion so Draggable's transform
   on the dock never meets it. */
.hero-ease{position:absolute;top:6px;right:0;z-index:5;transition:display .48s,opacity .32s ease,translate .48s var(--ease-out);transition-behavior:allow-discrete}
:root:not([data-study-controls="visible"]) .hero-ease{opacity:0;translate:0 14px;transition-duration:.3s,.22s,.3s;transition-timing-function:ease,ease,cubic-bezier(.45,0,.55,1)}
:root:not([data-study-controls="visible"]):not([data-study-controls="closing"]) .hero-ease{display:none}
@starting-style{:root[data-study-controls="visible"] .hero-ease{opacity:0;translate:0 14px}}
:root[data-study-controls="visible"] .hero-ease{transition-delay:240ms}
.ease-dock{position:relative}
.ease-toggle{display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:28px;background:var(--paper);color:var(--wine);box-shadow:0 5px 18px var(--palette-shadow);font:700 11px/1 var(--font-body);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:border-color .2s ease,box-shadow .2s ease,scale .16s ease}
.ease-toggle:hover,.ease-toggle[aria-expanded="true"]{border-color:var(--wine)}
.ease-toggle:active{scale:.97}
.ease-dock.moving .ease-toggle{cursor:grabbing;box-shadow:0 14px 30px var(--palette-shadow)}
/* The panel opens below the button with the study panels' wipe. */
.ease-win{position:absolute;right:0;top:calc(100% + 10px);width:264px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--paper);color:var(--wine);box-shadow:0 15px 40px var(--palette-shadow);
  clip-path:inset(-40px round 14px);transition:display .36s,clip-path .54s var(--ease-out),translate .54s var(--ease-out),opacity .3s ease;transition-behavior:allow-discrete}
.ease-win[hidden]{display:none;clip-path:inset(-40px -40px 100% -40px round 14px);translate:0 -12px;opacity:0;transition-duration:.36s,.36s,.36s,.24s;transition-timing-function:ease,cubic-bezier(.45,0,.55,1),cubic-bezier(.45,0,.55,1),ease}
@starting-style{.ease-win:not([hidden]){clip-path:inset(-40px -40px 100% -40px round 14px);translate:0 -12px;opacity:0}}
.ease-plot{position:relative}
.ease-plot svg{display:block;width:100%;height:auto;overflow:visible}
.ease-plot .grid{stroke:var(--line);stroke-width:.5;opacity:.6}
.ease-plot .curve{fill:none;stroke:var(--violet);stroke-width:2}
.ease-plot .arm{stroke:var(--wine);stroke-width:1;opacity:.6}
.ease-plot .mark{fill:var(--wine)}
.ease-handle{position:absolute;top:0;left:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--violet);border:2px solid var(--paper);cursor:grab;touch-action:none}
.ease-handle:active{cursor:grabbing}
.ease-readout{margin:10px 0 8px;font:400 11px/1.4 var(--font-mono)}
.ease-presets{display:flex;flex-wrap:wrap;gap:5px}
.ease-presets button{min-height:28px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:transparent;color:inherit;font:500 11px/1 var(--font-body);cursor:pointer;transition:border-color .2s ease}
.ease-presets button:hover{border-color:var(--wine)}
/* Phones let the hero copy take touches; the title passes them on so a diamond
   under a letter can still be grabbed. */
@media(max-width:700px){.intro .intro-copy{pointer-events:none}.hero-timecode{top:4px}.hero-ease{top:auto;bottom:-6px}.ease-win{top:auto;bottom:calc(100% + 10px)}
  .ease-win[hidden]{clip-path:inset(100% -40px -40px -40px round 14px);translate:0 12px}
  @starting-style{.ease-win:not([hidden]){clip-path:inset(100% -40px -40px -40px round 14px);translate:0 12px}}}
@media(prefers-reduced-motion:reduce){.hero-ease,.ease-win,.ease-toggle{translate:none!important;scale:none!important;clip-path:none!important;transition-duration:.1s!important;transition-delay:0s!important}}