/* WS-36: Star Wars wipe transitions — cross-document View Transitions API */

:root {
  --wipe-dur: 650ms;
  --slide-dur: 500ms;
  --wipe-ease: cubic-bezier(.22,.61,.36,1);
}

@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: var(--wipe-dur);
}

::view-transition-old(root) {
  animation: none;
  mix-blend-mode: normal;
  z-index: 0;
}

::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  z-index: 1;
}

/* P1-a: With JS off, the group still morphs geometry for 650ms while
   new/old are un-animated, showing viewport background (~245ms white).
   Kill the group morph and hide old snapshot entirely when not wiping. */
html:not([data-wipe])::view-transition-group(root) { animation-duration: 0s; }
html:not([data-wipe])::view-transition-old(root)   { display: none; }

::view-transition-image-pair(root) {
  isolation: auto;
}

/* Angle selectors — NO descendant space before ::view-transition (stray space = silent no-op) */
/* P2-d: drop-shadow creates a hairline that tracks the clip-path silhouette. */
html[data-wipe="lr"]::view-transition-new(root) {
  animation: wipe-lr var(--wipe-dur) var(--wipe-ease) both;
  filter: drop-shadow(2px 0 0 var(--accent, #2a9d8a));
}
html[data-wipe="rl"]::view-transition-new(root) {
  animation: wipe-rl var(--wipe-dur) var(--wipe-ease) both;
  filter: drop-shadow(-2px 0 0 var(--accent, #2a9d8a));
}
html[data-wipe="tb"]::view-transition-new(root) {
  animation: wipe-tb var(--wipe-dur) var(--wipe-ease) both;
  filter: drop-shadow(0 2px 0 var(--accent, #2a9d8a));
}
html[data-wipe="bt"]::view-transition-new(root) {
  animation: wipe-bt var(--wipe-dur) var(--wipe-ease) both;
  filter: drop-shadow(0 -2px 0 var(--accent, #2a9d8a));
}
html[data-wipe="d1"]::view-transition-new(root) {
  animation: wipe-d1 var(--wipe-dur) var(--wipe-ease) both;
}
html[data-wipe="d2"]::view-transition-new(root) {
  animation: wipe-d2 var(--wipe-dur) var(--wipe-ease) both;
}
html[data-wipe="iris"]::view-transition-new(root) {
  animation: wipe-iris var(--wipe-dur) var(--wipe-ease) both;
}

/* Keyframes — shared set (used by page nav + carousel task) */
@keyframes wipe-lr {
  from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes wipe-rl {
  from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
  to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes wipe-tb {
  from { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
  to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes wipe-bt {
  from { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
  to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes wipe-d1 {
  from { clip-path: polygon(-100% 0, 0% 0, -40% 100%, -100% 100%); }
  to   { clip-path: polygon(-100% 0, 200% 0, 160% 100%, -100% 100%); }
}
@keyframes wipe-d2 {
  from { clip-path: polygon(200% 100%, 100% 100%, 140% 0, 200% 0); }
  to   { clip-path: polygon(200% 100%, -100% 100%, -60% 0, 200% 0); }
}
@keyframes wipe-iris {
  from { clip-path: circle(0% at 50% 50%); }
  to   { clip-path: circle(150% at 50% 50%); }
}

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