/* ==========================================================================
   GLOBAL.CSS — Base Reset, Fonts & Defaults
   ==========================================================================
   WordPress/Elementor: These map to Theme Style > Typography defaults.
   ========================================================================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Sora:wght@400;600;700;800&display=swap');

/* Material Symbols */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* ==========================================================================
   RESET
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Decorative elements (.glow-blob, .ambient-glow, etc.) are deliberately
     positioned to bleed slightly past their section's edge for a soft glow
     effect — fine on wide desktop viewports, but on mobile that bleed can
     push past the screen edge and make the whole page horizontally
     draggable, since not every section wrapping one of these remembers to
     add .overflow-hidden. Using overflow-x: clip on both html and body
     stops this horizontal dragging on mobile without creating double vertical
     scrollbars on desktop. */
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--text-body-md-lh);
  font-weight: var(--text-body-md-fw);
  color: var(--on-surface);
  background-color: var(--background);
  overflow-x: clip;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Selection */
::selection {
  background-color: rgba(0, 88, 190, 0.2);
  color: var(--on-surface);
}

/* ==========================================================================
   BASE ELEMENTS
   ========================================================================== */

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

ul,
ol {
  list-style: none;
}

/* ==========================================================================
   TYPOGRAPHY UTILITY CLASSES
   ========================================================================== */

/* Display */
.text-display-xl {
  font-family: var(--font-heading);
  font-size: var(--text-display-xl);
  line-height: var(--text-display-xl-lh);
  letter-spacing: var(--text-display-xl-ls);
  font-weight: var(--text-display-xl-fw);
}

.text-display-lg {
  font-family: var(--font-heading);
  font-size: var(--text-display-lg);
  line-height: var(--text-display-lg-lh);
  letter-spacing: var(--text-display-lg-ls);
  font-weight: var(--text-display-lg-fw);
}

/* Headline */
.text-headline-lg {
  font-family: var(--font-heading);
  font-size: var(--text-headline-lg);
  line-height: var(--text-headline-lg-lh);
  letter-spacing: var(--text-headline-lg-ls);
  font-weight: var(--text-headline-lg-fw);
}

.text-headline-lg-mobile {
  font-family: var(--font-heading);
  font-size: var(--text-headline-lg-mobile);
  line-height: var(--text-headline-lg-mobile-lh);
  letter-spacing: var(--text-headline-lg-mobile-ls);
  font-weight: var(--text-headline-lg-mobile-fw);
}

.text-headline-md {
  font-family: var(--font-heading);
  font-size: var(--text-headline-md);
  line-height: var(--text-headline-md-lh);
  font-weight: var(--text-headline-md-fw);
}

/* Body */
.text-body-lg {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg-lh);
  font-weight: var(--text-body-lg-fw);
}

.text-body-md {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--text-body-md-lh);
  font-weight: var(--text-body-md-fw);
}

/* Label */
.text-label-bold {
  font-family: var(--font-body);
  font-size: var(--text-label-bold);
  line-height: var(--text-label-bold-lh);
  letter-spacing: var(--text-label-bold-ls);
  font-weight: var(--text-label-bold-fw);
}

/* Price */
.text-price-display {
  font-family: var(--font-heading);
  font-size: var(--text-price-display);
  line-height: var(--text-price-display-lh);
  font-weight: var(--text-price-display-fw);
}

/* Logo / Brand */
.text-brand {
  font-family: var(--font-heading);
  font-size: var(--text-headline-md);
  line-height: var(--text-headline-md-lh);
  font-weight: var(--text-headline-md-fw);
  letter-spacing: -0.04em;
  color: var(--primary);
}

/* ==========================================================================
   MATERIAL SYMBOLS CONFIGURATION
   ========================================================================== */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

/* ==========================================================================
   FOCUS STYLES (Accessibility)
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Remove focus outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================================================
   SCREEN READER ONLY
   ========================================================================== */

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

/* ==========================================================================
   GLOBAL AMBIENT BACKGROUND SYSTEM
   ========================================================================== */

section, 
.section, 
.hero, 
.process-section, 
.cta-section {
  background: transparent !important;
  background-color: transparent !important;
}

.ambient-bg-container {
  position: fixed;
  top: -50vh;
  left: -50vw;
  width: 200vw;
  height: 200vh;
  z-index: -999;
  overflow: hidden;
  pointer-events: none;
  background-color: #FCFCFD; /* Layer 1: Foundation */
  will-change: transform;
  animation: rotate-bg 45s linear infinite;
  transform-origin: center center;
}

.ambient-cloud {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: normal;
  will-change: transform, opacity;
  transition: opacity 1.5s cubic-bezier(0.25, 1, 0.3, 1), transform 1.5s cubic-bezier(0.25, 1, 0.3, 1);
}

/* Clouds definitions (overlapping zone rules & low baseline opacity) */

/* Cloud 1: Top Left (Purple + Indigo) */
.cloud--indigo-purple {
  width: 700px;
  height: 700px;
  top: 20%;
  left: 20%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.38) 0%, rgba(79, 70, 229, 0.28) 60%, rgba(255, 255, 255, 0) 100%);
  filter: blur(220px);
  animation: float-purple 6s infinite alternate ease-in-out;
  opacity: 1;
}

/* Cloud 2: Upper Right (Cyan) */
.cloud--cyan {
  width: 800px;
  height: 800px;
  top: 20%;
  right: 20%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.35) 0%, rgba(6, 182, 212, 0) 70%);
  filter: blur(240px);
  animation: float-cyan 9s infinite alternate ease-in-out;
  opacity: 1;
}

/* Cloud 3: Center (Indigo) */
.cloud--indigo {
  width: 750px;
  height: 750px;
  top: 45%;
  left: 45%;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.32) 0%, rgba(79, 70, 229, 0) 70%);
  filter: blur(220px);
  animation: float-indigo 11s infinite alternate ease-in-out;
  opacity: 1;
}

/* Cloud 4: Lower Left (Pink) */
.cloud--pink {
  width: 780px;
  height: 780px;
  bottom: 20%;
  left: 20%;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.36) 0%, rgba(236, 72, 153, 0) 70%);
  filter: blur(240px);
  animation: float-pink 7s infinite alternate ease-in-out;
  opacity: 1;
}

/* Cloud 5: Lower Right (Cyan + Purple) */
.cloud--cyan-purple {
  width: 850px;
  height: 850px;
  bottom: 20%;
  right: 20%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.32) 0%, rgba(139, 92, 246, 0.26) 60%, rgba(255, 255, 255, 0) 100%);
  filter: blur(260px);
  animation: float-cyan-purple 13s infinite alternate ease-in-out;
  opacity: 1;
}

/* ==========================================================================
   LAYER 4: SECTION ATMOSPHERE SUBTLE TRANSITIONS
   ========================================================================== */

.ambient-bg-container.theme-hero .cloud--indigo-purple { opacity: 1.0; transform: scale(1.15); }
.ambient-bg-container.theme-hero .cloud--cyan { opacity: 0.75; }

.ambient-bg-container.theme-services .cloud--cyan { opacity: 1.0; transform: scale(1.2); }
.ambient-bg-container.theme-services .cloud--pink { opacity: 0.65; }

.ambient-bg-container.theme-portfolio .cloud--indigo { opacity: 1.0; transform: scale(1.2); }
.ambient-bg-container.theme-portfolio .cloud--cyan-purple { opacity: 1.0; }
.ambient-bg-container.theme-portfolio .cloud--pink { opacity: 0.65; }

.ambient-bg-container.theme-pricing .cloud--indigo-purple { opacity: 1.0; transform: scale(1.15); }
.ambient-bg-container.theme-pricing .cloud--pink { opacity: 1.0; }
.ambient-bg-container.theme-pricing .cloud--cyan { opacity: 0.75; }

.ambient-bg-container.theme-contact .cloud--pink { opacity: 1.0; transform: scale(1.25); }
.ambient-bg-container.theme-contact .cloud--indigo { opacity: 0.65; }
.ambient-bg-container.theme-contact .cloud--cyan { opacity: 0.65; }

/* ==========================================================================
   LIVING MOTION KEYFRAMES (Organic float)
   ========================================================================== */

@keyframes float-purple {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(120px, 80px) scale(1.1); }
  100% { transform: translate(-60px, -45px) scale(0.9); }
}

@keyframes float-cyan {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-150px, 100px) scale(0.85); }
  100% { transform: translate(80px, -60px) scale(1.15); }
}

@keyframes float-indigo {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(70px, -120px) scale(1.12); }
  100% { transform: translate(-100px, 80px) scale(0.88); }
}

@keyframes float-pink {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-90px, -70px) scale(0.9); }
  100% { transform: translate(110px, 50px) scale(1.1); }
}

@keyframes float-cyan-purple {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(90px, 130px) scale(1.1); }
  100% { transform: translate(-120px, -80px) scale(0.9); }
}

@keyframes rotate-bg {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ==========================================================================
   MOBILE OPTIMIZATION
   ========================================================================== */

@media (max-width: 768px) {
  .ambient-cloud {
    filter: blur(80px) !important;
    width: 350px !important;
    height: 350px !important;
  }
  .cloud--cyan, 
  .cloud--indigo {
    display: none !important; /* Hide 2 clouds to maintain 60fps on mobile */
  }
}

/* ==========================================================================
   ACCESSIBILITY: REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ambient-bg-container,
  .ambient-cloud {
    animation: none !important;
    transition: none !important;
  }
}