victor-hugo/src/css/main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/*
You can use import statements to include partials:
 */
// @import "imports/reset.css";

html,
body {
  height: 100%;
}

.c-block {
  $duration: 1s;
  $delay: 0.3s;

  > .c-block__bg {
    will-change: transform;
    transform-origin: 100% 100%;
    transition: transform $duration;
    transform: scale3d(1, 1, 1);
  }

  &.state-1 > .c-block__bg {
    transform-origin: 100% 100%;
    transition: transform $duration;
    transform: scale3d(0.5, 1, 1);
  }

  &.state-2 > .c-block__bg {
    transform-origin: 100% 100%;
    transform-origin: 100 100;
    transition: transform $duration;
    transform: scale3d(0.5, 0.5, 1);
  }

  > .c-block__img {
    will-change: opacity, transform;
    transform-origin: 0 0;
    transition: opacity $duration $delay ease-in, transform $duration;
    opacity: 1;
    transform: none;
  }

  &.state-1 > .c-block__img {
    transition: opacity $duration $delay ease-out, transform $duration;
    opacity: 0;
    transform: translate(50%, 0) scale(1.3);
  }

  &.state-2 > .c-block__img {
    opacity: 0;
    transform: translate(50%, 50%) scale(2);
  }
}

// vim:set filetype=scss: