/* ------------------------- Variables -------------------------------------------------- */

:root {
  /* CSS Animations */
  --animation-default-fast: 0.4s cubic-bezier(0.625, 0.05, 0, 1);
  --animation-default: 0.8s cubic-bezier(0.625, 0.05, 0, 1);
  --animation-bounce-fast: 0.6s cubic-bezier(0.35, 1.75, 0.6, 1);
  --animation-bounce: 0.8s cubic-bezier(0.35, 1.75, 0.6, 1);
  --animation-ease: 0.2s ease;
  --animation-expo: 0.8s cubic-bezier(0.87, 0, 0.13, 1);
  --animation-expo-fast: 0.4s cubic-bezier(0.87, 0, 0.13, 1);
}

/* Tablet */
@media screen and (max-width: 991px) {
	:root {
		--container-padding-l: 3.75em;
		--container-padding-m: 1.75em;
	}
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
	:root {
	  --section-padding: 6em;
		--container-padding-l: 1.25em;
		--container-padding-m: 1.25em;
		--container-padding-s: 0.5em;
		--gap: 1.5em;
	}
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
	:root {

	}
}

/* ------------------------- Copy/Paste Media Queries -------------------------------------------------- */

@media screen and (max-width: 991px) {}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 479px) {}

@media screen and (min-width: 992px) {}
@media screen and (min-width: 768px) {}
@media screen and (min-width: 480px) {}

@media (hover: hover) and (pointer: fine) {}
@media (hover: none) and (pointer: coarse) {}

:is(.wf-design-mode, .w-editor) {}

/* ------------------------- Scaling System made by Dennis Snellenberg -------------------------------------------------- */

/* Desktop */
:root {
  --size-unit: 16; /* body font-size in design - no px */
  --size-container-ideal: 1440; /* screen-size in design - no px */
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

/* Tablet */
@media screen and (max-width: 991px) {
	:root {
    --size-container-ideal: 834; /* screen-size in design - no px */
    --size-container-min: 768px;
    --size-container-max: 991px;
	}
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
	:root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 480px;
    --size-container-max: 767px;
	}
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
	:root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 320px;
    --size-container-max: 479px;
	}
}

/* ------------------------- Viewportheight -------------------------------------------------- */

:root {
  --vh-in-px: 8px; /* Default fallback */
  --vh: var(--vh-in-px);
  --dvh: var(--vh); /* Same as original VH */
  --svh: var(--vh);
  --lvh: var(--vh);
}

/* Only on non-touch devices */
@media (hover: hover) and (pointer: fine) {
  :root {
    --vh: 1vh;
  }

  /* If the device supports svh and lvh */
  @supports (height: 1svh) {
    :root {
      --vh: 1vh; /* Viewport height */
      --dvh: 1dvh; /* Dynamic viewport height */
      --svh: 1svh; /* Small viewport height */
      --lvh: 1lvh; /* Large viewport height */
    }
  }
}

/* Only on touch devices */
@media (hover: none) and (pointer: coarse) {
  /* Set vh to dvh initially */
  :root {
    --vh: var(--vh-in-px);
  }
  
  /* If the device supports lvh */
  @supports (height: 1lvh) {
    :root {
      --dvh: 1dvh; /* Dynamic viewport height */
      --svh: 1svh; /* Small viewport height */
      --lvh: 1lvh; /* Large viewport height */
    }
  }
}

/* ------------------------- Lenis -------------------------------------------------- */

html.lenis {height: auto;}
.lenis.lenis-smooth {scroll-behavior: auto; height: 100vh;}
.lenis.lenis-smooth [data-lenis-prevent] {overscroll-behavior: contain;}
.lenis.lenis-stopped {overflow: hidden;}
.lenis.lenis-scrolling iframe {pointer-events: none;}

/* ------------------------- Hide Scrollbar -------------------------------------------------- */

body ::-webkit-scrollbar, body::-webkit-scrollbar{display: none;} /* Chrome, Safari, Opera */
body {-ms-overflow-style: none;} /* IE & Edge */
html {scrollbar-width: none;} /* Firefox */

/* ------------------------- Body -------------------------------------------------- */

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
li, ul, figure { padding: 0; margin: 0; list-style: none;}

html {
  scroll-behavior: initial;
}

body {
  -webkit-font-smoothing: antialiased;
}

html, body {
  width: 100%;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Selection */
::selection {
  background-color: var(--color-primary);
  color: var(--color-dark);
  text-shadow: none;
}

::-moz-selection {
  background-color: var(--color-primary);
  color: var(--color-dark);
  text-shadow: none;
}

/* General */
canvas, img, video, picture, figure {
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
  display: block;
}

img {
  width: 100%;
}

svg {
  max-width: none;
  height: auto;
  box-sizing: border-box;
}

audio, canvas, iframe, img, svg, video, picture, figure {
  vertical-align: middle;
}

h1, h2, h3, h4, h5, h6, p, a, li, ul, ol, span, strong, em, figcaption  {padding: 0; margin: 0;}

video {
  padding: 0 !important;
  outline: 0 solid transparent !important;
  box-shadow: none !important;
}

/* ------------------------- Font Sizes -------------------------------------------------- */

.display {
  font-size: 8em;
  line-height: 0.75;
  text-transform: lowercase;
}

h1, .h1 {
  font-size: 6em;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: lowercase;
}

h2, .h2 {
  font-size: 4em;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}

h3, .h3 {
  font-size: 2em;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: lowercase;
}

h4, .h4 {
  font-size: 1em;
  line-height: 1.4;
  text-transform: lowercase;
}

:is(.display, h1, .h1, h2, .h2, h3, .h3, h4, .h4) em {
  font-family: Lora, Times New Roman, sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

p.large {
  font-size: 1.5em;
  line-height: 1.4;
}

@media screen and (max-width: 991px) {}
@media screen and (max-width: 767px) {
  .display {
    font-size: 3.5em;
  }
  
  h1, .h1 {
    font-size: 2.5em;
  }
  
  h2, .h2 {
    font-size: 2em;
  }
  
  h3, .h3 {
    font-size: 1.5em;
  }
  
  p.large {
    font-size: 1.25em;
  }
  
}

@media screen and (max-width: 479px) {}

/* ------------------------- Loading -------------------------------------------------- */

:is(.wf-design-mode, .w-editor) .loading-container,
:is(.wf-design-mode, .w-editor) .transition-container{
  display: none;
}

.transition-container[data-transition-theme="orange"] .transition-logo,
.transition-container[data-transition-theme="maroonred"] .transition-logo,
.transition-container[data-transition-theme="green"] .transition-logo {
  color: var(--color-light);
}

.transition-container[data-transition-theme="blue"] .transition-logo,
.transition-container[data-transition-theme="pink"] .transition-logo {
  color: var(--color-dark);
}

.transition-container[data-transition-theme="pink"] .transition-scribble {
  color: var(--color-pink);
}

.transition-container[data-transition-theme="orange"] .transition-scribble {
  color: var(--color-orange);
}

.transition-container[data-transition-theme="blue"] .transition-scribble {
  color: var(--color-blue);
}

.transition-container[data-transition-theme="maroonred"] .transition-scribble {
  color: var(--color-maroonred);
}

.transition-container[data-transition-theme="green"] .transition-scribble {
  color: var(--color-green);
}

/* ------------------------- Split Text -------------------------------------------------- */

.single-word {
  overflow: hidden;
  position: relative;
  margin-bottom: -0.055em;
  margin-left: -0.1em;
  margin-right: -0.1em;
  padding: 0 0.1em;
  display: inline-block;
}

.single-word .single-char {
  position: relative;
  display: inline-block;
}

.single-word .single-word-inner {
  position: relative;
  display: inline-block;
}

[data-single-word] {
  display: inline-block;
  position: relative;
  margin-right: 0.1em;
  margin-left: 0.1em;
}

[data-single-word] em {
  display: inline-block;
  position: relative;
  transform: translateY(-0.0075em);
}

/* ------------------------- Big Cursor ------------------------- */

/* Default cursor */
body,
body * {
  cursor: url("https://cdn.prod.website-files.com/683703490bc01e1b8c052e06/68384fb10e12e8d4c16e38e5_cursor-default.svg") 2 0, auto;
}

/* Text cursor */
body p,
body p span,
body h1,
body h1 *,
body h2,
body h3,
body h4,
body h5,
body h6,
body input[type="text"],
body input[type="email"],
body textarea,
body [data-text] {
  cursor: url("https://cdn.prod.website-files.com/683703490bc01e1b8c052e06/68384fb09ef00eb464b45496_cursor-text.svg") 9 19, text;
}

/* Hover cursor */
body a,
body a *,
body a p,
body button,
body button *,
body input[type="submit"],
body input[type="submit"] *,
body input[type="button"],
body input[type="button"] *,
body [data-hover],
body [data-hover] *,
body [data-gsap-slider-list-status] [data-hover]:hover,
body [data-gsap-slider-list-status] [data-hover]:hover *{
  cursor: url("https://cdn.prod.website-files.com/683703490bc01e1b8c052e06/68384fb014875f192dfcef67_cursor-pointer.svg") 12 0, pointer;
}

/* Grab */
body [data-gsap-slider-list-status="grab"]:hover,
body [data-gsap-slider-list-status="grab"] *:hover,
body [data-flick-drag-status="grab"],
body [data-flick-drag-status="grab"] .flick-group__top{
  cursor: url("https://cdn.prod.website-files.com/683703490bc01e1b8c052e06/68384fb014875f192dfcef4b_cursor-drag.svg") 12 0, text;
}

/* Grabbing */
body [data-flick-drag-status="grabbing"],
body [data-flick-drag-status="grabbing"] .flick-group__top,
body [data-gsap-slider-list-status="grabbing"]:hover,
body [data-gsap-slider-list-status="grabbing"] *:hover {
  cursor: url("https://cdn.prod.website-files.com/683703490bc01e1b8c052e06/68384fb13cff138fa04d162c_cursor-dragging.svg") 12 0, text;
}


/* ------------------------- Nav Bar -------------------------------------------------- */

.nav-bar > * {
  transition: transform var(--animation-default);
}

/*[data-scrolling-started="true"][data-scrolling-direction="down"] [data-modal-work-status="active"] .nav-bar > *,*/
/*[data-scrolling-started="true"][data-scrolling-direction="down"] [data-modal-whatsapp-status="active"] .nav-bar > *{*/
/*  transform: translateY(0%) rotate(0.001deg);*/
/*}*/

.nav-bar > :nth-child(2) { transition-delay: 0.075s;}
.nav-bar > :nth-child(3) { transition-delay: 0.15s;}


/*[data-scrolling-started="true"][data-scrolling-direction="down"] .nav-bar > * {*/
/*  transform: translateY(-300%) rotate(0.001deg);*/
/*}*/

[data-transition="active"] .nav-bar > * {
  transform: translateY(-300%) rotate(0.001deg);
}

:is(.wf-design-mode, .w-editor) [data-transition] .nav-bar > * {
  transform: translateY(0%) rotate(0.001deg);
}

.nav-bar :is(.nav-bar__work-btn span, .nav-bar__whatsapp-btn svg, .nav-bar__logo svg) {
  transition: color var(--animation-ease), visibility var(--animation-ease);
}

[data-theme-nav="light"] .nav-bar :is(.nav-bar__work-btn span, .nav-bar__whatsapp-btn svg, .nav-bar__logo svg),
[data-theme-nav] [data-modal-work-status="active"] .nav-bar__work-btn span {
  color: var(--color-dark);
}

@media screen and (min-width: 768px) {
  [data-theme-nav] [data-modal-whatsapp-status="active"] .nav-bar__whatsapp-btn svg {
    color: var(--color-green);
  }
}

.dark-bg {
  transition: all var(--animation-ease);
}

[data-modal-work-status="active"] .dark-bg {
  opacity: 0.175;
  visibility: visible;
}

@media screen and (min-width: 768px) {
  [data-modal-whatsapp-status="active"] .dark-bg{
    opacity: 0.1;
    visibility: visible;
  }
} 

.nav-bar__work-blob-svg {
  transition: transform var(--animation-default);
  transform: translate(0%, 0%) rotate(0.001deg);
}

[data-modal-work-status="active"] .nav-bar__work-blob-svg {
  transform: translate(5%, 9%) rotate(210deg);
}

@media screen and (max-width: 767px) {
  [data-theme-nav] [data-modal-work-status="active"] .nav-bar :is(.nav-bar__work-btn span, .nav-bar__whatsapp svg, .nav-bar__logo svg) {
    color: var(--color-dark);
  } 
  
  [data-modal-work-status="active"] .nav-bar__work-blob-svg {
    transform: translate(10%, 7%) rotate(210deg);
  }
  
  [data-modal-work-status="active"] .dark-bg  {
    opacity: 0.25;
    visibility: visible;
  }
}

@media (hover: none) and (pointer: coarse) { 
  .nav-bar__work span.is--duplicate,
  [data-modal-work-status="active"] .nav-bar__work-btn span {
    opacity: 0;
    visibility: hidden;
  }
  
  [data-modal-work-status="active"] .nav-bar__work-btn span.is--duplicate {
    opacity: 1;
    visibility: visible;
  }
}

.modal-work {
  transition: var(--animation-default-fast) 0s, opacity 0.1s ease 0.3s;
  clip-path: inset(1em calc(100% - (var(--border-radius-m) * 1) - 1em) calc(100% - (var(--border-radius-m) * 2) - 1em) 1em round var(--border-radius-m));
  opacity: 0;
  visibility: hidden;
}

[data-modal-work-status="active"] .modal-work {
  transition: var(--animation-default-fast) 0s, opacity 0.1s ease 0s;
  clip-path: inset(0em 0em 0em 0em round var(--border-radius-m));
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 767px) {
  .modal-work {
    clip-path: inset(0em 0em 100% 0em round 0em 0em var(--border-radius-m) var(--border-radius-m));
  }
  
  [data-modal-work-status="active"] .modal-work {
    clip-path: inset(0em 0em 0em 0em round 0em 0em var(--border-radius-m) var(--border-radius-m));
  }
}

.nav-bar__work-btn {
  transition: transform var(--animation-default-fast);
  transform: translate(0em, 0em) rotate(0.001deg);
}

[data-modal-work-status="active"] .nav-bar__work-btn {
  transform: translate(0.75em, 0.75em) rotate(0.001deg);
}

@media screen and (max-width: 767px) {
  [data-modal-work-status="active"] .nav-bar__work-btn {
    transform: translate(0em, 0em) rotate(0.001deg);
  } 
}

.modal-work-card__h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  min-height: calc(1em * 1.1);
}

:is(.wf-design-mode, .w-editor) header {
  position: absolute;
}

.modal-work__item,
.bold-btn__wrap {
  transition: all var(--animation-default);
  transform: translateY(4em) rotate(0.001deg);
}

.modal-work-card .cover-image {
  transition: transform 0.25s cubic-bezier(0.425, 1, 0.6, 1);
  transform: scale(1) rotate(0.001deg);
}

.modal-work-card:hover .cover-image {
  transform: scale(1.1) rotate(5deg);
}
  
[data-modal-work-status="active"] :is(.modal-work__item, .bold-btn__wrap) {
  transform: translateY(0em) rotate(0.001deg);
}

.modal-work__item:nth-child(1) {transition-delay: -0.1s;}
.modal-work__item:nth-child(2) {transition-delay: -0.05s;}
.modal-work__item:nth-child(3) {transition-delay: 0s;}
.bold-btn__wrap {transition-delay: 0.05s;}


.qr-code svg path {
  fill: var(--color-dark);
}

.qr-code svg rect {
  fill: transparent
}

.modal-whatsapp {
  transition: var(--animation-default-fast) 0s, opacity 0.1s ease 0.3s;
  clip-path: inset(1.25em 1.25em calc(100% - (var(--border-radius-m) * 2) - 0.5em) calc(100% - (var(--border-radius-m) * 1) - 1.25em) round var(--border-radius-m));
  opacity: 0;
  visibility: hidden;
}

[data-modal-whatsapp-status="active"] .modal-whatsapp {
  transition: var(--animation-default-fast) 0s, opacity 0.1s ease 0s;
  clip-path: inset(0em 0em 0em 0em round var(--border-radius-m));
  opacity: 1;
  visibility: visible;
}

.modal-whatsapp :is(.qr-code, .modal-whatsapp__text, .modal-whatsapp__btn) {
  transition: all var(--animation-default);
  transform: translateY(8em) rotate(0.001deg);
}

[data-modal-whatsapp-status="active"] .modal-whatsapp :is(.qr-code, .modal-whatsapp__text, .modal-whatsapp__btn) {
  transform: translateY(0em) rotate(0.001deg);
}

.modal-whatsapp .qr-code {transition-delay: -0.1s;}
.modal-whatsapp .modal-whatsapp__text {transition-delay: -0.05s;}
.modal-whatsapp .modal-whatsapp__btn {transition-delay: 0s;}

@media (hover: none) and (pointer: coarse) {
  .whatsapp-cover-link {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .nav-bar__whatsapp-btn {
    transition: transform var(--animation-default);
    transition-duration: 0.6s;
    transform: translate(0em, 0em) rotate(0.001deg);
  }
  
  [data-modal-whatsapp-status="active"] .nav-bar__whatsapp-btn {
    transform: translate(-0.25em, 0.25em) rotate(0.001deg);
  }
}

/* ------------------------- Tag -------------------------------------------------- */

.is--big > .tag {
  font-size: 1.25em;
}

.tag[data-theme="Pink"] {background-color: var(--color-pink);}
.tag[data-theme="Orange"] {background-color: var(--color-orange);}
.tag[data-theme="Blue"] {background-color: var(--color-blue);}
.tag[data-theme="Light Green"] {background-color: var(--color-lightgreen);}
.tag[data-theme="Green"] {background-color: var(--color-lightgreen);}
.tag[data-theme="Maroon Red"] {background-color: var(--color-maroonred);}

/* ------------------------- Wiggle Animation -------------------------------------------------- */

@keyframes wiggle05 {
  from {
    transform: rotate(1deg);
  } 
  to {
    transform: rotate(-1deg);
  }
}

@keyframes wiggle {
  from {
    transform: rotate(2deg);
  } 
  to {
    transform: rotate(-2deg);
  }
}

@keyframes wiggle2 {
  from {
    transform: rotate(3.5deg);
  } 
  to {
    transform: rotate(-3.5deg);
  }
}


@keyframes wiggle3 {
  from {
    transform: rotate(5deg);
  } 
  to {
    transform: rotate(-5deg);
  }
}

@keyframes wiggle4 {
  from {
    transform: rotate(7deg);
  } 
  to {
    transform: rotate(-7deg);
  }
}

@media (hover: hover) and (pointer: fine) {
  
  [data-wiggle="0.5"]:hover [data-wiggle-target] {
    animation: wiggle075 0.3s steps(2, end) infinite;
  }
  
  [data-wiggle]:hover [data-wiggle-target] {
    animation: wiggle 0.3s steps(2, end) infinite;
  }
  
  [data-wiggle="2"]:hover [data-wiggle-target] {
    animation: wiggle2 0.3s steps(2, end) infinite;
  }
  
  [data-wiggle="3"]:hover [data-wiggle-target] {
    animation: wiggle3 0.3s steps(2, end) infinite;
  }
  
  [data-wiggle="4"]:hover [data-wiggle-target] {
    animation: wiggle4 0.3s steps(2, end) infinite;
  }
}


.transition-logo__svg {
  animation: wiggle 0.3s steps(2, end) infinite;
}

/* ------------------------- Video Player Advanced (Osmo) -------------------------------------------------- */

/* Cover */
.vimeo-player[data-vimeo-update-size="cover"] {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}

/* Placeholder */
.vimeo-player[data-vimeo-activated="true"][data-vimeo-loaded="true"] .vimeo-player__placeholder {
  opacity: 0;
}

/* Loading */
.vimeo-player .vimeo-player__loading {
  opacity: 0;
}

.vimeo-player[data-vimeo-playing="true"] .vimeo-player__loading {
  opacity: 1;
}

.vimeo-player[data-vimeo-playing="true"][data-vimeo-loaded="true"] .vimeo-player__loading {
  opacity: 0;
}

.vimeo-player.is--home-header .vimeo-player__loading {
 display: none; 
}

/* Interface */

.vimeo-player .vimeo-player__interface {
  transition: opacity var(--animation-ease);
}

.vimeo-player .vimeo-player__interface-bottom * {
  pointer-events: all; /* Make children of div clickable by user */
}


@media (hover: hover) and (pointer: fine) {
  .vimeo-player[data-vimeo-loaded="true"]:hover .vimeo-player__interface {
    opacity: 1;
  }
}

@media (hover: none) and (pointer: coarse) {
  .vimeo-player[data-vimeo-loaded="true"] .vimeo-player__interface {
    opacity: 1;
  }
}

.vimeo-player[data-vimeo-playing="true"] .vimeo-player__pause {
  display: flex;
}

.vimeo-player[data-vimeo-playing="true"] .vimeo-player__play {
  display: none;
}


.home-header__touch-play,
.vimeo-player__touch-play {
  transition: opacity var(--animation-ease);
}

.home-header:has(.vimeo-player[data-vimeo-loaded="true"]) .home-header__touch-play,
.work-single-header:has(.vimeo-player[data-vimeo-loaded="true"]) .vimeo-player__touch-play{
  opacity: 1;
}
  
@media (hover: hover) and (pointer: fine) {
  .home-header__touch-play,
  .vimeo-player__touch-play {
    display: none;
  }
  
  .vimeo-player[data-vimeo-playing="true"][data-vimeo-loaded="true"] .vimeo-player__overlay-mute {
    display: block;
  }
}

/* Interface - Mute */
.mute .mute__mute-svg,
.vimeo-player[data-vimeo-muted="true"] .mute .mute__unmute-svg,
[data-vimeo-parent]:has(.vimeo-player[data-vimeo-muted="true"]) .mute .mute__unmute-svg{
  display: none;
}

.mute .mute__unmute-svg,
.vimeo-player[data-vimeo-muted="true"] .mute .mute__mute-svg,
[data-vimeo-parent]:has(.vimeo-player[data-vimeo-muted="true"]) .mute .mute__mute-svg{
  display: block;
}

/* Interface - Fullscreen */
.vimeo-player .vimeo-player__fullscreen svg:nth-child(2),
.vimeo-player[data-vimeo-fullscreen="true"] .vimeo-player__fullscreen svg:nth-child(1) {
  display: none;
}

.vimeo-player .vimeo-player__fullscreen svg:nth-child(1),
.vimeo-player[data-vimeo-fullscreen="true"] .vimeo-player__fullscreen svg:nth-child(2) {
  display: block;
}

/* ------------------------- Home Header -------------------------------------------------- */


@media (hover: none) and (pointer: coarse) {
  .home-header__star {
    
  }
}

@media screen and (max-width: 767px) {
  .home-header__title-line-svg path {
    stroke-width: 3.75;
  }
}

/* ------------------------- Custom Cursor -------------------------------------------------- */

[data-cursor-init] {
  transition: opacity var(--animation-ease);
}

[data-cursor-init="true"] {
  opacity: 1;
}

.cursor-mute {
  transition: transform var(--animation-default-fast);
  transform: scale(0) rotate(-60deg);
}

[data-cursor-init="true"][data-cursor-type="mute-true"] .cursor-mute,
[data-cursor-init="true"][data-cursor-type="mute-false"] .cursor-mute {
  transition: transform var(--animation-bounce);
  transform: scale(1) rotate(0.001deg);
}

[data-cursor-init="true"][data-cursor-type="mute-true"] .mute .mute__mute-svg,
[data-cursor-init="true"][data-cursor-type="mute-false"] .mute .mute__unmute-svg,
[data-cursor-init="true"][data-cursor-type="mute-true-hidden"] .mute .mute__mute-svg,
[data-cursor-init="true"][data-cursor-type="mute-false-hidden"] .mute .mute__unmute-svg{
  display: block;
}

[data-cursor-init="true"][data-cursor-type="mute-true"] .mute .mute__unmute-svg,
[data-cursor-init="true"][data-cursor-type="mute-false"] .mute .mute__mute-svg,
[data-cursor-init="true"][data-cursor-type="mute-true-hidden"] .mute .mute__unmute-svg,
[data-cursor-init="true"][data-cursor-type="mute-false-hidden"] .mute .mute__mute-svg{
  display: none;
}

.cursor-drag,
.cursor-click,
.cursor-home{
  transition: transform var(--animation-default-fast);
  transform: scale(0) rotate(-30deg);
  transform-origin: left bottom;
}

[data-cursor-init="true"][data-cursor-type="drag"] .cursor-drag,
[data-cursor-init="true"][data-cursor-type="click"] .cursor-click,
[data-cursor-init="true"][data-cursor-type="home"] .cursor-home{
  transition: transform var(--animation-bounce);
  transform: scale(1) rotate(0.001deg);
}

@media (hover: none) and (pointer: coarse) {
  [data-cursor-init] {
    display: none;
  }
}


/* ------------------------- Horizontal Words -------------------------------------------------- */

:is(.wf-design-mode, .w-editor) .horizontal-words {
  height: auto;
}


/* ------------------------- Future -------------------------------------------------- */

.future__flying-tag .tag {
  pointer-events: none;
}

.future__flying-tag.is--2 .tag {
  background-color: var(--color-orange);
}

.future__flying-tag.is--3 .tag {
  background-color: var(--color-lightgreen);
}

/* ------------------------- Type -------------------------------------------------- */

.type[data-icon="Social"] [data-icon-name="Social"] {display: block;}
.type[data-icon="360"] [data-icon-name="360"] {display: block;}
.type[data-icon="Campaign"] [data-icon-name="360"] {display: block;}
.type[data-icon="Activation"] [data-icon-name="Activation"] {display: block;}
.type[data-icon="Design"] [data-icon-name="Design"] {display: block;}
.type[data-icon="Likes"] [data-icon-name="Likes"] {display: block;}
.type[data-icon="Views"] [data-icon-name="Views"] {display: block;}


/* ------------------------- Sticker -------------------------------------------------- */

.sticker[data-width="90"] .sticker__svg {width: 90%;}
.sticker[data-width="100"] .sticker__svg {width: 100%;}
.sticker[data-width="110"] .sticker__svg {width: 110%;}
.sticker[data-width="120"] .sticker__svg {width: 120%;}
.sticker[data-width="130"] .sticker__svg {width: 130%;}
.sticker[data-width="140"] .sticker__svg {width: 140%;}
.sticker[data-width="150"] .sticker__svg {width: 150%;}
.sticker[data-width="160"] .sticker__svg {width: 160%;}
.sticker[data-width="170"] .sticker__svg {width: 170%;}
.sticker[data-width="180"] .sticker__svg {width: 180%;}

/* ------------------------- Blob -------------------------------------------------- */

.blob[data-width="250"]{width:15.625em;}
.blob[data-width="275"]{width:17.1875em;}
.blob[data-width="300"]{width:18.75em;}
.blob[data-width="325"]{width:20.3125em;}
.blob[data-width="350"]{width:21.875em;}
.blob[data-width="375"]{width:23.4375em;}
.blob[data-width="400"]{width:25em;}
.blob[data-width="425"]{width:26.5625em;}
.blob[data-width="450"]{width:28.125em;}
.blob[data-width="475"]{width:29.6875em;}
.blob[data-width="500"]{width:31.25em;}
.blob[data-width="525"]{width:32.8125em;}
.blob[data-width="550"]{width:34.375em;}
.blob[data-width="575"]{width:35.9375em;}
.blob[data-width="600"]{width:37.5em;}


/* ------------------------- Flick Slider -------------------------------------------------- */

[data-theme-tag="Pink"] .tag {background-color: var(--color-pink);}
[data-theme-tag="Orange"] .tag {background-color: var(--color-orange);}
[data-theme-tag="Blue"] .tag {background-color: var(--color-blue);}
[data-theme-tag="Light Green"] .tag {background-color: var(--color-lightgreen);}

:is(.wf-design-mode, .w-editor) [data-flick-cards-dragger] {
  display: none;
}

[data-flick-cards-item-status] .flick-card__media,
:is(.wf-design-mode, .w-editor) .flick-card__media {
  transition: opacity var(--animation-ease);
  opacity: 0.5;
}

[data-flick-cards-item-status="before-3"] .flick-card__media,
[data-flick-cards-item-status="after-3"] .flick-card__media {
  transition: opacity var(--animation-ease);
  opacity: 0.35;
}

[data-flick-cards-item-status="active"] .flick-card__media,
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(1) .flick-card__media {
  opacity: 1;
}

/* Tag */
[data-flick-cards-item-status] .flick-card__tag .tag,
:is(.wf-design-mode, .w-editor) .flick-group__item .flick-card__tag .tag {
  transition: opacity var(--animation-default-fast), transform var(--animation-bounce-fast);
  opacity: 0;
  transform: translate(25%, 100%) rotate(10deg);
  transform-origin: right bottom;
}

[data-flick-cards-item-status="active"] .flick-card__tag .tag,
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(1) .flick-card__tag .tag {
  opacity: 1;
  transform: translate(0%, 0%) rotate(0.001deg);
}

/* Type */
[data-flick-cards-item-status] .flick-group__type .type,
:is(.wf-design-mode, .w-editor) .flick-group__item .flick-group__type .type {
  transition: opacity var(--animation-default-fast), transform var(--animation-bounce-fast);
  opacity: 0;
  transform: translate(-50%, 25%) rotate(-15deg);
  transform-origin: left top;
}

[data-flick-cards-item-status="active"] .flick-group__type .type,
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(1) .flick-group__type .type {
  opacity: 1;
  transform: translate(0%, 0%) rotate(0.001deg);
}

/* Sticker */
[data-flick-cards-item-status] .flick-group__sticker .sticker,
:is(.wf-design-mode, .w-editor) .flick-group__item .flick-group__sticker .sticker {
  transition: opacity var(--animation-default-fast), transform var(--animation-bounce-fast);
  opacity: 0;
  transform: translate(0%, 25%) scale(0) rotate(15deg);
}

[data-flick-cards-item-status="active"] .flick-group__sticker .sticker,
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(1) .flick-group__sticker .sticker {
  opacity: 1;
  transform: translate(0%, 0%) scale(1) rotate(0.001deg);
}

body:has([data-flick-drag-status="grabbing"] [data-custom-cursor="drag"]) .cursor-drag,
body:has([data-gsap-slider-list-status="grabbing"][data-custom-cursor="drag"]) .cursor-drag,
body:has([data-gsap-slider-status="not-active"] [data-custom-cursor="drag"]) .cursor-drag,
body:has([data-gsap-slider-list-status] [data-hover]:hover) .cursor-drag,
body:has([data-gsap-slider-list-status] [data-hover]:hover *) .cursor-drag{
  transition: var(--animation-default-fast);
  transform: scale(0) rotate(-30deg);
}

:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(1) {z-index: 4;}
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(2) {transform: translate(25%, 1%) rotate(10deg) scale(0.9, 0.9);z-index: 3;}
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(3) {transform: translate(45%, 5%) rotate(15deg) scale(0.8, 0.8);z-index: 2;}
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-last-child(1) {transform: translate(-25%, 1%) rotate(-10deg) scale(0.9, 0.9);z-index: 3;}
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-last-child(2) {transform: translate(-45%, 5%) rotate(-15deg) scale(0.8, 0.8);z-index: 2;}


[data-flick-cards-item-status-mirror] {
  transition: var(--animation-bounce-fast);
  opacity: 0;
  visibility: hidden;
  transform: translateX(0%);
}

[data-flick-cards-item-status-mirror="2-before"] {
  transform: translateX(-25%) rotate(-8deg);
}

[data-flick-cards-item-status-mirror="active"],
:is(.wf-design-mode, .w-editor) [data-flick-cards-item-status-mirror]:nth-child(1) {
  opacity: 1;
  visibility: visible;
  transform: translateX(0%) rotate(0.001deg) scale(1);
}

[data-flick-cards-item-status-mirror="2-after"] {
  transform: translateX(25%) rotate(8deg) ;
}


/* Video */

.flick-card__video {
  transition: opacity var(--animation-ease);
}

[data-flick-cards-item-status="active"] .flick-card__video {
  opacity: 1;
}

.flick-card__video-loading,
[data-flick-cards-video-status="active"] .flick-card__video-iframe{
  transition: opacity var(--animation-ease);
  opacity: 1;
}

[data-flick-cards-video-status="active"] .flick-card__video-loading,
.flick-card__video-iframe {
  transition: opacity var(--animation-ease);
  opacity: 0;
}

.flick-card__video:has(.flick-card__video-iframe[src=""]) {
  display: none;
}


/* ------------------------- Vimeo Thumbnail Video -------------------------------------------------- */


[data-thumbnail-video] .work-card__video-iframe {
  transition: opacity var(--animation-ease);
  transition-duration: 0.3s;
}

[data-thumbnail-video-status="active"] .work-card__video-iframe {
  opacity: 1;
}

.work-card__video-loading {
  transition: opacity var(--animation-ease);
  transition-duration: 0.3s;
}

[data-thumbnail-video-status="loading"] .work-card__video-loading {
  opacity: 1;
}

[data-thumbnail-video-id=""] [data-thumbnail-video-wrapper] {
  display: none;
}


@media (hover: none) and (pointer: coarse) {
  [data-thumbnail-video-status="not-active"] .work-card__video-loading {
    opacity: 1;
  }
}

/* ------------------------- Work Grid -------------------------------------------------- */

@media screen and (min-width: 768px) {
  .work-grid__item:nth-child(6n + 1) {
    transform: translateY(-5%) rotate(-5deg);
  }
  
  .work-grid__item:nth-child(6n + 2) {
    transform: translate(-0.008333333333%, 5%) rotate(2deg);
  }
  
  .work-grid__item:nth-child(6n + 3) {
    transform: translateY(-2.5%) rotate(-3deg);
  }
  
  .work-grid__item:nth-child(6n + 4) {
    transform: translateY(-5%) rotate(1deg);
  }
  
  .work-grid__item:nth-child(6n + 5) {
    transform: translate(-0.008333333333%, 5%) rotate(-5deg);
  }
  
  .work-grid__item:nth-child(6n + 6) {
    transform: translateY(-2.5%) rotate(2deg);
  }
}

/* Type */ 

.work-card__type .type {
  border: 0px solid transparent;
  color: var(--color-light);
  background-color: rgba(240, 235, 230, 0.10);
  background-color: rgba(100, 100, 100, 0.3);
  backdrop-filter: blur(1.25em);
}

.work-card__type .type .type__icon {
  width: 1em;
  height: 1em;
}

.work-card__type .type .type__span {
  font-size: 1.125em;
}


/* ------------------------- Image Cycle (Osmo) -------------------------------------------------- */

[data-image-cycle-item="active"] {
  transition: opacity 0.5s ease 0s, visibility 0s ease 0s;
  opacity: 1;
  visibility: visible;
  z-index: 3;
}

[data-image-cycle-item="previous"] {
  transition: opacity 0.5s ease 0.5s, visibility 0s ease 0.5s;
  opacity: 0;
  visibility: visible;
  z-index: 2;
}

[data-image-cycle-item="not-active"] {
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

/* ------------------------- CSS Marquee (Osmo) -------------------------------------------------- */

/* CSS Keyframe Animation */
@keyframes translateY { 
  to {
    transform: translateY(-100%);
  }
}

[data-css-marquee-list] {
  animation: translateY 30s linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.double-marquee__single.is--flipped .marquee-logo {
  transform: scaleY(-1);
}

[data-logo-theme="b"] .marquee-logo,
:is(.wf-design-mode, .w-editor) .double-marquee__single-item:nth-child(2) .marquee-logo {
  background-color: var(--color-darkblue);
}

[data-logo-theme="c"] .marquee-logo,
:is(.wf-design-mode, .w-editor) .double-marquee__single-item:nth-child(3) .marquee-logo {
  background-color: var(--color-orange);
}

[data-logo-theme="d"] .marquee-logo,
:is(.wf-design-mode, .w-editor) .double-marquee__single-item:nth-child(4) .marquee-logo {
  background-color: var(--color-green);
}

.double-marquee__single.is--flipped [data-logo-theme="a"] .marquee-logo,
:is(.wf-design-mode, .w-editor) .double-marquee__single.is--flipped .double-marquee__single-item:nth-child(1) .marquee-logo {
  background-color: var(--color-pink);
}

.double-marquee__single.is--flipped [data-logo-theme="b"] .marquee-logo,
:is(.wf-design-mode, .w-editor) .double-marquee__single.is--flipped .double-marquee__single-item:nth-child(2) .marquee-logo {
  background-color: var(--color-lightgreen);
}

.double-marquee__single.is--flipped [data-logo-theme="c"] .marquee-logo,
:is(.wf-design-mode, .w-editor) .double-marquee__single.is--flipped .double-marquee__single-item:nth-child(3) .marquee-logo {
  background-color: var(--color-blue);
}

.double-marquee__single.is--flipped [data-logo-theme="d"] .marquee-logo,
:is(.wf-design-mode, .w-editor) .double-marquee__single.is--flipped .double-marquee__single-item:nth-child(4) .marquee-logo {
  background-color: var(--color-maroonred);
}

@media screen and (max-width: 991px) {
  .marquee-logo .cover-image {
    transform: rotate(90deg);
  }
}


/* ------------------------- Footer -------------------------------------------------- */


.footer[data-theme-section="Dark"] {
  background-color: var(--color-dark);
  color: var(--color-dark);
}

.footer[data-theme-section="Dark"] .tag.is--footer {
  background-color: var(--color-dark);
  color: var(--color-light);
}

.footer[data-bg-section="Pink"] .footer__tile {
  background-color: var(--color-pastelpink);
}

.footer[data-bg-section="Blue"] .footer__tile {
  background-color: var(--color-lightgreen);
}

.footer[data-bg-section="Orange"] .footer__tile {
  background-color: var(--color-blue);
}

.footer[data-bg-section="Maroon Red"] .footer__tile {
  background-color: var(--color-orange);
}

.footer[data-bg-section="Green"] .footer__tile {
  background-color: var(--color-maroonred);
}

.double-marquee__fade {
  background: linear-gradient(to bottom, rgba(240, 235, 230, 1) 0%, rgba(240, 235, 230, 0.738) 19%, rgba(240, 235, 230, 0.541) 34%, rgba(240, 235, 230, 0.382) 47%, rgba(240, 235, 230, 0.278) 56.5%, rgba(240, 235, 230, 0.194) 65%, rgba(240, 235, 230, 0.126) 73%, rgba(240, 235, 230, 0.075) 80.2%, rgba(240, 235, 230, 0.042) 86.1%, rgba(240, 235, 230, 0.021) 91%, rgba(240, 235, 230, 0.008) 95.2%, rgba(240, 235, 230, 0.002) 98.2%, transparent 100%);
}


.credits .credits__group {
  transition: opacity 0.1s ease 0.3s;
  opacity: 0;
  visibility: hidden;
}

.credits:hover .credits__group {
  transition: opacity 0.1s ease 0s;
  opacity: 1;
  visibility: visible;
}

.credits .credits__tile {
  transition: var(--animation-default-fast);
  transform: translateY(3em) rotate(0.001deg);
  clip-path: inset(calc(100% - (var(--border-radius-m) * 1) - 1em) 1em 1em calc(100% - (var(--border-radius-m) * 1) - 1em) round var(--border-radius-m));
}

.credits:hover .credits__tile {
  transform: translateY(0em) rotate(0.001deg);
  clip-path: inset(0em 0em 0em 0em round var(--border-radius-m));
}

.credits__tile-col {
  transition: all var(--animation-default);
  transform: translateY(4em) rotate(0.001deg);
}

.credits:hover .credits__tile-col  {
  transform: translateY(0em) rotate(0.001deg);
}

.credits:hover .credits__tile-col:nth-child(1) {transition-delay: -0.03s;}
.credits:hover .credits__tile-col:nth-child(2) {transition-delay: 0s;}

/*.footer[data-theme-section="Dark"] .credits__tile {*/
/*  color: var(--color-dark);*/
/*  background-color: var(--color-light);*/
/*}*/


/* ------------------------- GSAP Slider (Osmo) -------------------------------------------------- */

[data-gsap-slider-init] {
  --slider-status: off; 	/* Turn slider on/off */
  --slider-spv: 3; 			/* Slides per view */ 
  --slider-gap: 0.75em; 		/* Slides Gap */
}

@media screen and (max-width: 991px) {
   [data-gsap-slider-init] {
    --slider-status: on; /* Turn slider on/off */
    --slider-spv: 2; /* Slides per view */
    --slider-gap: 1.5em; /* Gap */
  } 
}

@media screen and (max-width: 767px) {
  [data-gsap-slider-init] { 
    --slider-status: on; 	/* Turn slider on/off */
    --slider-spv: 1; /* Slides per view */
  }
}

[data-gsap-slider-item]:last-child {
	margin-right: 0;
}

@media screen and (min-width: 992px) {

  .work-more .gsap-slider__item:nth-child(6n + 1) {
    transform: translateY(-5%) rotate(-5deg);
  }
  
  .work-more .gsap-slider__item:nth-child(6n + 2){
    transform: translate(-0.008333333333%, 5%) rotate(2deg);
  }
  
  .work-more .gsap-slider__item:nth-child(6n + 3){
    transform: translateY(-2.5%) rotate(-3deg);
  }
  
}

/* ------------------------- Work Slider -------------------------------------------------- */


.work-single-slider[data-gsap-slider-init] {
  --slider-status: on; 
  --slider-gap: 3em;
}

@media screen and (max-width: 991px) {
   .work-single-slider[data-gsap-slider-init] {
    --slider-status: on; /* Turn slider on/off */
    --slider-spv: 2.5; /* Slides per view */
    --slider-gap: 1.5em; /* Gap */
  } 
}

@media screen and (max-width: 767px) {
  .work-single-slider[data-gsap-slider-init] { 
    --slider-status: on; 	/* Turn slider on/off */
    --slider-spv: 1.2; /* Slides per view */ 
  }
}

/*.work-single-slider[data-gsap-slider-init] [data-gsap-slider-item-status] {*/
/*  transition: opacity var(--animation-ease);*/
/*}*/

/*.work-single-slider[data-gsap-slider-init] [data-gsap-slider-item-status="not-active"] {*/
/*  opacity: 0.1; */
/*}*/

.work-single-blocks > section:last-child {
  padding-bottom: var(--section-padding);
}

@media screen and (max-width: 767px) {
  .work-single-blocks > section:last-child {
    padding-bottom: 7.5em;
  }
}


/* ------------------------- More Work -------------------------------------------------- */

/* Pink is default */
[data-work-theme="Blue"] .work-more__sticker { left: 20%; top: 40%;}
[data-work-theme="Orange"] .work-more__sticker { left: 15%; top: 40%;}
[data-work-theme="Maroon Red"] .work-more__sticker { left: 12%; top: 41%;}
[data-work-theme="Green"] .work-more__sticker { left: 25%; top: 40%;}

[data-work-theme="Blue"] .work-single-slider__blob { color: var(--color-orange);}
[data-work-theme="Orange"] .work-single-slider__blob { color: var(--color-maroonred);}
[data-work-theme="Maroon Red"] .work-single-slider__blob { color: var(--color-pink);}
[data-work-theme="Green"] .work-single-slider__blob { color: var(--color-blue);}


/* ------------------------- Media Card -------------------------------------------------- */

.media-card[data-ratio="4:5"] .media-card__before {
  padding-top: 125%;
}

.media-card[data-ratio="1:1"] .media-card__before {
  padding-top: 100%;
}

/* ------------------------- Rich Text -------------------------------------------------- */

.rich p {
  margin-bottom: 1em;
}

.rich > *:last-child {
  margin-bottom: 0;
}

.rich a {
  color: inherit;
}

.rich blockquote {
  border-left: 0.25em solid var(--color-pink);
  margin: 0;
  margin-bottom: 1.25em;
  padding: 0 0 0 1.25em;
  font-size: 1.125em;
  line-height: 1.4;
}