/* === STAR CANVAS === */
canvas#stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* === OPTIONAL GRADIENT BETWEEN SECTIONS === */
.section-gradient-bottom {
  background: linear-gradient(to bottom, #0a0a0c 0%, #0f0f11 100%);
}

.section-gradient-top {
  background: linear-gradient(to top, #0a0a0c 0%, #0f0f11 100%);
}

/* === Dynamic Bronze Gradient Glows === */
.gradient-glow {
  position: absolute;
  width: min(320px, 80vw);
  height: min(320px, 80vw);
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-glow-light) 0%, var(--brand-glow-light) 30%, var(--brand-glow-dark) 80%, #000 100%);
  filter: blur(100px);
  pointer-events: none;
  opacity: 0.45;
  animation: floatGlow 12s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  transition: opacity 1s ease;
  z-index: 0;
}

.gradient-glow.visible {
  opacity: 0.7;
}

.gradient-glow.global {
  width: min(900px, 200vw);
  height: min(900px, 200vw);
  background: radial-gradient(circle, var(--brand-glow-global) 0%, var(--brand-glow-global) 25%, var(--brand-glow-dark) 70%, #000 100%);
  filter: blur(180px);
  animation: floatAround 30s ease-in-out infinite;
  transition: opacity 2s ease;
  opacity: 0.25;
}

.gradient-glow.global.visible {
  opacity: 0.35;
}

/* === Floating Bronze Glows - Global === */
.gradient-glow.global {
  width: min(900px, 200vw);
  height: min(900px, 200vw);
  background: radial-gradient(circle, var(--brand-glow-global), var(--brand-glow-dark));
  filter: blur(220px);
  animation: floatAround 30s ease-in-out infinite;
  transition: opacity 2s ease;
}

.gradient-glow.global.visible {
  opacity: 0.4;
}

/* === ANIMATIONS === */
@keyframes floatGlow {
  0%   { transform: translateX(0) translateY(0); }
  100% { transform: translateX(50px) translateY(0); }
}

@keyframes floatAround {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(100px, 0); }
  50%  { transform: translate(-100px, 0); }
  75%  { transform: translate(50px, 0); }
  100% { transform: translate(0, 0); }
}

/* === ASTROLABE ANIMATED OVERLAY === */
.astrolabe-overlay {
  position: absolute;
  top: var(--astrolabe-overlay-y) !important;
  left: var(--astrolabe-overlay-x) !important;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.astrolabe-overlay-reverse {
  position: absolute;
  top: var(--astrolabe-overlay-y) !important;
  left: var(--astrolabe-overlay-x) !important;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.astrolabe-svg {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.18;
  transform-origin: center center;
}

.astrolabe-svg-reverse {
  opacity: 0.06;
}

.astrolabe-overlay .astrolabe-svg {
  animation: astrolabe-rotate-scaled 60s linear infinite;
}

.astrolabe-overlay-reverse .astrolabe-svg {
  animation: astrolabe-rotate-reverse-scaled 60s linear infinite;
}
/* Astrolabe SVG stroke width classes */
.astrolabe-svg circle:nth-of-type(1),
.astrolabe-svg-reverse circle:nth-of-type(1) {
  stroke-width: calc(var(--astrolabe-stroke-width) * 1.2);
}

.astrolabe-svg circle:nth-of-type(2),
.astrolabe-svg-reverse circle:nth-of-type(2) {
  stroke-width: calc(var(--astrolabe-stroke-width) * 1);
}

.astrolabe-svg circle:nth-of-type(3),
.astrolabe-svg-reverse circle:nth-of-type(3) {
  stroke-width: calc(var(--astrolabe-stroke-width) * 0.7);
}

.astrolabe-svg-reverse circle:nth-of-type(1) {
  stroke-width: calc(var(--astrolabe-stroke-width) * 1.1);
}

.astrolabe-svg-reverse circle:nth-of-type(2) {
  stroke-width: calc(var(--astrolabe-stroke-width) * 0.9);
}

.astrolabe-svg-reverse circle:nth-of-type(3) {
  stroke-width: calc(var(--astrolabe-stroke-width) * 0.6);
}

.astrolabe-svg path:nth-of-type(1) {
  stroke-width: calc(var(--astrolabe-stroke-width) * 1);
}

.astrolabe-svg path:nth-of-type(2) {
  stroke-width: calc(var(--astrolabe-stroke-width) * 0.8);
}

.astrolabe-svg path:nth-of-type(3) {
  stroke-width: calc(var(--astrolabe-stroke-width) * 0.7);
}

.astrolabe-svg-reverse path:nth-of-type(1) {
  stroke-width: calc(var(--astrolabe-stroke-width) * 0.9);
}

.astrolabe-svg-reverse path:nth-of-type(2) {
  stroke-width: calc(var(--astrolabe-stroke-width) * 0.7);
}

.astrolabe-svg-reverse path:nth-of-type(3) {
  stroke-width: calc(var(--astrolabe-stroke-width) * 0.6);
}
@keyframes astrolabe-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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

@keyframes astrolabe-rotate-scaled {
  0% { transform: scale(var(--astrolabe-overlay-scale, 1.0)) rotate(0deg); }
  100% { transform: scale(var(--astrolabe-overlay-scale, 1.0)) rotate(360deg); }
}

/* === DECORATIVE ASTROLABES === */
.astrolabe-decoration {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
  display: none; /* Hidden by default, controlled by JavaScript */
}

.astrolabe-decoration .astrolabe-svg {
  width: 100%;
  height: 100%;
  display: block;
  animation: astrolabe-rotate 80s linear infinite;
}

.services-astrolabe {
  right: var(--services-astrolabe-x) !important;
  top: var(--services-astrolabe-y) !important;
  width: var(--services-astrolabe-size);
  height: var(--services-astrolabe-size);
  transform: translateX(50%);
}

.services-astrolabe .astrolabe-svg {
  opacity: var(--services-astrolabe-opacity);
}

.about-astrolabe {
  left: var(--about-astrolabe-x) !important;
  top: var(--about-astrolabe-y) !important;
  width: var(--about-astrolabe-size);
  height: var(--about-astrolabe-size);
  transform: translateX(-50%);
}

.about-astrolabe .astrolabe-svg {
  opacity: var(--about-astrolabe-opacity);
}

/* === Z-INDEX FIXES === */
.card, .feature-card, .work-card, .service-card {
    position: relative;
    z-index: 10 !important;
}

.card-custom {
    position: relative;
    z-index: 10 !important;
}

/* === GLASS MORPHISM SERVICE CARDS === */
.service-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    -webkit-transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    will-change: background, border-color, box-shadow, transform;
}

.service-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.service-card .icon {
    color: rgba(255, 255, 255, 0.9);
    opacity: 1;
}

.service-card-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.service-card h3 {
    color: #ffd166;
}

.service-card p {
    color: #c8a96a;
}

/* === GLASS MORPHISM FEATURED WORKS CARDS === */
.card-custom .tilt-card {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.card-custom .tilt-card:hover {
    background: rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.card-custom .tilt-card h5 {
    color: #ffd166;
}

.card-custom .tilt-card p {
    color: rgba(255, 255, 255, 0.7);
}

/* === GLASS MORPHISM CONTACT CARDS === */
.contact-card {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.contact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(255, 255, 255, 0.06) 0%,
        transparent 40%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.contact-card:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.contact-card:hover::before {
    opacity: 1;
}

.contact-card {
    opacity: 0.9;
    font-size: clamp(4rem, 6vw, 6rem);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--card-accent, rgba(200, 169, 106, 0.3)) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.contact-card:hover::before {
    opacity: 0.4;
}

.contact-card-icon {
    opacity: 0.9;
    font-size: clamp(4rem, 6vw, 6rem);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-card-icon i,
.contact-card-icon svg {
    width: 0.8em !important;
    height: 0.8em !important;
    stroke-width: 0.75;
}

.contact-card-title {
    color: rgba(255, 255, 255, 0.95);
}

.contact-card-desc {
    color: rgba(255, 255, 255, 0.7);
}

/* Contact cards are now clickable themselves, no separate buttons needed */

/* Ensure all section content stays above decorative astrolabes */
.services-section .container,
.about-section .container {
    position: relative;
    z-index: 5;
}

/* Ensure section titles and text stay above astrolabes */
.section-title,
.lead,
.gradient-text {
    position: relative;
    z-index: 5;
}