/* styles.css */
:root {
  --black:      #000;
  --silver:     #C0C0C0;
  --dodgerblue: #1E90FF;
  --lime:       #32CD32;
  --tomato:     #FF6347;
  --glass-bg:   rgba(255,255,255,0.15);
  --glass-brd:  rgba(255,255,255,0.4);
}

/* Glassy navbar & controls */
.glass-nav {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--glass-brd);
}
.glass-nav .nav-link {
  color: grey;
  transition: color .3s;
}
.glass-nav .nav-link:hover {
  color: var(--dodgerblue);
}

/* Hero overrides */
#hero {
  position: relative;
  background-size: cover;
  background-position: center;
  transition: background-image 1s ease-in-out;
}
#hero .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

/* …your theme & glass-nav… */

/* Gallery items & keyframes */
.gallery-item {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  filter: blur(8px);
  opacity: 0;
}
.gallery-item img {
  max-width: 200px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  display: block;
}
@keyframes floatIn {
  0%   { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.8) blur(8px); }
  50%  { opacity: 1; transform: translate(0,0) scale(1) blur(0); }
  80%  { opacity: 1; transform: translate(0,0) scale(1) blur(0); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.8) blur(8px); }
}

/* —— Grid placeholders —— */
#grid-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.grid-item {
  position: relative;
  flex: 0 0 auto;
  width: 200px;
  transition: flex .3s, width .3s;
}
/* ——————————————————————
   Grid image blur + fade
———————————————————————————————— */
.grid-item img {
  width: 100%;
  filter: blur(8px);
  opacity: 0;
  cursor: pointer;
  transition: filter 2s ease-out, opacity 0.5s ease-in;
}
/* when .revealed is added, un-blur & fade in */
.grid-item.revealed img {
  filter: blur(0);
  opacity: 1;
}


/* —— Enlarged state —— */
.grid-item.enlarged {
  flex: 0 0 auto;
  width: 600px;
  max-height: 500px;
  z-index: 1000;
}
.grid-item.enlarged img {
  /* auto height to respect aspect ratio */
  width: 100%;
  height: auto;
}
.grid-item .close-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: none;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
}
.grid-item.enlarged .close-btn {
  display: block;
}

/* ————————————————————————————
   Enlarged & centered in viewport
———————————————————————————————— */
.grid-item.enlarged {
  position: fixed !important;       /* remove from grid flow */
  top: 50% !important;              /* center vertically */
  left: 50% !important;             /* center horizontally */
  transform: translate(-50%, -50%) !important;
  width: 600px !important;          /* your expanded size */
  max-height: 500px !important;     /* cap height */
  z-index: 1000;                    /* above everything */
}

/* ensure the enlarged image is fully sharp */
.grid-item.enlarged img {
  filter: blur(0) !important;
  opacity: 1    !important;
}

/* ————————————————————————————
   Blur only the *other* images
———————————————————————————————— */
/* before, you had img:not(.enlarged) — that never matched
   the <img> element. This targets grid-items that aren’t
   enlarged, then blurs their <img>. */
#grid-area.blur-others .grid-item:not(.enlarged) img {
  filter: blur(8px);
  opacity: 0.6;
}

/* --- Simple Blur-to-Clear Reveal --- */
.feature-img2 {
  opacity: 0;
  filter: blur(10px);
  transform: scale(1.03);
  transition:
    opacity 1.8s ease-out,
    filter 1.8s ease-out,
    transform 1.8s ease-out;
}

/* Add .revealed when ready */
.feature-img2.revealed {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

/* ————————————————————————————
   Feature‐image pixel reveal
———————————————————————————————— */

/* wrapper around the img for positioning */
.feature-img-wrapper {
  position: relative;
  display: inline-block;
}

/* canvas overlay sits exactly on top */
.feature-img-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; /* clicks go through to image */
}

/* ————————————————————————————
   Feature‐image blur removal
———————————————————————————————— */

.feature-img {
  filter: blur(8px);                   /* start blurred */
  transition: filter 5s ease-out;     /* animate to sharp over 5s */
}

/* animate mask → none */
@keyframes spiralReveal {
  to {
    mask-image: none;
  }
}

/* animate blur → 0 */
@keyframes unblur {
  to {
    filter: blur(0);
  }
}

/* ————————————————————————————
   Responsive gallery sizing
———————————————————————————————— */

/* Desktop defaults (already in place) */
.grid-item {
  flex: 0 0 auto;
  width: 200px;
}
.grid-item.enlarged {
  width: 600px;
  max-height: 500px;
}

/* Mobile overrides */
@media (max-width: 768px) {
  /* Make placeholders 35vw wide */
  .grid-item {
    flex: 0 0 35vw;
    width: 35vw;
  }

  /* When enlarged, cap at 90vw and 90vh so you can always reach the close button */
  .grid-item.enlarged {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90vw !important;
    max-width: 90vw !important;
    max-height: 90vh !important;
  }
}

/* Photo details shown under an enlarged image */
#photoDetails {
  margin-top: 0.5rem;
  color: var(--silver);
  text-align: center;
  font-size: 1rem;
  /* optional: a subtle background or padding
  background: rgba(0,0,0,0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  */
}

/* Logo sizing in the navbar */
.brand-logo {
  height: 40px;    /* or whatever fits your design */
  width: auto;     /* preserve aspect ratio */
  display: block;  /* remove inline-img whitespace */
}

/* Center the brand vertically (if needed) */
.glass-nav .navbar-brand,
.glass-nav .navbar-nav .nav-link {
  align-items: center;
  display: flex;
}

#hero .btn-get-started-2 {
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 4px;
  transition: 0.5s;
  border: 2px solid #fff;
  color: #fff;
  text-decoration: none;
}
#hero .btn-get-started-2:hover {
  border-color: white;
  background: #00a8ff;
}

.btn-get-started-3 {
  background: grey;
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 4px;
  transition: 0.5s;
  border: 2px solid #fff;
  color: #fff;
  text-decoration: none;
}
.btn-get-started-3:hover {
  border-color: white;
  background: #00a8ff;
}

/* ----------------------------------------
   Brand Logo Shrink Animation
----------------------------------------- */

/* 1️⃣  Base state (large, pre-shrink) */
.brand-logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  object-fit: contain;
  transform-origin: top left;
  animation: logoShrinkDesktop 2s ease forwards;
}

/* 2️⃣  Desktop animation keyframes */
@keyframes logoShrinkDesktop {
  0% {
    width: 200px;
    height: 200px;
  }
  100% {
    width: 5vw;
    height: 5vw;
  }
}

.subTitle { font-size: 2rem;}

/* 3️⃣  Mobile variant */
@media (max-width: 768px) {
  .brand-logo {
    animation: logoShrinkMobile 2s ease forwards;
  }
  @keyframes logoShrinkMobile {
    0% {
      width: 200px;
      height: 200px;
    }
    100% {
      width: 20vw;
      height: 20vw;
    }
  }
  .subTitle { font-size: 1.25rem;}
}

/* Force non-Bootstrap modals (like welcomeModal) to show when .open is applied */
.modal.open {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.5); /* optional backdrop */
}

/* --- Fix stacked TTS control buttons --- */
#ttsModal .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}

/* Override Bootstrap's .row > * { width:100% } */
#ttsModal .row > * {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 0 !important; /* removes grid gutters */
}

/* Optional: preserve any forced line breaks */
#ttsModal .row > .spacer {
  flex-basis: 100% !important;
  height: 0;
}

/* --- Playful Pop-In Animation for Welcome Modal --- */
@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.9); }
  60%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

#welcomeModal.pop-in .card {
  animation: popIn 0.8s cubic-bezier(.25,1.25,.5,1) forwards;
  pointer-events: auto !important; /* make sure buttons remain clickable */
}