/* ==========================================================================
   CSS CUSTOM PROPERTIES & CONFIGURATION
   ========================================================================== */

body {
  /* Box breathing dimensions */
  --box-size-width: 1;
  --box-side-length: calc(min(50vmin, 250px) * var(--box-size-width));
  --box-border-width: 2px;
  --box-border-color: #eea238;

  /* Animation timing and easing */
  --animation-time: 16s;
  --animation-options: var(--animation-time) infinite
    cubic-bezier(0.2, 0, 0.8, 1);

  /* Visual elements */
  --dot-size: 1.2rem;
  --box-fill-color: #eea238;
  --box-fill-color-transition: #9d6800;

  /* Breathing gradient for visual feedback */
  --breath-gradient: linear-gradient(
    135deg,
    var(--box-fill-color) 0%,
    var(--box-fill-color-transition) 30%,
    var(--bg-color) 75%
  );

  /* Responsive typography */
  font-size: calc(min(18px, 5vmin));
}

/* ==========================================================================
   LAYOUT & CONTAINER STYLES
   ========================================================================== */

/* Main visual container */
#visual {
  position: relative;
}

/* Full viewport container for centering the breathing exercise */
#box-breathing-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Container for the breathing box and its elements */
#box-container {
  position: relative;
}

/* The main breathing box outline */
#box {
  width: var(--box-side-length);
  height: var(--box-side-length);
  border: var(--box-border-width) solid var(--box-border-color);
}

/* ==========================================================================
   BREATH INDICATOR STYLES & ANIMATION
   ========================================================================== */

/* Visual indicator that fills the box during breathing cycle */
#breath-indicator {
  position: absolute;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: -1;

  /* Gradient background with large size for smooth animation */
  background: var(--breath-gradient);
  background-size: 700% 700%;
  border-top: var(--box-border-width) solid var(--box-border-color);

  /* Breathing cycle animation */
  animation: breath-indicator-animation var(--animation-options);
}

/* Breathing cycle animation: 4-4-4-4 pattern (inhale-hold-exhale-hold) */
@keyframes breath-indicator-animation {
  /* Inhale phase (0-25%): Box fills from bottom */
  0% {
    height: 0%;
    background-position: 100% 50%;
  }
  25% {
    height: 0%;
    background-position: 100% 50%;
  }

  /* Hold phase (25-50%): Box fills completely */
  50% {
    height: 100%;
    background-position: 0% 0%;
  }

  /* Exhale phase (50-75%): Box remains full */
  75% {
    height: 100%;
    background-position: 0% 0%;
  }

  /* Hold phase (75-100%): Box empties */
  100% {
    height: 0%;
    background-position: 100% 50%;
  }
}

/* ==========================================================================
   DOT STYLES & ANIMATION
   ========================================================================== */

/* Animated dot that moves around the box perimeter during breathing */
#dot {
  position: absolute;
  width: var(--dot-size);
  height: var(--dot-size);
  transform: translate(-50%, -50%);

  /* Visual styling */
  border: var(--box-border-width) solid var(--box-border-color);
  border-radius: 400rem; /* Creates perfect circle */
  background: #131313;

  /* Typography for dot content */
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: monospace;
  font-weight: 800;
  font-size: 0.7em;
  color: #ffff;

  /* Initial position (bottom-right corner) */
  left: calc(0% + var(--box-border-width) / 2);
  top: calc(100% - var(--box-border-width) / 2);

  /* Breathing cycle animation */
  animation: dot-animation var(--animation-options);
}

/* Dot animation: moves clockwise around the box perimeter */
@keyframes dot-animation {
  /* Start: bottom-right corner */
  0% {
    left: calc(100% - var(--box-border-width) / 2);
    top: calc(100% - var(--box-border-width) / 2);
    background-position: 100% 50%;
  }

  /* Move to: bottom-left corner */
  25% {
    left: calc(0% + var(--box-border-width) / 2);
    top: calc(100% - var(--box-border-width) / 2);
    background-position: 100% 50%;
  }

  /* Move to: top-left corner */
  50% {
    left: calc(0% + var(--box-border-width) / 2);
    top: calc(0% + var(--box-border-width) / 2);
    background-position: 0% 0%;
  }

  /* Move to: top-right corner */
  75% {
    left: calc(100% - var(--box-border-width) / 2);
    top: calc(0% + var(--box-border-width) / 2);
    background-position: 0% 0%;
  }

  /* Return to: bottom-right corner */
  100% {
    left: calc(100% - var(--box-border-width) / 2);
    top: calc(100% - var(--box-border-width) / 2);
    background-position: 100% 50%;
  }
}

/* ==========================================================================
   VIDEO CONTAINER STYLES
   ========================================================================== */

/* Responsive video container with 16:9 aspect ratio */
#video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
}