/* =================================================================
   SHREE KALAS — MOTION
   The Editions choreography, without its stack: a staged opening,
   chapter words that arrive with their chapter, grounds that move
   slower than the page, staggered cards, torn-paper edges between
   dark and light, and a progress hairline under the top bar.

   Everything here hangs off html.sk-motion, which default.hbs sets
   inline only when the visitor hasn't asked for reduced motion. No
   class, no hidden states — the page is simply still.
   ================================================================= */

/* ---- 1. the opening ----
   Handled by scroll-world (sw-theme.css). Kept: the keyframes the
   chapters reuse. */
@keyframes sk-rise{from{opacity:0;transform:translateY(1.25rem)}to{opacity:1;transform:none}}

/* ---- 2. chapters arrive ---- */
.sk-ch-index{
  display:block;
  margin-bottom:1.25rem;
  font-family:var(--sk-font-ui);
  font-size:.6875rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  opacity:.62;
}
.sk-ch-index i{
  font-style:normal;
  font-family:var(--sk-font-narr);
  font-size:1.1rem;letter-spacing:0;text-transform:none;
  vertical-align:-.08em;
  margin-right:.5rem;
  color:var(--sk-copper-lt);
}
.sk-body--paper .sk-ch-index i{color:var(--sk-copper)}

.sk-motion .sk-ch-word span{
  transition:transform 1.2s var(--sk-ease), opacity 1.1s var(--sk-ease), letter-spacing 1.2s var(--sk-ease);
  transform-origin:left bottom;
}
.sk-motion .sk-ch-index,
.sk-motion .sk-ch-head .sk-ch-narr,
.sk-motion .sk-ch-head .sk-actions{
  transition:transform 1s var(--sk-ease) .25s, opacity 1s var(--sk-ease) .25s;
}
.sk-motion .sk-ch-head .sk-actions{transition-delay:.4s}
.sk-motion .sk-ch-head:not(.is-in) .sk-ch-word span{opacity:0;transform:translateY(.3em) scale(.9);letter-spacing:.02em}
/* the standfirst comes in from a blur, not just a fade */
.sk-motion .sk-ch-head .sk-ch-narr{filter:blur(0)}
.sk-motion .sk-ch-head:not(.is-in) .sk-ch-narr{filter:blur(8px)}
.sk-motion .sk-ch-head .sk-ch-narr{transition:transform 1s var(--sk-ease) .25s, opacity 1s var(--sk-ease) .25s, filter 1s var(--sk-ease) .25s}

.sk-motion .sk-ch-head:not(.is-in) .sk-ch-index,
.sk-motion .sk-ch-head:not(.is-in) .sk-ch-narr,
.sk-motion .sk-ch-head:not(.is-in) .sk-actions{opacity:0;transform:translateY(1rem)}

/* the ground travels slower than the page — editions.js writes
   --sk-py per ground from its position in the viewport */
.sk-motion .sk-ch-ground img{
  transform:translate3d(0, var(--sk-py, 0px), 0) scale(1.18);
  will-change:transform;
}
/* the word drifts up a little faster than the picture behind it */
.sk-motion .sk-ch-word{
  transform:translate3d(0, var(--sk-wy2, 0px), 0);
  will-change:transform, opacity;
}

/* ---- 3. the range strip and the card grids stagger in ---- */
.sk-motion [data-reveal]{transition-delay:calc(var(--i, 0) * 70ms)}
.sk-motion .sk-range-item[data-reveal]{
  transform:translateY(1.25rem);
  transition-duration:1s;
}
.sk-motion .sk-range-item[data-reveal].is-in{transform:none}

/* ---- 4. torn edges where the paper cuts through the dark ---- */
.sk-body:not(.sk-body--paper) .sk-breakout--panel::before,
.sk-body:not(.sk-body--paper) .sk-breakout--panel::after{
  content:"";
  position:absolute;left:0;right:0;
  height:26px;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='26' viewBox='0 0 1200 26' preserveAspectRatio='none'><path fill='%23f8f5ee' d='M0 26L0 14L16.7 11.6L35.2 18.1L58.8 22.7L70.8 18.6L93.1 13.1L106.9 16.0L117.0 9.6L125.8 15.6L139.8 20.8L160.3 18.6L173.4 21.3L194.4 22.3L202.3 17.9L219.3 21.9L228.0 19.7L237.9 14.3L248.8 18.0L265.4 18.2L283.1 15.4L293.9 20.7L311.6 20.2L327.3 17.5L335.5 13.7L355.4 7.8L370.7 6.5L393.3 12.6L403.2 7.9L427.0 14.7L438.6 13.0L458.4 8.1L467.7 4.0L491.6 5.1L509.8 3L532.4 3L550.6 7.8L559.5 4.4L571.2 3L579.9 8.5L590.0 14.9L599.2 17.7L614.0 14.6L628.3 16.6L642.4 10.6L657.0 13.2L665.1 18.1L675.3 14.7L698.3 12.5L707.1 11.9L721.6 10.9L730.3 15.8L748.6 12.7L764.8 16.2L781.6 18.0L789.5 14.3L808.0 15.1L831.5 11.0L839.9 14.6L846.3 12.4L855.3 16.9L872.6 12.0L888.0 15.3L904.5 15.9L913.5 17.2L934.6 14.3L945.2 19.5L967.1 13.3L974.6 10.5L985.1 13.5L1001.0 18.2L1019.6 18.7L1036.8 15.6L1043.3 18.2L1067.1 22.3L1075.9 24L1091.1 21.6L1098.6 18.8L1112.5 21.2L1131.2 24L1138.8 20.4L1146.1 20.7L1164.4 13.3L1186.7 8.4L1195.2 14.2L1200 14L1200 26Z'/></svg>") left top / 1200px 26px repeat-x;
  pointer-events:none;
}
.sk-body:not(.sk-body--paper) .sk-breakout--panel::before{top:-25px;filter:drop-shadow(0 -3px 4px rgba(0,0,0,.45))}
.sk-body:not(.sk-body--paper) .sk-breakout--panel::after{bottom:-25px;transform:scaleY(-1);filter:drop-shadow(0 -3px 4px rgba(0,0,0,.45))}
/* the range band tears in over the flight's last scene. Paper fill:
   the band is light, so the tear that introduces it must be too. */
.sk-body:not(.sk-body--paper) .sk-range::before{
  content:"";position:absolute;left:0;right:0;top:-25px;height:26px;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='26' viewBox='0 0 1200 26' preserveAspectRatio='none'><path fill='%23f8f5ee' d='M0 26L0 14L16.7 11.6L35.2 18.1L58.8 22.7L70.8 18.6L93.1 13.1L106.9 16.0L117.0 9.6L125.8 15.6L139.8 20.8L160.3 18.6L173.4 21.3L194.4 22.3L202.3 17.9L219.3 21.9L228.0 19.7L237.9 14.3L248.8 18.0L265.4 18.2L283.1 15.4L293.9 20.7L311.6 20.2L327.3 17.5L335.5 13.7L355.4 7.8L370.7 6.5L393.3 12.6L403.2 7.9L427.0 14.7L438.6 13.0L458.4 8.1L467.7 4.0L491.6 5.1L509.8 3L532.4 3L550.6 7.8L559.5 4.4L571.2 3L579.9 8.5L590.0 14.9L599.2 17.7L614.0 14.6L628.3 16.6L642.4 10.6L657.0 13.2L665.1 18.1L675.3 14.7L698.3 12.5L707.1 11.9L721.6 10.9L730.3 15.8L748.6 12.7L764.8 16.2L781.6 18.0L789.5 14.3L808.0 15.1L831.5 11.0L839.9 14.6L846.3 12.4L855.3 16.9L872.6 12.0L888.0 15.3L904.5 15.9L913.5 17.2L934.6 14.3L945.2 19.5L967.1 13.3L974.6 10.5L985.1 13.5L1001.0 18.2L1019.6 18.7L1036.8 15.6L1043.3 18.2L1067.1 22.3L1075.9 24L1091.1 21.6L1098.6 18.8L1112.5 21.2L1131.2 24L1138.8 20.4L1146.1 20.7L1164.4 13.3L1186.7 8.4L1195.2 14.2L1200 14L1200 26Z'/></svg>") left top / 1200px 26px repeat-x;
  pointer-events:none;
}
/* the making-sequence run sits inside the Craft chapter above its
   band; when it is dormant the band's torn edge meets the ground */

/* ---- 5. the progress hairline under the top bar ---- */
.sk-nav::after{
  content:"";
  position:absolute;left:0;bottom:-1px;
  width:100%;height:2px;
  background:var(--sk-copper);
  transform:scaleX(var(--sk-progress, 0));
  transform-origin:left;
  pointer-events:none;
}
html[data-nav-theme="dark"] .sk-nav::after{background:var(--sk-copper-lt)}

/* ---- 6. hover life ---- */
.sk-motion .sk-range-link .sk-range-plate{transition:transform .8s var(--sk-ease), box-shadow .8s var(--sk-ease)}
.sk-motion .sk-range-item:hover .sk-range-plate{transform:translateY(-.25rem);box-shadow:0 18px 40px -18px rgba(0,0,0,.7)}
.sk-motion .sk-card .sk-plate{transition:transform .8s var(--sk-ease)}
.sk-motion .sk-card:hover .sk-plate{transform:translateY(-.2rem)}