/* =========================================
   My Sunrise - Clean Luxury CSS
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@300;400;500;600&family=Outfit:wght@300;400;500&display=swap');

:root {
  --color-alabaster: #F9F8F6;
  --color-white: #FFFFFF;
  --color-charcoal: #111111; 
  --color-gold: #C29B57;
  
  --font-display: 'Cormorant', serif;
  --font-body: 'Outfit', sans-serif;
  --ease-editorial: cubic-bezier(0.25, 1, 0.25, 1);
  --ease-cinematic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

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

html {
  overflow-x: hidden;
}

body {
  background-color: var(--color-alabaster);
  color: var(--color-charcoal);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Link Micro-interactions */
.hover-lift {
  display: inline-block;
  transition: transform 0.4s var(--ease-cinematic), color 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-1px);
}

/* Typography */
.font-display { font-family: var(--font-display); letter-spacing: -0.02em; }
.font-body { font-family: var(--font-body); }

/* Animations */
.line-mask { overflow: hidden; display: block; }
.line-mask span {
  display: block;
  transform: translateY(110%);
  transition: transform 1.5s var(--ease-editorial);
}
.line-mask.is-visible span { transform: translateY(0); }

/* Premium Buttons */
.btn-premium {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.5rem;
  border: 1px solid;
  border-radius: 99px; 
  overflow: hidden;
  transition: color 0.4s ease, border-color 0.4s ease, transform 0.4s var(--ease-cinematic);
  background: transparent;
  will-change: transform;
}
.btn-premium::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-gold);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.6s var(--ease-cinematic);
  z-index: 0;
  border-radius: 99px;
}
.btn-premium:hover { 
  color: var(--color-white) !important; 
  border-color: var(--color-gold) !important;
  transform: scale(1.03); 
}
.btn-premium:hover::before { transform: scaleY(1); }

/* Smooth scale effect for active swiper images */
.swiper-slide img {
  transition: transform 1.5s cubic-bezier(0.25, 1, 0.25, 1);
  transform: scale(1.1);
}
.swiper-slide-active img {
  transform: scale(1);
}

/* Premium Card Hover Physics */
.artifact-card {
  transition: transform 0.6s var(--ease-cinematic), box-shadow 0.6s var(--ease-cinematic);
}
.artifact-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -15px rgba(0,0,0,0.08);
}

/* Swiper custom dots */
.swiper-pagination-bullet {
  background-color: var(--color-white) !important;
  opacity: 0.5 !important;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.swiper-pagination-bullet-active {
  opacity: 1 !important;
  transform: scale(1.2);
}

/* Magnetic utility constraint */
.magnetic {
  display: inline-block;
}
/* Smart Nav Sliding Transition */
.nav-island {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.5s ease;
}

/* Class added by JS to hide the nav */
.nav-hidden {
    transform: translateY(-100%);
}

/* Optional: Gives it a tiny bit more frost when scrolling up over white sections */
.nav-scrolled-up {
    background-color: rgba(245, 240, 230, 0.3); 
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05);
}

/* Notification pills — smooth scroll hide/show synced with navbar */
#banner-pill, #special-pill {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}