pages/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary: #10b981;
  --primary-hover: #059669;
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --dark-700: #1f2937;
  --dark-800: #111827;
  --dark-900: #0f172a;
  --dark-1000: #020617;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  @apply stroke-white fill-white bg-dark-1000;
}

.action {
  @apply outline-none;
  @apply hover:bg-dark-700 hover:drop-shadow-lg;
  @apply active:bg-dark-600;
  @apply transition-all duration-200 ease-in-out;
}

.action > * {
  @apply outline-none;
}

.action:hover > * {
  @apply bg-dark-700;
}

.action:active > * {
  @apply bg-dark-600;
}

.hide-below-sm {
  @apply hidden sm:inline-block;
}

/* Modern button styles */
button, .btn {
  @apply transition-all duration-200 ease-in-out;
  @apply font-medium;
}

button:focus-visible, .btn:focus-visible {
  @apply ring-2 ring-primary-500 ring-offset-2 ring-offset-dark-1000;
}

/* Modern input styles */
input, textarea {
  @apply transition-all duration-200 ease-in-out;
}

input:focus, textarea:focus {
  @apply ring-2 ring-primary-500 ring-opacity-50;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Fullscreen video player styles for mobile */
.video-fullscreen {
  height: 100dvh !important;
  max-height: 100dvh !important;
  width: 100vw !important;
}

/* Support for older browsers that don't support dvh */
@supports not (height: 100dvh) {
  .video-fullscreen {
    height: 100vh !important;
    max-height: 100vh !important;
  }
}

/* Safe area handling for iOS notches */
.video-fullscreen {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Non-fullscreen video styles */
.video-normal {
  height: calc((9 / 16) * 100vw);
  max-height: calc(100dvh - 210px);
}

@supports not (height: 100dvh) {
  .video-normal {
    max-height: calc(100vh - 210px);
  }
}

/* Controls overlay improvements for fullscreen */
.controls-fullscreen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Landscape orientation on mobile - make video fill screen better
   max-height: 500px targets mobile devices in landscape (typical mobile heights are 320-480px) */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .video-normal {
    height: 100dvh !important;
    max-height: 100dvh !important;
    width: 100vw !important;
  }

  @supports not (height: 100dvh) {
    .video-normal {
      height: 100vh !important;
      max-height: 100vh !important;
    }
  }
}

/* Landscape orientation fullscreen - ensure video container fills screen */
@media screen and (orientation: landscape) {
  .video-fullscreen {
    height: 100dvh !important;
    max-height: 100dvh !important;
    width: 100vw !important;
    object-fit: contain;
  }
  
  .video-fullscreen video,
  .video-fullscreen iframe {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
  }
}

/* New animations for front page */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-slow {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.01);
  }
}

@keyframes bounce-subtle {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(2px);
  }
}

.animate-fade-in {
  animation: fade-in 150ms ease-out forwards;
}

.animate-fade-up {
  animation: fade-up 150ms ease-out both;
}

.animate-pulse-slow {
  animation: pulse-slow 8s ease-in-out infinite;
}

.animate-bounce-subtle {
  animation: bounce-subtle 2.5s ease-in-out infinite;
}