/* ============================================================
   logo.css — Atelier logo motion
   ------------------------------------------------------------
   Principles
   · GPU-composited properties only: transform, opacity, filter.
   · CSS owns every tween; logo.js only choreographs classes.
   · Default state (no JS, no classes): fully visible, perfectly still.

   Class contract (applied by logo.js on the <svg class="tailor-logo">)
   · .js-anim     JS is present and motion is allowed
   · .is-loading  page-load reveal sequence is running
   · .is-cutting  one hover “cut” cycle is running
   ============================================================ */

/* ------------------------------------------------------------
   Motion constants
   ------------------------------------------------------------ */
.tailor-logo {
  /* Single signature ease: fast attack, long confident settle */
  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);

  /* Page-load reveal */
  --t-thread-draw:  700ms;
  --t-scissors-in:  300ms;
  --t-spool-in:     250ms;

  /* Hover cut cycle (spec window: 900–1100ms) */
  --t-cut:        1000ms;
  --t-shine:       500ms;
  --d-shine:       350ms;   /* highlight passes as the blades close */

  /* Presentation */
  --t-shadow:      300ms;
  --t-scale:       900ms;
}

/* ------------------------------------------------------------
   Base presentation
   ------------------------------------------------------------ */
.tailor-logo {
  display: block;
  overflow: visible;

  filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.05));

  /* Scale returns along the same curve it left on */
  transition:
    transform var(--t-scale) var(--ease-luxury),
    filter    var(--t-shadow) ease;
}

.tailor-logo:hover {
  transform: scale(1.02);          /* 100% → 102%, no overshoot */
  filter: drop-shadow(0 8px 24px rgba(255, 255, 255, 0.12));
}

/* Exact pivot for the cut: the screw at user coords (261, 217).
   view-box keeps the origin mathematically tied to the artwork,
   independent of rendered size. */
.tailor-logo .scissor-half {
  transform-box: view-box;
  transform-origin: 261px 217px;
}

/* Nudged elements move in their own coordinate space */
.tailor-logo #thread,
.tailor-logo #spool {
  transform-box: view-box;
  transform-origin: center;
}

/* ============================================================
   PAGE-LOAD REVEAL  (runs exactly once, orchestrated by logo.js)
   ============================================================ */

/* Pre-reveal state exists only when JS confirmed motion is allowed,
   so the logo never disappears without a script (or with reduced motion). */
.tailor-logo.js-anim.is-loading .thread-path {
  stroke-dasharray: 1;             /* pathLength="1" in the SVG */
  stroke-dashoffset: 1;
  animation: logo-thread-draw var(--t-thread-draw) var(--ease-luxury) forwards;
}

.tailor-logo.js-anim.is-loading .needle {
  opacity: 0;
  animation: logo-fade-in var(--t-scissors-in) ease-out forwards;
}

.tailor-logo.js-anim.is-loading #scissors {
  opacity: 0;
  animation: logo-fade-in var(--t-scissors-in) ease-out forwards;
  animation-delay: var(--t-thread-draw);                 /* after the thread */
}

.tailor-logo.js-anim.is-loading #spool {
  opacity: 0;
  animation: logo-fade-in var(--t-spool-in) ease-out forwards;
  animation-delay: calc(var(--t-thread-draw) + var(--t-scissors-in));
}

@keyframes logo-thread-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes logo-fade-in {
  to { opacity: 1; }
}

/* ============================================================
   HOVER — ONE CUT  (class .is-cutting is added per hover entry)
   ============================================================ */

/* Scissors: open ≈10°, close, stop. Each half contributes ±5°.
   One keyframe pass = exactly one cut. */
.tailor-logo.is-cutting #blade-left {
  animation: logo-cut-left var(--t-cut) var(--ease-luxury);
}
.tailor-logo.is-cutting #blade-right {
  animation: logo-cut-right var(--t-cut) var(--ease-luxury);
}

@keyframes logo-cut-left {
  0%   { transform: rotate(0deg); }
  42%  { transform: rotate(-5deg); }  /* open: upper-left tip swings left  */
  100% { transform: rotate(0deg); }   /* close, settle                     */
}

@keyframes logo-cut-right {
  0%   { transform: rotate(0deg); }
  42%  { transform: rotate(5deg); }   /* open: upper-right tip swings right */
  100% { transform: rotate(0deg); }
}

/* Spool: a 1px × −1px flinch as the blades bite. ≤2px total travel. */
.tailor-logo.is-cutting #spool {
  animation: logo-spool-nudge var(--t-cut) var(--ease-luxury);
}

@keyframes logo-spool-nudge {
  0%, 42%   { transform: translate(0, 0); }
  60%       { transform: translate(1px, -1px); }
  86%, 100% { transform: translate(0, 0); }
}

/* Thread: fabric tension — a single pull, no oscillation. ≤2px. */
.tailor-logo.is-cutting #thread {
  animation: logo-thread-tension var(--t-cut) var(--ease-luxury);
}

@keyframes logo-thread-tension {
  0%, 40%   { transform: translate(0, 0); }
  62%       { transform: translate(-1.2px, 0.8px); }
  90%, 100% { transform: translate(0, 0); }
}

/* Metallic reflection: one pass across the blades while they close.
   On a pure-white mark the screen-blended highlight is accompanied by
   a faint trailing shade — the readable edge of a real reflection. */
.tailor-logo .shine-light { mix-blend-mode: screen;   opacity: 0.15; }
.tailor-logo .shine-shade { mix-blend-mode: multiply; opacity: 0.08; }

.tailor-logo.is-cutting #shine {
  opacity: 1;                       /* visible only while sweeping */
}

.tailor-logo.is-cutting .shine-mover {
  animation: logo-shine-sweep var(--t-shine) ease-in-out var(--d-shine) both;
}

@keyframes logo-shine-sweep {
  from { transform: translateX(0); }      /* band parked left of the blades */
  to   { transform: translateX(480px); }  /* fully past the far blade tip   */
}

/* ============================================================
   REDUCED MOTION — the logo is simply a logo
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .tailor-logo,
  .tailor-logo * {
    animation: none !important;
    transition: none !important;
  }

  .tailor-logo:hover {
    transform: none;               /* no scale */
  }

  .tailor-logo #shine {
    opacity: 0 !important;         /* no shine */
  }
}