/* ==========================================================================
   Vionera: Project Horizon — Concept Viewport Experience
   ========================================================================== */

:root {
  --color-bg: #000210;
  --color-text-white: #ffffff;
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset & Viewport Constraints */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--color-bg);
  color: var(--color-text-white);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* App Viewport Container */
.viewport-frame {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
}

/* Ambient Canvas Layer (for subtle cosmic dust & twinkles) */
.ambient-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.75;
}

/* Background Scene Layer (bg.svg) */
.bg-wrapper {
  position: absolute;
  /* Slightly oversized to accommodate seamless parallax without edge bleeding */
  top: -4%;
  left: -4%;
  width: 108%;
  height: 108%;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform 0.25s ease-out;
}

.bg-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Subtle glowing accent overlay */
.bg-glow-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 80% 30%,
    rgba(100, 160, 255, 0.08) 0%,
    transparent 60%
  );
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Foreground Stage Layer */
.content-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

/* 
 * Desktop & Standard Proportions
 * Reference Canvas: 7680 x 4320 (16:9)
 * Title 'Vionera Project Horizon': x=412.5 (5.37%), y=1798.5 (41.63%), w=3484 (45.36%)
 * Tagline: x=2128.93 (27.72% / centered), y=4053 (bottom: 4.44%), w=3423 (44.57%)
 */
.brand-hero {
  position: absolute;
  top: 41.63%;
  left: 5.37%;
  width: 45.36%;
  max-width: 960px;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform 0.15s ease-out;
  animation: heroEntrance 1.2s var(--ease-cinematic) forwards;
  opacity: 1;
}

.brand-svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 35px rgba(255, 255, 255, 0.15));
}

.tagline-footer {
  position: absolute;
  bottom: 4.44%;
  left: 50%;
  transform: translateX(-50%);
  width: 44.57%;
  max-width: 820px;
  display: flex;
  justify-content: center;
  align-items: center;
  will-change: transform;
  transition: transform 0.18s ease-out;
  animation: taglineEntrance 1.2s var(--ease-cinematic) forwards;
  opacity: 1;
}

.slogan-svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
}

/* Entrance Animations */
@keyframes heroEntrance {
  0% {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes taglineEntrance {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 14px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
}

/* 
 * Ultrawide Screens (21:9, 32:9)
 * Maintain proportional scale anchored to 16:9 ratio box
 */
@media (min-aspect-ratio: 19/10) {
  .brand-hero {
    left: calc((100vw - (100vh * (16 / 9))) / 2 + (100vh * (16 / 9) * 0.0537));
    width: calc(100vh * (16 / 9) * 0.4536);
    max-width: none;
  }
  .tagline-footer {
    width: calc(100vh * (16 / 9) * 0.4457);
    max-width: none;
  }
}

/* 
 * Medium Screens & Laptops (e.g. 1024px to 1440px)
 */
@media (max-width: 1280px) and (min-aspect-ratio: 1/1) {
  .brand-hero {
    width: 47%;
    top: 41%;
    left: 5.5%;
  }
  .tagline-footer {
    width: 48%;
    bottom: 4.5%;
  }
}

/* 
 * Tablets (Landscape & Portrait)
 */
@media (max-width: 1024px) {
  .brand-hero {
    width: min(58%, 520px);
    top: 38%;
    left: 6%;
  }
  .tagline-footer {
    width: min(65%, 520px);
    bottom: 5%;
  }
}

/* 
 * Mobile & Tall Portrait Displays (< 768px or aspect-ratio < 1/1)
 * Adapt gracefully: title and tagline scaled safely with comfortable margins
 */
@media (max-width: 768px), (max-aspect-ratio: 1/1) {
  .bg-media {
    object-position: 70% center;
  }

  .brand-hero {
    top: 34%;
    left: 5vw;
    width: 82vw;
    max-width: 380px;
  }

  .tagline-footer {
    width: 84vw;
    max-width: 380px;
    bottom: 5vh;
  }
}

/* Very Small Mobile Screens (< 380px) */
@media (max-width: 380px) {
  .brand-hero {
    top: 32%;
    left: 4vw;
    width: 84vw;
  }

  .tagline-footer {
    width: 86vw;
    bottom: 4vh;
  }
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .bg-wrapper, .brand-hero, .tagline-footer {
    transform: none !important;
  }
}