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

body {
  font-size: var(--size-font);
  -ms-overflow-style: none;
  scrollbar-width: none;
  overscroll-behavior: none;
}

body::-webkit-scrollbar,
html::-webkit-scrollbar {
  display: none;
}

.lenis {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Selection */
::selection {
  background-color: rgba(var(--color-rgb-gray), 0.2);
  text-shadow: none;
}

::-moz-selection {
  background-color: rgba(var(--color-rgb-gray), 0.2);
  text-shadow: none;
}

a {
  color: inherit;
  text-decoration: none;
}

textarea {
  resize: none;
}

button {
  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
}

[data-transition-theme="dark"] { background-color: var(--color-dark); }
[data-transition-theme="light"] { background-color: var(--color-neutral-200); }

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

.text-mask-line-mask {
  text-align: inherit !important; 
}

.text-line {
  padding: 0.1em;
  margin: -0.1em;
  text-align: inherit !important;
}

html:not(.wf-design-mode) [data-load-reset] {
  opacity: 0;
}

/* ------------------------- CONTAINER ------------------------------------------- */

.container {
  max-width: var(--size-container);
  padding: 0 var(--gap-ml);
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  .container {
    padding: 0 0.625em;
  }
  .container.is--medium, .container.is--small {
    padding: 0 var(--gap-m);
  }
  
}

/* ------------------------- BUTTONS & TAGS ------------------------------------------- */

/* Tags */
.tag[data-shape="round"] { 
  border-radius: 100em; 
}

div.tag .button-label__wrap { 
  display: none;
}

button.tag .button-label__wrap { 
  display: grid;
}

button.tag .tag-label { 
  display: none; 
}

/* Button Styling */

.button[data-shape="round"],
.square-button[data-shape="round"]{ 
  border-radius: 3em;
}

.button[data-size="full"]{ 
  width: 100%;
}

div.button { 
  pointer-events: none;
}

:is(.wf-design-mode, .wf-editor) div.button{ 
  pointer-events: auto; 
}

.button-bg, .button, .tag-bg, button.tag{
  transition: all var(--animation-ease);
}

@media screen and (max-width: 991px){ 
  .button[data-responsive="tablet"]{ 
    width: 100%;
  } 
}

@media screen and (max-width: 767px){ 
  .button[data-responsive="landscape"]{
    width: 100%;
  }
}

@media screen and (max-width: 479px){ 
  .button[data-responsive="mobile"]{
    width: 100%;
  }

  .button:has( .button-icon__slot){
    gap: 0.45em;
  }
  
  .button:has( .button-icon__slot) .button-icon__slot{
    width: 1em;
  }  
}

/* Square Button */

.square-button{
  cursor: pointer;
}

.square-button[data-size="m"]{
  width: 3em;
  height: 3em;
}

.square-button[data-size="l"]{
  width: 3.875em;
  height: 3.875em;
  padding: 1.375em;
}

.button,
button.tag{
  --r: 20deg;
}

.square-button {
  --r: 10deg;
}

.button-label,
.button-icon {
  transform-origin: 50% var(--y, 1100%);
}

:is(.wf-design-mode, .wf-editor) .button-label { 
  transform-origin: 50% 1800%;
}

.button-label:not(:nth-of-type(1)),
.square-button .button-icon:not(:nth-of-type(1)) {
  position: absolute;
}

.button-label:nth-of-type(1),
.square-button .button-icon:nth-of-type(1) { 
  transform: rotate(calc(var(--r) * 0));
}

.button-label:nth-of-type(2),
.square-button .button-icon:nth-of-type(2) { 
  transform: rotate(calc(var(--r) * -1));
}

.button-label:nth-of-type(3),
.square-button .button-icon:nth-of-type(3) { 
  transform: rotate(calc(var(--r) * -2));
}


[data-disabled]:hover {
  cursor: not-allowed;
}

:is(.wf-design-mode, .wf-editor) .button-label[aria-hidden="true"] {
  display: none;
}



/* ------------------------- ONBOARDING HERO VISUAL ------------------------------------------- */

.onboarding__hero-bg {
  --y: 1em;
}

.onboarding__hero-bg-item:nth-of-type(10),
.onboarding__hero-bg-item:nth-of-type(11) {
  transform: translate(0px, calc(var(--y) * 0));
}

.onboarding__hero-bg-item:nth-of-type(9),
.onboarding__hero-bg-item:nth-of-type(12) {
  transform: translate(0px, calc(var(--y) * 0.75));
}

.onboarding__hero-bg-item:nth-of-type(8),
.onboarding__hero-bg-item:nth-of-type(13) {
  transform: translate(0px, calc(var(--y) * 2.4));
}

.onboarding__hero-bg-item:nth-of-type(7),
.onboarding__hero-bg-item:nth-of-type(14) {
  transform: translate(0px, calc(var(--y) * 4.8));
}

.onboarding__hero-bg-item:nth-of-type(6),
.onboarding__hero-bg-item:nth-of-type(15) {
  transform: translate(0px, calc(var(--y) * 8.25));
}

.onboarding__hero-bg-item:nth-of-type(5),
.onboarding__hero-bg-item:nth-of-type(16) {
  transform: translate(0px, calc(var(--y) * 12.5));
}

.onboarding__hero-bg-item:nth-of-type(4),
.onboarding__hero-bg-item:nth-of-type(17) {
  transform: translate(0px, calc(var(--y) * 17.8));
}

.onboarding__hero-bg-item:nth-of-type(3),
.onboarding__hero-bg-item:nth-of-type(18) {
  transform: translate(0px, calc(var(--y) * 24));
}

.onboarding__hero-bg-item:nth-of-type(2),
.onboarding__hero-bg-item:nth-of-type(19) {
  transform: translate(0px, calc(var(--y) * 31));
}


/* ------------------------- ONBOARDING BG PROGRESS ------------------------------------------- */

.onboarding__bg-shape path {
  fill: var(--color-neutral-450);
}

.onboarding__bg-shape path:last-of-type {
  fill: var(--color-purple);
}

[data-onboarding-progress="mobile"]{
  display: none;
}

@media screen and (max-width: 767px){
  
  [data-onboarding-progress="mobile"]{
    display: flex;
  }  
  
  [data-onboarding-progress="desktop"]{
    display: none;
  }    
  
}

#onboarding-bg-line-top {
  transform-origin: 50% 0%;
  transform: scale(1, 6);
}

#onboarding-bg-line-right {
  transform-origin: 100% 50%;
  transform: scale(6, 1);
}

#onboarding-bg-line-bottom {
  transform-origin: center bottom;
  transform: scale(1, 6);
}

#onboarding-bg-line-left {
  transform-origin: 0% 50%;
  transform: scale(6, 1);
}

.onboarding__nr-w {
  opacity: 0;
  transform: translate(0px, -1em);
  transition: all 0.5s var(--cubic-default);
}

.onboarding__nr-w.is--active {
  opacity: 1;
  transform: translate(0px, 0em);
}

.onboarding__nr .eyebrow{
  position: absolute;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.onboarding__nr .eyebrow.is--active{
  opacity: 1;
}



/* ------------------------- ONBOARDING DROPDOWN ------------------------------------------- */

.button-icon__wrap{
  transition: transform 0.45s var(--cubic-default);
}

.onboarding__dd-content{
  transition: clip-path 0.65s var(--cubic-default);
}

.onboarding__dd-w:hover .button-icon__wrap{
  transform: rotate(180deg);
}

.onboarding__dd-w:hover {
  z-index: 3;
}

.onboarding__wrap:has( .onboarding__dd-w:hover) .onboarding__inner{
  z-index: 15;
}

.onboarding__dd-w:hover .onboarding__dd-content{
  clip-path: inset(0px 0px 0% 0px round 2em);
}

.onboarding__dd-w.is--active .button-bg{
  background-color: var(--color-electric);
}

.onboarding__dd-w.is--active [data-dropdown-span]{
  opacity: 1;
}

.onboarding__inner:has( [data-onboarding-button="something else"].is--active){
  padding-bottom: 16em;
}


/* ------------------------- ONBOARDING FLOW ------------------------------------------- */

html:not(.wf-design-mode) [data-onboarding-step]:not(:first-of-type),
html:not(.wf-design-mode) .onboarding__bg,
html:not(.wf-design-mode) [data-onboarding-custom]{
  display: none;
}

[data-onboarding-button].is--active{
  border-radius: 1.5em;
}

[data-onboarding-button].is--active .button-bg{
  background-color: var(--color-electric);
}

@media screen and (max-width: 767px){
  
  .onboarding .button-label{
    font-size: 1em;
  }
  
  .onboarding .button{
    --btn-height: 2.5em;
  }  
  
}

.onboarding__form-scribble p,
.onboarding__form-scribble svg{
  transition: all 0.5s var(--cubic-default);
}

.onboarding__form-scribble p:nth-of-type(2){
  opacity: 0;
  visibility: hidden;
  transform: translate(1em, 0px);
}



/* ------------------------- DARK MODE ------------------------------------------- */
body {
  transition: all 0.25s ease;  
}

[data-onboarding-theme="dark"] {
  background: var(--color-neutral-800);
  color: var(--color-neutral-200);
}

.onboarding__bg{
  --color-active: var(--color-purple);
  --color-idle: var(--color-neutral-450);
}

#onboarding-bg-line-top {
  fill: var(--color-purple) !important;
}

:where([data-onboarding-theme="dark"]) {

  .onboarding__bg{
    --color-active: var(--color-electric);
    --color-idle: var(--color-neutral-550);
  }  
  
  .tag,
  .onboarding__nr{
    color: var(--color-neutral-800) !important;
  }
  
  .tag .button-bg {
    background-color: var(--color-neutral-200);
  }
  
  .onboarding__hero-bg-shape,
  .onboarding__bg-shape path{
    color: var(--color-neutral-550);
  }
  
  [data-onboarding-button]:not(.is--active),
  [data-onboarding-nav="prev"],
  [data-onboarding-dropdown]:not(.is--active) .onboarding__dd-btn{
    color: var(--color-neutral-200) !important;
  }
  
  [data-onboarding-button] .button-bg,
  [data-onboarding-nav="prev"] .button-bg,
  [data-onboarding-dropdown] .button-bg,
  .onboarding__dd-content{
    background-color: var(--color-neutral-600);
  }
  
  #logo-wordmark {
    fill: var(--color-neutral-200);
  }
  
  #onboarding-bg-line-top {
    fill: var(--color-electric) !important;
  }
  
  .onboarding__nr .button-bg {
    background-color: var(--color-electric) ;
  }
  
  .onboarding__form-input{
    background-color: var(--color-neutral-600);
    color: var(--color-neutral-200);
    border-color: var(--color-neutral-525);
  }
  
  .onboarding__form-input:hover{
    border-color: var(--color-neutral-500);
  }
  
  .onboarding__end-bg img{
    opacity: 0.25;
  }
  
  .onboarding__end-vid-w{
    background-color: var(--color-neutral-600);
  }
  
  .onboarding__form-scribble{
    color: var(--color-electric);
  }  
  
  .onboarding__form-scribble svg{
    transform: rotateY(0deg) !important;
  }
  
  .onboarding__form-scribble p:nth-of-type(1){
    opacity: 0;
    visibility: hidden;
    transform: translate(-1em, 0px);
  }

  .onboarding__form-scribble p:nth-of-type(2){
    opacity: 1;
    visibility: visible;
    transform: translate(0em, 0px);
  }

}

/* ------------------------- Bunny Player -------------------------------------------------- */

/* Animation */
[data-bunny-player-init] :is(.bunny-player__placeholder, .bunny-player__dark, .bunny-player__playpause, .bunny-player__loading) {
  transition: opacity var(--animation-ease-double), visibility var(--animation-ease-double);
}

/* Placeholder */
[data-bunny-player-init][data-player-status="playing"] .bunny-player__placeholder,
[data-bunny-player-init][data-player-status="paused"] .bunny-player__placeholder,
[data-bunny-player-init][data-player-activated="true"][data-player-status="ready"] .bunny-player__placeholder {
  opacity: 0;
  visibility: hidden;
}

/* Dark Overlay */
.bunny-player__dark {
  opacity: 0.3;
}

[data-bunny-player-init][data-player-status="paused"] .bunny-player__dark,
[data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__dark{
  opacity: 0.3;
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__dark {
  opacity: 0;
}

[data-bunny-player-init][data-player-hover="active"] .bunny-player__dark {
  opacity: 0.4;
}

/* Interface Fade */

.bunny-player__interface-fade {
  opacity: 0.6;
  height: 30%;
  background-image: linear-gradient(
    to bottom,
    rgba(var(--color-ignore-rgb-black), 0) 0%,
    rgba(var(--color-ignore-rgb-black), 0.013) 8.1%,
    rgba(var(--color-ignore-rgb-black), 0.049) 15.5%,
    rgba(var(--color-ignore-rgb-black), 0.104) 22.5%,
    rgba(var(--color-ignore-rgb-black), 0.175) 29%,
    rgba(var(--color-ignore-rgb-black), 0.259) 35.3%,
    rgba(var(--color-ignore-rgb-black), 0.352) 41.2%,
    rgba(var(--color-ignore-rgb-black), 0.45) 47.1%,
    rgba(var(--color-ignore-rgb-black), 0.55) 52.9%,
    rgba(var(--color-ignore-rgb-black), 0.648) 58.8%,
    rgba(var(--color-ignore-rgb-black), 0.741) 64.7%,
    rgba(var(--color-ignore-rgb-black), 0.825) 71%,
    rgba(var(--color-ignore-rgb-black), 0.896) 77.5%,
    rgba(var(--color-ignore-rgb-black), 0.951) 84.5%,
    rgba(var(--color-ignore-rgb-black), 0.987) 91.9%,
    rgba(var(--color-ignore-rgb-black), 1) 100%
  );
}

/* Play/Pause */
[data-bunny-player-init][data-player-activated="false"] .bunny-player__playpause {
  cursor: pointer;
}

[data-bunny-player-init][data-player-activated="true"] .bunny-player__playpause {
  opacity: 0;
}


[data-bunny-player-init][data-player-status="playing"] .bunny-player__play-svg,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__play-svg {
  display: none;
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__pause-svg,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__pause-svg{
  display: block;
}

/* Loading */
[data-bunny-player-init][data-player-status="loading"] .bunny-player__loading {
  opacity: 1;
  visibility: visible;
}

/* Interface */
.bunny-player__interface {
  transition: all var(--animation-default-half);
}

[data-bunny-player-init][data-player-status="playing"] .bunny-player__interface,
[data-bunny-player-init][data-player-status="loading"] .bunny-player__interface{
  opacity: 0;
  transform: translateY(1em) rotate(0.001deg);
}

[data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .bunny-player__interface,
[data-bunny-player-init][data-player-status="loading"][data-player-hover="active"] .bunny-player__interface {
  opacity: 1;
  transform: translateY(0em) rotate(0.001deg);
}

/* Timeline */
[data-bunny-player-init][data-player-status="idle"][data-player-activated="false"] .bunny-player__timeline,
[data-bunny-player-init][data-player-status="ready"][data-player-activated="false"] .bunny-player__timeline {
  pointer-events: none;
}

/* Timeline Handle */
[data-bunny-player-init] .bunny-player__timeline-handle {
  transition: transform var(--animation-default-half);
}

[data-bunny-player-init][data-timeline-drag="true"] .bunny-player__timeline-handle {
  transform: translate(-50%, -50%) scale(1);
}

/* Fullscreen */
[data-bunny-player-init][data-player-fullscreen="true"] .bunny-player__fullscreen-shrink-svg {
  display: block;
}

[data-bunny-player-init][data-player-fullscreen="true"] .bunny-player__fullscreen-scale-svg {
  display: none;
}

/* Mute */
[data-bunny-player-init][data-player-muted="true"] .bunny-player__volume-mute-svg {
  display: block;
}

[data-bunny-player-init][data-player-muted="true"] .bunny-player__volume-up-svg {
  display: none;
}

/* Cover Mode */
[data-bunny-player-init][data-player-update-size="cover"] {
  height: 100%;
}

[data-bunny-player-init][data-player-update-size="cover"] [data-player-before] {
  display: none;
}

[data-bunny-player-init][data-player-update-size="cover"][data-player-fullscreen="false"] .bunny-player__video {
  object-fit: cover;
}

/* Speed */
[data-player-control="speed"] .bunny-player__toggle-speed-span {
  display: none;
}

[data-player-speed="1x"] [data-player-control="speed"] .bunny-player__toggle-speed-span:nth-child(1) {display: block;}
[data-player-speed="1.2x"] [data-player-control="speed"] .bunny-player__toggle-speed-span:nth-child(2) {display: block;}
[data-player-speed="1.5x"] [data-player-control="speed"] .bunny-player__toggle-speed-span:nth-child(3) {display: block;}
[data-player-speed="2x"] [data-player-control="speed"] .bunny-player__toggle-speed-span:nth-child(4) {display: block;}
[data-player-speed="0.8x"] [data-player-control="speed"] .bunny-player__toggle-speed-span:nth-child(5) {display: block;}