/* =============================================================================
 * SWAYAM 2.0 - Animated HTML Splash Screen
 * =============================================================================
 *
 * Premium animated splash with Jio ribbon SVG and JioType font.
 * No progress bars. No fake percentages. Just confidence.
 *
 * Design System Tokens (CSS Variable Mapping):
 * 
 * SPLASH:
 * - Primary gradient: #000093 → #3535f3
 * - Text: #ffffff
 *
 * LIGHT MODE:
 * - --color-primary-50: #3535f3 (Jio Purple)
 * - --color-primary-grey-100: #141414 (Text)
 * - --color-primary-background: #fff
 * - --color-primary-grey-20: #f5f5f5 (Surface)
 *
 * DARK MODE:
 * - --color-primary-50: #4848f9
 * - --color-primary-grey-100: #fff
 * - --color-primary-background: #141414
 * - --color-primary-grey-20: #2b2b2b
 *
 * ============================================================================= */

/* =============================================================================
 * JIO TYPE FONTS (CDN)
 * ============================================================================= */

@font-face {
  font-family: 'JioType';
  src: url('https://myjiostatic.cdn.jio.com/jiostaticresources/v05/ds20Fonts/JioType/JioType-Light.woff2') format('woff2'),
       url('https://myjiostatic.cdn.jio.com/jiostaticresources/v05/ds20Fonts/JioType/JioType-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JioType';
  src: url('https://myjiostatic.cdn.jio.com/jiostaticresources/v05/ds20Fonts/JioType/JioType-Medium.woff2') format('woff2'),
       url('https://myjiostatic.cdn.jio.com/jiostaticresources/v05/ds20Fonts/JioType/JioType-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JioType';
  src: url('https://myjiostatic.cdn.jio.com/jiostaticresources/v05/ds20Fonts/JioType/JioType-Bold.woff2') format('woff2'),
       url('https://myjiostatic.cdn.jio.com/jiostaticresources/v05/ds20Fonts/JioType/JioType-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JioType';
  src: url('https://myjiostatic.cdn.jio.com/jiostaticresources/v05/ds20Fonts/JioType/JioType-Black.woff2') format('woff2'),
       url('https://myjiostatic.cdn.jio.com/jiostaticresources/v05/ds20Fonts/JioType/JioType-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* =============================================================================
 * CSS VARIABLES (Jio Design System)
 * ============================================================================= */

:root {
  /* Light Mode (Default) */
  --color-primary-20: #e8e8fc;
  --color-primary-30: #9999ff;
  --color-primary-40: #6464ff;
  --color-primary-50: #3535f3;
  --color-primary-60: #000093;
  --color-primary-70: #00004c;
  --color-primary-80: #010029;
  --color-primary-inverse: #fff;
  --color-primary-background: #fff;
  --color-primary-grey-100: #141414;
  --color-primary-grey-80: rgba(0, 0, 0, 0.65);
  --color-primary-grey-60: #b5b5b5;
  --color-primary-grey-40: #e0e0e0;
  --color-primary-grey-20: #f5f5f5;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark Mode */
    --color-primary-20: #16164b;
    --color-primary-30: #24247d;
    --color-primary-40: #3232ae;
    --color-primary-50: #4848f9;
    --color-primary-60: #7f7ffb;
    --color-primary-70: #adadfc;
    --color-primary-80: #dadafe;
    --color-primary-inverse: #fff;
    --color-primary-background: #141414;
    --color-primary-grey-100: #fff;
    --color-primary-grey-80: rgba(255, 255, 255, 0.78);
    --color-primary-grey-60: #a1a1a1;
    --color-primary-grey-40: #5a5a5a;
    --color-primary-grey-20: #2b2b2b;
  }
}

/* =============================================================================
 * RESET & BASE
 * ============================================================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-primary-background);
}

body {
  font-family: 'JioType', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
               'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--color-primary-grey-100);
}

/* =============================================================================
 * SPLASH CONTAINER
 * ============================================================================= */

#swayam-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #ffffff;
  opacity: 1;
  transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

#swayam-splash.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* =============================================================================
 * SPLASH IMAGES - Multiple SVGs for different aspect ratios
 * ============================================================================= */

.splash-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

/* Mobile Portrait (aspect ratio < 0.75, i.e., tall screens like phones) */
@media (max-aspect-ratio: 3/4) {
  .splash-mobile { display: block; }
}

/* Tablet Portrait (aspect ratio between 0.75 and 1.0) */
@media (min-aspect-ratio: 3/4) and (max-aspect-ratio: 1/1) {
  .splash-tablet { display: block; }
}

/* Desktop/Landscape (aspect ratio > 1.0, i.e., wide screens) */
@media (min-aspect-ratio: 1/1) {
  .splash-desktop { display: block; }
}

/* =============================================================================
 * FLUTTER VIEW FADE-IN
 * ============================================================================= */

flutter-view {
  opacity: 0;
  animation: flutter-fade-in 600ms ease forwards;
  animation-delay: 100ms;
  /* Black-proofing: the fade-in makes flutter-view opaque after ~700ms whether
   * or not Flutter has painted. Without a background, an unpainted/hung view
   * exposes the themed body (near-black #141414 in dark mode). A white backdrop
   * matches the always-white splash, so any gap reads as white, never black. */
  background-color: #ffffff;
}

@keyframes flutter-fade-in {
  to {
    opacity: 1;
  }
}

/* =============================================================================
 * REDUCED MOTION (accessibility)
 * ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  flutter-view {
    animation: none;
    opacity: 1;
  }

  #swayam-splash {
    transition: none;
  }
}