/*--------------------------------------------------------------
# Northrhythm Theme — "Studio Meets Gallery"
# Layers on top of main.css. Reuses the template's existing CSS
# custom properties so buttons, links, nav, etc. reskin for free.
# Loaded on index.php only for now — extend to other pages once approved.
--------------------------------------------------------------*/

:root {
  /* No color overrides here — every color below comes from main.css's own
     --background-color / --default-color / --heading-color / --accent-color /
     --surface-color tokens, so the site's existing black/white/near-black
     scheme is used as-is. Only typography is added. */
  --default-font: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --heading-font: "Fraunces", "Playfair Display", serif;
  --nav-font: "Inter", "Poppins", sans-serif;

  /* Derived helper — a translucent version of the theme's own accent color,
     used for hairlines. Not a new color, just a tint of --accent-color. */
  --frame-line-soft: color-mix(in srgb, var(--accent-color), transparent 70%);
}

body {
  font-feature-settings: "ss01" on;
}

::selection {
  background: var(--accent-color);
  color: var(--contrast-color);
}

:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}

/* Eyebrow labels — museum-placard tags. Used to encode real categories
   (SOUND / VISUAL / ACCESS), not decorative numbering. */
.eyebrow-label {
  display: inline-block;
  font-family: var(--nav-font);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-color);
  margin-bottom: 0.6rem;
}

/*--------------------------------------------------------------
# Framed Card — the signature element
# Open corner brackets, like a gallery placard or frame corner.
--------------------------------------------------------------*/
.framed-card {
  position: relative;
  background: var(--surface-color);
  padding: 2.25rem 1.85rem;
  height: 100%;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.framed-card::before,
.framed-card::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--accent-color);
  transition: width 0.3s ease, height 0.3s ease;
}

.framed-card::before {
  top: 12px;
  left: 12px;
  border-right: none;
  border-bottom: none;
}

.framed-card::after {
  bottom: 12px;
  right: 12px;
  border-left: none;
  border-top: none;
}

.framed-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.framed-card:hover::before,
.framed-card:hover::after {
  width: 30px;
  height: 30px;
}

/*--------------------------------------------------------------
# Hero — "The Listening Room Wall"
# Carries the .dark-background class in the markup, so background,
# text, and accent colors all come from main.css's own dark-mode tokens.
--------------------------------------------------------------*/
.hero-gallery {
  position: relative;
  background-color: var(--background-color);
  padding: 5rem 0 4rem;
  overflow: hidden;
}

.hero-gallery__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.hero-gallery__frame {
  position: relative;
  aspect-ratio: 4 / 5;
}

.hero-gallery__frame::before,
.hero-gallery__frame::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  border: 3px solid var(--accent-color);
  z-index: 2;
}

.hero-gallery__frame::before { top: -10px; left: -10px; border-right: none; border-bottom: none; }
.hero-gallery__frame::after { bottom: -10px; right: -10px; border-left: none; border-top: none; }

.hero-gallery__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.hero-gallery__slide.is-active {
  opacity: 1;
}

.hero-gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  animation: hero-ken-burns 9s ease-in-out infinite alternate;
}

@keyframes hero-ken-burns {
  from { transform: scale(1); }
  to { transform: scale(1.09); }
}

.hero-gallery__waveform {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 26px;
  margin-bottom: 1.4rem;
}

.hero-gallery__waveform span {
  display: block;
  width: 3px;
  background: var(--accent-color);
  border-radius: 2px;
  animation: hero-wave 1.2s ease-in-out infinite;
}

.hero-gallery__waveform span:nth-child(1) { height: 40%; animation-delay: -1.1s; }
.hero-gallery__waveform span:nth-child(2) { height: 70%; animation-delay: -0.9s; }
.hero-gallery__waveform span:nth-child(3) { height: 100%; animation-delay: -0.7s; }
.hero-gallery__waveform span:nth-child(4) { height: 55%; animation-delay: -0.5s; }
.hero-gallery__waveform span:nth-child(5) { height: 85%; animation-delay: -0.3s; }
.hero-gallery__waveform span:nth-child(6) { height: 45%; animation-delay: -1.0s; }
.hero-gallery__waveform span:nth-child(7) { height: 75%; animation-delay: -0.6s; }
.hero-gallery__waveform span:nth-child(8) { height: 35%; animation-delay: -0.2s; }

@keyframes hero-wave {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}

.hero-gallery__caption {
  color: var(--default-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-gallery__captions-stack {
  position: relative;
  min-height: 260px;
}

.hero-gallery__caption-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease;
}

.hero-gallery__caption-item.is-active {
  opacity: 1;
  visibility: visible;
  position: relative;
}

.hero-gallery__caption h2 {
  font-family: var(--heading-font);
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  color: var(--contrast-color);
  line-height: 1.1;
  margin: 0.4rem 0 1.2rem;
}

.hero-gallery__caption p {
  font-size: 1.05rem;
  max-width: 46ch;
  color: color-mix(in srgb, var(--default-color), transparent 12%);
  margin-bottom: 1.8rem;
}

.btn-frame {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.7rem;
  border: 1px solid var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--nav-font);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}

.btn-frame:hover {
  background: var(--accent-color);
  color: var(--background-color);
}

.hero-gallery__dots {
  display: flex;
  gap: 0.6rem;
  margin-top: 2rem;
}

.hero-gallery__dots button {
  width: 34px;
  height: 3px;
  border: none;
  background: color-mix(in srgb, var(--accent-color), transparent 60%);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease;
}

.hero-gallery__dots button.is-active {
  background: var(--accent-color);
}

@media (max-width: 991.98px) {
  .hero-gallery__inner {
    grid-template-columns: 1fr;
  }
  .hero-gallery__frame {
    aspect-ratio: 16 / 10;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
#about .content h2 {
  font-family: var(--heading-font);
}

#about .content .lead {
  color: var(--accent-color);
  font-weight: 500;
}

#about .image-wrapper {
  position: relative;
}

#about .image-wrapper::before,
#about .image-wrapper::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  border: 3px solid var(--accent-color);
  z-index: 1;
}

#about .image-wrapper::before { top: -12px; left: -12px; border-right: none; border-bottom: none; }
#about .image-wrapper::after { bottom: -12px; right: -12px; border-left: none; border-top: none; }

/*--------------------------------------------------------------
# Services — grouped as SOUND / VISUAL / ACCESS
--------------------------------------------------------------*/
.services .service-item {
  background: transparent;
}

.services .service-icon {
  color: var(--accent-color);
  font-size: 1.6rem;
  margin-bottom: 0.8rem;
}

.services h3 {
  font-family: var(--heading-font);
  font-size: 1.25rem;
}

.services .service-link {
  color: var(--accent-color);
  font-weight: 600;
  font-size: 0.9rem;
}

/*--------------------------------------------------------------
# Call To Action — "Limited Release" panel
--------------------------------------------------------------*/
.call-to-action.section {
  background: var(--background-color);
}

.call-to-action .offer-badge {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  border: 1px solid var(--accent-color);
  padding: 0.4rem 1rem;
  margin-bottom: 1.4rem;
}

.call-to-action .limited-time {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
  color: var(--accent-color);
}

.call-to-action .offer-text {
  color: var(--contrast-color);
  font-weight: 700;
}

.call-to-action h2 {
  font-family: var(--heading-font);
  color: var(--contrast-color);
}

.call-to-action .countdown h3 {
  font-family: var(--heading-font);
  color: var(--accent-color);
  font-size: 2.4rem;
}

.call-to-action .countdown h4 {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.call-to-action .btn-shop-now {
  background: var(--accent-color);
  color: var(--background-color);
  padding: 0.85rem 1.8rem;
  font-weight: 700;
  margin-right: 0.75rem;
  display: inline-block;
}

.call-to-action .btn-view-deals {
  border: 1px solid var(--frame-line-soft);
  color: var(--contrast-color);
  padding: 0.85rem 1.8rem;
  display: inline-block;
}

/*--------------------------------------------------------------
# Contact — retokenized to match the theme instead of hardcoded hex
--------------------------------------------------------------*/
.contact-section {
  background: var(--background-color);
  color: var(--default-color);
}

.contact-card,
.contact-form-card {
  background: var(--surface-color);
  border-radius: 0;
  position: relative;
  padding: 2rem;
  box-shadow: none;
}

.contact-card::before,
.contact-form-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--frame-line-soft);
  pointer-events: none;
}

.contact-card h5,
.contact-form-card h4 {
  font-family: var(--heading-font);
  color: var(--contrast-color);
  margin-top: 15px;
}

.contact-card p,
.contact-card small,
.contact-form-card p {
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.icon-box {
  background: var(--frame-line-soft);
  border-radius: 0;
}

.icon-box i {
  color: var(--accent-color);
}

.contact-link {
  color: var(--accent-color);
}

.contact-form-card input,
.contact-form-card textarea {
  background: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 60%);
  color: var(--contrast-color);
  border-radius: 0;
}

.contact-form-card input:focus,
.contact-form-card textarea:focus {
  border-color: var(--accent-color);
}

.contact-form-card button {
  background: var(--accent-color);
  color: var(--background-color);
  border-radius: 0;
  font-weight: 700;
}

.contact-form-card button:hover {
  background: color-mix(in srgb, var(--accent-color), #000 12%);
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer.dark-background {
  background: var(--background-color);
}

.footer .sitename {
  font-family: var(--heading-font);
  color: var(--contrast-color);
}

.footer h4,
.footer h5 {
  color: var(--accent-color);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.footer .footer-links a,
.footer .contact-item span {
  color: color-mix(in srgb, var(--default-color), transparent 10%);
}

.footer .footer-links a:hover {
  color: var(--accent-color);
}

.footer .social-icons a {
  border: 1px solid var(--frame-line-soft);
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Music toggle — small refinement to the existing .music-toggle rule
--------------------------------------------------------------*/
.music-toggle {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.music-toggle[aria-pressed="true"] {
  background: #fff;
  color: #000;
}

/*--------------------------------------------------------------
# Motion & accessibility floor
--------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  .hero-gallery__slide {
    transition: none;
  }
  .hero-gallery__slide img {
    animation: none;
  }
  .hero-gallery__waveform span {
    animation: none;
    transform: scaleY(0.7);
  }
  .framed-card,
  .framed-card::before,
  .framed-card::after {
    transition: none;
  }
}

@media (max-width: 575.98px) {
  .hero-gallery {
    padding: 3.5rem 0 2.5rem;
  }
  .framed-card {
    padding: 1.75rem 1.4rem;
  }
}