/* Kyom motion sheet — scroll-linked effects, page transitions, and the stagger carousel.
 *
 * Loaded after kyom-design.css so it wins the cascade without !important. Tokens
 * (--k-ease, --k-dur) live in the kyom-design.css :root block; change them there.
 *
 * Reference for the feel: houseofhoney.com, which is Next.js + Lenis. Lenis is
 * deliberately absent here — it fights position:sticky (this site has a sticky header
 * plus Tutor's .tutor-is-sticky tab nav), it sits in front of Tutor's modals and video
 * player, and it disables itself on touch, which is where most of this audience is.
 * Everything below is native and degrades to nothing.
 * ========================================================================= */

/* ---- scroll-linked settle -------------------------------------------------
   Images arrive at 108% and settle to 100% across their entry. Zero JS: the
   view() timeline does the work, and browsers without it simply render the
   static end state.

   Scoped narrowly on purpose. .tutor-course-card, .kyom-card, .kyom-idx-img and
   .kyom-hfd-img all carry a hover transform:scale(1.02) (kyom-design.css:123, 388,
   3118, 4045). A filled scroll animation on `transform` outranks a plain hover
   declaration, so applying the settle to those would silently kill the hover zoom.
   Only images with no transform of their own are listed. -------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes kyom-settle {
      from { transform: scale(1.08) }
      to   { transform: scale(1) }
    }
    .kyom-w-tile img,
    .kyom-w-tile video,
    .tutor-course-details-page .tutor-course-thumbnail img {
      animation: kyom-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }
}

/* The flora watermark is NOT bound to a scroll timeline. .kyom-bg-flora svg already
   runs kyom-drift-a/b on transform (kyom-design.css:3283-3287); a second transform
   animation on the same elements would replace it, trading a 54s ambient drift for a
   scroll-linked one. The ambient version is the better read. */

/* ---- cross-document page transitions --------------------------------------
   Three declarations, and every same-origin navigation crossfades instead of
   blinking white. On a multi-page WordPress site this is the largest
   perceived-continuity gain available per byte. -------------------------- */
@view-transition { navigation: auto }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .35s;
  animation-timing-function: var(--k-ease);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none }
}

/* ---- stagger carousel -----------------------------------------------------
   Progressive enhancement over .kyom-work-rail (home, students' work) and
   .kyom-fnd-rail (founder page, products). kyom-carousel.js injects the .kyom-cvr
   wrapper and the controls, then adds .is-stagger. With JS off none of this applies
   and the native scroll-snap rail from kyom-design.css:2966 is what ships.

   Positioning is intentionally PHYSICAL (left, translateX). Transforms are never
   flipped by `direction`, so mixing logical insets with physical transforms would
   flip the layout twice under RTL. The single sign flip lives in the JS.
   ------------------------------------------------------------------------- */
/* The vertical padding is not decoration: flank tiles are rotated 2.5-7.5deg, and a
   rotated 240x320 box grows ~14px taller than its unrotated self. Without the gutter,
   overflow:hidden shears the corners off the cards either side of centre. */
.kyom-cvr {
  position: relative;
  overflow: hidden;
  padding-block: 18px;
}

.kyom-cvr .kyom-work-rail.is-stagger {
  display: block;
  position: relative;
  overflow: visible;
  scroll-snap-type: none;
  padding-block-end: 0;
  /* pan-y keeps the page scrollable vertically through the deck while the horizontal
     axis stays ours. user-select stops a drag from selecting the captions instead of
     moving the cards; the matching dragstart suppression is in kyom-carousel.js. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.kyom-cvr .kyom-work-rail.is-stagger:active { cursor: grabbing }

/* The rail's own scrollbar styling from kyom-design.css is meaningless once it stops
   scrolling, and a residual track reads as a broken control. */
.kyom-cvr .kyom-work-rail.is-stagger::-webkit-scrollbar { display: none }
.kyom-cvr .kyom-work-rail.is-stagger { scrollbar-width: none }

.kyom-cvr .kyom-work-rail.is-stagger > .kyom-w-tile {
  position: absolute;
  top: 0;
  left: 50%;
  transition: transform .55s var(--k-ease), opacity .55s var(--k-ease);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .kyom-cvr .kyom-work-rail.is-stagger > .kyom-w-tile { transition: none }
}

/* Controls sit below the deck, centred as a pair. Flanking the cards they overlapped the
   outer tiles, and at 390px there is no side room for them at all. Brand shape: 2px radius,
   hairline border, no shadow, no pills. 44px is the minimum comfortable touch target and
   this is a phone-first surface, so it is a floor, not a preference. */
.kyom-cvr-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-block-start: 20px;
}
.kyom-cvr-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--k-paper);
  border: 1px solid var(--k-hair);
  border-radius: var(--k-r);
  color: var(--k-ink);
  cursor: pointer;
  transition: background-color .18s ease-out, border-color .18s ease-out;
}
.kyom-cvr-btn:hover { background: var(--k-paper2); border-color: var(--k-ink) }
.kyom-cvr-btn:focus-visible { outline: 2px solid var(--k-ink); outline-offset: 2px }
.kyom-cvr-btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

@media (max-width: 640px) {
  /* The rail bleeds 20px past the section padding (kyom-design.css:3042) so a tile is
     always clipped by the edge in the scroll-snap fallback. In coverflow that bleed is
     what lets the outer flanks run off-screen instead of being cut mid-card. The nav must
     NOT inherit it, or the buttons drift off-centre by 20px. */
  .kyom-cvr-nav { margin-block-start: 16px; padding-inline: 20px }
}

/* ---- moving border --------------------------------------------------------
   Requested as the Aceternity "moving border" React component. This is the same
   effect natively: the site has no React, Tailwind or build step, and adding all
   three plus framer-motion to draw a border would be a lot of machinery for
   fifteen lines of CSS.

   Brand-safe by construction. The guideline forbids shadows and says depth comes
   from hairlines, so this is a 1px BORDER, not a glow — no blur, no spread. The
   travelling highlight runs Silver Chalice into Spanish Purple and back out,
   which is the palette's own light-to-accent move rather than a new colour.

   Mechanics worth knowing:
   - A registered @property is the only way to animate a conic-gradient. Plain
     custom properties interpolate discretely, so the angle would jump 0->360
     with nothing in between.
   - The two-layer mask punches out the content box so only the 1px padding ring
     paints. Without it the gradient fills the whole element.
   - Browsers without @property keep the element's own static border and animate
     nothing, which is the correct degradation.

   Scope is deliberately narrow. Everything shimmering at once is noise, and an
   animated gradient repaints its element every frame — mobile is the primary
   target here, so this runs on the ONE carousel tile in focus, the founder
   page's value cards, and buttons only while hovered or focused. -------- */
@property --k-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false }

@keyframes kyom-orbit { to { --k-ang: 360deg } }

@media (prefers-reduced-motion: no-preference) {
  .kyom-cvr .kyom-w-tile.is-active,
  .kyom-fnd-values .kyom-accr-card,
  .kyom-accr-btn,
  .kyom-accr-btn-o { position: relative }

  .kyom-cvr .kyom-w-tile.is-active::after,
  .kyom-fnd-values .kyom-accr-card::after,
  .kyom-accr-btn:hover::after,
  .kyom-accr-btn:focus-visible::after,
  .kyom-accr-btn-o:hover::after,
  .kyom-accr-btn-o:focus-visible::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--k-ang),
      transparent 0 58%,
      var(--k-silver) 72%,
      var(--k-plum) 80%,
      var(--k-silver) 88%,
      transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: kyom-orbit 4s linear infinite;
  }

  /* A button is a deliberate, short interaction — the sweep should read as a
     response, not as ambience. */
  .kyom-accr-btn:hover::after,
  .kyom-accr-btn:focus-visible::after,
  .kyom-accr-btn-o:hover::after,
  .kyom-accr-btn-o:focus-visible::after { animation-duration: 2.2s }

  /* Inside the plum field the outline button is Alabaster on Spanish Purple, so a
     plum highlight would vanish into the ground. Invert it. */
  .kyom-accr-field .kyom-accr-btn-o:hover::after,
  .kyom-accr-field .kyom-accr-btn-o:focus-visible::after {
    background: conic-gradient(from var(--k-ang),
      transparent 0 58%,
      var(--k-rose2) 72%,
      var(--k-ondark) 80%,
      var(--k-rose2) 88%,
      transparent 100%);
  }

  /* Stagger so identical orbits never beat in lockstep. Offsets are -0.8s apart, which
     spreads five cards evenly across the 4s cycle — the grid currently holds five, and an
     earlier -1s/-2s/-3s set left the first and fifth running in sync. A sixth wraps to
     -0.4s, landing between the first and second rather than on top of either. */
  .kyom-fnd-values .kyom-accr-card:nth-child(2)::after { animation-delay: -.8s }
  .kyom-fnd-values .kyom-accr-card:nth-child(3)::after { animation-delay: -1.6s }
  .kyom-fnd-values .kyom-accr-card:nth-child(4)::after { animation-delay: -2.4s }
  .kyom-fnd-values .kyom-accr-card:nth-child(5)::after { animation-delay: -3.2s }
  .kyom-fnd-values .kyom-accr-card:nth-child(6)::after { animation-delay: -.4s }
}

/* Announced to assistive tech as "N / M" on every index change. */
.kyom-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}