/**
 * @file
 * VVJ Core — base reset + cascade-layer ladder.
 *
 * The cascade-layer ladder lets pattern modules and themes layer
 * their CSS at the right specificity level without selector hacks.
 * Order (lowest to highest priority within layered rules):
 *
 *   vvj.foundation  — universal box-sizing, container queries
 *   vvj.tokens      — design-token definitions (vvj-tokens.css)
 *   vvj.base        — reduced-motion baseline, accessibility primitives
 *   vvj.pattern     — per-pattern layout (vvja.css, vvjs.css, etc.)
 *   vvj.theme       — site theme overrides — always wins (themes layer
 *                     into this from their own CSS)
 *
 * Unlayered CSS still beats layered CSS, so site themes can drop
 * unlayered overrides if they want to win against everything.
 *
 * Filename:     vvj-base.css
 * Website:      https://www.flashwebcenter.com
 * Developer:    Alaa Haddad https://www.alaahaddad.com.
 */

@layer vvj.foundation, vvj.tokens, vvj.base, vvj.pattern, vvj.theme;

@layer vvj.foundation {

  /* Container-query setup for every VVJ custom element.
     Pattern stylesheets can use @container queries against `vvj-region`
     to respond to their parent's size, not the viewport. */
  .vvj-component,
  vvja-accordion, vvjb-carousel, vvjc-carousel-3d, vvjf-flipbox,
  vvjh-hero, vvjl-lightbox, vvjp-parallax, vvjr-reveal,
  vvjs-slideshow, vvjt-tabs {
    container-name: vvj-region;
    container-type: inline-size;
    box-sizing: border-box;
    display: block;
  }

  .vvj-component *,
  .vvj-component *::before,
  .vvj-component *::after,
  vvja-accordion *, vvjb-carousel *, vvjc-carousel-3d *, vvjf-flipbox *,
  vvjh-hero *, vvjl-lightbox *, vvjp-parallax *, vvjr-reveal *,
  vvjs-slideshow *, vvjt-tabs * {
    box-sizing: inherit;
  }

  /* Note on `<X>:not(:defined)` FOUC-hiding:
   * We deliberately do NOT hide unupgraded custom elements. If the
   * JS module fails to load (network error, blocked by extension,
   * etc.), users would see nothing forever. Instead the markup
   * inside each custom element is structured so that, without JS,
   * a sensible static representation renders — inner `.vvja-inner`
   * etc. divs are the visual elements; the custom element itself is
   * a thin behavior wrapper.
   */
}

@layer vvj.base {
  /* Reduced-motion baseline — applies to every VVJ component.
     Pattern-specific motion overrides also respect this query, but
     this is the cross-cutting safety net. */
  @media (prefers-reduced-motion: reduce) {
    .vvj-component *,
    .vvj-component *::before,
    .vvj-component *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}