/* variables */
:root {
  --font-light: "pf-hellenica", sans-serif;
  --font-regular: "pf-hellenica", sans-serif;
  --font-bold: "pf-hellenica", sans-serif;

  --white: #ffffff;
  --black: #000000;
  --callout-gradient: linear-gradient(336deg, #ef78c4 29.13%, #6591c0 82.51%);
}

/* reserve the scrollbar's space even while the intro locks scrolling, so the layout
   doesn't shift sideways when the scrollbar appears at the end of the intro */
html {
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  background: #e0e0e0 url(../i/Light-Bkgnd2.jpg);
  background-repeat: repeat;
  background-attachment: fixed;
  color: #000;
  font-weight: 700;
  font-family: var(--font-regular);
  font-size: 32px;
  line-height: 1.1;
}
.text-large {
  font-size: 60px;
}

img {
  height: auto;
  max-width: 100%;
}

/* HERO STAGE
   Everything here is the RESOLVED layout (last storyboard frame). js/site.js animates each layer
   in from its storyboard start position, so changing a position here moves the end of the intro too.
   Only wrappers are animated by GSAP - keep CSS transforms off #scylla, #addysseus, .hero__title,
   .hero__copy, .lightning, #waves-bottom and #ship so the two never fight. */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: url(../i/BackgroundSplashes.png) top center;
  background-attachment: fixed;
  background-size: contain;
}
/* scroll-jack: while the visitor steps through the hero copy, the page itself doesn't scroll */
.is-jacked,
.is-jacked body {
  overflow: hidden;
}

/* launch panels: copy steps 1 and 2, in the same spot as the dates/button (step 0).
   Hidden until js/site.js steps to them. */
.hero__panel {
  position: absolute;
  z-index: 9; /* above Scylla, like the rest of the copy */
  top: 36%;
  left: 0;
  right: 0;
  width: min(560px, 40vw);
  margin: 0 auto;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  p {
    font-size: clamp(18px, 1.9vw, 30px);
    margin: 0;
  }
  .launch-panel__lead {
    padding-bottom: 1em;
  }
  .text-large {
    font-size: clamp(32px, 4vw, 60px);
  }
}
@media (max-width: 767px) {
  .hero__panel {
    top: 45%;
    width: 60vw;
    p {
      font-size: 17px;
    }
    .text-large {
      font-size: 30px;
    }
  }
}
@media (max-width: 480px) {
  .hero__panel {
    top: 40%;
    width: 88vw;
  }
}

/* intro: stage hidden until GSAP has placed everything, no scrolling until it resolves */
.is-intro,
.is-intro body {
  overflow: hidden;
}
.is-intro #hero {
  visibility: hidden;
}

/* wordmark */
/* resolved: small, top right (the intro brings it from big + centred, via the top of the page) */
.hero__title {
  position: absolute;
  z-index: 9; /* above Scylla */
  top: 4vh;
  right: 3vw;
  width: min(360px, 26vw);
  margin: 0;
  text-align: center;
  p {
    font-size: clamp(11px, 1.1vw, 18px);
    margin: 0 0 6px;
  }
  img {
    display: block;
    width: 100%;
  }
}
/* wide screens: resolve at the top centre instead of the top right */
@media (min-width: 983px) {
  .hero__title {
    left: 0;
    right: 0;
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  .hero_title {
    p {
      display: none;
    }
  }
}

/* dates + enter button */
.hero__copy {
  position: absolute;
  z-index: 9; /* above Scylla */
  top: 40%;
  left: 0;
  right: 0;
  text-align: center;
  .hero__dates {
    font-size: clamp(18px, 1.9vw, 30px);
    margin: 0;
  }

  .button {
    padding: 2.4vh 0 0;
  }
  .button img {
    width: clamp(180px, 17vw, 300px);
  }
  .button a {
    transform-origin: center bottom;
    display: inline-block;
  }
  .button a:hover {
    animation: rock 2s ease-in-out infinite;
  }
  /* text button on the ink-blob image. Width and font-size both come from --btn-w,
     so the text always stays the same size relative to the image. */
  .button a.btn {
    --btn-w: clamp(180px, 17vw, 300px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--btn-w);
    aspect-ratio: 344 / 95; /* ButtonBkgnd.png */
    padding: 0 calc(var(--btn-w) * 0.08); /* % padding would be relative to the whole copy block */
    background: url(../i/ButtonBkgnd.png) center / 100% 100% no-repeat;
    color: #d9d9d9;
    font-size: calc(var(--btn-w) * 0.085);
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
  }
  .button a.btn:hover,
  .button a.btn:focus-visible {
    color: #fff;
  }
}

/* rocking animated button */
@keyframes rock {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(1deg);
  }
  75% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/* waves */
/* Each wave drifts left/right (.drift) and bobs up/down (.bob) on different, slow cycles.
     Tweak --dx / --dy (distance) and --tx / --ty (seconds per half-cycle); negative delays offset the start. */
/* #waves-bottom sits in the page flow between the hero and the footer. It is exactly as tall as the
   waves SVG (1440x218, never narrower than 700px), pulled up over the bottom of the hero, and hangs
   --waves-overlap px down over the top of the footer. The SVG is pinned to its bottom edge. */
#waves-bottom {
  --waves-h: max(
    106px,
    15.14vw
  ); /* 218/1440 of the width; 106px at the 700px minimum */
  --waves-overlap: 10px;
  position: relative;
  z-index: 7;
  width: 100%;
  height: var(--waves-h);
  margin-top: calc((var(--waves-h) - var(--waves-overlap)) * -1);
  margin-bottom: calc(var(--waves-overlap) * -1);
  overflow: hidden;
  overflow: clip visible; /* clip the extra-wide SVG sideways, but let the ship stick up above the box */
  pointer-events: none;
  svg {
    display: block;
    width: 100%;
    height: auto; /* follow the viewBox ratio, not the height="218" attribute */
    min-width: 700px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  /* the ship rests here at the start of the intro, then sails off right (it is hidden once resolved) */
  #ship {
    z-index: 3;
    position: absolute;
    right: 20%;
    bottom: 3vw;
    width: clamp(110px, 11vw, 200px);
    img {
      display: block;
      width: 100%;
      transform-origin: 50% 90%;
      animation: ship-bob 2.6s ease-in-out infinite alternate;
    }
  }
}
/* small screens: the ship is 50% larger (the clamp above always gives its 110px minimum here) */
@media (max-width: 599px) {
  #waves-bottom #ship {
    width: 165px;
  }
}
@keyframes ship-bob {
  from {
    transform: translateY(-3px) rotate(-3deg);
  }
  to {
    transform: translateY(4px) rotate(3deg);
  }
}
/* scroll indicator ship: half the size of the intro ship, fixed to the bottom of the screen.
   Starts off the right edge; js/site.js moves #scroll-ship through the steps and
   .scroll-ship__sail off the left edge as the footer comes up. */
#scroll-ship {
  position: fixed;
  z-index: 8; /* above th ewaves but below the footer */
  left: 0;
  bottom: -6px;
  width: clamp(55px, 5.5vw, 100px);
  pointer-events: none;
  opacity: 0.8;
  transform: translateX(
    calc(100vw + 40px)
  ); /* parked off-screen right until the first scroll */
  img {
    display: block;
    width: 100%;
    transform-origin: 50% 90%;
    animation: ship-bob 2.6s ease-in-out infinite alternate;
  }
}
@media (max-width: 599px) {
  #scroll-ship {
    width: 82px; /* half of the 165px intro ship on small screens */
  }
}
.drift {
  animation: drift var(--tx) ease-in-out var(--dlx) infinite alternate;
}
.bob {
  animation: bob var(--ty) ease-in-out var(--dly) infinite alternate;
}
@keyframes drift {
  from {
    transform: translateX(calc(var(--dx) * -1));
  }
  to {
    transform: translateX(var(--dx));
  }
}
@keyframes bob {
  from {
    transform: translateY(calc(var(--dy) * -1));
  }
  to {
    transform: translateY(var(--dy));
  }
}

#wave-main {
  --dx: 10px;
  --tx: 11s;
  --dlx: -3s;
  --dy: 3.5px;
  --ty: 6s;
  --dly: -1s;
}
#wave-3 {
  --dx: 14px;
  --tx: 9.5s;
  --dlx: -2s;
  --dy: 3.5px;
  --ty: 5s;
  --dly: -0.5s;
}
#wave-4 {
  --dx: 12px;
  --tx: 8s;
  --dlx: -4s;
  --dy: 3px;
  --ty: 4.6s;
  --dly: -2s;
}
#wave-5 {
  --dx: 16px;
  --tx: 10.5s;
  --dlx: -1s;
  --dy: 4px;
  --ty: 5.6s;
  --dly: -3s;
}
#wave-6 {
  --dx: 14px;
  --tx: 8.8s;
  --dlx: -5s;
  --dy: 3.5px;
  --ty: 4.2s;
  --dly: -1.2s;
}
#wave-7 {
  --dx: 15px;
  --tx: 12s;
  --dlx: -6s;
  --dy: 4px;
  --ty: 6.5s;
  --dly: -2.5s;
}
#wave-8 {
  --dx: 12px;
  --tx: 9s;
  --dlx: -2.2s;
  --dy: 3.5px;
  --ty: 5.2s;
  --dly: -0.8s;
}
#wave-9 {
  --dx: 16px;
  --tx: 11s;
  --dlx: -7s;
  --dy: 4px;
  --ty: 5.8s;
  --dly: -4s;
}
#wave-10 {
  --dx: 12px;
  --tx: 8.4s;
  --dlx: -3.3s;
  --dy: 3px;
  --ty: 4.8s;
  --dly: -2.9s;
}
#wave-11 {
  --dx: 10px;
  --tx: 9.6s;
  --dlx: -1.4s;
  --dy: 3px;
  --ty: 5.4s;
  --dly: -3.7s;
}
/* the curling wave gets a tiny extra bob of its own, small enough not to touch the big crest */
#wave-2 {
  --dy: 2px;
  --ty: 4.3s;
  --dly: -1.8s;
}

@media (prefers-reduced-motion: reduce) {
  .drift,
  .bob {
    animation: none;
  }
}
.sideToSide {
  animation: slideSideToSide 1s ease-in-out infinite alternate;
}

@keyframes slideSideToSide {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(-53%); /* Adjust distance as needed */
  }
}

/* lightning */

.lightning {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: min(620px, 42vw);
  aspect-ratio: 543 / 613;
}

.lightning .bolt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .lightning .bolt {
    opacity: 1 !important;
  }
}

/* scylla: resolves higher, top left */
/* resolved: tilted and pushed up/left so she bursts in from the top-left corner.
   The tilt is on the inner SVG (the wrapper is GSAP's); the intro rotates her into it during the settle. */
#scylla {
  position: absolute;
  z-index: 8; /* always above the waves (#waves-bottom is 7); #hero must not get its own z-index or this stops working */
  left: -8vw;
  top: -14vh;
  height: 80%;
  aspect-ratio: 678 / 851;
  svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(30deg);
  }
}

/* addysseus: resolves lower right, facing Scylla */
.addysseus {
  position: absolute;
  z-index: 3;
  right: -20px; /* tucked just past the right edge */
  bottom: -10px;
  height: 62%; /* full figure, feet included */
  aspect-ratio: 1060 / 1618;
  img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}
/* head pivots at the back of the neck (701, 357 on the 1060x1618 canvas) */
.addysseus__head {
  transform-origin: 66.1% 22.1%;
  animation: addysseus-look-up 10s infinite;
}
/* bow arm pivots at the shoulder (396, 685 on the 1060x1618 canvas); sits behind the body to hide the joint */
.addysseus__arm {
  transform-origin: 37.4% 42.3%;
  animation: addysseus-raise-arm 7.5s ease-in-out infinite;
}
@keyframes addysseus-look-up {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(9deg);
  }
  63% {
    transform: rotate(3deg);
  }
  80% {
    transform: rotate(6deg);
  }
}
@keyframes addysseus-raise-arm {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(5deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .addysseus__head,
  .addysseus__arm,
  #ship img,
  #scroll-ship img {
    animation: none;
  }
}

/* MOBILE resolved layout: the wordmark sits top right to make room for Scylla */
@media (max-width: 767px) {
  .hero__title {
    top: 3vw;
    left: auto;
    right: 4vw;
    width: 48vw;
    margin: 0;
    p {
      font-size: 7px;
      margin-bottom: 2px;
    }
  }
  .lightning {
    width: 78vw;
  }
  #scylla {
    left: -50px;
    top: -80px;
    height: 52%;
  }
  .hero__copy {
    top: 45%;
    .hero__dates {
      font-size: 17px;
    }
    .button img {
      width: 170px;
    }
    .button a.btn {
      --btn-w: 170px;
    }
  }
  .addysseus {
    height: 38%;
  }
}

/* FOOTER (placeholder: dark section; ink-edge transition texture still to come) */
.site-footer {
  position: relative;
  z-index: 8;
  background: url(../i/Dark-Bkgnd.jpg);
  background-repeat: repeat;
  background-position: top center;
  color: #d9d9d9;
  padding: 40px 0;
  text-align: center;
  margin-top: 50px;
}
@media (max-width: 768px) {
  .site-footer {
    padding: 40px 0 0 0;
  }
}
.footer-top {
  height: 62px;
  background: url(../i/FooterBkgndtop.png);
  background-repeat: repeat;
  background-position: bottom center;
  top: -60px;
  position: absolute;
  width: 100%;
}
.site-footer__inner {
  max-width: 520px;
  margin: 0 auto;
}
.site-footer__presents {
  font-size: 12px;
  margin: 0 0 6px;
}
@media (max-width: 480px) {
  .site-footer__presents {
    display: none;
  }
}
.site-footer__wordmark {
  display: block;
  width: min(300px, 70vw);
  margin: 0 auto 32px;
  filter: invert(0.85);
}
.site-footer__logos {
  display: block;
  width: 90px;
  margin: 0 auto;
  filter: invert(
    0.85
  ); /* the logo art is dark ink; lighten it for the dark footer */
}
.site-footer__legal {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.7;
  display: none;
}
.site-footer__logo-row {
  display: none;
}
/* wide screens: one row - the two logos side by side on the left, the wordmark to their right */
@media (min-width: 993px) {
  .site-footer__inner {
    display: flex;
    align-items: center;
    max-width: none;
    padding: 0 5vw;
  }
  .site-footer__logo-row {
    display: flex;
    align-items: center;
    gap: clamp(24px, 3vw, 48px);
    img {
      display: block;
      width: auto;
      height: clamp(52px, 5vw, 80px);
    }
  }
  .site-footer__wordmark {
    width: clamp(240px, 23vw, 380px);
    margin: 0 0 0 clamp(60px, 9vw, 160px);
  }
  .site-footer__presents,
  .site-footer__logos {
    display: none;
  }
}
/* footer copy of Scylla: size #footer-scylla and the SVG fills it.
   For light ink on the dark footer, set e.g. --ink: #d9d9d9; on #footer-scylla */
#footer-scylla {
  mix-blend-mode: difference;
  position: relative;
  height: 400px;
  height: 400px;
  container-type: size;
  overflow: hidden;
}
@media (min-width: 769px) {
  #footer-scylla {
    display: none;
  }
}
/* rotated a quarter turn, so it is sized the other way round (as wide as the box is tall, as tall as
   the box is wide), then centred and rotated - it then covers #footer-scylla exactly. The viewBox keeps
   Scylla's proportions inside it (centred; preserveAspectRatio="xMinYMid meet" would sit her at the bottom). */
#footer-scylla svg {
  position: absolute;
  top: 50%;
  left: 50%;
  /*
  width: 100cqh;
  height: 100cqw;
  */
  width: 400px;
  transform: translate(-50%, -50%) rotate(-90deg) scaleY(-1);
}

/* helpers */
.screen-reader-text {
  font-size: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: -9999px;
}

/* Old-film overlay: dust (GIF), vertical scratches (GIF) and exposure flicker (CSS) on separate layers. */

.film-grain,
.film-scratches,
.film-flicker {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
}

/* dust and specks - 4 s loop */
.film-grain {
  background: url(../i/film-grain.gif) center / cover;
  opacity: 0.25;
}

/* the odd vertical scratch - 6.6 s loop, so it drifts against the dust loop */
.film-scratches {
  background: url(../i/film-scratches.gif) center / cover;
  opacity: 0.55;
}

/* light flicker: two layers on different, uneven cycles so the pattern never obviously repeats */
.film-flicker::before,
.film-flicker::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
}
.film-flicker::before {
  background: #fff8e8; /* warm projector light */
  animation: film-flicker-a 1.37s steps(1) infinite;
}
.film-flicker::after {
  background: #1a1408; /* slight dimming */
  animation: film-flicker-b 2.11s steps(1) infinite;
}

@keyframes film-flicker-a {
  0% {
    opacity: 0;
  }
  12% {
    opacity: 0.05;
  }
  19% {
    opacity: 0;
  }
  41% {
    opacity: 0.03;
  }
  47% {
    opacity: 0.07;
  }
  53% {
    opacity: 0;
  }
  78% {
    opacity: 0.04;
  }
  86% {
    opacity: 0;
  }
}

@keyframes film-flicker-b {
  0% {
    opacity: 0;
  }
  23% {
    opacity: 0.04;
  }
  29% {
    opacity: 0;
  }
  61% {
    opacity: 0.06;
  }
  66% {
    opacity: 0.02;
  }
  72% {
    opacity: 0;
  }
  91% {
    opacity: 0.03;
  }
  95% {
    opacity: 0;
  }
}

/* dark backgrounds: white dust / scratches instead of black */
.film-grain--light,
.film-scratches--light {
  filter: invert(1);
}

@media (prefers-reduced-motion: reduce) {
  .film-flicker::before,
  .film-flicker::after {
    animation: none;
  }
  .film-grain,
  .film-scratches {
    display: none;
  }
}

/* sal */
[data-sal],
[data-sal][data-sal-duration="200"] {
  transition-duration: 0.2s;
}
[data-sal],
[data-sal][data-sal-easing="ease"] {
  transition-timing-function: ease;
}
[data-sal] {
  transition-delay: 0s;
  transition-delay: var(--sal-delay, 0s);
  transition-duration: var(--sal-duration, 0.2s);
  transition-timing-function: var(--sal-easing, ease);
}
[data-sal][data-sal-duration="250"] {
  transition-duration: 0.25s;
}
[data-sal][data-sal-duration="300"] {
  transition-duration: 0.3s;
}
[data-sal][data-sal-duration="350"] {
  transition-duration: 0.35s;
}
[data-sal][data-sal-duration="400"] {
  transition-duration: 0.4s;
}
[data-sal][data-sal-duration="450"] {
  transition-duration: 0.45s;
}
[data-sal][data-sal-duration="500"] {
  transition-duration: 0.5s;
}
[data-sal][data-sal-duration="550"] {
  transition-duration: 0.55s;
}
[data-sal][data-sal-duration="600"] {
  transition-duration: 0.6s;
}
[data-sal][data-sal-duration="650"] {
  transition-duration: 0.65s;
}
[data-sal][data-sal-duration="700"] {
  transition-duration: 0.7s;
}
[data-sal][data-sal-duration="750"] {
  transition-duration: 0.75s;
}
[data-sal][data-sal-duration="800"] {
  transition-duration: 0.8s;
}
[data-sal][data-sal-duration="850"] {
  transition-duration: 0.85s;
}
[data-sal][data-sal-duration="900"] {
  transition-duration: 0.9s;
}
[data-sal][data-sal-duration="950"] {
  transition-duration: 0.95s;
}
[data-sal][data-sal-duration="1000"] {
  transition-duration: 1s;
}
[data-sal][data-sal-duration="1050"] {
  transition-duration: 1.05s;
}
[data-sal][data-sal-duration="1100"] {
  transition-duration: 1.1s;
}
[data-sal][data-sal-duration="1150"] {
  transition-duration: 1.15s;
}
[data-sal][data-sal-duration="1200"] {
  transition-duration: 1.2s;
}
[data-sal][data-sal-duration="1250"] {
  transition-duration: 1.25s;
}
[data-sal][data-sal-duration="1300"] {
  transition-duration: 1.3s;
}
[data-sal][data-sal-duration="1350"] {
  transition-duration: 1.35s;
}
[data-sal][data-sal-duration="1400"] {
  transition-duration: 1.4s;
}
[data-sal][data-sal-duration="1450"] {
  transition-duration: 1.45s;
}
[data-sal][data-sal-duration="1500"] {
  transition-duration: 1.5s;
}
[data-sal][data-sal-duration="1550"] {
  transition-duration: 1.55s;
}
[data-sal][data-sal-duration="1600"] {
  transition-duration: 1.6s;
}
[data-sal][data-sal-duration="1650"] {
  transition-duration: 1.65s;
}
[data-sal][data-sal-duration="1700"] {
  transition-duration: 1.7s;
}
[data-sal][data-sal-duration="1750"] {
  transition-duration: 1.75s;
}
[data-sal][data-sal-duration="1800"] {
  transition-duration: 1.8s;
}
[data-sal][data-sal-duration="1850"] {
  transition-duration: 1.85s;
}
[data-sal][data-sal-duration="1900"] {
  transition-duration: 1.9s;
}
[data-sal][data-sal-duration="1950"] {
  transition-duration: 1.95s;
}
[data-sal][data-sal-duration="2000"] {
  transition-duration: 2s;
}
[data-sal][data-sal-delay="50"] {
  transition-delay: 0.05s;
}
[data-sal][data-sal-delay="100"] {
  transition-delay: 0.1s;
}
[data-sal][data-sal-delay="150"] {
  transition-delay: 0.15s;
}
[data-sal][data-sal-delay="200"] {
  transition-delay: 0.2s;
}
[data-sal][data-sal-delay="250"] {
  transition-delay: 0.25s;
}
[data-sal][data-sal-delay="300"] {
  transition-delay: 0.3s;
}
[data-sal][data-sal-delay="350"] {
  transition-delay: 0.35s;
}
[data-sal][data-sal-delay="400"] {
  transition-delay: 0.4s;
}
[data-sal][data-sal-delay="450"] {
  transition-delay: 0.45s;
}
[data-sal][data-sal-delay="500"] {
  transition-delay: 0.5s;
}
[data-sal][data-sal-delay="550"] {
  transition-delay: 0.55s;
}
[data-sal][data-sal-delay="600"] {
  transition-delay: 0.6s;
}
[data-sal][data-sal-delay="650"] {
  transition-delay: 0.65s;
}
[data-sal][data-sal-delay="700"] {
  transition-delay: 0.7s;
}
[data-sal][data-sal-delay="750"] {
  transition-delay: 0.75s;
}
[data-sal][data-sal-delay="800"] {
  transition-delay: 0.8s;
}
[data-sal][data-sal-delay="850"] {
  transition-delay: 0.85s;
}
[data-sal][data-sal-delay="900"] {
  transition-delay: 0.9s;
}
[data-sal][data-sal-delay="950"] {
  transition-delay: 0.95s;
}
[data-sal][data-sal-delay="1000"] {
  transition-delay: 1s;
}
[data-sal][data-sal-easing="linear"] {
  transition-timing-function: linear;
}
[data-sal][data-sal-easing="ease-in"] {
  transition-timing-function: ease-in;
}
[data-sal][data-sal-easing="ease-out"] {
  transition-timing-function: ease-out;
}
[data-sal][data-sal-easing="ease-in-out"] {
  transition-timing-function: ease-in-out;
}
[data-sal][data-sal-easing="ease-in-cubic"] {
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
[data-sal][data-sal-easing="ease-out-cubic"] {
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
[data-sal][data-sal-easing="ease-in-out-cubic"] {
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
[data-sal][data-sal-easing="ease-in-circ"] {
  transition-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
}
[data-sal][data-sal-easing="ease-out-circ"] {
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
[data-sal][data-sal-easing="ease-in-out-circ"] {
  transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
[data-sal][data-sal-easing="ease-in-expo"] {
  transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
}
[data-sal][data-sal-easing="ease-out-expo"] {
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
[data-sal][data-sal-easing="ease-in-out-expo"] {
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
[data-sal][data-sal-easing="ease-in-quad"] {
  transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
[data-sal][data-sal-easing="ease-out-quad"] {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-sal][data-sal-easing="ease-in-out-quad"] {
  transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
[data-sal][data-sal-easing="ease-in-quart"] {
  transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
[data-sal][data-sal-easing="ease-out-quart"] {
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
[data-sal][data-sal-easing="ease-in-out-quart"] {
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}
[data-sal][data-sal-easing="ease-in-quint"] {
  transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
[data-sal][data-sal-easing="ease-out-quint"] {
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
[data-sal][data-sal-easing="ease-in-out-quint"] {
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
[data-sal][data-sal-easing="ease-in-sine"] {
  transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
}
[data-sal][data-sal-easing="ease-out-sine"] {
  transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}
[data-sal][data-sal-easing="ease-in-out-sine"] {
  transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
[data-sal][data-sal-easing="ease-in-back"] {
  transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
[data-sal][data-sal-easing="ease-out-back"] {
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
[data-sal][data-sal-easing="ease-in-out-back"] {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
[data-sal|="fade"] {
  opacity: 0;
  transition-property: opacity;
}
[data-sal|="fade"].sal-animate,
body.sal-disabled [data-sal|="fade"] {
  opacity: 1;
}
[data-sal|="slide"],
[data-sal|="zoom"] {
  opacity: 0;
  transition-property: opacity, transform;
}
[data-sal="slide-up"] {
  transform: translateY(20%);
}
[data-sal="slide-down"] {
  transform: translateY(-20%);
}
[data-sal="slide-left"] {
  transform: translateX(20%);
}
[data-sal="slide-right"] {
  transform: translateX(-20%);
}
[data-sal|="slide"].sal-animate,
[data-sal|="zoom"].sal-animate,
body.sal-disabled [data-sal|="slide"],
body.sal-disabled [data-sal|="zoom"] {
  opacity: 1;
  transform: none;
}
[data-sal="zoom-in"] {
  transform: scale(0.5);
}
[data-sal="zoom-out"] {
  transform: scale(1.1);
}
[data-sal|="flip"] {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition-property: transform;
}
[data-sal="flip-left"] {
  transform: perspective(2000px) rotateY(-91deg);
}
[data-sal="flip-right"] {
  transform: perspective(2000px) rotateY(91deg);
}
[data-sal="flip-up"] {
  transform: perspective(2000px) rotateX(-91deg);
}
[data-sal="flip-down"] {
  transform: perspective(2000px) rotateX(91deg);
}
[data-sal|="flip"].sal-animate,
body.sal-disabled [data-sal|="flip"] {
  transform: none;
}