/* 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);
  text-transform: uppercase;
  font-size: 32px;
  line-height: 1.1;
}
p {
  color: transparent;
  background:
    repeating-radial-gradient(#000 0 0.0001%, #090909 0 0.0002%) 30% 10% / 40vw
      40vw,
    repeating-conic-gradient(#161616 0 0.0001%, #4c4c4c 0 0.0002%) 70% 70% /
      60vw 60vw;
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent; /* For Safari */
  background-blend-mode: difference;
}

.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) center center;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
}
/* 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, 24px);
    margin: 0;
  }
  .launch-panel__lead {
    padding-bottom: 1em;
  }
  .text-large {
    font-size: clamp(32px, 4vw, 60px);
  }
  .roman-numeral {
    max-width: 260px;
    display: block;
    margin: 0 auto 30px;
  }
}
@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, 0.9vw, 13px);
    margin: 0 0 6px;
    white-space: nowrap;
  }
  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: 767px) {
  .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;
  width: 96vw;
  margin: 0 auto;
  .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-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);
    display: none;
    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);
  }
}
/* progress bar: full width across the top, behind everything else (z-index 0).
   Texture: i/lightning/texture-green.png - a seamless 256x32 tile made from the lightning bolts' own
   colours and grain. js/site.js sets --progress (0 to 1); the bar is revealed with a clip rather
   than stretched, so the texture never smears. */
#scroll-progress {
  --progress: 0;
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  pointer-events: none;
  background: #6ed03f url(../i/lightning/texture-green.png) repeat;
  clip-path: inset(0 calc((1 - var(--progress)) * 100%) 0 0);
}
/* scroll indicator sun: faint, pale yellow, lightning-style grain. Fixed, and behind the characters,
   lightning, waves and copy (z-index 0). js/site.js moves it along its arc; until then it's parked
   below the bottom of the screen. */
#scroll-sun {
  position: fixed;
  z-index: 0;
  left: 0;
  top: 0;
  width: clamp(70px, 9vw, 140px);
  aspect-ratio: 1;
  opacity: 0.55;
  pointer-events: none;
  transform: translateY(110vh);
  svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .scroll-sun__art {
    fill: #f2cf5b; /* slight yellow hue */
  }
}
/* scroll indicator ship, fixed to the bottom of the screen. Parked off the right edge during the
   intro; js/site.js slides #scroll-ship in to 45% as Addysseus settles, moves it left through the
   steps, and sails .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, 18.5vw, 150px);
  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);
  }
  /* grainy ink like Scylla.png (pattern defined in the SVG; flat ink if the texture can't load) */
  .ink {
    fill: url(#scylla-ink-texture) var(--ink);
  }
  /* eyelids: an ink shape over each eye (inside its head, so it sways with it), normally folded
     away at the top of the eye. Now and then it sweeps down, holds shut for an instant, and lifts.
     Each eye has its own --blink cycle and --blink-delay (set on the lid in the SVG), so they never
     blink together. Same ink texture as the heads, so a closed lid blends into the ink around it. */
  .eyelid {
    fill: url(#scylla-ink-texture) var(--ink);
    transform-box: fill-box;
    transform-origin: 50% 0%;
    transform: scaleY(0);
    animation: scylla-blink var(--blink, 5s) linear var(--blink-delay, 0s)
      infinite;
  }
}
@keyframes scylla-blink {
  0%,
  94%,
  100% {
    transform: scaleY(0); /* open */
  }
  96%,
  97.5% {
    transform: scaleY(1); /* shut */
  }
}
@media (prefers-reduced-motion: reduce) {
  #scylla .eyelid {
    animation: none; /* eyes stay open */
  }
}

/* addysseus: resolves lower right, facing Scylla */
.addysseus {
  position: absolute;
  z-index: 8;
  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%;
  }
}
/* inner wrapper the scroll scales (grows up and left from his bottom-right corner) */
.addysseus__scale {
  position: absolute;
  inset: 0;
  transform-origin: 100% 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-position: top center;
  background-repeat: repeat;
  color: #d9d9d9;
  text-align: center;
  margin-top: 50px;
  padding: 40px 0 60px;
}
@media (max-width: 767px) {
  .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;
}
@media (max-width: 767px) {
  .site-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.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);
  filter: invert(0.85);
}
@media (max-width: 767px) {
  .site-footer__wordmark {
    margin-bottom: 30px;
  }
}
.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: 768px) {
  .site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    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);
  }
  .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);
}
/* footer Scylla's eyelids: same blink as the hero's (@keyframes scylla-blink), filled with the
   footer's flat light ink so a shut eye blends into the head */
#footer-scylla .eyelid {
  fill: var(--footer-ink, #d9d9d9);
  transform-box: fill-box;
  transform-origin: 50% 0%;
  transform: scaleY(0);
  animation: scylla-blink var(--blink, 5s) linear var(--blink-delay, 0s) infinite;
}
@media (prefers-reduced-motion: reduce) {
  #footer-scylla .eyelid {
    animation: none; /* eyes stay open */
  }
}

/* Lenis smooth scrolling (js/lenis.min.js) - its recommended base rules */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

/* 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;
}