/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* ============================================ */
/* CSS VARIABLES */
/* ============================================ */
:root {
  /* Colors */
  --card-height: 768px;
  --card-width: 1366px;
  --color-black: black;
  --color-cream: #fdffc1;
  --color-red-dark: #500005;
  --color-red-gradient: #e3000f;

  /* Timing */
  --color-red-primary: #fc0616;
  --color-white: #fff;
  --delay-base: 0.2s;

  /* Spacing - Fixed pixel values for desktop (>=1280px), responsive vw below */
  --delay-step: 0.1s;
  --fade-duration: 1000ms;
  --font-primary: "Fira Sans";
  --font-secondary: "Inter";
  --font-size-lg: 30px;

  /* Typography - Fixed pixel values for desktop, responsive vw below */
  --font-size-md: 30px;
  --font-size-xl: 42px;
  --intro-duration: 0.8s;
  --keyword-intro-duration: 0.6s;
  --logo-height: 64px;

  /* Animation delays */
  --lottie-size: 600px;
  --section-padding: 32px;
}

/* ============================================ */
/* RESPONSIVE DESIGN - Activates only when viewport width < 1280px */
/* ============================================ */
@media (max-width: 1279px) {
  :root {
    /* Convert fixed pixels to vw units based on 1280px = 100vw assumption */
    --card-height: 100dvh; /* Full viewport height for mobile */
    --card-width: 100vw;
    --font-size-lg: 2.34375vw; /* 30px equivalent */
    --font-size-md: 2.34375vw; /* 30px equivalent */
    --font-size-xl: 3.28125vw; /* 42px equivalent */
    --logo-height: 5vw; /* 64px equivalent */
    --lottie-size: 46.875vw; /* 600px equivalent */
    --section-padding: 2.5vw; /* 32px equivalent */
  }

  /* Responsive overrides for specific elements */
  .keywords {
    height: 23.4375vw; /* 300px equivalent */
  }

  h4 {
    margin: 0 12.5vw; /* 160px equivalent */
  }

  .section.--top h1 {
    padding-right: 5vw;
    padding-left: 5vw;
  }

  /* Mobile Lottie adjustments */
  .lottie-container {
    top: calc(50% + 5vw); /* Move center down by 5vw */
    width: 51.5625vw; /* 10% larger than 46.875vw */
    height: 51.5625vw; /* Maintain aspect ratio */
  }
}

/* ============================================ */
/* MOBILE-SPECIFIC RESPONSIVE FIXES - Activates when viewport width ≤ 599px */
/* ============================================ */
@media (max-width: 599px) {
  :root {
    /* Double the vw values for enhanced readability on very small screens */
    --font-size-lg: 4.6875vw !important; /* 2x the responsive size */
    --font-size-md: 4.6875vw !important; /* 2x the responsive size */
    --font-size-xl: 6.5625vw !important; /* 2x the responsive size */
    --logo-height: 10vw !important; /* 2x the responsive size */
    --lottie-size: 93.75vw !important; /* 2x the responsive size */
    --section-padding: 5vw !important; /* 2x the responsive size */
  }
  .card-container {
    height: 85dvh !important;
  }

  /* Mobile-specific overrides for specific elements */
  .keywords {
    position: relative;

    height: 36.875vw !important; /* 2x the responsive size (600px equivalent at 1280px) */
  }

  h4 {
    margin: 0 2vw !important; /* 2x the responsive size (320px equivalent at 1280px) */
  }

  /* Small mobile Lottie adjustments */
  .lottie-container {
    top: 50% !important; /* Move center down by 5vw */
    width: 103.125vw !important; /* 10% larger than 93.75vw */
    height: 103.125vw !important; /* Maintain aspect ratio */
  }

  /* ============================================ */
  /* SMALL MOBILE KEYWORD POSITIONS - For screens ≤ 599px */
  /* ============================================ */
  /* Adjust these values for optimal positioning on very small screens */
  #pere {
    top: 30% !important;
    left: 5% !important;
  }
  #puhkus {
    top: 62% !important;
    left: 11% !important;
  }
  #meeleolu {
    top: 95% !important;
    left: 23% !important;
  }
  #rahu {
    top: 85% !important;
    right: 26% !important;
  }
  #s6brad {
    top: 55% !important;
    right: 10% !important;
  }
  #kingitused {
    top: 22% !important;
    right: 5% !important;
  }
}

/* ============================================ */
/* CSS RESET */
/* ============================================ */
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-box-sizing: inherit;
  -webkit-user-select: none;
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  outline: none;
  font-size: 1em;
  line-height: 100%;
  font-family: "Inter", sans-serif;
  text-decoration: none;
  user-select: none;
}
code,
kbd,
samp,
pre,
tt,
var,
textarea,
input,
select,
isindex,
listing,
xmp,
plaintext {
  font: inherit;
  font-size: 1em;
  white-space: normal;
}
dfn,
i,
cite,
var,
address,
em {
  font-style: normal;
}
th,
b,
strong,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}
a,
img,
a img,
iframe,
form,
fieldset,
abbr,
acronym,
object,
applet,
table {
  border: none;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
caption,
th,
td,
center {
  text-align: left;
  vertical-align: top;
}
body {
  color: var(--color-black);
  line-height: 1;
  background: var(--color-white);
}
q {
  quotes: "" "";
}
ul,
ol,
dir,
menu {
  list-style: none;
}
sub,
sup {
  vertical-align: baseline;
}
a {
  color: inherit;
}
hr {
  display: none;
}
font {
  color: inherit !important;
  font: inherit !important;
}
marquee {
  -moz-binding: none;
  overflow: inherit !important;
}
blink {
  text-decoration: none;
}
nobr {
  white-space: normal;
}

[hidden] {
  display: none;
  visibility: hidden;
}

.card-wrapper {
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center; /* Safari */ /* Safari */
  -webkit-box-pack: center; /* Safari */ /* Safari */
  display: -webkit-box; /* Safari */ /* Safari */
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* Use dynamic viewport height for mobile browsers */
  overflow: hidden;
  background: radial-gradient(50% 50% at 50% 50%, rgba(227, 0, 15, 0) 0%, var(--color-red-gradient) 100%), var(--color-red-primary);
}

.card-container {
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  overflow: hidden;
}

/* ============================================ */
/* LOTTIE ANIMATION CONTAINER */
/* ============================================ */

/* This positions the animation in the CENTER of the card */
.lottie-container {
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  z-index: 5;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--lottie-size);
  height: var(--lottie-size);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* The actual animation div inside the container */
#lottie-animation {
  width: 100%; /* Fill the container */
  height: 100%; /* Fill the container */
}

.section {
  -ms-flex-align: center;
  -ms-flex-direction: column;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
}

.--top {
  top: var(--section-padding);
}

h1 {
  leading-trim: both;
  text-edge: cap;
  margin-bottom: 8px;
  color: var(--color-white);
  font-style: normal;
  font-weight: 500;
  font-size: var(--font-size-xl);
  line-height: 125%;
  font-family: var(--font-primary);
  text-align: center;
}

h2 {
  leading-trim: both;
  text-edge: cap;
  color: var(--color-cream);
  font-style: normal;
  font-weight: 400;
  font-size: var(--font-size-md);
  line-height: 125%;
  font-family: var(--font-secondary);
  text-align: center;
}

.--bottom {
  bottom: var(--section-padding);
}

.keywords {
  -o-transition: opacity var(--fade-duration) ease;
  -webkit-transition: opacity var(--fade-duration) ease;
  position: relative;
  width: 100%;
  height: 300px;
  transition: opacity var(--fade-duration) ease;
}
.keyword {
  -o-transition: opacity var(--fade-duration) ease;
  -webkit-transition: opacity var(--fade-duration) ease;
  leading-trim: both;
  text-edge: cap;
  display: inline;
  position: absolute;
  color: var(--color-red-dark);
  font-style: normal;
  font-weight: 500;
  font-size: var(--font-size-xl);
  line-height: 100%;
  font-family: var(--font-primary);
  text-align: center;
  cursor: pointer;
  transition: opacity var(--fade-duration) ease;
}
.keyword.active {
  color: var(--color-white);
}

#pere {
  top: 0;
  left: 5%;
}
#puhkus {
  top: 40%;
  left: 14%;
}
#meeleolu {
  top: 80%;
  left: 32%;
}
#rahu {
  top: 80%;
  right: 32%;
}
#s6brad {
  top: 40%;
  right: 14%;
}
#kingitused {
  top: 0;
  right: 5%;
}

h3 {
  -o-transition: opacity var(--fade-duration) ease;
  -webkit-transition: opacity var(--fade-duration) ease;
  leading-trim: both;
  text-edge: cap;
  color: var(--color-white);
  font-style: normal;
  font-weight: 500;
  font-size: var(--font-size-xl);
  line-height: 125%;
  font-family: var(--font-primary);
  text-align: center;
  transition: opacity var(--fade-duration) ease;
}

h4 {
  -o-transition: opacity var(--fade-duration) ease;
  -webkit-transition: opacity var(--fade-duration) ease;
  leading-trim: both;
  text-edge: cap;
  margin: 0 15vw;
  color: var(--color-white);
  font-style: normal;
  font-weight: 400;
  font-size: var(--font-size-lg);
  line-height: 125%;
  font-family: var(--font-primary);
  text-align: center;
  transition: opacity var(--fade-duration) ease;
}

.logo {
  -o-transition: opacity var(--fade-duration) ease;
  -webkit-transition: opacity var(--fade-duration) ease;
  width: auto;
  height: var(--logo-height);
  transition: opacity var(--fade-duration) ease;
}

.fade-target {
  -o-transition: opacity var(--fade-duration) ease;
  -webkit-transition: opacity var(--fade-duration) ease;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fade-duration) ease;
}

.fade-target.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================ */
/* INTRO ANIMATIONS */
/* ============================================ */

/* Fade in from below with scale - for headings */
@-webkit-keyframes fadeInUp {
  from {
    -webkit-transform: translateY(30px) scale(0.95);
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    -webkit-transform: translateY(0) scale(1);
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes fadeInUp {
  from {
    -webkit-transform: translateY(30px) scale(0.95);
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    -webkit-transform: translateY(0) scale(1);
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Fade in with scale - for Lottie animation */
@-webkit-keyframes fadeInScale {
  from {
    -webkit-transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    -webkit-transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes fadeInScale {
  from {
    -webkit-transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    -webkit-transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Fade in and pop - for keywords */
@-webkit-keyframes fadeInPop {
  0% {
    -webkit-transform: scale(0.5);
    opacity: 0;
    transform: scale(0.5);
  }
  70% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeInPop {
  0% {
    -webkit-transform: scale(0.5);
    opacity: 0;
    transform: scale(0.5);
  }
  70% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
    transform: scale(1);
  }
}

/* Apply animations to elements on first slide */
.section.--top h1.animate-intro {
  -webkit-animation: fadeInUp var(--intro-duration) ease-out forwards;
  -webkit-animation-delay: var(--delay-base);
  animation: fadeInUp var(--intro-duration) ease-out forwards;
  animation-delay: var(--delay-base);
}

/* Instant appearance for initially visible elements */
.section.--top h1.is-visible {
  -ms-transform: none;
  -webkit-animation: none;
  -webkit-transform: none;
  opacity: 1;
  animation: none;
  transform: none;
}

/* When h1 needs to fade out, ensure it uses transition */
.section.--top h1.fade-target {
  -o-transition: opacity var(--fade-duration) ease;
  -webkit-animation: none;
  -webkit-transition: opacity var(--fade-duration) ease;
  opacity: 1;
  transition: opacity var(--fade-duration) ease;
  animation: none;
}

/* When hiding, fade it out */
.section.--top h1.fade-target:not(.is-visible) {
  opacity: 0;
}

.section.--top h2.animate-intro {
  -webkit-animation: fadeInUp var(--intro-duration) ease-out forwards;
  -webkit-animation-delay: calc(var(--delay-base) + var(--delay-step) * 2);
  animation: fadeInUp var(--intro-duration) ease-out forwards;
  animation-delay: calc(var(--delay-base) + var(--delay-step) * 2);
}

/* Instant appearance for initially visible elements */
.section.--top h2.is-visible {
  -ms-transform: none;
  -webkit-animation: none;
  -webkit-transform: none;
  opacity: 1;
  animation: none;
  transform: none;
}

/* When h2 needs to fade out, ensure it uses transition */
.section.--top h2.fade-target {
  -o-transition: opacity var(--fade-duration) ease;
  -webkit-animation: none;
  -webkit-transition: opacity var(--fade-duration) ease;
  opacity: 1;
  transition: opacity var(--fade-duration) ease;
  animation: none;
}

/* When hiding, fade it out */
.section.--top h2.fade-target:not(.is-visible) {
  opacity: 0;
}

.lottie-container {
  -webkit-animation: fadeInScale 1s ease-out forwards;
  -webkit-animation-delay: 0s;
  opacity: 0;
  animation: fadeInScale 1s ease-out forwards;
  animation-delay: 0s;
}

.keyword.animate-intro {
  -webkit-animation: fadeInPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  opacity: 0;
  animation: fadeInPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Instant appearance for initially visible keywords */
.keyword.is-visible {
  -ms-transform: scale(1);
  -webkit-animation: none;
  -webkit-transform: scale(1);
  opacity: 1;
  animation: none;
  transform: scale(1);
}

/* Each keyword appears one after another - cascade effect */
/* Note: animation-delay only applies on page load, not on fade-out */
.keyword.animate-intro {
  -webkit-animation: fadeInPop var(--keyword-intro-duration) cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  opacity: 0;
  animation: fadeInPop var(--keyword-intro-duration) cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* When keywords have fade-target class, they use transition instead of animation */
.keyword.fade-target {
  -o-transition: opacity var(--fade-duration) ease;
  -webkit-animation: none;
  -webkit-transition: opacity var(--fade-duration) ease;
  opacity: 1;
  transition: opacity var(--fade-duration) ease;
  animation: none;
}

/* When hiding, fade them out */
.keyword.fade-target:not(.is-visible) {
  opacity: 0;
}

#pere {
  -webkit-animation-delay: calc(var(--delay-base) + var(--delay-step) * 4);
  animation-delay: calc(var(--delay-base) + var(--delay-step) * 4);
}

#puhkus {
  -webkit-animation-delay: calc(var(--delay-base) + var(--delay-step) * 5);
  animation-delay: calc(var(--delay-base) + var(--delay-step) * 5);
}

#meeleolu {
  -webkit-animation-delay: calc(var(--delay-base) + var(--delay-step) * 6);
  animation-delay: calc(var(--delay-base) + var(--delay-step) * 6);
}

#rahu {
  -webkit-animation-delay: calc(var(--delay-base) + var(--delay-step) * 7);
  animation-delay: calc(var(--delay-base) + var(--delay-step) * 7);
}

#s6brad {
  -webkit-animation-delay: calc(var(--delay-base) + var(--delay-step) * 8);
  animation-delay: calc(var(--delay-base) + var(--delay-step) * 8);
}

#kingitused {
  -webkit-animation-delay: calc(var(--delay-base) + var(--delay-step) * 9);
  animation-delay: calc(var(--delay-base) + var(--delay-step) * 9);
}

/* When keywords container is fading out, ensure all keywords fade together */
.keywords.fade-target:not(.is-visible) .keyword {
  -o-transition: opacity var(--fade-duration) ease;
  -webkit-transition: opacity var(--fade-duration) ease;
  opacity: 0;
  transition: opacity var(--fade-duration) ease;
}

.fade-target.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.snow {
  inset: 0;
  z-index: 1000;
  position: fixed;
  pointer-events: none;
}

/* ============================================ */
/* MUSIC TOGGLE BUTTON */
/* ============================================ */
.music-toggle {
  -o-transition: all 0.3s ease;
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.3s ease;
  z-index: 2000;
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 8px 12px;
  border: 2px solid var(--color-red-primary);
  border-radius: 25px;
  color: var(--color-red-primary);
  font-size: 14px;
  font-family: var(--font-secondary);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.music-toggle:hover {
  -ms-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  color: white;
  background: var(--color-red-primary);
  transform: scale(1.05);
}

.music-toggle.muted {
  opacity: 0.7;
}

.music-toggle.muted::before {
  content: "🔇 ";
}

.music-toggle:not(.muted)::before {
  content: "🔊 ";
}

/* ============================================ */
/* START SCREEN OVERLAY */
/* ============================================ */
.start-overlay {
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-animation: none;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 3000;
  position: fixed;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  cursor: pointer;
  background: -o-linear-gradient(315deg, var(--color-red-primary), var(--color-red-gradient));
  background: linear-gradient(135deg, var(--color-red-primary), var(--color-red-gradient));
  animation: none; /* Instant appearance */
}

.start-content {
  -ms-transform: translateY(0);
  -webkit-animation: none;
  -webkit-transform: translateY(0);
  opacity: 1;
  color: white;
  text-align: center;
  animation: none; /* Instant appearance */
  transform: translateY(0);
}

.start-content h1 {
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  display: inline-block;
  margin-bottom: 1rem;
  padding: 1rem 2rem;
  border: 2px solid var(--color-red-primary);
  border-radius: 50px;
  color: var(--color-red-primary);
  font-weight: 600;
  font-size: 2rem;
  text-transform: uppercase;
  text-shadow: none;
  letter-spacing: 2px;
  cursor: pointer;
  background: white;
  transition: all 0.3s ease;
}

.start-content h1:hover {
  -ms-transform: scale(1.05);
  -webkit-box-shadow: 0 4px 15px rgba(252, 6, 22, 0.3);
  -webkit-transform: scale(1.05);
  color: white;
  background: var(--color-red-primary);
  box-shadow: 0 4px 15px rgba(252, 6, 22, 0.3);
  transform: scale(1.05);
}

.start-content p {
  opacity: 0.9;
  margin-bottom: 2rem;
  font-size: 1.2rem;
}

.start-hint {
  -webkit-animation: pulse 2s infinite;
  opacity: 0.7;
  font-size: 1rem;
  animation: pulse 2s infinite;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes slideUp {
  from {
    -webkit-transform: translateY(30px);
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    -webkit-transform: translateY(0);
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    -webkit-transform: translateY(30px);
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    -webkit-transform: translateY(0);
    opacity: 1;
    transform: translateY(0);
  }
}

@-webkit-keyframes pulse {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

.start-overlay.hidden {
  display: none;
}

.snowflake {
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: snow-fall, snow-drift;
  -webkit-animation-timing-function: linear;
  position: absolute;
  top: -10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  animation-name: snow-fall, snow-drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@-webkit-keyframes snow-fall {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(100vh);
    transform: translateY(100vh);
  }
}

@keyframes snow-fall {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(100vh);
    transform: translateY(100vh);
  }
}

@-webkit-keyframes snow-drift {
  0% {
    margin-left: 0;
  }
  50% {
    margin-left: 15px;
  }
  100% {
    margin-left: 0;
  }
}

@keyframes snow-drift {
  0% {
    margin-left: 0;
  }
  50% {
    margin-left: 15px;
  }
  100% {
    margin-left: 0;
  }
}