/*
  NAGARA — Cinematic Light
  Visual-only theme layer.
  No dimensions, spacing, transforms, animation timings, scroll logic,
  media sources or text content are changed.
*/

:root {
  --light-canvas: #f3f1ec;
  --light-canvas-2: #ece8e1;
  --light-ink: #11100f;
  --light-line: rgba(17, 16, 15, 0.24);
  --cinema-black: #080706;
  --cinema-black-soft: #12100e;
}

/* Main light canvas */
html,
body,
.page_wrap,
.page_main,
.hero_wrap,
.about_wrap,
.explore_wrap,
.since_wrap,
.why_wrap {
  background-color: var(--light-canvas);
  color: var(--light-ink);
}

/* Header / navigation: same geometry, light-theme contrast only */
.nav {
  color: var(--light-ink);
}
.logo-svg path {
  fill: currentColor !important;
}
.nav_menu_button circle,
.nav_menu_button line {
  stroke: currentColor !important;
}
.nav .button_small_wrap.btn_main_wrap {
  color: var(--light-ink);
  border-color: var(--light-line);
}
.nav .button_small_wrap.btn_main_wrap:hover {
  color: var(--light-ink);
}

/*
  HERO
  The source watch artwork is authored on black. On the original dark site its
  black field disappeared into the page. In light mode it must remain a dark,
  cinematic visual island rather than being washed out by a white fade.
*/
.hero_wrap {
  isolation: isolate;
}
.hero_contain {
  isolation: isolate;
}
.hero_img {
  mix-blend-mode: normal;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, #000 62%, rgba(0,0,0,.96) 74%, rgba(0,0,0,.50) 88%, transparent 100%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, #000 62%, rgba(0,0,0,.96) 74%, rgba(0,0,0,.50) 88%, transparent 100%);
}

/* ABOUT VIDEO
   Original mix-blend-mode:lighten makes dark video disappear on a light page. */
.about_img_wrap {
  mix-blend-mode: normal;
  background-color: var(--cinema-black);
}
.about_img_wrap .g_visual_video {
  opacity: 1;
}

/* Keep all media overlays dark exactly where they were intended to add depth. */
.g_visual_overlay {
  background-color: #000;
}

/* Intro Explore remains light; the product scroller becomes a light gallery
   while its original product image cards stay dark for contrast. */
.explore_product_bg {
  background-color: var(--light-canvas-2);
}
.explore_product_img {
  opacity: 0.09;
}
.product_left,
.product_right {
  background-color: var(--cinema-black);
}

/* Divider was white in the dark version. */
.u_dvdr_vertical {
  background-color: var(--light-line);
}

/* CTA is intentionally retained as the main dark cinematic break. */
.cta_wrap {
  background-color: var(--cinema-black);
  color: var(--swatch--light);
}
.cta_wrap .g_fade_masking.is-cta {
  background-image: linear-gradient(transparent, var(--cinema-black));
}

/* Footer top becomes light; layout/content remain untouched. */
.footer_top_wrap {
  background-color: var(--light-canvas-2);
  color: var(--light-ink);
}
.footer_top_wrap .logo-svg path {
  fill: currentColor !important;
}
.footer_top_wrap .button_2nd_wrap.btn_main_wrap,
.footer_top_wrap .btn_main_wrap.is-secndr {
  color: var(--light-ink);
  border-color: var(--light-line);
}
.footer_top_wrap .form_main_field_input {
  border-bottom-color: var(--light-line);
}

/* Final pinned video stays dark, preserving the original finale atmosphere. */
.footer_bottom_wrap {
  color: var(--swatch--light);
}
.footer_bottom_bg_wrap {
  background-color: var(--cinema-black);
}
.footer_bottom_bg {
  opacity: 0.28;
}

/* Preserve original preloader / transition palette and animation behavior. */
.preloader_black-curtain {
  background-color: var(--swatch--dark);
}

/* Light mobile menu button contrast, geometry untouched. */
.button_mo_wrap.btn_main_wrap {
  border-color: var(--light-ink);
  background-color: var(--light-ink);
  color: var(--swatch--light);
}
.button_mo_wrap.btn_main_wrap:hover {
  border-color: var(--swatch--brand);
  background-color: var(--swatch--brand);
  color: var(--light-ink);
}