*, *::before, *::after { box-sizing: border-box; } body { line-height: 1.5; -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg { display: block; height: auto; max-width: 100%; } input, button, textarea, select { font: inherit; margin: 0; } iframe { border: 0; }

:root{
  --dark:  #43012d;
  --dark:  #040143;
  --light: #ff0000;
  --dark: #25053c;
  --dark: rgba(37, 5, 60, 1);
  --textcolor: #7f03b7;
  --spacing: 1rem;
  --light: #ff7b8f;
  --dark: #0d1626;
  --textcolor: #e0e0e0;
}
body { 
  font-size: 100%;
  margin: 0; 
  padding-bottom: 3rem; 
  font-family: "Harber";
  background: var(--dark);
  color: var(--light);
 }
h1 {
  text-align: center;
  font-size: 1.5em;
  width: 100%;
  margin: 0;
  padding: .5em;
  font-variation-settings: "wght" var(--wght,0), "slnt" var(--slnt,0), "VVLM" var(--VVLM,0), "NSSS" var(--NSSS,0), "OPTS" var(--OPTS,0);
  font-variation-settings: "wght" 10, "slnt" 0, "VVLM" 0, "NSSS" 0, "OPTS" 0;
  /* animation: title 8s ease-out infinite; */
}
@keyframes title {
  0% { font-variation-settings: "wght" 10, "slnt" 0, "VVLM" 10, "NSSS" 0; }
  30% { font-variation-settings: "wght" 20, "slnt" -10, "VVLM" 0, "NSSS" 10; }
  60% { font-variation-settings: "wght" 0, "slnt" 10, "VVLM" 10, "NSSS" -10; }
  90% { font-variation-settings: "wght" 20, "slnt" -10, "VVLM" -10, "NSSS" 10; }
  100% { font-variation-settings: "wght" 10, "slnt" 0, "VVLM" 10, "NSSS" 0; }
}

::selection {
  background-color: var(--light);
  color: var(--dark);
}

button {
  font-family: "Harber";
  font-variation-settings: "wght" 5, "slnt" 0, "VVLM" 0, "NSSS" 0, "OPTS" 0; 
  border: none;
  background: linear-gradient(to bottom, var(--light), #a00045);
  background: var(--light);
  border-radius: 1rem;
  padding: .65rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .70em;
  color: var(--dark);
  transform: scale(0);
}

.panel {
  position: fixed;
  height: 100%;
  width: 100%;
  background: var(--dark);
  color: var(--light);
  display: none;
  z-index: 2;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: var(--spacing);
  padding: var(--spacing) ;
  display: flex;
  pointer-events: none;
  opacity: 0;
  transition: opacity 250ms;
  will-change: opacity;
  overflow: hidden;
  overflow-y: auto;
}
.panel.visible {
  pointer-events: all;
  opacity: 1;
}
#messages {
  position: absolute;
  inset: 0;
  color: var(--light);
  opacity: .4;
  padding: calc(var(--spacing) / 2);
  font-size: 0.75em;
}
#messages p {
  line-height: 1.6;
  display: inline;
  margin: 0;
  transition: all 250ms linear;
  font-variation-settings: "wght" var(--wght,0), "slnt" var(--slnt,0), "VVLM" var(--VVLM,0), "NSSS" var(--NSSS,0), "OPTS" var(--OPTS,0);
}

button[data-nextcount]{
  font-size: calc(.75em + (var(--nextcount) / 8) * .15em);
}
.cursor, 
#startcursor,
#cursor2::after {
  --size:40px;
  --scale: .75;
  display: block;
  width: var(--size, 40px);
  height: var(--size, 40px);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  /* transform: scale(var(--scale)); */
  background: var(--light);
  position: absolute;
  border-radius: 50%;
  top: var(--y, 50%);
  left: var(--x, 50%);
}
.cursor {
  text-shadow: 0 0 1em var(--dark);
}
@keyframes rumble {
  100% {
    transform: translate(calc(-50% - 2px), -50%) scale(var(--scale));
  }
}
.hidden ~ .cursor {
  animation: none;
}

.cursor.active::before {
  /* --scale:1; */
  /* --size:60px; */
  /* content:"";
  display: block;
  outline: 1px solid red;
  outline-offset: 10px;
  position: absolute;
  border-radius: calc(var(--size) / 2);
  inset: 0; */
}

/* initial position */
#cursor1 { left: var(--x, calc(50% - 20px - var(--spacing)));}
#cursor2 { left: var(--x, calc(50% + 20px + var(--spacing)));}

/* #cursor1 { transform: skewX(var(--slnt, 0deg)) scale(var(--wght, 1)); }
#cursor2::after { 
  content: "";
  transform: translateX(calc(var(--NSSS, 0) * 1px)) translateY(calc(var(--VVLM, 0) * 1px)) scale(calc(var(--VVLMS, 1) * .15));
} */
.cursor {
  background: none; 
  font-size: 8em;
  line-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-variation-settings: "wght" var(--wght, 0), "slnt" var(--slnt, 0), "VVLM" var(--VVLM, 0), "NSSS" var(--NSSS, 0);
  /* border: 1px solid; */
}
.cursor i { font-style: normal; pointer-events: none; }
#cursor1 i {
  transform: translateX(calc( -5% * var(--slnt)));
}
#cursor1 {
  --size: calc(40px + var(--slnts,0) * 4px );
}

#cursor2 {
  --size: calc(40px + var(--VVLMS,0) * 4px );
}
/* text helpe : “move cursors” */
#cursorhelp {
  transform: translateY(-5em);
  font-variation-settings: "wght" 3;
  transition: opacity 500ms;
}
#cursorhelp.hidden {
  opacity: 0;
}
#cursorhelp .arrow1,
#cursorhelp .arrow2 {
  position: absolute;
  transform: translate(-6em, -.5em);
  width: 5em;
  height: auto;
  max-width: none;
}
#cursorhelp .arrow2 {
  transform: translate(6.5em, -5.5em);
}
.helper {
  display: block;
  max-width: 10em;
  font-variation-settings: "wght" 3;
  text-align: center;
  font-size: .75em;
  letter-spacing: .05em;
  margin-bottom: 0;
  opacity: 0;
  transition: all 150ms 250ms;
}
.visible .helper {
  opacity: 1;
}
#endnav {
  opacity: 0;
  transition: opacity 250ms 1000ms;
  pointer-events: none;
}
#endnav.visible {
  opacity: 1;
  pointer-events: unset;
}
.texthelper.populated { 
  font-variation-settings: "wght" 2, "slnt" 0, "VVLM" 0, "NSSS" 0, "OPTS" 0;
  font-size: 1.5em;
  text-align: center;
}
.texthelper.hidden { opacity: 0;}

.texthelper.hidden + img{display: none;}
.helper img {
  display: block;
  margin: 1em auto 0;
  width: 20px;
  height: 58px;
  transition:all 500ms;
  transition-delay: 250ms;
}
.texthelper.hidden::after {opacity: 0; height: 0;}
.text {
  position: absolute;
  font-variation-settings: "wght" var(--wght,0), "slnt" var(--slnt,0), "VVLM" var(--VVLM,0), "NSSS" var(--NSSS,0), "OPTS" var(--OPTS,0);
  font-size: 1.5em;
  text-align: center;
  opacity: 0;
  padding: var(--spacing);
  margin: 0;
  color: var(--textcolor);
  max-width: 20em;
  pointer-events: none;
}
.hidden ~ .text {
  opacity: 1;
}
#movehelp {
  text-align: center;
  font-variation-settings: "wght" 3;
  transition: opacity 500ms;
  z-index: 3;
}
#movehelp::after {
  content: "";
  background: url(arrow4.svg) no-repeat;
  background-size: contain;
  display: block;
  margin: 1em auto 0;
  width: 90px;
  height: 116px;
}

#startcursor {
  pointer-events: none;
  --size:20px;
  mix-blend-mode: difference;
}

.logo img{
  width: 100px;
  mix-blend-mode: screen;
  opacity: .3;
}
.lure img {
  width: 250px;
  /* margin-bottom: 3vh */
}
.bb {margin-bottom: 3vh}
.mde { filter: invert(1); mix-blend-mode: screen; margin-top: 5vh;}
.bbmde {
  margin-top: 5vh;
}
.button-inner {
  max-width: 0;
  opacity: 0;
  transition: max-width 100ms 200ms, opacity 50ms 250ms;
  display: block;
  
}
.button-inner b { display: block; white-space: nowrap; }
a {
 color: currentColor; 
}
.visible button,
nav.visible button {
  animation: scale-easeOutBounce 550ms calc(var(--delay, 1) * 50ms + 150ms ) forwards;
}
.visible .button-inner {
  max-width: 500px;
  opacity: 1;
  transform: scale(1);
}

@keyframes scale-easeOutBounce {
	0% { transform: scale(calc( 1 - 1));}
	12% { transform: scale(calc( 1 - 0.89));}
	24% { transform: scale(calc( 1 - 0.56));}
	36% { transform: scale(calc( 1 - 0.02));}
	54% { transform: scale(calc( 1 - 0.25));}
	74% { transform: scale(calc( 1 - 0.02));}
	82% { transform: scale(calc( 1 - 0.06));}
	92% { transform: scale(calc( 1 - 0.01));}
	96% { transform: scale(calc( 1 - 0.02));}
	100% { transform: scale(calc( 1 - 0));}
}

@keyframes scale-easeOutElastic {
	0% { transform: scale(calc(1 - 1)); }
	16% { transform: scale(calc(1 - -0.32)); }
	28% { transform: scale(calc(1 - 0.13)); }
	44% { transform: scale(calc(1 - -0.05)); }
	59% { transform: scale(calc(1 - 0.02)); }
	73% { transform: scale(calc(1 - -0.01)); }
	88% { transform: scale(calc(1 - 0)); }
	100% { transform: scale(calc(1 - 0)); }
}

#text {
  padding: var(--spacing);
}



#output{
  display: flex;
  gap: .5rem;
  padding: .5rem;
  flex-direction: column;
  align-items: center
}
#output p{
  font-variation-settings: "wght" 2, "slnt" 0, "VVLM" 0, "NSSS" 0, "OPTS" 0;
  font-size: 1.5em;
  text-align: center;
  margin-top: .5em;
}
#shape nav {
  position: absolute;
  bottom: var(--spacing);
  z-index: 200;
  display: flex;
  gap: var(--spacing);
}

canvas {
  position: absolute;
  inset:0;
  width: 100%;
  height: 100%;
  display: block; 
}

/* feedback image… */
.feedback {
  position: absolute;
  left: 50%;
  width: calc(100vh - var(--spacing) * 2);
  height: auto;
  transform: translate(-50%,-50%) rotate(-90deg);
  z-index: -1;
  mix-blend-mode: screen;
  filter: grayscale(1)  brightness(.8);
  top: 50%;
  opacity: 0;
  transition: opacity 150ms;
}
.printinganim #feedback-countdown {
  animation: printinganim 500ms ease-in-out infinite alternate;
}
.printedanim #feedback-countdown {
  animation: printedanim 2000ms ease-in-out infinite alternate;
}

.printedanim .feedback {
  opacity: 1;
}
@keyframes printedanim {
  0% {font-variation-settings: "wght" 5, "slnt" -10}
  100% {font-variation-settings: "wght" 5, "slnt" 10}
}
@keyframes printinganim {
  0% {font-variation-settings: "wght" 0, "slnt" 0}
  100% {font-variation-settings: "wght" 10, "slnt" 0}
}

.feedback-content,
.printed,
.noprint-content {
  text-align: center;
  font-variation-settings: "wght" 2, "slnt" 0, "VVLM" 0, "NSSS" 0, "OPTS" 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 26em;
  line-height: 1.8;
}
.printed p {
  line-height: 1.8;
}
#feedback-countdown {
  font-size: 2em;
  margin-bottom: 1em;
}

.printed i {
  font-style: normal;
  font-variation-settings: "wght" 2, "slnt" 3, "VVLM" 0, "NSSS" 0, "OPTS" 0;
}


#feedback-nav {
  gap: var(--spacing);
  display: none;
  flex-direction: column;
}
#feedback-nav.visible {
  display: flex;
}

#sign-text{
  text-align: center;
  font-style: normal;
  font-variation-settings: "wght" 2, "slnt" 0, "VVLM" 0, "NSSS" 0, "OPTS" 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
  padding: var(--spacing);
  margin-bottom: var(--spacing);
}
#sign-nav {
  justify-content: center;
  gap: var(--spacing);
  display: flex;
}
#name {
  padding: .5em;
  background: var(--light);
  border: none;
  border-radius: .25em;
  text-align: center;
  font-variation-settings: "wght" 5, "slnt" 0, "VVLM" 0, "NSSS" 0, "OPTS" 0;
  width: 100%;
}



/* #carousel {
  width: 100%;
  height: 100%;
}
.carousel-cell {
  width: 100%; 
  height: 100%; 
  margin-right: 0;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin: 0; 
  padding: var(--spacing);
}
.carousel-cell button{
  opacity: 0;
  transition: all 500ms ease-out 0;
}
.carousel-cell .retry {
  opacity: 1;
  transition: none;
}
.carousel-cell.is-selected button{
  opacity: 1;
  transition: all 500ms ease-out 1500ms;
}
.carousel-cell p {
  font-size: 1.5em;
  padding-inline: 1em;
  line-height: 1.5;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  max-width: 14em;
  font-variation-settings: "wght" 2, "slnt" 0, "VVLM" 0, "NSSS" 0, "OPTS" 0;
}
.flickity-prev-next-button{
  transform: none;
  top: auto;
  bottom: var(--spacing);
  background: none;
}
.flickity-button-icon {
  fill: var(--light);
  transform: scale(.8);
}
.flickity-prev-next-button:hover {
  background: none;
}
.flickity-prev-next-button:hover .flickity-button-icon{
  transform: scale(1);
}
 */