/* ==== INDEX PAGE SPECIFIC STYLES ==== */
/* Styles specific to the fractured glass homepage */

/* Fractured Background Container */
.fractured-bg {
  position: relative;    /* Relative positioning for child elements */
  width: 100vw;    /* Full viewport width */
  height: 100vh;    /* Full viewport height */
  min-height: 840px;    /* Minimum height for content */
  min-width: 1320px;    /* Minimum width for content */
  display: flex;    /* Flexbox for centering */
  align-items: center;    /* Center vertically */
  justify-content: center;    /* Center horizontally */
  background: transparent;    /* Transparent background (gradient from body) */
  z-index: 2;    /* Above snow effect */
}

/* SVG Container Styling */
svg {
  width: 100vw;    /* Full viewport width */
  height: 100vh;    /* Full viewport height */
  display: block;    /* Block display to remove inline spacing */
}

/* ==== GLASS PIECE STYLES ==== */
/* Styling for the fractured glass polygon pieces */

.glass-piece {
  stroke: rgba(180, 160, 255, 0.4); /* Light purple stroke */
  stroke-width: 2;    /* Default stroke width (overridden by individual pieces) */
  opacity: 0;    /* Start invisible for animation */
  filter: drop-shadow(0 4px 20px rgba(180, 160, 255, 0.15)); /* Subtle purple shadow */
  transition: var(--transition-smooth); /* Smooth transitions using CSS variable */
  transform-origin: center;   /* Transform from center point */
  transform: scale(0.3) rotate(-15deg); /* Start small and rotated for animation */
}

/* Clickable Polygon Styling */
.clickable-poly {
  cursor: pointer;    /* Pointer cursor to indicate clickability */
}

.clickable-poly:hover {
  stroke: rgba(191, 170, 255, 0.8); /* Brighter purple stroke on hover */
  stroke-width: 5;    /* Thicker stroke on hover */
  filter: drop-shadow(0 0 40px var(--light-purple)) brightness(1.3); /* Glow and brightness increase */
  transform: scale(1.08) !important; /* Slight scale increase on hover */
}

/* Individual Polygon Stroke Widths */
#poly1 { stroke-width: 3; }   /* About Me polygon */
#poly2 { stroke-width: 3; }   /* Projects polygon */
#poly3 { stroke-width: 3; }   /* Skills polygon */
#poly4 { stroke-width: 3; }   /* Experience polygon */
#poly5 { stroke-width: 3; }   /* Contact polygon */

/* Portrait Border Styling (center triangle) */
.portrait-border {
  stroke: var(--light-purple); /* Light purple border */
  stroke-width: 2;    /* Border width */
  filter: drop-shadow(0 0 35px rgba(191, 170, 255, 0.6)); /* Purple glow around portrait */
}

/* Portrait Image Styling */
#portrait-img {
  transition: opacity 1.5s ease-out; /* Smooth fade-in transition */
  filter: drop-shadow(0 4px 20px rgba(124, 95, 211, 0.33)); /* Purple shadow */
}

/* ==== POLYGON LABEL STYLES ==== */
/* Text labels for each polygon section */

.poly-label {
  font-family: 'Ysabeau SC', sans-serif; /* Display font for labels */
  font-optical-sizing: auto;  /* Optimize font rendering */
  font-size: 36px;    /* Base font size */
  fill: var(--light-purple);  /* Light purple text color */
  text-anchor: middle;    /* Center text horizontally */
  pointer-events: none;    /* Don't interfere with polygon clicks */
  opacity: 0;    /* Start invisible */
  font-weight: 400;    /* Normal font weight */
  font-style: normal;    /* Normal font style */
  transform: translateY(30px); /* Start below final position */
  transition:
    opacity 0.7s cubic-bezier(0.4,0,0.2,1),    /* Smooth opacity transition */
    fill 0.3s cubic-bezier(0.4,0,0.2,1),    /* Color transition */
    font-size 0.3s cubic-bezier(0.4,0,0.2,1),    /* Size transition */
    font-weight 0.3s cubic-bezier(0.4,0,0.2,1),  /* Weight transition */
    filter 0.3s cubic-bezier(0.4,0,0.2,1),    /* Filter transition */
    transform 0.7s cubic-bezier(0.4,0,0.2,1);    /* Transform transition */
  filter: blur(0.5px);    /* Slight blur initially */
}

/* Visible state for labels */
.poly-label.visible {
  opacity: 1;    /* Semi-transparent when visible */
  transform: translateY(0);   /* Move to final position */
}

/* Active state for labels (on hover) */
.poly-label.active {
  opacity: 1;    /* Full opacity when active */
  fill: var(--primary-purple); /* Primary purple color */
  font-size: 50px;    /* Larger font size */
  font-weight: 700;    /* Bold font weight */
  filter: blur(0);    /* Remove blur */
  text-shadow: 0 2px 8px rgba(230, 230, 250, 0.53); /* Text shadow for depth */
  letter-spacing: 0.04em;    /* Slight letter spacing */
  transform: scale(1.08);    /* Slight scale increase */
}

/* Individual label positioning when active */
#label1.active { transform: scale(1.08) translateX(-120px); } /* Services: move left */
#label2.active { transform: scale(1.08) translateX(-120px) translateY(-10px); } /* Portfolio: up and left */
#label3.active { transform: scale(1.08) translateX(30px) translateY(-40px); }  /* Exerience: right and down */
#label4.active { transform: scale(1.08) translateX(-120px) translateY(-80px); }  /* Contact: up and left */


/* ==== ANIMATION CLASSES ==== */
/* Classes added via JavaScript for animations */

.glass-animate {
  opacity: 0.95 !important;   /* Make glass pieces visible */
  transform: scale(1) rotate(0deg) !important; /* Return to normal size and rotation */
}

/* Shimmer Animation for Glass Pieces */
@keyframes glassShimmer {
  0% { filter: brightness(1.1) saturate(1.1) blur(0px); } /* Start state */
  20% { filter: brightness(1.5) saturate(1.3) blur(2px) drop-shadow(0 0 80px var(--light-purple)); } /* Peak glow */
  40% { filter: brightness(1.2) saturate(1.2) blur(1px) drop-shadow(0 0 60px var(--light-purple)); } /* Mid glow */
  60% { filter: brightness(1.5) saturate(1.3) blur(2px) drop-shadow(0 0 100px var(--light-purple)); } /* Second peak */
  100% { filter: brightness(1.1) saturate(1.1) blur(0px); } /* Return to start */
}

.shimmer-active {
  animation: glassShimmer 8.0s ease-in-out infinite; /* Continuous shimmer animation */
}

/* ==== RESPONSIVE DESIGN ==== */
/* Responsive scaling for different screen sizes */

@media (max-width: 1400px) {
  .fractured-bg { transform: scale(0.85); } /* Scale down entire fractured background */
}

@media (max-width: 1100px) {
  .fractured-bg { transform: scale(0.7); }  /* Scale down more */
}

/* ==== MOBILE FIXES - Remove zoomed-out effect ==== */
/* Fix mobile zoomed-out effect on index (remove forced min-size and scaling) */
@media (max-width: 900px) {
  .fractured-bg {
    min-width: 0 !important; /* Allow container to match viewport width */
    min-height: 0 !important; /* Allow container to match viewport height */
    width: 100vw !important; /* Fit the viewport width */
    height: 100vh !important; /* Fit the viewport height */
    transform: none !important; /* Cancel any scaling that shrinks content */
    padding: 0 1rem; /* Small side padding */
  }

  /* Also cancel the global SVG scaling on mobile */
  svg#fractured-svg {
    transform: none !important; /* Prevent scaled-down SVG */
  }

  /* Soften snow visibility behind mobile hero */
  .snow-dot {
    opacity: 0.5; /* Slightly subtler snow */
    filter: none; /* Remove strong glow on mobile */
    box-shadow: 0 1px 4px rgba(0,0,0,0.08); /* Gentle shadow only */
  }
}

/* ==== MOBILE LITE HOMEPAGE ==== */
/* Show simplified mobile layout, hide fractured SVG below 900px */
@media (max-width: 900px) {
  /* Hide the complex SVG and its container sizing issues */
  #fractured-svg { 
    display: none !important; /* Hide fractured glass SVG on mobile */
  }

  .fractured-bg {
    /* Remove min dimensions that force horizontal scroll */
    min-width: 0 !important; /* Allow container to shrink on mobile */
    min-height: 0 !important; /* Allow height to fit mobile viewport */
    width: 100vw !important; /* Fit viewport width */
    height: 100vh !important; /* Fit viewport height */
    padding: 0 1rem; /* Small padding for breathing room */
    display: flex; /* Use flex for stacking */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    flex-direction: column; /* Stack items vertically */
    gap: 1.25rem; /* Space between title, subtitle, and buttons */
    background: radial-gradient(1200px 600px at 50% 20%, rgba(191,170,255,0.15), transparent 60%), 
                linear-gradient(135deg, var(--bg-light) 0%, var(--bg-medium) 50%, var(--bg-dark) 100%); /* Soft layered gradient */
  }

  /* Center content: keep titles, but scale better for mobile */
  .center-content {
    position: relative !important; /* Use normal flow on mobile */
    top: auto !important; /* Reset absolute positioning */
    left: auto !important; /* Reset absolute positioning */
    transform: none !important; /* Remove transform centering */
    text-align: center; /* Keep centered text */
    margin-top: 1rem; /* Gentle spacing at top */
    pointer-events: none; /* Let buttons be clickable below */
  }

  /* Title/subtitle scale for mobile hero */
  .title { 
    font-size: 2rem !important; /* Comfortable mobile size */
    line-height: 1.15; /* Tight but readable */
  }
  .subtitle { 
    font-size: 1rem !important; /* Complementary size */
    letter-spacing: 0.12em; /* Keep the aesthetic spacing */
    margin-top: -0.25rem; /* Tighten stack */
  }

  /* Mobile action buttons container */
  .mobile-cta {
    /* New container introduced only on mobile (we'll inject via JS) */
    display: grid; /* Grid layout for even buttons */
    grid-template-columns: 1fr; /* Single column on narrow screens */
    gap: 0.75rem; /* Space between buttons */
    width: 100%; /* Full width within page padding */
    max-width: 520px; /* Cap width for balance */
    margin: 0 auto; /* Center horizontally */
    z-index: 5; /* Above background effects */
    pointer-events: auto; /* Clickable */
  }

  /* Mobile glass buttons */
  .mobile-cta .cta-btn {
    display: block; /* Anchor as block */
    width: 100%; /* Full width of grid cell */
    padding: 0.85rem 1rem; /* Touch-friendly size */
    text-align: center; /* Center text */
    color: var(--primary-purple); /* Brand color */
    text-decoration: none; /* No underline */
    font-family: 'Oswald', Arial, sans-serif; /* Body font */
    font-weight: 700; /* Bold for emphasis */
    letter-spacing: 0.08em; /* Aesthetic spacing */
    border-radius: 14px; /* Rounded corners */
    background: rgba(255,255,255,0.55); /* Glassy white */
    border: 1px solid rgba(191,170,255,0.35); /* Purple-tinted border */
    box-shadow: 0 10px 30px rgba(124,95,211,0.15), 
                inset 0 1px 1px rgba(255,255,255,0.6); /* Soft depth */
    backdrop-filter: blur(10px); /* Real glass feel */
    transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease; /* Smooth interactions */
  }

  /* Button labels for clarity */
  .mobile-cta .cta-btn .label {
    font-size: 1.05rem; /* Primary size */
    display: block; /* Own line */
  }
  .mobile-cta .cta-btn .sub {
    font-size: 0.8rem; /* Supporting hint */
    color: var(--light-purple); /* Lighter tint */
    opacity: 0.9; /* Softer appearance */
    display: block; /* Next line */
    margin-top: 2px; /* Tight spacing */
  }

  /* Hover/active states */
  .mobile-cta .cta-btn:hover {
    transform: translateY(-2px); /* Lift slightly */
    box-shadow: 0 14px 36px rgba(124,95,211,0.22), 
                inset 0 1px 2px rgba(255,255,255,0.7); /* Stronger depth */
    background: rgba(255,255,255,0.7); /* Slightly brighter glass */
  }

  .mobile-cta .cta-btn:active {
    transform: translateY(0); /* Pressed */
    box-shadow: 0 8px 20px rgba(124,95,211,0.18); /* Softer shadow */
  }
}

/* Optional: Hide snow entirely on very small screens for ultra-clean look */
@media (max-width: 480px) {
  .snow-container { 
    display: none !important; /* Remove snow on very small mobile screens */
  }
}