/* atelance passage · page transitions and the shared contract for opening animations.
   Keep INK values in step with assets/site/passage.js. */

@view-transition { navigation: auto; }

:root {
  --atl-ease: cubic-bezier(.76, 0, .24, 1);
  --atl-ease-out: cubic-bezier(.16, 1, .3, 1);
  --atl-ink: #0b0a0c;
  --atl-seam: linear-gradient(90deg, rgba(203, 169, 104, 0), rgba(203, 169, 104, .62) 18%, #efdfba 50%, rgba(203, 169, 104, .62) 82%, rgba(203, 169, 104, 0));
}

/* each concept site fades through its own colour, never through the studio black */
:root[data-page='cala'] { --atl-ink: #0a1322; }
:root[data-page='aurelia'] { --atl-ink: #16211d; }

/* ---------- opening animation contract ---------- */

/* overlays exist in the markup but only show when passage.js decided an opening should play */
:root:not(.atl-intro-on) [data-atl-intro] { display: none !important; }

/* pages animate the children of their overlay; the overlay itself carries a failsafe so it can never stay */
.atl-intro-on [data-atl-intro] { animation: atl-failsafe .6s linear 7s both; }

/* a skipped opening simply dissolves */
.atl-skip [data-atl-intro] { opacity: 0 !important; transition: opacity .5s cubic-bezier(.33, 1, .68, 1) !important; }

@keyframes atl-failsafe { to { opacity: 0; visibility: hidden; } }

/* ---------- native cross-document transitions ---------- */

/* any other same-site navigation dissolves quietly */
::view-transition-group(root) { animation-duration: .5s; }

/* a language change inside a page: unchanged pixels stay perfectly still while the words dissolve into their translation */
html:active-view-transition-type(atl-lang)::view-transition-old(root),
html:active-view-transition-type(atl-lang)::view-transition-new(root) { animation-duration: .56s; animation-timing-function: cubic-bezier(.33, 1, .68, 1); }

/* forward · the studio recedes into the chosen world's colour while its preview opens to full frame */
html:active-view-transition-type(atl-forward)::view-transition-old(root) {
  animation: atl-recede .72s cubic-bezier(.65, 0, .35, 1) both; mix-blend-mode: normal;
}

html:active-view-transition-type(atl-forward)::view-transition-new(root) {
  animation: atl-arrive .9s var(--atl-ease-out) .62s both; mix-blend-mode: normal;
}

html:active-view-transition-type(atl-forward)::view-transition-group(atl-shot) {
  animation-duration: 1.02s; animation-timing-function: var(--atl-ease);
}

/* snapshots fill the travelling frame instead of letterboxing, whatever the two aspect ratios are */
::view-transition-old(atl-shot), ::view-transition-new(atl-shot) { height: 100%; object-fit: cover; mix-blend-mode: normal; }

/* the preview stays solid while the destination blooms over it, so the frame never turns translucent */
html:active-view-transition-type(atl-forward)::view-transition-old(atl-shot) { animation: none; }
/* a preview with no counterpart on the new page simply leaves with the rest of the studio */
html:active-view-transition-type(atl-forward)::view-transition-old(atl-shot):only-child { animation: atl-recede .72s cubic-bezier(.65, 0, .35, 1) both; }
html:active-view-transition-type(atl-forward)::view-transition-new(atl-shot) { animation: atl-appear .62s cubic-bezier(.65, 0, .35, 1) .36s both; }
html:active-view-transition-type(atl-forward)::view-transition-new(atl-nav) { animation: atl-appear .7s var(--atl-ease-out) .78s both; }

/* return · the concept site sinks away and the studio opens from a gold seam, as in its own opening */
html:active-view-transition-type(atl-return)::view-transition-old(root) {
  animation: atl-sink .76s cubic-bezier(.65, 0, .35, 1) both; mix-blend-mode: normal;
}

html:active-view-transition-type(atl-return)::view-transition-new(root) {
  animation: atl-open 1.06s var(--atl-ease) .36s both; mix-blend-mode: normal;
}

/* two gold threads are drawn together, then ride the opening edges apart */
html:active-view-transition-type(atl-return)::view-transition-new(atl-seam-a) {
  animation: atl-thread .52s var(--atl-ease-out) both, atl-seam-up 1.06s var(--atl-ease) .36s both, atl-vanish .4s linear 1.02s both;
}

html:active-view-transition-type(atl-return)::view-transition-new(atl-seam-b) {
  animation: atl-thread .52s var(--atl-ease-out) both, atl-seam-down 1.06s var(--atl-ease) .36s both, atl-vanish .4s linear 1.02s both;
}

.atl-seam {
  position: fixed; inset-inline: 0; top: 50%; height: 1px; margin-top: -.5px; z-index: 2147483000;
  pointer-events: none; background: var(--atl-seam);
}

@keyframes atl-recede { to { opacity: 0; transform: scale(.94); } }
@keyframes atl-arrive { from { opacity: 0; transform: translateY(22px); } }
@keyframes atl-appear { from { opacity: 0; } }
@keyframes atl-vanish { to { opacity: 0; } }
@keyframes atl-sink { to { opacity: 0; transform: scale(.955); } }
@keyframes atl-open { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes atl-thread { from { scale: 0 1; } }
@keyframes atl-seam-up { to { translate: 0 -50vh; } }
@keyframes atl-seam-down { to { translate: 0 50vh; } }

/* reduced motion keeps only a brief dissolve so the change of page is still perceptible */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .2s !important; animation-delay: 0s !important; }
}

/* ---------- scripted passage for browsers without cross-document transitions ---------- */

/* exit layers are built by passage.js on top of everything, including open menus */
.atl-exit { position: fixed; inset: 0; z-index: 2147483600; overflow: hidden; contain: strict; }

/* the chosen preview grows from its card to full frame, then settles into the destination's colour */
.atl-exit--shot { background: var(--atl-exit-ink); }
.atl-exit__pic { position: absolute; inset: 0; background: center / cover no-repeat; transform-origin: 50% 50%; will-change: transform; }
.atl-exit__veil { position: absolute; inset: 0; background: var(--atl-exit-ink); opacity: 0; }

/* the seam exit closes two leaves of cloth on a gold thread */
.atl-exit--seam .atl-exit__leaf { position: absolute; inset-inline: 0; height: 50.2%; background: var(--atl-exit-ink); transform: translateY(-101%); }
.atl-exit--seam .atl-exit__leaf:first-child { top: 0; }
.atl-exit--seam .atl-exit__leaf:nth-child(2) { bottom: 0; transform: translateY(101%); }
.atl-exit__seam { position: absolute; inset-inline: 0; top: 50%; height: 1px; margin-top: -.5px; z-index: 1; background: var(--atl-seam); transform: scaleX(0); }

/* the entry curtain is drawn on the root before anything else paints, then parts along the seam */
html.atl-curtain::before, html.atl-curtain::after {
  content: ''; position: fixed; inset-inline: 0; z-index: 2147483600; height: 50.2%; pointer-events: none;
  background: var(--atl-seam) 50% var(--atl-seam-y) / 100% 1px no-repeat, var(--atl-ink);
}

html.atl-curtain::before { top: 0; --atl-seam-y: 100%; animation: atl-leaf-up 1s var(--atl-ease) 4s both; }
html.atl-curtain::after { bottom: 0; --atl-seam-y: 0%; animation: atl-leaf-down 1s var(--atl-ease) 4s both; }

html.atl-curtain.atl-play::before { animation: atl-seam-in .46s var(--atl-ease-out) both, atl-leaf-up 1s var(--atl-ease) .3s both; }
html.atl-curtain.atl-play::after { animation: atl-seam-in .46s var(--atl-ease-out) both, atl-leaf-down 1s var(--atl-ease) .3s both; }

@keyframes atl-seam-in { from { background-size: 0% 1px, auto; } to { background-size: 100% 1px, auto; } }
@keyframes atl-leaf-up { to { transform: translateY(-101%); } }
@keyframes atl-leaf-down { to { transform: translateY(101%); } }

@media (prefers-reduced-motion: reduce) {
  html.atl-curtain::before, html.atl-curtain::after { display: none; }
}