/* ============================================
   Roastream Landing Page - Premium Edition
   MKR Corporation - Coming Soon
   ============================================ */

/* CSS Variables */
:root {
   /* Premium Color Palette */
   --color-gold: #c4a35a;
   --color-gold-light: #ddc175;
   --color-gold-dark: #9a7d3a;
   --color-bronze: #b08d57;
   --color-tan: #c9b896;
   --color-cream: #f0e6d3;
   --color-white: #ffffff;
   --color-brown-dark: #1a1008;
   --color-brown-medium: #3d2a1a;
   --color-brown-light: #5a4030;

   /* Fonts */
   --font-display: "Bebas Neue", "Oswald", "Arial Black", sans-serif;
   --font-subtitle: "Oswald", "Bebas Neue", sans-serif;
   --font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;

   /* Effects */
   --transition-smooth: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   --transition-bounce: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.4);
   --shadow-glow: 0 0 40px rgba(196, 163, 90, 0.4);
   --shadow-gold: 0 0 60px rgba(196, 163, 90, 0.3);
}

/* Reset & Base */
*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   font-size: 16px;
   scroll-behavior: smooth;
}

body {
   font-family: var(--font-body);
   background-color: var(--color-brown-dark);
   color: var(--color-cream);
   min-height: 100vh;
   overflow-x: hidden;
   line-height: 1.6;
   cursor: default;
}

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

/* ============================================
   Cursor Glow Effect
   ============================================ */

.cursor-glow {
   position: fixed;
   width: 300px;
   height: 300px;
   background: radial-gradient(circle, rgba(196, 163, 90, 0.08) 0%, transparent 70%);
   border-radius: 50%;
   pointer-events: none;
   transform: translate(-50%, -50%);
   z-index: 9998;
   opacity: 0;
   transition: opacity 0.3s ease;
}

.cursor-glow.active {
   opacity: 1;
}

/* ============================================
   Landing Container
   ============================================ */

.landing-container {
   position: relative;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   overflow: hidden;
}

/* Background Image */
.bg-image {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 0;
}

.bg-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   animation: slowZoom 30s ease-in-out infinite alternate;
}

@keyframes slowZoom {
   0% {
      transform: scale(1);
   }
   100% {
      transform: scale(1.05);
   }
}

/* Gradient Overlay */
.bg-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(180deg, rgba(15, 8, 4, 0.93) 0%, rgba(15, 8, 4, 0.75) 15%, rgba(15, 8, 4, 0.4) 40%, rgba(15, 8, 4, 0.3) 55%, rgba(15, 8, 4, 0.55) 75%, rgba(15, 8, 4, 0.93) 100%), radial-gradient(ellipse at 30% 20%, rgba(196, 163, 90, 0.05) 0%, transparent 50%);
   z-index: 1;
}

/* ============================================
   Animated Particles
   ============================================ */

.particles {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 2;
   pointer-events: none;
   overflow: hidden;
}

.particle {
   position: absolute;
   width: 4px;
   height: 4px;
   background: var(--color-gold);
   border-radius: 50%;
   opacity: 0;
   animation: particleFloat 15s infinite;
}

.particle:nth-child(1) {
   left: 10%;
   animation-delay: 0s;
}
.particle:nth-child(2) {
   left: 20%;
   animation-delay: 2s;
}
.particle:nth-child(3) {
   left: 35%;
   animation-delay: 4s;
}
.particle:nth-child(4) {
   left: 50%;
   animation-delay: 6s;
}
.particle:nth-child(5) {
   left: 65%;
   animation-delay: 8s;
}
.particle:nth-child(6) {
   left: 75%;
   animation-delay: 10s;
}
.particle:nth-child(7) {
   left: 85%;
   animation-delay: 12s;
}
.particle:nth-child(8) {
   left: 95%;
   animation-delay: 14s;
}

@keyframes particleFloat {
   0% {
      bottom: -10px;
      opacity: 0;
      transform: translateX(0) scale(0);
   }
   10% {
      opacity: 0.6;
      transform: scale(1);
   }
   90% {
      opacity: 0.3;
   }
   100% {
      bottom: 100%;
      opacity: 0;
      transform: translateX(30px) scale(0.5);
   }
}

/* ============================================
   Light Beams
   ============================================ */

.light-beams {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 2;
   pointer-events: none;
   overflow: hidden;
}

.beam {
   position: absolute;
   width: 2px;
   height: 100%;
   background: linear-gradient(180deg, transparent 0%, rgba(196, 163, 90, 0.1) 30%, rgba(196, 163, 90, 0.03) 70%, transparent 100%);
   animation: beamMove 20s ease-in-out infinite;
}

.beam-1 {
   left: 20%;
   animation-delay: 0s;
}

.beam-2 {
   left: 75%;
   animation-delay: -10s;
}

@keyframes beamMove {
   0%,
   100% {
      transform: translateX(-50px) skewX(-5deg);
      opacity: 0;
   }
   50% {
      transform: translateX(50px) skewX(5deg);
      opacity: 1;
   }
}

/* ============================================
   Content Wrapper
   ============================================ */

.content-wrapper {
   position: relative;
   z-index: 3;
   width: 100%;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 50px 30px 30px;
}

/* ============================================
   Decorative Lines
   ============================================ */

.deco-line {
   display: flex;
   align-items: center;
   gap: 15px;
   margin: 20px 0;
   opacity: 0;
   animation: fadeIn 1s ease forwards;
}

.deco-line-top {
   animation-delay: 0.5s;
}

.deco-line-bottom {
   animation-delay: 1s;
   margin-top: auto;
   margin-bottom: 20px;
}

.deco-line .line {
   width: 60px;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.deco-line .diamond {
   color: var(--color-gold);
   font-size: 0.6rem;
   animation: diamondPulse 3s ease-in-out infinite;
}

@keyframes diamondPulse {
   0%,
   100% {
      transform: scale(1);
      opacity: 0.6;
   }
   50% {
      transform: scale(1.2);
      opacity: 1;
   }
}

/* ============================================
   Header Section
   ============================================ */

.header-section {
   text-align: center;
   padding: 30px 40px;
   background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4) 0%, transparent 70%);
   border-radius: 20px;
}

/* Main Title */
.main-title {
   margin-bottom: 20px;
}

.title-line {
   display: block;
   font-family: var(--font-display);
   font-size: clamp(4rem, 14vw, 9rem);
   font-weight: 400;
   font-style: normal;
   color: var(--color-gold);
   letter-spacing: 0.12em;
   line-height: 0.9;
   text-transform: uppercase;
   text-shadow: 0 0 10px rgba(0, 0, 0, 0.9), 4px 4px 8px rgba(0, 0, 0, 0.8), 0 0 60px rgba(196, 163, 90, 0.25);
   opacity: 0;
   animation: titleReveal 1.2s ease forwards;
}

.title-line:nth-child(1) {
   animation-delay: 0.5s;
}

.title-line:nth-child(2) {
   animation-delay: 0.7s;
}

@keyframes titleReveal {
   0% {
      opacity: 0;
      transform: translateY(30px);
      filter: blur(10px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
   }
}

/* Sub Title */
.sub-title {
   font-family: var(--font-subtitle);
   font-size: clamp(1.4rem, 4vw, 2.4rem);
   font-weight: 500;
   color: var(--color-tan);
   letter-spacing: 0.15em;
   text-transform: uppercase;
   margin-bottom: 20px;
   text-shadow: 0 0 10px rgba(0, 0, 0, 0.9), 2px 2px 6px rgba(0, 0, 0, 0.8);
   opacity: 0;
   animation: fadeInUp 1s ease forwards 0.9s;
}

/* Description */
.description {
   font-family: var(--font-body);
   font-size: clamp(0.9rem, 1.8vw, 1.05rem);
   font-weight: 300;
   color: var(--color-cream);
   line-height: 1.9;
   text-shadow: 0 0 8px rgba(0, 0, 0, 0.9), 2px 2px 4px rgba(0, 0, 0, 0.8);
   opacity: 0;
   animation: fadeInUp 1s ease forwards 1.1s;
}

.description strong {
   font-weight: 500;
   color: var(--color-white);
}

/* ============================================
   CTA Buttons - Premium Style
   ============================================ */

.cta-buttons {
   display: flex;
   gap: 30px;
   margin: 30px 0;
   flex-wrap: wrap;
   justify-content: center;
   opacity: 0;
   animation: fadeInUp 1s ease forwards 1.3s;
}

.btn {
   font-family: var(--font-body);
   font-size: 0.9rem;
   font-weight: 500;
   padding: 0;
   border: none;
   cursor: pointer;
   background: transparent;
   position: relative;
   overflow: hidden;
}

.btn-outline {
   border: 1.5px solid rgba(255, 255, 255, 0.6);
   color: var(--color-white);
   background: rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(10px);
   transition: var(--transition-smooth);
}

.btn-content {
   display: block;
   padding: 14px 32px;
   position: relative;
   overflow: hidden;
}

.btn-text {
   position: relative;
   z-index: 2;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
   letter-spacing: 0.05em;
}

.btn-shine {
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
   transition: left 0.5s ease;
}

.btn-outline:hover {
   border-color: var(--color-gold);
   background: rgba(196, 163, 90, 0.15);
   box-shadow: 0 0 30px rgba(196, 163, 90, 0.2), inset 0 0 20px rgba(196, 163, 90, 0.05);
   transform: translateY(-3px);
}

.btn-outline:hover .btn-shine {
   left: 100%;
}

.btn-outline:hover .btn-text {
   color: var(--color-gold-light);
}

.btn-outline:active {
   transform: translateY(-1px);
}

/* ============================================
   Footer Section
   ============================================ */

.footer-section {
   width: 100%;
   padding: 20px 0;
   margin-top: auto;
   opacity: 0;
   animation: fadeInUp 1s ease forwards 1.5s;
}

.footer-content {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   width: 100%;
   max-width: 1200px;
   margin: 0 auto 15px;
}

.mkr-logo {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px 24px;
   background: rgba(0, 0, 0, 0.4);
   border: 1px solid rgba(196, 163, 90, 0.2);
   border-radius: 12px;
   backdrop-filter: blur(10px);
   transition: var(--transition-smooth);
}

.mkr-logo:hover {
   border-color: rgba(196, 163, 90, 0.4);
   box-shadow: 0 0 30px rgba(196, 163, 90, 0.1);
}

.mkr-icon {
   width: 40px;
   height: 52px;
   color: var(--color-gold);
   filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
   transition: var(--transition-smooth);
}

.mkr-logo:hover .mkr-icon {
   filter: drop-shadow(0 0 10px rgba(196, 163, 90, 0.4));
}

.logo-text {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   line-height: 1.15;
}

.mkr-text {
   font-family: var(--font-body);
   font-size: 1.5rem;
   font-weight: 600;
   color: var(--color-cream);
   letter-spacing: 0.15em;
   text-shadow: 0 0 8px rgba(0, 0, 0, 0.9), 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.corp-text {
   font-family: var(--font-body);
   font-size: 0.55rem;
   font-weight: 500;
   color: var(--color-gold);
   letter-spacing: 0.22em;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.footer-star {
   font-size: 1.6rem;
   color: var(--color-gold);
   position: absolute;
   right: 30px;
   animation: starTwinkle 3s ease-in-out infinite;
}

@keyframes starTwinkle {
   0%,
   100% {
      opacity: 0.6;
      transform: scale(1) rotate(0deg);
      text-shadow: 0 0 10px rgba(196, 163, 90, 0.3);
   }
   50% {
      opacity: 1;
      transform: scale(1.1) rotate(15deg);
      text-shadow: 0 0 20px rgba(196, 163, 90, 0.6);
   }
}

.copyright {
   text-align: center;
   font-size: 0.7rem;
   color: var(--color-tan);
   opacity: 0.5;
   letter-spacing: 0.1em;
}

/* ============================================
   Scroll Indicator
   ============================================ */

.scroll-indicator {
   position: absolute;
   bottom: 30px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   opacity: 0;
   animation: fadeIn 1s ease forwards 2s;
   cursor: pointer;
   z-index: 10;
}

.scroll-indicator.hidden {
   opacity: 0 !important;
   pointer-events: none;
   transition: opacity 0.5s ease;
}

.scroll-text {
   font-family: var(--font-body);
   font-size: 0.75rem;
   font-weight: 500;
   color: var(--color-gold);
   letter-spacing: 0.15em;
   text-transform: uppercase;
}

.scroll-arrow {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
}

.scroll-arrow span {
   display: block;
   width: 12px;
   height: 12px;
   border-right: 2px solid var(--color-gold);
   border-bottom: 2px solid var(--color-gold);
   transform: rotate(45deg);
   animation: scrollArrowBounce 1.5s infinite;
}

.scroll-arrow span:nth-child(2) {
   animation-delay: 0.2s;
   opacity: 0.5;
}

@keyframes scrollArrowBounce {
   0%,
   100% {
      transform: rotate(45deg) translateY(0);
      opacity: 0.3;
   }
   50% {
      transform: rotate(45deg) translateY(5px);
      opacity: 1;
   }
}

/* ============================================
   Modal Styles - Premium
   ============================================ */

.modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.92);
   backdrop-filter: blur(15px);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1000;
   opacity: 0;
   visibility: hidden;
   transition: var(--transition-smooth);
   padding: 20px;
}

.modal-overlay.active {
   opacity: 1;
   visibility: visible;
}

.modal-content {
   background: linear-gradient(145deg, #3d2a1a 0%, #251810 100%);
   border: 1px solid rgba(196, 163, 90, 0.25);
   border-radius: 20px;
   padding: 45px;
   max-width: 440px;
   width: 100%;
   position: relative;
   transform: translateY(30px) scale(0.95);
   transition: var(--transition-smooth);
   box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.modal-overlay.active .modal-content {
   transform: translateY(0) scale(1);
}

.modal-large {
   max-width: 500px;
}

.modal-close {
   position: absolute;
   top: 18px;
   right: 22px;
   background: none;
   border: none;
   color: var(--color-cream);
   font-size: 1.8rem;
   cursor: pointer;
   opacity: 0.5;
   transition: var(--transition-smooth);
   line-height: 1;
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
}

.modal-close:hover {
   opacity: 1;
   color: var(--color-gold);
   background: rgba(196, 163, 90, 0.1);
}

.modal-icon {
   text-align: center;
   font-size: 2.5rem;
   margin-bottom: 15px;
}

.modal-header {
   text-align: center;
   margin-bottom: 30px;
}

.modal-header h3 {
   font-family: var(--font-display);
   font-size: 1.9rem;
   color: var(--color-gold);
   margin-bottom: 10px;
   letter-spacing: 0.05em;
}

.modal-header p {
   font-size: 0.9rem;
   color: var(--color-cream);
   opacity: 0.75;
   line-height: 1.6;
}

/* Form Styles */
.modal-form {
   display: flex;
   flex-direction: column;
   gap: 22px;
}

.form-group {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.form-group label {
   font-size: 0.8rem;
   font-weight: 500;
   color: var(--color-gold);
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.form-group input {
   padding: 15px 18px;
   border: 1px solid rgba(196, 163, 90, 0.25);
   border-radius: 10px;
   background: rgba(0, 0, 0, 0.35);
   color: var(--color-cream);
   font-family: var(--font-body);
   font-size: 1rem;
   transition: var(--transition-smooth);
}

.form-group input::placeholder {
   color: rgba(232, 220, 200, 0.35);
}

.form-group input:focus {
   outline: none;
   border-color: var(--color-gold);
   background: rgba(0, 0, 0, 0.45);
   box-shadow: 0 0 0 3px rgba(196, 163, 90, 0.1), inset 0 0 20px rgba(196, 163, 90, 0.03);
}

.btn-submit {
   background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-bronze) 100%);
   color: var(--color-brown-dark);
   border: none;
   padding: 16px 32px;
   font-weight: 600;
   letter-spacing: 0.1em;
   margin-top: 10px;
   border-radius: 10px;
   position: relative;
   overflow: hidden;
   transition: var(--transition-smooth);
}

.btn-submit::before {
   content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
   transition: left 0.5s ease;
}

.btn-submit:hover {
   transform: translateY(-2px);
   box-shadow: var(--shadow-gold);
}

.btn-submit:hover::before {
   left: 100%;
}

.btn-submit:active {
   transform: translateY(0);
}

.btn-submit:disabled {
   opacity: 0.6;
   cursor: not-allowed;
   transform: none;
}

/* Form Message */
.form-message {
   text-align: center;
   padding: 14px;
   border-radius: 10px;
   font-size: 0.9rem;
   margin-top: 10px;
   display: none;
}

.form-message.success {
   display: block;
   background: rgba(76, 175, 80, 0.15);
   border: 1px solid rgba(76, 175, 80, 0.3);
   color: #a5d6a7;
}

.form-message.error {
   display: block;
   background: rgba(244, 67, 54, 0.15);
   border: 1px solid rgba(244, 67, 54, 0.3);
   color: #ef9a9a;
}

/* ============================================
   Animations
   ============================================ */

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

@keyframes fadeInDown {
   from {
      opacity: 0;
      transform: translateY(-20px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(20px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 992px) {
   .content-wrapper {
      padding: 45px 25px 25px;
   }

   .footer-star {
      right: 20px;
   }
}

@media (max-width: 768px) {
   .cursor-glow {
      display: none;
   }

   .content-wrapper {
      padding: 40px 20px 20px;
   }

   .header-section {
      padding: 25px 25px;
   }

   .pre-title {
      font-size: 0.75rem;
   }

   .cta-buttons {
      flex-direction: column;
      gap: 15px;
      width: 100%;
      max-width: 280px;
   }

   .btn {
      width: 100%;
   }

   .btn-content {
      padding: 15px 28px;
   }

   .footer-content {
      gap: 25px;
   }

   .footer-star {
      position: static;
   }

   .modal-content {
      padding: 35px 28px;
   }

   .modal-header h3 {
      font-size: 1.6rem;
   }

   .particles {
      display: none;
   }

   .light-beams {
      display: none;
   }
}

@media (max-width: 480px) {
   .content-wrapper {
      padding: 35px 15px 15px;
   }

   .header-section {
      padding: 20px 15px;
   }

   .title-line {
      font-size: 3.2rem;
      letter-spacing: 0.08em;
   }

   .sub-title {
      font-size: 1.15rem;
      letter-spacing: 0.1em;
   }

   .description {
      font-size: 0.85rem;
   }

   .description br {
      display: none;
   }

   .deco-line .line {
      width: 40px;
   }

   .mkr-logo {
      gap: 10px;
      padding: 12px 18px;
   }

   .mkr-icon {
      width: 32px;
      height: 42px;
   }

   .mkr-text {
      font-size: 1.2rem;
   }

   .corp-text {
      font-size: 0.48rem;
   }

   .footer-star {
      font-size: 1.3rem;
   }

   .copyright {
      font-size: 0.6rem;
   }
}

/* ============================================
   Utility Classes
   ============================================ */

.hidden {
   display: none !important;
}

.loading {
   position: relative;
   pointer-events: none;
}

.loading::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   width: 20px;
   height: 20px;
   margin: -10px 0 0 -10px;
   border: 2px solid transparent;
   border-top-color: currentColor;
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
}

@keyframes spin {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}

/* ============================================
   Video Section - Scroll Play
   ============================================ */

.video-section {
   position: relative;
   width: 100%;
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--color-brown-dark);
   overflow: hidden;
}

.video-container {
   position: relative;
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 60px 30px;
}

.video-container video {
   width: 100%;
   height: auto;
   display: block;
   border-radius: 16px;
   box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 100px rgba(196, 163, 90, 0.1);
   opacity: 0;
   transform: translateY(50px) scale(0.95);
   transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-container video.video-visible {
   opacity: 1;
   transform: translateY(0) scale(1);
}

.video-overlay {
   position: absolute;
   top: 60px;
   left: 30px;
   right: 30px;
   bottom: 60px;
   border-radius: 16px;
   pointer-events: none;
   border: 1px solid rgba(196, 163, 90, 0.15);
   opacity: 0;
   transition: opacity 0.8s ease;
}

.video-wrapper {
   position: relative;
   border-radius: 16px;
   overflow: hidden;
}

.video-container video {
   display: block;
}

.video-container video.video-visible + .video-controls {
   opacity: 1;
}

/* Video Controls */
.video-controls {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 15px 20px;
   background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
   opacity: 0;
   transition: opacity 0.3s ease;
}

.video-wrapper:hover .video-controls,
.video-controls.show {
   opacity: 1;
}

.control-btn {
   background: none;
   border: none;
   color: var(--color-cream);
   cursor: pointer;
   padding: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
   border-radius: 50%;
}

.control-btn:hover {
   color: var(--color-gold);
   background: rgba(196, 163, 90, 0.2);
}

.control-btn svg {
   width: 24px;
   height: 24px;
}

.play-pause-btn .icon-pause,
.video-wrapper.paused .play-pause-btn .icon-play {
   display: block;
}

.play-pause-btn .icon-play,
.video-wrapper.paused .play-pause-btn .icon-pause {
   display: none;
}

.video-wrapper.paused .play-pause-btn .icon-play {
   display: block;
}

.video-wrapper.paused .play-pause-btn .icon-pause {
   display: none;
}

/* Progress Bar */
.progress-container {
   flex: 1;
   height: 6px;
   background: rgba(255, 255, 255, 0.2);
   border-radius: 3px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
}

.progress-container:hover {
   height: 8px;
}

.progress-bar {
   height: 100%;
   background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
   border-radius: 3px;
   width: 0%;
   transition: width 0.1s linear;
}

/* Time Display */
.time-display {
   font-family: var(--font-body);
   font-size: 0.75rem;
   color: var(--color-cream);
   min-width: 90px;
   text-align: center;
}

/* Mute Button */
.mute-btn .icon-unmuted,
.video-wrapper.muted .mute-btn .icon-muted {
   display: block;
}

.mute-btn .icon-muted,
.video-wrapper.muted .mute-btn .icon-unmuted {
   display: none;
}

.video-wrapper.muted .mute-btn .icon-muted {
   display: block;
}

.video-wrapper.muted .mute-btn .icon-unmuted {
   display: none;
}

/* Unmute Hint */
.unmute-hint {
   display: none;
   position: absolute;
   bottom: 100%;
   right: 0;
   background: var(--color-gold);
   color: var(--color-brown-dark);
   font-size: 0.7rem;
   font-weight: 600;
   padding: 6px 10px;
   border-radius: 6px;
   white-space: nowrap;
   margin-bottom: 8px;
   animation: pulseHint 1.5s ease-in-out infinite;
}

.unmute-hint::after {
   content: "";
   position: absolute;
   top: 100%;
   right: 12px;
   border: 6px solid transparent;
   border-top-color: var(--color-gold);
}

.video-wrapper.muted .unmute-hint {
   display: block;
}

@keyframes pulseHint {
   0%,
   100% {
      transform: scale(1);
      opacity: 1;
   }
   50% {
      transform: scale(1.05);
      opacity: 0.8;
   }
}

.mute-btn {
   position: relative;
}

/* Video Overlay repositioned */
.video-overlay {
   pointer-events: none;
}

/* Video Loading Indicator */
.video-loader {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
   z-index: 5;
   transition: opacity 0.5s ease;
}

.video-loader.hidden {
   opacity: 0;
   pointer-events: none;
}

.loader-spinner {
   width: 50px;
   height: 50px;
   border: 3px solid rgba(196, 163, 90, 0.2);
   border-top-color: var(--color-gold);
   border-radius: 50%;
   animation: loaderSpin 1s linear infinite;
}

@keyframes loaderSpin {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}

.loader-text {
   font-family: var(--font-body);
   font-size: 0.85rem;
   font-weight: 500;
   color: var(--color-gold);
   letter-spacing: 0.1em;
   text-transform: uppercase;
}

/* Video Section Responsive */
@media (max-width: 768px) {
   .video-container {
      padding: 40px 20px;
   }

   .video-wrapper {
      border-radius: 12px;
   }

   .video-container video {
      border-radius: 12px;
   }

   .video-controls {
      padding: 10px 15px;
      gap: 8px;
   }

   .control-btn svg {
      width: 20px;
      height: 20px;
   }

   .time-display {
      font-size: 0.65rem;
      min-width: 70px;
   }

   .video-overlay {
      top: 40px;
      left: 20px;
      right: 20px;
      bottom: 40px;
      border-radius: 12px;
   }
}

@media (max-width: 480px) {
   .video-section {
      min-height: auto;
      padding: 40px 0;
   }

   .video-container {
      padding: 20px 15px;
   }

   .video-wrapper {
      border-radius: 8px;
   }

   .video-container video {
      border-radius: 8px;
   }

   .video-controls {
      padding: 8px 10px;
      gap: 6px;
   }

   .control-btn {
      padding: 6px;
   }

   .control-btn svg {
      width: 18px;
      height: 18px;
   }

   .time-display {
      font-size: 0.6rem;
      min-width: 60px;
   }

   .fullscreen-btn {
      display: none;
   }

   .video-overlay {
      top: 20px;
      left: 15px;
      right: 15px;
      bottom: 20px;
      border-radius: 8px;
   }
}