:root {
  --header-height: 79.5px;
  --petal-height: 70px;
  --petal-width: calc( var( --petal-height ) / 2 );
  --flip-petal-height: calc( var( --petal-height ) / 1.154689965744198 );
  --petal-gap-offset: 0.5rem; 
  --petal-text-display: none;
  --petal-text-transform: inherit;
  --full-flower-image: url( assets/svgs/full-flower-small-gap.svg );
  --flower-animation-container-position: static;
  --flower-animation-container-top: unset;
  --flower-animation-container-width: 100%;
  --last-transition-block-margin-bottom: 0;
  --transition-block-spacing: 2rem;
  --transition-block-min-height: unset;

  @media screen and ( min-width: 1150px ) and ( min-height: 700px ) {
    --flower-animation-container-position: sticky;
    --flower-animation-container-top: calc( var( --admin-bar-height ) + var( --header-height ) );
    --flower-animation-container-width: auto;
    --petal-text-display: block;
    --petal-height: 280px;
    --petal-width: calc( var( --petal-height ) / 2 );
    --flip-petal-height: calc( var( --petal-height ) / 1.154689965744198 );
    --last-transition-block-margin-bottom: 25svh;
    --transition-block-spacing: 4rem;
    --transition-block-min-height: 50svh;
  }

  @media screen and ( min-width: 1300px ) and ( min-height: 800px ) {
    --petal-height: 320px;
    --petal-gap-offset: 1rem;
    --petal-text-transform: inherit;
    --full-flower-image: url( assets/svgs/full-flower.svg );
  }

  @media screen and ( min-width: 1450px ) and ( min-height: 900px ) {
    --petal-height: 360px;
    --petal-gap-offset: 1rem; 
  }
}

@media screen and ( min-width: 1150px ) and ( min-height: 700px ) {
  html {
    /* scroll-behavior: smooth;
    scroll-snap-type: y proximity; */
  }
}

.home-columns {
  flex-wrap: wrap-reverse;

  @media screen and ( min-width: 1150px ) and ( min-height: 700px ) {
    flex-wrap: nowrap !important;
    margin-top: 0 !important;
  }

  @media screen and ( min-width: 1450px ) and ( min-height: 900px ) {
    justify-content: space-between !important;
  }
}

.home-columns-content {
  hyphens: none;

  @media screen and ( min-width: 1150px ) and ( min-height: 700px ) {
    max-width: 570px;
  }
}

.transition-block,
.flower-animation-container {
  flex-direction: column;
  justify-content: center;

  @media screen and ( min-width: 1150px ) and ( min-height: 700px ) {
    min-height: calc( var( --full-height ) - var( --header-height ) );
  }
}

#hero-block,
.flower-animation-container {
  --full-height: calc( 100svh - var( --admin-bar-height ) );
}

.transition-block:where( :not( #hero-block ) ) {
  min-height: var( --transition-block-min-height );
  padding-top: var( --transition-block-spacing );
  padding-bottom: var( --transition-block-spacing );
}

#hero-block + .transition-block {
  margin-top: 0;
}

.transition-block {
  display: flex;
  scroll-margin-top: var(--header-height);
  scroll-snap-align: center;
  scroll-snap-stop: normal;

  > * {
    width: 100%;
  }

  &:last-child {
    margin-bottom: var( --last-transition-block-margin-bottom );
  }
}

.flower-animation-container {
  display: flex;
  position: var( --flower-animation-container-position );
  top: var( --flower-animation-container-top );
  width: var( --flower-animation-container-width );

  &:has( .force-end ) {
    z-index: unset !important;
  }
}

.flower-images {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: opacity 0.25s;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-origin: content-box;
  mask-origin: content-box;
  -webkit-mask-image: var( --full-flower-image );
  mask-image: var( --full-flower-image );
  -webkit-mask-size: contain;
  mask-size: contain;

  .force-end & {
    opacity: 1 !important;
  }
}

.flower-image {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 100% !important;
  width: auto;
  margin-top: 0;
  overflow: visible;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.25s;
  mix-blend-mode: multiply;

  .force-end & {
    transition-delay: 1s;
  }

  &.show {
    z-index: 2;
    animation-name: fade-in;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
  }

  &:not( .show ) {
    animation-name: fade-out;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
  }

  & img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: auto !important;
    max-width: unset !important;
  }
}

.petal {
  position: absolute;
  top: 0;
  left: calc( 50% - ( var( --petal-width ) / 2 ) );
  height: var( --petal-height );
  width: var( --petal-width );
  transform-origin: center calc( 100% + var( --petal-gap-offset ) );
  opacity: 1;
  transition: opacity 0.4s;
  transition-delay: 0s;
  -webkit-mask-image: url( assets/svgs/vertical-petal.svg );
  mask-image: url( assets/svgs/vertical-petal.svg );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-origin: content-box;
  mask-origin: content-box;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var( --wp--preset--color--primary );

  &.hidden {
    opacity: 0;
  }

  .petal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    display: var( --petal-text-display );
    text-transform: var( --petal-text-transform );
    font-weight: bold;
    transition: all 1s;
    text-align: center;
  }
}

.petal-secondary {
  background-color: var( --wp--preset--color--secondary );
}

@keyframes open-box {
  25% {
    transform: scale(1, -1) translate(-31%, 100%) rotate(30deg);
  }

  35% {
    transform: scale(1, -1) translate(-31%, 100%) rotate(30deg);
  }

  60% {
    transform: scale(1, -1) translate(-15%, 120%) rotate(30deg);
  }

  100% {
    transform: scale(1, -1) translate(0, 50%) rotate(60deg);
  }
}

@keyframes move-left-box-side {
  0% {
    transform: rotate(-30deg) translate(-65%, 60%);
  }
  40% {
    transform: rotate(-30deg)  translate(-85%, -10%);
  }
  100% {
    transform: rotate( -60deg );
  }
}

@keyframes move-right-box-side {
  0% {
    transform: rotate( 30deg ) translate( 65%, 60% );
  }
  40% {
    transform: rotate( 30deg ) translate( 85%, -10% );
  }
  100% {
    transform: rotate( 60deg );
  }
}

@keyframes rotate-lower-left {
  100% {
    opacity: 1;
    transform: rotate( -120deg );
  }
}

@keyframes rotate-lower-right {
  100% {
    opacity: 1;
    transform: rotate( 120deg );
  }
}

@keyframes rotate-bottom-right {
  100% {
    opacity: 1;
    transform: rotate( 180deg );
  }
}

@keyframes rotate-bottom-left {
  100% {
    opacity: 1;
    transform: rotate( -180deg );
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade-out-if-necessary {
  100% {
    opacity: 0;
  }
}

@keyframes fade-in {
  100% {
    opacity: 1;
  }
}

.flower {
  position: relative;
}

.flower-static,
.flower-animation {
  height: calc( ( var( --petal-height ) * 2 ) + ( var( --petal-gap-offset ) * 2 ) );
  width: calc( ( var( --flip-petal-height ) * 2 ) + ( var( --petal-gap-offset ) * 2 ) );
  margin-top: 0;
  color: white;
}

.flower-static {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY( -50% );
  opacity: 0;
  @media screen and ( min-width: 1150px ) and ( min-height: 700px ) {
    filter: var( --drop-shadow );
  }
    
  .animate & {
    animation-name: fade-in;
    animation-delay: 3.4s;
    animation-duration: .5s;
    animation-fill-mode: forwards;
  }

  .force-end & {
    opacity: 1 !important;
    transition: opacity 0.25s;
  }

  .petal {
    clip-path: polygon(45% 0, 55% 0, 100% 45%, 100% 55%, 55% 100%, 45% 100%, 0 55%, 0 45%);
    color: white;
  }

  .petal-top {
    .petal-content {
      transform: translate(-50%, -50%);
    }
  }

  .petal-upper-right {
    transform: rotate(60deg);  
    
    .petal-content {
      transform: translate(-50%, -50%) rotate(-60deg);
    }
  }
  
  .petal-upper-left {
    transform: rotate(-60deg);

    .petal-content {
      transform: translate(-50%, -50%) rotate(60deg);
    }
  }
  
  .petal-lower-right {
    transform: rotate( 120deg );

    .petal-content {
      transform: translate(-50%, -50%) rotate(-120deg);
    }
  }
  
  .petal-lower-left {
    transform: rotate( -120deg );

    .petal-content {
      transform: translate(-50%, -50%) rotate(120deg);
    }
  }
  
  .petal-bottom {
    transform: rotate( 180deg );

    .petal-content {
      transform: translate(-50%, -50%) rotate(180deg);
    }
  }
}

.flower-animation {
  position: relative;
  padding-top: var( --petal-width );

  .force-end & {
    opacity: 0 !important;
    transition: opacity 0.25s;
  }

  .flip-petal-container {
    position: relative;
  }
  
  .flip-petal {
    position: static;
    height: var( --petal-width );
    width: var( --flip-petal-height );
    margin: 0 auto;
    transform: rotate(-30deg);
    transform-origin: unset;
    transition: all 1s;
    -webkit-mask-image: url( assets/svgs/flip-petal.svg );
    mask-image: url( assets/svgs/flip-petal.svg );
    background-color: var( --wp--preset--color--primary );
  }
  
  .box-inside {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--wp--preset--color--gray-200);
    height: var( --petal-width );
    width: var( --petal-height );
    margin: 0;
    -webkit-mask-image: url(assets/svgs/horizontal-petal.svg);
    mask-image: url(assets/svgs/horizontal-petal.svg);
  }
  
  .petal-upper-right {
    transform: rotate(30deg) translate(65%, 56%);
  }
  
  .petal-upper-left {
    transform: rotate(-30deg) translate(-65%, 56%);
  }
  
  .petal-lower-right {
    transform: rotate( 60deg );
    opacity: 0;
  }
  
  .petal-lower-left {
    transform: rotate( -60deg );
    opacity: 0;
  }
  
  .petal-bottom-right {
    transform: rotate( 120deg );
    opacity: 0;
  }
  
  .petal-bottom-left {
    transform: rotate( -120deg );
    opacity: 0;
  }

  .animate & {
    animation-name: fade-out-if-necessary;
    animation-delay: 3.9s;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;

    .petal,
    .petal-content {
      animation-duration: .5s;
      animation-fill-mode: forwards;
    }
  
    .flip-petal {
      animation-duration: 2.8s;
      animation-name: open-box;
    }
  
    .box-inside {
      animation-duration: 0.2s;
      animation-name: fade-out;
      animation-delay: 1s;
    }
  
    .petal-upper-left {
      animation-duration: 1.8s;
      animation-name: move-left-box-side;
      animation-delay: 1s;
    }
  
    .petal-upper-right {
      animation-duration: 1.8s;
      animation-name: move-right-box-side;
      animation-delay: 1s;
    }
  
    .petal-lower-left {
      animation-duration: 0.3s;
      animation-name: rotate-lower-left;
      animation-delay: 2.8s;
      animation-timing-function: linear;
    }
  
    .petal-lower-right {
      animation-duration: 0.3s;
      animation-name: rotate-lower-right;
      animation-delay: 2.8s;
      animation-timing-function: ease-in;
    }
  
    .petal-bottom-right {
      animation-duration: 0.3s;
      animation-name: rotate-bottom-right;
      animation-delay: 3.1s;
      animation-timing-function: ease-out;
    }
  
    .petal-bottom-left {
      animation-duration: 0.3s;
      animation-name: rotate-bottom-left;
      animation-delay: 3.1s;
      animation-timing-function: ease-out;
    }
  }
}

hr.right-arrow {
  position: relative;
  overflow: visible;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  height: 4px;
  width: 0;
  transition: 2s width;
  margin-left: 0 !important;

  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
    right: 1px;
    bottom: 0;
    height: 4px;
    width: 0;
    background-color: var( --wp--preset--color--secondary );
    transform-origin: right center;
    transition: transform 1s 1s, width 0s 0.5s;
  }

  .animate & {
    width: 100%;

    &::before,
    &::after {
      width: 20px;
    }

    &:before {
      transform: rotate( 45deg );
    }
  
    &:after {
      transform: rotate( -45deg );
    }
  }
}

.fade-in-left {
  opacity: 0;
  transform: translateX( -20px );
  transition: 1.5s all;

  .animate & {
    opacity: 1;
    transform: translateX( 0 );
  }
}

.fade-children-in-left {
  > * {
    opacity: 0;
    transform: translateX( -20px );
    transition: 1s all;
  
    .animate & {
      opacity: 1;
      transform: translateX( 0 );
    }
  }
}

.transition-stagger {
  --stagger-delay: 0.7s;

  > :first-child {
    transition-delay: 2s;
  }

  > :nth-child( 2 ) {
    transition-delay: calc( 2s + var( --stagger-delay ) * 1 );
  }

  > :nth-child( 3 ) {
    transition-delay: calc( 2s + var( --stagger-delay ) * 2 );
  }

  > :nth-child( 4 ) {
    transition-delay: calc( 2s + var( --stagger-delay ) * 3 );
  }

  > :nth-child( 5 ) {
    transition-delay: calc( 2s + var( --stagger-delay ) * 4 );
  }
}