/* Sero motion layer.
   Everything here is scoped to html.sero-anim, which a tiny script in <head>
   adds only when animations are on (Customizer) and the visitor has not asked
   for reduced motion. Without it the site renders exactly as before. */

:root {
  --sa-ease: cubic-bezier(0.16, 1, 0.3, 1);      /* soft ease-out */
  --sa-ease-io: cubic-bezier(0.76, 0, 0.24, 1);   /* curtain in-out */
}

/* ───────── Curtain: page transitions with a digital skull ───────── */
#sa-curtain {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: #0E0E0D;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(100%);
}
html.sa-enter #sa-curtain {
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
/* Leaving a page: slide up from below to cover it */
html #sa-curtain.sa-cover {
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: transform .6s var(--sa-ease-io);
}
/* Arriving: lift away to reveal the page */
html #sa-curtain.sa-out {
  visibility: visible;
  transform: translateY(-100%);
  transition: transform .9s var(--sa-ease-io);
}
/* Safety net: never leave the page covered if a script fails */
html.sa-enter #sa-curtain:not(.sa-out) { animation: sa-failsafe 0s 6s forwards; }
@keyframes sa-failsafe { to { visibility: hidden; transform: translateY(-100%); } }

/* While the curtain is up, the scrollbar strip on the right is dark too */
html.sa-enter, html.sa-leaving { background: #0E0E0D; }

/* The skull canvas fills the curtain; animations.js draws into it */
.sa-skull {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ───────── Headings: line-by-line mask reveal ───────── */
.sero-anim .sa-line {
  /* inline-block: its margins never merge with the next line's, so padding + negative margin cancel exactly */
  display: inline-block;
  vertical-align: top;
  width: calc(100% + .16em);
  overflow: hidden;
  /* room for accents, descenders and italic overhang inside the mask */
  padding: .1em .08em .14em;
}
#sero-root .sa-line { margin: -.1em -.08em -.14em; } /* cancels the padding; #sero-root beats the base margin reset */
.sero-anim .sa-line-in {
  display: block;
  transform: translateY(110%);
  transition: transform 1.1s var(--sa-ease);
}
.sero-anim .sa-go .sa-line-in { transform: none; }

/* Fade-up blocks (the theme's .s-fu) wait for their turn */
.sero-anim .s-fu:not(.sa-go) { opacity: 0; transform: translateY(18px); }
.sero-anim .s-fu { transition: opacity .9s var(--sa-ease), transform .9s var(--sa-ease); }

/* ───────── Project list hover preview ───────── */
.sero-anim #s-preview {
  clip-path: inset(100% 0 0 0);
  transition: opacity .3s var(--sa-ease), clip-path .6s var(--sa-ease);
  will-change: left, top, transform;
}
.sero-anim #s-preview.show { clip-path: inset(0 0 0 0); }
.sero-anim #s-preview img {
  transform: scale(1.18);
  transition: transform 1s var(--sa-ease);
}
.sero-anim #s-preview.show img { transform: scale(1); }

/* ───────── Project page images ───────── */
.sero-anim #s-proj-body .s-img.sa-img {
  opacity: 0;
  transform: translateY(56px);
  clip-path: inset(14% 0 0 0);
  transition: opacity .7s ease, transform 1.2s var(--sa-ease), clip-path 1.2s var(--sa-ease);
}
.sero-anim #s-proj-body .s-img.sa-img img,
.sero-anim #s-proj-body .s-img.sa-img video {
  transform: scale(1.12);
  transition: transform 1.6s var(--sa-ease);
}
.sero-anim #s-proj-body .s-img.sa-img.sa-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
.sero-anim #s-proj-body .s-img.sa-img.sa-in img,
.sero-anim #s-proj-body .s-img.sa-img.sa-in video { transform: scale(1); }

.sero-anim #s-proj-body .sa-fade { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--sa-ease), transform .8s var(--sa-ease); }
.sero-anim #s-proj-body .sa-fade.sa-go { opacity: 1; transform: none; }

/* ───────── Menu: letters roll up on hover ───────── */
.sero-anim .sa-roll {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1;
  height: 1em;
}
.sero-anim .sa-roll > span {
  display: block;
  transition: transform .45s var(--sa-ease);
}
.sero-anim a:hover > .sa-roll > span { transform: translateY(-100%); }

/* Booking dot: soft "available" pulse */
.sero-anim .s-booking span { position: relative; }
.sero-anim .s-booking span::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #2AC56D;
  animation: sa-pulse 2.4s ease-out infinite;
}
@keyframes sa-pulse {
  0%   { transform: scale(1); opacity: .55; }
  80%, 100% { transform: scale(3.2); opacity: 0; }
}