/* ============================================================
   SACRED GEOMETRY FLAIR
   Decorative elements inspired by alchemical/sacred geometry:
   wireframe polyhedra, node constellations, glitch accents,
   hexagonal motifs, and ritual line-work.
   ============================================================ */

/* ============================================================
   1. GEOMETRIC NODE DOTS
   Small glowing circles placed at key intersections
   ============================================================ */
.os-node {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--os-accent);
  box-shadow: 0 0 8px var(--os-accent), 0 0 24px var(--os-accent-glow);
  pointer-events: none;
  z-index: 1;
}
.os-node--teal {
  background: var(--os-teal-bright);
  box-shadow: 0 0 8px var(--os-teal), 0 0 24px var(--os-teal-glow);
}
.os-node--sm { width: 4px; height: 4px; }
.os-node--lg { width: 8px; height: 8px; }
.os-node--pulse {
  animation: osPulse 3s ease-in-out infinite;
}
.os-node--pulse-delay { animation-delay: 1.5s; }

@keyframes osPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.6); }
}


/* ============================================================
   2. WIREFRAME HEXAGON
   SVG-based hexagonal frame used as section ornament
   ============================================================ */
.os-hex {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.os-hex svg {
  width: 100%;
  height: 100%;
}
.os-hex--sm { width: 80px; height: 80px; }
.os-hex--md { width: 160px; height: 160px; }
.os-hex--lg { width: 300px; height: 300px; }
.os-hex--xl { width: 500px; height: 500px; }

.os-hex--spin {
  animation: osHexSpin 60s linear infinite;
}
.os-hex--spin-reverse {
  animation: osHexSpin 80s linear infinite reverse;
}

@keyframes osHexSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


/* ============================================================
   3. HERO SACRED GEOMETRY OVERLAY
   Layered wireframe constellation behind the hero content
   ============================================================ */
.os-hero__geometry {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.os-hero__geometry svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.12;
  width: 900px;
  height: 900px;
}
[data-theme="light"] .os-hero__geometry svg {
  opacity: 0.06;
}
.os-hero__content {
  position: relative;
  z-index: 1;
}


/* ============================================================
   4. SECTION DIVIDER ORNAMENT
   A small geometric ornament between sections
   ============================================================ */
.os-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 auto 28px;
  width: fit-content;
}
.os-ornament__line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--os-accent-dim), transparent);
}
.os-ornament__diamond {
  width: 8px;
  height: 8px;
  border: 1px solid var(--os-accent);
  transform: rotate(45deg);
  position: relative;
}
.os-ornament__diamond::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--os-accent);
  opacity: 0.4;
}
.os-ornament--teal .os-ornament__line {
  background: linear-gradient(90deg, transparent, var(--os-teal-dim), transparent);
}
.os-ornament--teal .os-ornament__diamond {
  border-color: var(--os-teal);
}
.os-ornament--teal .os-ornament__diamond::after {
  background: var(--os-teal);
}


/* ============================================================
   5. CARD TOP BORDER — SACRED LINE PATTERN
   Replace the simple gradient with a node-line pattern
   ============================================================ */
.os-card--sacred::before {
  height: 2px;
  background:
    radial-gradient(circle at 20%, var(--os-accent) 2px, transparent 2px),
    radial-gradient(circle at 50%, var(--os-accent) 2px, transparent 2px),
    radial-gradient(circle at 80%, var(--os-accent) 2px, transparent 2px),
    linear-gradient(90deg, transparent 10%, var(--os-accent-dim) 20%, var(--os-accent) 50%, var(--os-accent-dim) 80%, transparent 90%);
  background-size: 100% 2px;
  opacity: 0.8;
}


/* ============================================================
   6. GLITCH / SCAN-LINE ACCENTS
   Subtle horizontal glitch lines like the image's artifacts
   ============================================================ */
.os-glitch-line {
  position: absolute;
  height: 1px;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.os-glitch-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: -10%;
  width: 120%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--os-accent) 15%,
    transparent 20%,
    var(--os-teal-bright) 45%,
    transparent 50%,
    var(--os-accent-bright) 75%,
    transparent 80%
  );
  opacity: 0.5;
  animation: osGlitchSlide 8s linear infinite;
}
.os-glitch-line--slow::before {
  animation-duration: 14s;
}

@keyframes osGlitchSlide {
  0% { transform: translateX(-20%); }
  100% { transform: translateX(20%); }
}

/* Scan lines overlay for image placeholders */
.os-scan-lines {
  position: relative;
}
.os-scan-lines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
  pointer-events: none;
}
[data-theme="light"] .os-scan-lines::after {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.015) 2px,
    rgba(0,0,0,0.015) 4px
  );
}


/* ============================================================
   7. GEOMETRIC CORNER BRACKETS
   Decorative L-shaped corners on featured elements
   ============================================================ */
.os-corners {
  position: relative;
}
.os-corners::before,
.os-corners::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: none;
  z-index: 2;
}
.os-corners::before {
  top: -1px;
  left: -1px;
  border-top: 1px solid var(--os-accent);
  border-left: 1px solid var(--os-accent);
}
.os-corners::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 1px solid var(--os-accent);
  border-right: 1px solid var(--os-accent);
}
.os-corners--teal::before {
  border-color: var(--os-teal);
}
.os-corners--teal::after {
  border-color: var(--os-teal);
}


/* ============================================================
   8. CONSTELLATION CANVAS BACKGROUND
   Animated dots-and-lines constellation drawn via JS
   ============================================================ */
.os-constellation-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.os-constellation-canvas canvas {
  width: 100%;
  height: 100%;
  display: block;
}


/* ============================================================
   9. SIGIL / EMBLEM — CSS-only decorative mark
   Used at section breaks or as a watermark
   ============================================================ */
.os-sigil {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 0 auto;
}
.os-sigil::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--os-accent-dim);
  border-radius: 50%;
  opacity: 0.5;
}
.os-sigil::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid var(--os-accent);
  transform: rotate(45deg);
  opacity: 0.6;
}
.os-sigil__inner {
  position: absolute;
  inset: 16px;
  border: 1px solid var(--os-accent-bright);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.os-sigil__inner::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--os-accent);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--os-accent);
}
.os-sigil--teal::before { border-color: var(--os-teal-dim); }
.os-sigil--teal::after { border-color: var(--os-teal); }
.os-sigil--teal .os-sigil__inner { border-color: var(--os-teal-bright); }
.os-sigil--teal .os-sigil__inner::before {
  background: var(--os-teal);
  box-shadow: 0 0 6px var(--os-teal);
}


/* ============================================================
   10. PRODUCT CARD — GEOMETRIC HOVER RING
   A subtle hexagonal ring that fades in on product hover
   ============================================================ */
.os-product-card--geo .os-product-card__image::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 70%;
  transform: translate(-50%, -50%) rotate(30deg);
  border: 1px solid var(--os-accent);
  opacity: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.os-product-card--geo:hover .os-product-card__image::after {
  opacity: 0.3;
  transform: translate(-50%, -50%) rotate(0deg);
}


/* ============================================================
   11. EYEBROW WITH FLANKING LINES
   Eyebrow text with thin decorative lines on each side
   ============================================================ */
.os-eyebrow--flanked {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.os-eyebrow--flanked::before,
.os-eyebrow--flanked::after {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--os-accent-dim);
}
.os-eyebrow--flanked.os-eyebrow--teal::before,
.os-eyebrow--flanked.os-eyebrow--teal::after {
  background: var(--os-teal-dim);
}


/* ============================================================
   12. SECTION BACKGROUND PATTERN — FLOWER OF LIFE (subtle)
   A repeating circular pattern reminiscent of sacred geometry
   ============================================================ */
.os-section--sacred-bg {
  position: relative;
}
.os-section--sacred-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at center, var(--os-border-subtle) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.3;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 10%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 10%, transparent 60%);
}
[data-theme="light"] .os-section--sacred-bg::after {
  opacity: 0.15;
}


/* ============================================================
   13. ANIMATED HEXAGONAL BORDER ON CTA BUTTONS
   A subtle hexagonal clip-path animation on primary buttons
   ============================================================ */
.os-btn--ritual {
  position: relative;
  overflow: hidden;
}
.os-btn--ritual::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  background: linear-gradient(
    135deg,
    var(--os-accent) 0%,
    var(--os-teal) 50%,
    var(--os-accent-bright) 100%
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.os-btn--ritual:hover::before {
  opacity: 1;
  animation: osRitualShift 3s linear infinite;
}

@keyframes osRitualShift {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(30deg); }
}


/* ============================================================
   14. PORTFOLIO ITEM — SACRED GRID OVERLAY ON HOVER
   ============================================================ */
.os-portfolio-item--sacred .os-portfolio-item__overlay::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 60%; height: 60%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(200, 90, 154, 0.3);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.os-portfolio-item--sacred:hover .os-portfolio-item__overlay::before {
  opacity: 1;
}


/* ============================================================
   15. FOOTER GEOMETRY LINE
   A thin decorative line with node points above the footer
   ============================================================ */
.os-footer-geometry {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.os-footer-geometry__line {
  width: 100%;
  max-width: 600px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--os-accent-dim) 20%,
    var(--os-accent) 50%,
    var(--os-accent-dim) 80%,
    transparent 100%
  );
  position: relative;
}
.os-footer-geometry__node {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--os-accent);
  box-shadow: 0 0 8px var(--os-accent-glow);
}
.os-footer-geometry__node:nth-child(1) { left: 20%; }
.os-footer-geometry__node:nth-child(2) { left: 50%; }
.os-footer-geometry__node:nth-child(3) { left: 80%; }