/* Halo · About. A cross-document view transition between / and /about, set up
   by orloj-transition.js. Both pages load this file, so both opt in.
   Enter: an aperture opens from the About link, the Orloj rises out of it,
   then the night widens to the page. Exit: the reverse, closing into About. */
/* Unconditional on purpose: Chrome drops an opt-in nested in @media when the
   page declares color-scheme, as the Next layout does for /about. Reduced
   motion is honoured in orloj-transition.js, which skips the transition. */
@view-transition { navigation: auto; }
[data-orloj-header] { view-transition-name: halo-header; }
[data-orloj-dial] { view-transition-name: orloj-dial; }
[data-orloj-marquee] { view-transition-name: halo-marquee; }
[data-orloj-footer] { view-transition-name: halo-footer; }

:root {
  --orloj-enter: 1300ms;
  --orloj-exit: 1050ms;
  --orloj-veil: blur(5px) brightness(.4);
}
:root:not([data-theme="dark"]) { --orloj-veil: brightness(.93) saturate(.92); }

/* About sits at the centre of both headers. On /about it is open, marked by a
   fine gilt cross; clicking it again closes the page. */
.orloj-nav { position:absolute; top:50%; left:50%; display:flex; transform:translate(-50%,-50%); }
.orloj-nav .orloj-about-link {
  position:relative; display:flex; align-items:center; min-height:44px;
  padding:0 2px 0 calc(2px + .24em); color:inherit; opacity:1;
  font:400 11px/1 var(--font-ui,"Aeonik Pro",Arial,sans-serif);
  letter-spacing:.24em; text-transform:uppercase; text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.orloj-nav .orloj-about-link:focus-visible { outline:1px solid currentColor; outline-offset:4px; border-radius:2px; }
.orloj-about-close {
  position:absolute; top:50%; left:100%; width:11px; height:11px; margin:-5.5px 0 0 7px;
  transition:transform 450ms cubic-bezier(.23,1,.32,1);
}
.orloj-about-close::before,.orloj-about-close::after {
  content:""; position:absolute; top:5px; left:0; width:11px; height:1px; background:#c9a86a; transform:rotate(45deg);
}
.orloj-about-close::after { transform:rotate(-45deg); }
@media (hover:hover) and (pointer:fine) {
  .orloj-nav .orloj-about-link:hover .orloj-about-close { transform:rotate(90deg); }
}
@media (prefers-reduced-motion:reduce) {
  .orloj-about-close { transition:none; }
}

/* Header, marquee and footer hold still; only About's open state cross-fades. */
:root:active-view-transition-type(orloj-enter,orloj-exit)::view-transition-group(halo-header),
:root:active-view-transition-type(orloj-enter,orloj-exit)::view-transition-group(halo-marquee),
:root:active-view-transition-type(orloj-enter,orloj-exit)::view-transition-group(halo-footer) { z-index:3; }
:root:active-view-transition-type(orloj-enter,orloj-exit)::view-transition-group(halo-header),
:root:active-view-transition-type(orloj-enter,orloj-exit)::view-transition-old(halo-header),
:root:active-view-transition-type(orloj-enter,orloj-exit)::view-transition-new(halo-header),
:root:active-view-transition-type(orloj-enter,orloj-exit)::view-transition-group(halo-marquee),
:root:active-view-transition-type(orloj-enter,orloj-exit)::view-transition-old(halo-marquee),
:root:active-view-transition-type(orloj-enter,orloj-exit)::view-transition-new(halo-marquee),
:root:active-view-transition-type(orloj-enter,orloj-exit)::view-transition-group(halo-footer),
:root:active-view-transition-type(orloj-enter,orloj-exit)::view-transition-old(halo-footer),
:root:active-view-transition-type(orloj-enter,orloj-exit)::view-transition-new(halo-footer) { animation-duration:640ms; }
:root:active-view-transition-type(orloj-enter,orloj-exit)::view-transition-group(orloj-dial) { z-index:2; animation:none; }

:root:active-view-transition-type(orloj-enter)::view-transition-old(root) {
  mix-blend-mode:normal; animation:orloj-veil var(--orloj-enter) cubic-bezier(.4,0,.2,1) both;
}
:root:active-view-transition-type(orloj-enter)::view-transition-new(root) {
  mix-blend-mode:normal; animation:orloj-aperture-open var(--orloj-enter) both;
}
:root:active-view-transition-type(orloj-enter)::view-transition-new(orloj-dial) { animation:orloj-dial-rise var(--orloj-enter) both; }

:root:active-view-transition-type(orloj-exit)::view-transition-old(root) {
  z-index:1; mix-blend-mode:normal; animation:orloj-aperture-close var(--orloj-exit) both;
}
:root:active-view-transition-type(orloj-exit)::view-transition-new(root) {
  mix-blend-mode:normal; animation:orloj-unveil var(--orloj-exit) cubic-bezier(.4,0,.2,1) both;
}
:root:active-view-transition-type(orloj-exit)::view-transition-old(orloj-dial) { animation:orloj-dial-set var(--orloj-exit) both; }

/* The aperture and the dial share each segment's easing, so its gilt rim is
   the aperture's edge until the dial settles. */
@keyframes orloj-aperture-open {
  0% { clip-path:circle(0 at var(--orloj-link-x) var(--orloj-link-y)); animation-timing-function:cubic-bezier(.62,0,.22,1); }
  52% { clip-path:circle(var(--orloj-dial-r) at var(--orloj-dial-x) var(--orloj-dial-y)); animation-timing-function:cubic-bezier(.55,0,.1,1); }
  100% { clip-path:circle(var(--orloj-cover) at var(--orloj-dial-x) var(--orloj-dial-y)); }
}
@keyframes orloj-dial-rise {
  0% { transform:translate(var(--orloj-dx),var(--orloj-dy)) scale(0) rotate(-16deg); animation-timing-function:cubic-bezier(.62,0,.22,1); }
  52%,100% { transform:none; }
}
@keyframes orloj-aperture-close {
  0% { clip-path:circle(var(--orloj-cover) at var(--orloj-dial-x) var(--orloj-dial-y)); animation-timing-function:cubic-bezier(.5,0,.35,1); }
  46% { clip-path:circle(var(--orloj-dial-r) at var(--orloj-dial-x) var(--orloj-dial-y)); animation-timing-function:cubic-bezier(.68,0,.3,1); }
  100% { clip-path:circle(0 at var(--orloj-link-x) var(--orloj-link-y)); }
}
@keyframes orloj-dial-set {
  0%,46% { transform:none; animation-timing-function:cubic-bezier(.68,0,.3,1); }
  100% { transform:translate(var(--orloj-dx),var(--orloj-dy)) scale(0) rotate(16deg); }
}
@keyframes orloj-veil { to { filter:var(--orloj-veil); } }
@keyframes orloj-unveil { from { filter:var(--orloj-veil); } }
/* The marquee is identical on both pages and keeps moving: show only the
   live band, so its frozen snapshot never doubles the type. */
:root:active-view-transition-type(orloj-enter,orloj-exit)::view-transition-old(halo-marquee) { display:none; }
:root:active-view-transition-type(orloj-enter,orloj-exit)::view-transition-new(halo-marquee) { animation:none; }

/* Opened from the moon ring: the moons have already swept outward, so no
   second aperture. Home lets go, About settles in, and the clock finishes the
   moons' clockwise turn as it lands. */
:root:active-view-transition-type(orloj-moons)::view-transition-old(root) {
  mix-blend-mode:normal; animation:orloj-let-go 280ms cubic-bezier(.4,0,1,1) both;
}
:root:active-view-transition-type(orloj-moons)::view-transition-new(root) {
  mix-blend-mode:normal; animation:orloj-settle 520ms cubic-bezier(.2,.7,.2,1) 60ms both;
}
:root:active-view-transition-type(orloj-moons)::view-transition-new(orloj-dial) {
  animation:orloj-dial-turn 900ms cubic-bezier(.15,.75,.25,1) both;
}
@keyframes orloj-let-go { to { opacity:0; } }
@keyframes orloj-settle { from { opacity:0; } }
@keyframes orloj-dial-turn { from { opacity:0; transform:rotate(-28deg) scale(1.14); } }

/* Closing About into the moon ring: no closing circle either. About lets go,
   Home settles, the clock turns away clockwise and the moons spiral back in. */
:root:active-view-transition-type(orloj-moons-return)::view-transition-old(root) {
  z-index:1; mix-blend-mode:normal; animation:orloj-let-go 320ms cubic-bezier(.4,0,1,1) both;
}
:root:active-view-transition-type(orloj-moons-return)::view-transition-new(root) {
  mix-blend-mode:normal; animation:orloj-settle 480ms cubic-bezier(.2,.7,.2,1) both;
}
:root:active-view-transition-type(orloj-moons-return)::view-transition-old(orloj-dial) {
  animation:orloj-dial-leave 420ms cubic-bezier(.4,0,1,1) both;
}
@keyframes orloj-dial-leave { to { opacity:0; transform:rotate(28deg) scale(1.14); } }
/* No underline on About: the site's nav underline does not apply to it. */
.nav .orloj-nav .orloj-about-link::after { content:none; }