/* ============================================
   QuietPrincess — Base Styles & Components
   ============================================ */

/* --- Typography --- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
}

h1 {
  font-size: var(--font-size-h1);
  letter-spacing: 0.02em;
  margin-bottom: var(--spacing-sm);
}

h2 {
  font-size: var(--font-size-h2);
  margin-bottom: var(--spacing-sm);
}

h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  margin-bottom: var(--spacing-xs);
}

h4 {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  margin-bottom: var(--spacing-xs);
}

p {
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-secondary);
}

.text-small {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* --- Links --- */

a {
  transition: color var(--transition-fast);
}

main a,
.content a {
  color: var(--color-accent);
}

main a:hover,
.content a:hover {
  text-decoration: underline;
}

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

/* --- Skip to Content (Accessibility) --- */

.skip-to-content {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-to-content:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: 0.75rem 1.5rem;
  background: var(--color-accent);
  color: var(--color-bg-primary);
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-body);
  text-decoration: none;
  z-index: 9999;
  outline: none;
}

/* --- Layout --- */

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-wrapper main {
  flex: 1;
}

.section {
  padding: var(--spacing-lg) 0;
}

.section--alt {
  background: var(--color-bg-secondary);
}

/* --- Buttons --- */

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-small);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-base);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}

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

.btn-primary {
  background: var(--color-accent);
  color: var(--color-bg-primary);
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  box-shadow: var(--shadow-glow);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}

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

/* --- Navigation --- */

.site-header {
  background: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  transition: height 0.3s ease;
}

.site-header.scrolled {
  background: rgba(29, 46, 40, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.site-header.scrolled .container {
  height: calc(var(--header-height) - 8px);
}

.nav-brand {
  font-family: 'Sacramento', cursive;
  font-size: 2rem;
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
}

.nav-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.nav-links a {
  color: var(--color-text-secondary);
  text-transform: uppercase;
  font-size: var(--font-size-small);
  letter-spacing: 0.1em;
  transition: color var(--transition-fast);
}

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

.nav-links a.active {
  color: var(--color-accent);
}

.nav-toggle {
  display: none;
}

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

/* --- Footer --- */

.site-footer {
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-md) 0;
  text-align: center;
}

.site-footer p {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.site-footer a {
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

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

/* --- Cards --- */

.card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition-base);
}

.card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 4px 30px rgba(180, 142, 146, 0.2);
  transform: translateY(-3px);
}

.card-body {
  padding: var(--spacing-sm);
}

.card-image {
  background: linear-gradient(135deg, var(--color-bg-tertiary), var(--color-bg-primary));
  aspect-ratio: 3 / 4;
}

/* --- Form Components --- */

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 0.75rem var(--spacing-sm);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  transition: var(--transition-base);
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 2px var(--color-accent-subtle);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
}

/* --- Keyframe Animations --- */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes kenBurns {
  0%   { transform: scale(1)    translate(0, 0); }
  50%  { transform: scale(1.08) translate(-1%, -1%); }
  100% { transform: scale(1)    translate(0, 0); }
}

@keyframes floatUp {
  0%   { transform: translateY(0) rotate(0deg);   opacity: 0; }
  15%  { opacity: 0.7; }
  85%  { opacity: 0.7; }
  100% { transform: translateY(-100vh) rotate(40deg); opacity: 0; }
}

@keyframes shimmer {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.8; }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(180, 142, 146, 0); }
  50%      { box-shadow: 0 0 20px rgba(180, 142, 146, 0.15); }
}

/* --- Scroll Reveal (progressive enhancement) --- */
/* Content is visible by default. JS adds .js-reveal to <html>,
   which hides elements until they scroll into view. If JS fails,
   everything stays visible — no blank pages. */

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.js-reveal .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children in grids */
.js-reveal .reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-reveal .reveal-stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

.js-reveal .reveal-stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.js-reveal .reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.12s; }
.js-reveal .reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.24s; }
.js-reveal .reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.36s; }
.js-reveal .reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.48s; }
.js-reveal .reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.60s; }

/* --- Decorative / Atmospheric --- */

.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-accent), transparent);
  border: none;
  margin: var(--spacing-md) 0;
}

/* Floral divider — gradient line with centered rose motif */
.divider-floral {
  position: relative;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--color-accent), transparent);
  margin: var(--spacing-md) 0;
}

.divider-floral::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  opacity: 0.6;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 8c-4 6-12 10-12 18s8 14 12 18c4-4 12-10 12-18S36 14 32 8z' fill='%23b48e92'/%3E%3Cpath d='M32 44c0 0-2 4-2 8s1 4 2 4 2 0 2-4-2-8-2-8z' fill='%23b48e92'/%3E%3Cpath d='M22 28c-4-2-8-1-10 0s-2 3 0 3 6-1 10-3z' fill='%23b48e92'/%3E%3Cpath d='M42 28c4-2 8-1 10 0s2 3 0 3-6-1-10-3z' fill='%23b48e92'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: shimmer 4s ease-in-out infinite;
}

/* Hero section — roses background with dark overlay */
.hero-section {
  padding: var(--spacing-xl) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--color-bg-primary);
}

/* Roses background image layer — fades smoothly to bg at bottom */
.hero-section::before {
  content: '';
  position: absolute;
  inset: -10px; /* slight bleed to avoid edge artifacts during Ken Burns */
  background:
    url('../images/roses-dark-bg.jpg') center / cover no-repeat;
  background-image: image-set(
    url('../images/roses-dark-bg.webp') type('image/webp'),
    url('../images/roses-dark-bg.jpg') type('image/jpeg')
  );
  animation: kenBurns 25s ease-in-out infinite;
  transform: translateY(var(--parallax-y, 0));
  pointer-events: none;
  z-index: 0;
}

/* Dark vignette overlay — fades roses into bg color at bottom */
.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(29, 46, 40, 0.72) 0%,
      rgba(29, 46, 40, 0.60) 30%,
      rgba(29, 46, 40, 0.75) 65%,
      rgba(29, 46, 40, 1) 100%
    );
  pointer-events: none;
  z-index: 0;
}

/* Ensure hero content sits above the background layers */
.hero-section > * {
  position: relative;
  z-index: 1;
}

/* Hero text entrance animation */
.hero-section h1 {
  animation: fadeUp 1s ease both;
}

.hero-section p {
  animation: fadeUp 1s ease 0.25s both;
}

.hero-section .btn {
  animation: fadeUp 1s ease 0.45s both;
}

.hero-section div:has(.btn) {
  animation: fadeUp 1s ease 0.45s both;
}

/* Floating particles overlay on hero */
.hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.hero-particles span {
  position: absolute;
  bottom: -20px;
  display: block;
  width: 4px;
  height: 4px;
  background: var(--color-accent);
  border-radius: 50%;
  opacity: 0;
  animation: floatUp linear infinite;
}

.hero-particles span:nth-child(1) { left: 10%; width: 3px; height: 3px; animation-duration: 14s; animation-delay: 0s; }
.hero-particles span:nth-child(2) { left: 25%; width: 5px; height: 5px; animation-duration: 18s; animation-delay: 3s; }
.hero-particles span:nth-child(3) { left: 45%; width: 3px; height: 3px; animation-duration: 16s; animation-delay: 7s; }
.hero-particles span:nth-child(4) { left: 65%; width: 4px; height: 4px; animation-duration: 20s; animation-delay: 2s; }
.hero-particles span:nth-child(5) { left: 80%; width: 3px; height: 3px; animation-duration: 15s; animation-delay: 5s; }
.hero-particles span:nth-child(6) { left: 92%; width: 5px; height: 5px; animation-duration: 22s; animation-delay: 9s; }

/* Subtle corner texture on alt sections */
.section--alt {
  position: relative;
}

.section--alt::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  opacity: 0.12;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 20c-15 22-45 38-45 65s30 50 45 65c15-15 45-38 45-65S115 42 100 20z' fill='%23b48e92'/%3E%3Cpath d='M100 150c0 0-8 15-8 30s4 14 8 14 8 0 8-14-8-30-8-30z' fill='%23b48e92'/%3E%3Cpath d='M60 90c-15-8-30-4-38 0s-8 10 0 10 22-2 38-10z' fill='%23b48e92'/%3E%3Cpath d='M140 90c15-8 30-4 38 0s8 10 0 10-22-2-38-10z' fill='%23b48e92'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

/* --- Instagram Grid --- */

.ig-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
}

.ig-grid .card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: var(--transition-base);
  background: var(--color-bg-secondary);
}

.ig-grid .card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 24px rgba(180, 142, 146, 0.25);
  transform: translateY(-4px);
}

.ig-grid .card .ig-post {
  transition: transform 0.6s ease;
}

.ig-grid .card:hover .ig-post {
  transform: scale(1.04);
}

/* Individual Instagram post image */
.ig-post {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: var(--transition-base);
}

/* Standalone ig-post (not inside a card) */
.ig-post:not(.card .ig-post) {
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border);
}

.ig-post:not(.card .ig-post):hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 20px rgba(180, 142, 146, 0.2);
}

/* --- Featured Work Section --- */

.featured-work {
  position: relative;
  overflow: hidden;
}

.featured-work::before {
  content: '';
  position: absolute;
  inset: -10px;
  background:
    url('../images/roses-dark-bg.jpg') center / cover no-repeat;
  background-image: image-set(
    url('../images/roses-dark-bg.webp') type('image/webp'),
    url('../images/roses-dark-bg.jpg') type('image/jpeg')
  );
  animation: kenBurns 30s ease-in-out infinite;
  transform: translateY(var(--parallax-y, 0));
  pointer-events: none;
  z-index: 0;
}

.featured-work::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(29, 46, 40, 1) 0%,
      rgba(29, 46, 40, 0.85) 10%,
      rgba(29, 46, 40, 0.82) 50%,
      rgba(29, 46, 40, 0.85) 90%,
      rgba(29, 46, 40, 1) 100%
    );
  pointer-events: none;
  z-index: 0;
}

.featured-work > * {
  position: relative;
  z-index: 1;
}

/* --- Utility Classes --- */

.text-center {
  text-align: center;
}

.text-accent {
  color: var(--color-accent);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- MailerLite Form Overrides --- */

.ml-embedded {
  min-height: 200px;
  background: var(--color-bg-secondary) !important;
  border-radius: var(--radius-sm);
}

.ml-embedded .ml-form-embedContainer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.ml-embedded .ml-form-embedWrapper {
  background: transparent !important;
  padding: var(--spacing-sm) !important;
}

.ml-embedded .ml-form-embedBody {
  background: transparent !important;
}

.ml-embedded .ml-form-embedContent h4 {
  font-family: var(--font-heading) !important;
  color: var(--color-text-primary) !important;
  margin-bottom: var(--spacing-xs) !important;
}

.ml-embedded .ml-form-embedContent p {
  color: var(--color-text-secondary) !important;
  font-family: var(--font-body) !important;
}

.ml-embedded .ml-form-formContent .ml-form-fieldRow input[type="text"],
.ml-embedded .ml-form-formContent .ml-form-fieldRow input[type="email"],
.ml-embedded input[type="text"],
.ml-embedded input[type="email"] {
  width: 100% !important;
  padding: 0.75rem var(--spacing-sm) !important;
  background: var(--color-bg-tertiary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-body) !important;
  font-size: var(--font-size-body) !important;
  transition: var(--transition-base) !important;
}

.ml-embedded input[type="text"]:focus,
.ml-embedded input[type="email"]:focus {
  border-color: var(--color-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--color-accent-subtle) !important;
}

.ml-embedded input[type="text"]::placeholder,
.ml-embedded input[type="email"]::placeholder {
  color: var(--color-text-muted) !important;
}

.ml-embedded label {
  color: var(--color-text-secondary) !important;
  font-family: var(--font-body) !important;
  font-size: var(--font-size-small) !important;
}

.ml-embedded .ml-form-embedSubmit button {
  background: var(--color-accent) !important;
  color: var(--color-bg-primary) !important;
  padding: 0.75rem 1.5rem !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: var(--font-size-small) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: var(--transition-base) !important;
  width: 100% !important;
}

.ml-embedded .ml-form-embedSubmit button:hover {
  background: var(--color-accent-hover) !important;
  box-shadow: var(--shadow-glow) !important;
}

.ml-embedded button:focus-visible {
  outline: 2px solid var(--color-accent) !important;
  outline-offset: 2px !important;
}

.ml-embedded .ml-form-successBody {
  background: transparent !important;
  padding: var(--spacing-sm) !important;
}

.ml-embedded .ml-form-successContent h4 {
  font-family: var(--font-heading) !important;
  color: var(--color-text-primary) !important;
}

.ml-embedded .ml-form-successContent p {
  color: var(--color-text-secondary) !important;
  font-family: var(--font-body) !important;
}

/* --- MailerLite Fallback Content --- */

.ml-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: var(--spacing-md);
  text-align: center;
}

.ml-fallback p {
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

/* --- Button glow animation on primary CTA --- */

.btn-primary {
  animation: glowPulse 3s ease-in-out infinite;
}

.btn-primary:hover {
  animation: none;
}

/* --- Respect reduced motion preference --- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js-reveal .reveal {
    opacity: 1;
    transform: none;
  }

  .js-reveal .reveal-stagger > * {
    opacity: 1;
    transform: none;
  }
}