/*
Look at you, hacker! Sneaking a peek at my code... Or are you considering becoming a client?
Get a job, or better yet, hire my agency - FeysMedia. Let's talk business!
Call us now or drop an email:

FeysMedia e.U.
+436606787039
office@feysmedia.at

Inspiration for the effect: codepen.io
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');

/* Reset & base */
body, html {
  height: 100%;
  margin: 0;
  background-color: #000;
}

body {
  font-family: "Montserrat", sans-serif;
  display: flex;
  flex-direction: column;      /* vertical stacking */
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 5vw;
  background-color: #FF3C00;
  transition: background-color 2.5s ease;
  gap: 1em; /* spacing between checkbox and text block */
}

/* === TOGGLE CHECKBOX === */
.toggle-label {
  font-size: 1.2vw;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

/* make checkbox a little bigger */
.toggle-label input[type="checkbox"] {
  transform: scale(1.5);
  cursor: pointer;
}

/* === PRESSURE CONTAINER === */
.pressure {
  display: inline-block;
  position: relative;
  text-align: center;
  font-variation-settings: 'wght' 900;
  letter-spacing: -0.1em;
}

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

/* word text toggle */
.word:before {
  content: attr(data-textfirst);
}
body:has(#feysiCheck:checked) .word:before {
  content: attr(data-textsecond);
}

/* emoji */
.emoji {
  position: absolute;
  top: -1.2em;       /* above the word */
  left: 50%;
  transform: translateX(-50%);
  font-size: 6vw;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.angry { opacity: 1; }
.relaxed { opacity: 0; }

body:has(#feysiCheck:checked) .angry { opacity: 0; }
body:has(#feysiCheck:checked) .relaxed { opacity: 1; }

/* === MODES === */

/* STRESS MODE (unchecked) → word + emoji shake */
body:not(:has(#feysiCheck:checked)) .word {
  animation: shakeWord 0.1s infinite;
}
body:not(:has(#feysiCheck:checked)) .emoji {
  animation: shakeEmoji 0.1s infinite;
}

/* RELAXED MODE (checked) → release animation on word */
body:has(#feysiCheck:checked) .word {
  animation: release 3s cubic-bezier(0,0,0,1) forwards;
}

/* background color swap */
body:has(#feysiCheck:checked) {
  background-color: #18a6a6;
}

/* === Animations === */

/* shake for word */
@keyframes shakeWord {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-2px, 1px); }
  20%  { transform: translate(2px, -1px); }
  30%  { transform: translate(-1px, 2px); }
  40%  { transform: translate(1px, -2px); }
  50%  { transform: translate(-2px, 0px); }
  60%  { transform: translate(2px, 1px); }
  70%  { transform: translate(-1px, -1px); }
  80%  { transform: translate(1px, 2px); }
  90%  { transform: translate(-2px, -1px); }
  100% { transform: translate(0, 0); }
}

/* shake for emoji – preserve translateX(-50%) */
@keyframes shakeEmoji {
  0%   { transform: translateX(-50%) translate(0, 0); }
  10%  { transform: translateX(-50%) translate(-2px, 1px); }
  20%  { transform: translateX(-50%) translate(2px, -1px); }
  30%  { transform: translateX(-50%) translate(-1px, 2px); }
  40%  { transform: translateX(-50%) translate(1px, -2px); }
  50%  { transform: translateX(-50%) translate(-2px, 0px); }
  60%  { transform: translateX(-50%) translate(2px, 1px); }
  70%  { transform: translateX(-50%) translate(-1px, -1px); }
  80%  { transform: translateX(-50%) translate(1px, 2px); }
  90%  { transform: translateX(-50%) translate(-2px, -1px); }
  100% { transform: translateX(-50%) translate(0, 0); }
}

/* release animation for calm mode */
@keyframes release {
  0%   { font-variation-settings: 'wght' 900; letter-spacing: -0.1em; }
  100% { font-variation-settings: 'wght' 100; letter-spacing: 1.2em; }
}