/* Kinetic typography adapted from Codrops' MIT-licensed KineticTypePageTransition.
   See LICENSE-Codrops-KineticTypePageTransition.txt. */
#yn-transition{display:none;--yn-kinetic-ghost:.05}
html:is([data-yn-transition="enter"],[data-yn-transition="exit"]) #yn-transition{
  position:fixed;
  inset:0;
  z-index:10000;
  display:block;
  overflow:hidden;
  isolation:isolate;
  contain:layout paint style;
  pointer-events:auto;
  color:var(--text,#fdfdfd);
  background:transparent;
  animation:yn-kinetic-lifetime 1550ms linear both;
  animation-delay:calc(0ms - var(--yn-kinetic-resume,0ms));
}
html:is([data-yn-transition="enter"],[data-yn-transition="exit"]) #yn-transition::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  background:var(--bg,#000);
  animation:yn-kinetic-cover 1520ms linear backwards;
  animation-delay:calc(0ms - var(--yn-kinetic-resume,0ms));
}
.yn-transition-type{
  position:absolute;
  left:50%;
  top:50%;
  z-index:1;
  display:grid;
  justify-content:center;
  align-content:center;
  width:100vmax;
  height:100vmax;
  text-align:center;
  text-transform:uppercase;
  transform-origin:center;
  transform:translate(-50%,-50%) rotate(-90deg) scale(2.7);
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}
html:is([data-yn-transition="enter"],[data-yn-transition="exit"]) .yn-transition-type{
  will-change:transform;
  animation:yn-kinetic-plane 760ms cubic-bezier(.65,0,.35,1) backwards;
  animation-delay:calc(0ms - var(--yn-kinetic-resume,0ms));
}
.yn-transition-row{
  display:flex;
  justify-self:center;
  justify-content:center;
  align-items:baseline;
  width:max-content;
  max-width:min(140vmax,2048px);
  min-width:0;
  overflow:hidden;
  contain:paint;
  gap:.22em;
  margin:-.2em 0;
  padding:.2em 0;
  white-space:nowrap;
  color:var(--text,#fdfdfd);
  font:800 clamp(80px,15vh,192px)/.75 SuisseIntl,Arial,sans-serif;
  letter-spacing:-.045em;
  opacity:0;
  transform:translateX(-96%);
}
.yn-transition-row:nth-child(4),.yn-transition-row:nth-child(8){color:var(--accent,#e5635d)}
.yn-transition-row:nth-child(odd){font-weight:800}
.yn-transition-row:nth-child(even){font-weight:300}
.yn-transition-row>span{display:block;flex:none}
html:is([data-yn-transition="enter"],[data-yn-transition="exit"]) .yn-transition-row{
  will-change:transform,opacity;
  animation-name:yn-kinetic-row-x,yn-kinetic-row-alpha;
  animation-duration:1300ms,1400ms;
  animation-delay:calc(var(--yn-row-delay,0ms) - var(--yn-kinetic-resume,0ms)),calc(0ms - var(--yn-kinetic-resume,0ms));
  animation-timing-function:linear,linear;
  animation-fill-mode:backwards,backwards;
  animation-iteration-count:1,1;
}
.yn-transition-row:nth-child(2){--yn-row-delay:20ms}
.yn-transition-row:nth-child(3){--yn-row-delay:40ms}
.yn-transition-row:nth-child(4){--yn-row-delay:60ms}
.yn-transition-row:nth-child(5){--yn-row-delay:80ms}
.yn-transition-row:nth-child(6){--yn-row-delay:100ms}
.yn-transition-row:nth-child(7){--yn-row-delay:120ms}
.yn-transition-row:nth-child(8){--yn-row-delay:140ms}
.yn-transition-row:nth-child(9){--yn-row-delay:160ms}
.yn-transition-row:nth-child(10){--yn-row-delay:180ms}
.yn-transition-row:nth-child(11){--yn-row-delay:200ms}
.yn-transition-skip{
  position:absolute;
  z-index:3;
  right:clamp(24px,6vw,88px);
  bottom:clamp(24px,4vh,56px);
  max-width:calc(100% - 48px);
  min-width:44px;
  min-height:44px;
  margin:0;
  padding:11px 16px;
  border:1px solid var(--text,#fdfdfd);
  border-radius:0;
  background:var(--bg,#000);
  color:var(--text,#fdfdfd);
  font:500 13px/1.5 SuisseIntl,Arial,sans-serif;
  text-align:left;
  pointer-events:auto;
  cursor:pointer;
  touch-action:manipulation;
}
.yn-transition-skip:hover{border-color:var(--accent,#e5635d);color:var(--accent,#e5635d)}
.yn-transition-skip:active{border-color:var(--text,#fdfdfd);background:var(--text,#fdfdfd);color:var(--bg,#000)}
#yn-transition[data-pressed="true"] .yn-transition-skip{border-color:var(--text,#fdfdfd);background:var(--text,#fdfdfd);color:var(--bg,#000)}
.yn-transition-skip:focus-visible{outline:2px solid var(--accent,#e5635d);outline-offset:5px}
@keyframes yn-kinetic-plane{
  from{transform:translate(-50%,-50%) rotate(0deg) scale(1)}
  to{transform:translate(-50%,-50%) rotate(-90deg) scale(2.7)}
}
@keyframes yn-kinetic-row-x{
  0%{transform:translateX(0);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  40%{transform:translateX(9.6%);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  100%{transform:translateX(-96%)}
}
@keyframes yn-kinetic-row-alpha{
  0%{opacity:var(--yn-kinetic-ghost);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  37%{opacity:1;animation-timing-function:cubic-bezier(.55,0,1,.45)}
  100%{opacity:0}
}
@keyframes yn-kinetic-cover{
  0%,59.21%{opacity:1}
  100%{opacity:0}
}
/* Live document handoff keeps the moving letters' clock. The newly loaded
   content starts behind an opaque cover and then receives its own short reveal. */
html[data-yn-transition="enter"] #yn-transition[data-yn-kinetic-mode="live"]::before{
  animation:yn-kinetic-live-cover var(--yn-kinetic-uncover-duration,620ms) cubic-bezier(.2,.7,.2,1) backwards;
  animation-delay:var(--yn-kinetic-uncover-wait,0ms);
}
@keyframes yn-kinetic-live-cover{from{opacity:1}to{opacity:0}}
/* A late document never rewinds almost-finished typography. This is also a
   finite CSS-only fallback when the deferred observer has not arrived yet. */
html[data-yn-transition="enter"] #yn-transition[data-yn-kinetic-mode="soft"]{
  animation-duration:180ms;
  animation-delay:0ms;
}
html[data-yn-transition="enter"] #yn-transition[data-yn-kinetic-mode="soft"]::before{
  animation:yn-kinetic-soft-cover 180ms ease-out backwards;
  animation-delay:0ms;
}
html[data-yn-transition="enter"] #yn-transition[data-yn-kinetic-mode="soft"] .yn-transition-type,
html[data-yn-transition="enter"] #yn-transition[data-yn-kinetic-mode="soft"] .yn-transition-row,
html[data-yn-transition="enter"] #yn-transition[data-yn-kinetic-mode="soft"] .yn-transition-skip{
  display:none;
  animation:none;
}
@keyframes yn-kinetic-soft-cover{from{opacity:1}to{opacity:0}}
/* Finite first-paint fallback: even without deferred JavaScript the entire layer
   and its skip control leave rendering and keyboard navigation after 1550ms. */
@keyframes yn-kinetic-lifetime{
  0%{display:block;visibility:visible;pointer-events:auto}
  99.99%{display:block;visibility:visible;pointer-events:auto}
  100%{display:none;visibility:hidden;pointer-events:none}
}
@media(max-width:700px){
  .yn-transition-row{font-size:clamp(60px,13.6vh,122px)}
  .yn-transition-row:nth-child(n+10){display:none}
  .yn-transition-skip{right:20px;bottom:20px;max-width:calc(100% - 40px)}
}
@media(prefers-contrast:more){
  #yn-transition{--yn-kinetic-ghost:.4}
  .yn-transition-skip{border-width:2px}
}
@media(prefers-reduced-motion:reduce),(forced-colors:active){
  html:is([data-yn-transition="enter"],[data-yn-transition="exit"]) #yn-transition{display:none!important;visibility:hidden;animation:none}
  html:is([data-yn-transition="enter"],[data-yn-transition="exit"]) #yn-transition::before,
  html:is([data-yn-transition="enter"],[data-yn-transition="exit"]) .yn-transition-type,
  html:is([data-yn-transition="enter"],[data-yn-transition="exit"]) .yn-transition-row{animation:none}
}

/* The outgoing page remains visible during the shared camera move. */
.yn-exit-layer{position:fixed;inset:0;width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;z-index:10001;overflow:hidden;isolation:isolate;contain:layout paint style;background:transparent;color:var(--text,#fdfdfd);pointer-events:auto;touch-action:none;cursor:progress}
.yn-exit-focal{position:absolute;inset:0;z-index:1;pointer-events:none;transform-origin:0 0}
.yn-exit-snapshot{position:absolute;margin:0;pointer-events:none!important;user-select:none!important;-webkit-user-select:none!important}
.yn-exit-snapshot,.yn-exit-snapshot *{pointer-events:none!important;animation:none!important;transition:none!important}
html[data-yn-transition="exit"] #yn-transition::before{opacity:1;animation-name:yn-kinetic-exit-cover;animation-duration:760ms;animation-timing-function:cubic-bezier(.45,0,.55,1)}
/* Only the invisible lifetime is held. Letters and the plane keep advancing
   while native navigation loads the next document. */
#yn-transition[data-yn-exit-held="true"]{animation-play-state:paused!important}
@keyframes yn-kinetic-exit-cover{0%,18%{opacity:0}100%{opacity:1}}
@media(prefers-reduced-motion:reduce),(forced-colors:active){.yn-exit-layer{display:none!important}}