/* TAURA M.82 — Global Styles, Keyframes & Client-First Utilities */

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

html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-canvas);
  color: var(--c-ghost);
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--c-celeste);
  color: var(--c-canvas);
}

img, svg {
  display: block;
  max-width: 100%;
}

button {
  cursor: pointer;
}

/* ─── Golden period rule ─── */
.rp {
  color: var(--c-gold);
}

/* ─── Page structure ─── */
.page-wrapper {
  background: var(--c-canvas);
  font-family: var(--font-primary);
  color: var(--c-ghost);
  overflow-x: clip;
  position: relative;
  min-height: 100vh;
}

.main-wrapper {
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════
   CLIENT-FIRST UTILITY LAYER
   ─ padding-global: horizontal padding only
   ─ padding-section-*: vertical padding only
   ─ container-*: max-width + centering
═══════════════════════════════════════════════════════════════ */

.padding-global {
  padding-left: 2.5rem;   /* 40px */
  padding-right: 2.5rem;
}

.padding-section-small {
  padding-top: 5rem;      /* 80px */
  padding-bottom: 5rem;
}

.padding-section-medium {
  padding-top: 6rem;      /* 96px */
  padding-bottom: 6rem;
}

.padding-section-large {
  padding-top: 8.125rem;  /* 130px */
  padding-bottom: 0;
}

.padding-section-huge {
  padding-top: 10rem;     /* 160px */
  padding-bottom: 10rem;
}

.container-small {
  max-width: 55rem;        /* 880px */
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.container-medium {
  max-width: 64rem;        /* ~1024px */
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.container-large {
  max-width: 80rem;        /* 1280px */
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.container-xlarge {
  max-width: 96rem;        /* ~1536px */
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════════════════════════ */

@keyframes glowPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.96); }
  50%       { opacity: 0.75; transform: scale(1.06); }
}

@keyframes dotPulse {
  0%, 100% { opacity: 1;    transform: scale(1);   }
  50%       { opacity: 0.35; transform: scale(0.6); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration:        0.001ms !important;
    animation-iteration-count: 1       !important;
    transition-duration:       0.001ms !important;
  }
}

/* ─── Mobile padding override ─── */
@media (max-width: 900px) {
  .padding-global {
    padding-left: 1.375rem;   /* 22px */
    padding-right: 1.375rem;
  }
  .padding-section-large {
    padding-top: 5rem;        /* 80px */
  }
  .padding-section-medium {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}