/* ══ SIREN STEMS · styles.css ══ */

html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
::selection { background: #8DC63F; color: white; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #1F3A0E; }
::-webkit-scrollbar-thumb { background: #8DC63F; border-radius: 2px; }

/* ── NAV ── */
#navbar { background: rgba(250,253,245,0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(31,58,14,0.07); }
#navbar.top { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#navbar.top .nav-link { color: #1F3A0E; }
#navbar.top .menu-bar { background: #1F3A0E; }

/* ── MARQUEE ── */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: inline-block; animation: marquee 34s linear infinite; }

/* ── FLOAT ── */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.animate-float { animation: float 4.5s ease-in-out infinite; }

/* ── REVEAL ── */
.reveal, .ri {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.reveal.in, .ri.in { opacity: 1; transform: translateY(0); }
.ri:nth-child(2) { transition-delay: 0.1s; }
.ri:nth-child(3) { transition-delay: 0.2s; }
.ri:nth-child(4) { transition-delay: 0.3s; }
.ri:nth-child(5) { transition-delay: 0.4s; }

/* ── SERVICES ── */
.service-row { transition: background 0.2s; }
.service-row:hover { background: rgba(255,255,255,0.025); }
.service-row:hover .service-name,
.service-row.open  .service-name { color: #8DC63F; }
.service-row:hover .service-sub  { color: rgba(141,198,63,0.5); }
.service-row.open  .service-plus { transform: rotate(45deg); color: #8DC63F; }
.service-plus { display: inline-block; transition: transform 0.3s, color 0.2s; }

/* ── GALLERY ── */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 280px 280px 280px;
  gap: 14px;
}
.g-tall { grid-row: span 2; }
.g-sq   { aspect-ratio: unset; }
.g-photo { transition: transform 0.65s cubic-bezier(0.16,1,0.3,1); display: block; }
.gallery-grid > div:hover .g-photo { transform: scale(1.05); }

@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .g-tall { grid-row: span 1; aspect-ratio: 1; }
  .g-sq   { aspect-ratio: 1; }
}
@media (max-width: 540px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
}

/* ── ZODIAC ── */
.z-tile {
  aspect-ratio: 1; border-radius: 10px;
  border: 1.5px solid rgba(31,58,14,0.18);
  background: rgba(255,255,255,0.28);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; padding: 6px 4px;
  font-size: 1.2rem; color: #1F3A0E;
  cursor: pointer; transition: all 0.2s;
}
.z-tile span { font-family: 'DM Sans',sans-serif; font-size: 0.38rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.45; }
.z-tile:hover { background: #1F3A0E; border-color: #1F3A0E; color: #FAFDF5; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(31,58,14,0.3); }
.z-tile:hover span { opacity: 0.55; }

/* ── FORM ── */
.form-label { display: block; font-family: 'DM Sans',sans-serif; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(250,253,245,0.35); margin-bottom: 8px; }
.form-input { width: 100%; background: rgba(255,255,255,0.07); border: 1px solid rgba(250,253,245,0.12); border-radius: 14px; padding: 13px 16px; font-family: 'DM Sans',sans-serif; font-size: 0.875rem; color: #FAFDF5; outline: none; appearance: none; -webkit-appearance: none; transition: border-color 0.2s; }
.form-input::placeholder { color: rgba(250,253,245,0.22); }
.form-input:focus { border-color: rgba(174,234,228,0.5); }
.form-input option { color: #1F3A0E; background: white; }

/* ── MOBILE MENU ── */
#mobile-menu.open { transform: translateY(0); }
#menu-btn.open .menu-bar:first-child { transform: rotate(45deg) translateY(3px); }
#menu-btn.open .menu-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
#menu-btn.open .menu-bar:last-child  { transform: rotate(-45deg) translateY(-3px); }