:root {
  --background-dark: #2d3548;
  --text-light: rgba(255, 255, 255, 0.6);
  --text-lighter: rgba(255, 255, 255, 0.9);
  --spacing-s: 0.5rem; 
  --spacing-m: 1rem;   
  --spacing-l: 1.5rem; 
  --spacing-xl: 2rem;  
  --spacing-xxl: 4rem; 
  --width-container: 100%; 
  --width-container-about: 60%;

  --glow-hue: 222deg;
  --shadow-hue: 180deg;
  --spring-duration: 1.33s;
}

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

html {
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
}

body {
  height: 100%;
}

/* Hero / Gallery Section */
.index-hero-section {
  align-items: flex-start;
  background: linear-gradient(135deg, #f06, #ffba00);
  display: flex;
  min-height: 100vh;
  justify-content: left;
  padding: var(--spacing-xxl) var(--spacing-xxl);
}

@media (min-width: 540px) {
  .index-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  .index-card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.index-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-column-gap: var(--spacing-xl);
  grid-row-gap: var(--spacing-xl);
  max-width: var(--width-container);
  width: 100%;
}

/* Base .index-card: ratio, etc. */
.index-card {
  list-style: none;
  position: relative;
}
/* Aspect ratio trick => 1 : 1.5 ratio */
.index-card:before {
  content: '';
  display: block;
  padding-bottom: 150%;
  width: 100%;
}

/* GALLERY CARDS background + hover effect */
.index-card__background {
  background-size: cover;
  background-position: center;
  border-radius: var(--spacing-l);
  bottom: 0;
  filter: brightness(0.75) saturate(1.2) contrast(0.85);
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: center;
  transform: scale(1) translateZ(0);
  transition: filter 200ms linear, transform 200ms linear;
}
.index-card-grid:hover > .index-card:hover .index-card__background {
  transform: scale(1.05) translateZ(0);
  filter: none;
}
.index-card-grid:hover > .index-card:not(:hover) .index-card__background {
  filter: brightness(0.5) saturate(0) contrast(1.2) blur(5px);
}

/* Gallery card content */
.index-card__content {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--spacing-l);
}
.index-card__heading {
  color: var(--text-lighter);
  font-size: 1.9rem;
  text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
  line-height: 1.4;
  word-spacing: 100vw;
}

/* Responsive */
@media (max-width: 1200px) {
  .index-hero-section {
    padding: var(--spacing-xl) var(--spacing-m);
  }
  .index-card__heading {
    font-size: 1.7rem;
  }
}
@media (max-width: 768px) {
  .index-hero-section {
    padding: var(--spacing-l) var(--spacing-s);
  }
  .index-card__heading {
    font-size: 1.5rem;
  }
}
@media (max-width: 480px) {
  .index-hero-section {
    padding: var(--spacing-m) var(--spacing-s);
  }
  .index-card__heading {
    font-size: 1.2rem;
  }
}

/* About Me Section */
.about-me-section {
  padding: var(--spacing-xxl) var(--spacing-m);
  background: #ffdcb2;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}
.about-me-content {
  max-width: var(--width-container-about);
  margin: 0 auto;
}
.about-me-content h2 {
  font-size: 2rem;
  color: white;
  margin-bottom: var(--spacing-m);
  position: relative;
  display: inline-block;
  text-shadow: none;
}
.about-me-content h2 .hello-text {
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}
.about-me-content .wave {
  display: inline-block;
  animation: wave-animation 2s infinite;
  transform-origin: 70% 70%;
}
@keyframes wave-animation {
  0%, 100% { transform: rotate(0deg); }
  10%, 30%, 50%, 70%, 90% { transform: rotate(-10deg); }
  20%, 40%, 60%, 80% { transform: rotate(12deg); }
}
.about-me-content p {
  font-size: 1rem;
  color: var(--background-dark);
  margin-bottom: var(--spacing-l);
  line-height: 1.6;
}

/* Instagram link (unchanged from your code) */
.instagram-link {
  font-size: 1rem;
  color: white;
  background: linear-gradient(45deg, #833ab4, #fd1d1d, #fcb045);
  padding: 0.5rem 1.5rem;
  border-radius: 0.75rem;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  display: inline-block;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 3px 1px hsl(var(--glow-hue) 50% 20% / 50%),
              inset 0 -10px 20px -10px hsla(var(--shadow-hue),10%,90%,95%);
}
.instagram-link .shimmer {
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: rgba(255,255,255,0.5);
  transform: skewX(-20deg);
  transition: left 0.7s ease;
}
.instagram-link:hover .shimmer {
  left: 125%;
}
.instagram-link:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px -2px hsl(var(--glow-hue) 50% 20% / 50%), inset 0 0 0 transparent;
}
.instagram-link:active {
  scale: 1.1;
  transition-duration: calc(var(--spring-duration)*0.5);
}
.instagram-link .shimmer::before,
.instagram-link .shimmer::after {
  transition: all 0.5s ease;
  opacity: 0;
  content: "";
  border-radius: inherit;
  position: absolute;
  mix-blend-mode: color;
  inset: 40px;
  pointer-events: none;
}
.instagram-link .shimmer::before {
  box-shadow: 0 0 3px 2px hsl(var(--glow-hue) 20% 95%),
              0 0 7px 4px hsl(var(--glow-hue) 20% 80%),
              0 0 13px 4px hsl(var(--glow-hue) 50% 70%),
              0 0 25px 5px hsl(var(--glow-hue) 100% 70%);
  z-index: -1;
}
.instagram-link .shimmer::after {
  box-shadow: inset 0 0 0 1px hsl(var(--glow-hue) 70% 95%),
              inset 0 0 2px 1px hsl(var(--glow-hue) 100% 80%),
              inset 0 0 5px 2px hsl(var(--glow-hue) 100% 70%);
  z-index: 2;
}
@keyframes shimmer {
  0%   { --shimmer: 0deg; }
  100% { --shimmer: 360deg; }
}
@keyframes shine {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  55%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes text {
  0%   { background-position: 100% center; }
  100% { background-position: -100% center; }
}
.instagram-link .text {
  color: transparent;
  background-clip: text;
  background-color: var(--bg);
  background-image: linear-gradient(
    120deg,
    transparent,
    hsla(var(--glow-hue),100%,80%,0.66) 40%,
    hsla(var(--glow-hue),100%,90%,.9) 50%,
    transparent 52%
  );
  background-repeat: no-repeat;
  background-size: 300% 300%;
  background-position: center 200%;
}
.instagram-link:hover .text,
.instagram-link.active .text {
  animation: text .66s ease-in 1 both;
}
.instagram-link:hover .shimmer::before,
.instagram-link:hover .shimmer::after,
.instagram-link.active .shimmer::before,
.instagram-link.active .shimmer::after {
  opacity: 1;
  animation: shine 1.2s ease-in 1 forwards;
}
/* =====================================================
   MAGIC CARD: Outer + Inner, swirl in the padding gap
===================================================== */

/* The parent anchor: inherits .index-card ratio from .index-card:before. */
.ring-card {
  position: relative; 
  overflow: visible; 
  z-index: 9999;  
  text-decoration: none;
  cursor: pointer;
}

/* Hide any normal gallery background if present. */
/* .ring-card .index-card__background {
  display: none !important;
} */

/* Outer card: 
   1) Absolutely fill the ratio space. 
   2) Have a bit of padding = “thickness” of the glowing ring. 
*/
.ring-card .outer-card {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;

  /* Rounded corners to match your normal gallery card style. */
  border-radius: var(--spacing-l);

  /* The ring’s thickness. Increase or decrease for bigger/smaller ring. */
  padding: 5px; 
  box-sizing: border-box; /* so padding is included in the total size */

  /* Dark background or transparent—your choice. 
     If you want the ring only, use 'background: transparent;'
     If you want an outer dark rectangle, do #191c29.
  */
  background: transparent; 

  /* We'll put the swirling gradient in ::before. */
  overflow: hidden; /* clip any swirl overflow at the corners */
}

/* The swirling gradient in the outer-card’s padding area. */
.ring-card .outer-card::before {
  content: "";
  position: absolute;
  /*inset: 0;         /* covers the content box inside the padding */
  border-radius: inherit;
  z-index: 0;

  top: -10%;
  left: -50%;
  right: -50%;
  bottom: -10%;
  
  /* Multi-color gradient rotates. */
  background-image: linear-gradient(
    0deg,
    #5ddcff,
    #3c67e3 43%,
    #4e00c2
  );
  animation: swirlPadding 2s linear infinite;
}

/* The inner card: occupies everything that’s left inside .outer-card’s padding. */
.ring-card .inner-card {
  width: 100%;
  height: 100%;
  border-radius: inherit;

  /* Dark interior color (like #191c29). */
  /* background-color: #fff; */
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 119, 255, 0.3) 0,
    rgba(0, 119, 255, 0.3) 10px,
    rgba(255, 204, 0, 0.4) 10px,
    rgba(255, 204, 0, 0.4) 20px
  );
  animation: glowEffect 3s ease-in-out infinite alternate;
  background-size: 300% 300%;
  overflow: hidden;

  /* Center the text. */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-family: 'Montserrat', sans-serif;
  font-size: 44px;
  font-weight: 500;
   /*color: #0044cc;*/
  /*color: #fff200;*/

  /* If you want the text invisible until hover: */
  /* color: rgba(88, 199, 250, 0); */
  transition: color 0.8s ease;
  position: relative; /* ensures z-index layering is consistent */
  z-index: 1;         /* so it sits above the swirl */
}

.ring-card:hover .inner-card {
  color: #0044cc;
  transition: 0.8s ease;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8);
  box-shadow: 0px 0px 20px 10px rgba(255, 255, 255, 0.4), inset 0 0 30px rgba(0, 119, 255, 0.3);
}

.ring-card .inner-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.1) 25%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.1) 75%
  );
  opacity: 0.2;
  animation: shimmerFlow 5s linear infinite;
  z-index: 0;
  border-radius: inherit;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Hover effect with transform, color change, and glowing animation */
.ring-card:hover .inner-card {
  transform: scale(1.1); /* Slightly enlarge the text */
  box-shadow: 0px 0px 25px rgba(255, 255, 255, 0.4), inset 0 0 30px rgba(0, 119, 255, 0.5);
}

/* Background animation keyframes */
@keyframes glowEffect {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* Rotate the gradient inside the padding area. */
@keyframes swirlPadding {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Recap Text Styling */
.recap-text {
  /* Font settings */
  font-family: 'Poppins', sans-serif; /* Modern and clean font */
  font-size: 6rem; /* Large font size */
  font-weight: 700; /* Bold for emphasis */
  text-transform: uppercase; /* Make text uppercase */
  letter-spacing: 0.05em; /* Subtle spacing */

  /* Default text color and border */
  color: #ffffff; /* White inner content */
  -webkit-text-stroke: 2px #000000; /* Black border */

  /* No shadow or zoom in the default state */
  text-shadow: none;
  transform: scale(1); /* Default scale to ensure smooth reset */

  /* Smooth transition for hover-on and hover-off */
  transition:
          color 0.5s ease,
          -webkit-text-stroke 0.5s ease,
          text-shadow 0.5s ease,
          transform 0.5s ease;
  text-align: center;
}

/* Hover Effect for Recap */
.recap-text:hover {
  /* Change stroke and inner content on hover */
  -webkit-text-stroke: 2px #ffffff; /* White border */

  /* Add glowing effect */
  text-shadow: 0 0 15px rgba(255, 164, 0, 0.8),
  0 0 30px rgba(255, 164, 0, 0.6);

  /* Slightly enlarge the text */
  transform: scale(1.5);
}