/* ===== Azéle styles ===== */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* selection */
::selection { background: #C9A567; color: #FBF6EE; }

/* ===== grain & noise textures ===== */
.grain-overlay {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.3  0 0 0 0 0.2  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  mix-blend-mode: multiply;
}
.noise {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  pointer-events: none;
}

/* ===== hero floating petals ===== */
.petal {
  position: absolute;
  border-radius: 50% 0 50% 50%;
  background: radial-gradient(circle at 30% 30%, #F7E6C2, #C9A567);
  opacity: 0.25;
  filter: blur(1px);
  animation: drift 18s ease-in-out infinite;
}
.petal-1 { width: 70px; height: 70px; top: 10%; left: 5%; }
.petal-2 { width: 40px; height: 40px; top: 70%; left: 12%; animation-delay: -4s; }
.petal-3 { width: 90px; height: 90px; top: 30%; right: 8%; animation-delay: -8s; }
.petal-4 { width: 30px; height: 30px; bottom: 18%; right: 24%; animation-delay: -2s; }
.petal-5 { width: 55px; height: 55px; top: 55%; left: 45%; animation-delay: -12s; opacity: 0.18; }

@keyframes drift {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
  33% { transform: translateY(-25px) translateX(15px) rotate(20deg); }
  66% { transform: translateY(20px) translateX(-15px) rotate(-15deg); }
}

/* ===== fade-up entrance ===== */
.fade-up { animation: fadeUp 1s ease both; }
.fade-up:nth-of-type(2) { animation-delay: .15s; }
.fade-up:nth-of-type(3) { animation-delay: .3s; }
.fade-up:nth-of-type(4) { animation-delay: .45s; }
.fade-up:nth-of-type(5) { animation-delay: .6s; }

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

/* ===== hero stacked tiles ===== */
.card-tile {
  position: absolute;
  width: 230px;
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(251,246,238,0.95), rgba(244,234,219,0.95));
  box-shadow: 0 30px 60px -25px rgba(160,126,63,0.45), inset 0 1px 0 rgba(255,255,255,0.7);
  padding: 18px;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s;
  backdrop-filter: blur(6px);
}
.card-tile:hover { transform: translateY(-8px) rotate(0deg) scale(1.04); box-shadow: 0 40px 70px -25px rgba(160,126,63,0.6); z-index: 10; }
.tile-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tile-badge {
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: #A07E3F; padding: 4px 12px; border: 1px solid #E8D9BE; border-radius: 999px;
  background: #FBF6EE;
}

.float-slow { animation: floatY 7s ease-in-out infinite; }
.float-mid { animation: floatY 5.5s ease-in-out infinite; animation-delay: -1.5s; }
.float-fast { animation: floatY 4.5s ease-in-out infinite; animation-delay: -2.5s; }
@keyframes floatY {
  0%,100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}

.hero-aura {
  background: radial-gradient(circle at 50% 50%, rgba(201,165,103,0.25), transparent 65%);
  filter: blur(20px);
}

.sparkle-ring {
  width: 360px; height: 360px;
  border-radius: 50%;
  border: 1px dashed rgba(201,165,103,0.35);
  animation: spin 60s linear infinite;
  position: relative;
}
.sparkle-ring::before, .sparkle-ring::after {
  content: ''; position: absolute; border-radius: 50%; border: 1px dashed rgba(201,165,103,0.25);
  inset: 30px;
}
.sparkle-ring::after { inset: 70px; animation: spin 45s linear infinite reverse; border-color: rgba(160,126,63,0.25); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== marquee ===== */
.marquee {
  width: max-content;
  animation: marquee 35s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ===== collection cards ===== */
.collection-card {
  display: block;
  background: #FBF6EE;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(232,217,190,0.6);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, border-color .5s;
  transform: rotate(var(--tilt, 0deg));
  box-shadow: 0 15px 40px -20px rgba(92,70,48,0.25);
}
.collection-card:hover {
  transform: rotate(0) translateY(-6px);
  box-shadow: 0 30px 70px -25px rgba(160,126,63,0.45);
  border-color: rgba(201,165,103,0.6);
}
.collection-art {
  aspect-ratio: 4/3;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.collection-art::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.25 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  mix-blend-mode: overlay; pointer-events: none;
}
.collection-info {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: end; gap: 14px; padding: 20px 22px 22px;
}
.collection-info .serif-num {
  font-family: 'Italiana', serif; font-size: 28px; color: #C9A567; line-height: 1;
}
.collection-info h3 {
  grid-column: 2; font-family: 'Italiana', serif; font-size: 28px; color: #3B2A1C; line-height: 1.1;
}
.collection-info .caption {
  grid-column: 2; grid-row: 2; font-family: 'Cormorant Infant', serif; font-style: italic; color: rgba(92,70,48,0.7); font-size: 14px; margin-top: 4px;
}
.collection-info .arrow {
  grid-row: 1 / span 2; align-self: center;
  width: 42px; height: 42px; border-radius: 999px;
  display: grid; place-content: center;
  background: #FBF6EE; border: 1px solid rgba(201,165,103,0.5);
  color: #A07E3F; transition: all .4s;
}
.collection-card:hover .arrow {
  background: #3B2A1C; color: #C9A567; border-color: #3B2A1C; transform: translateX(4px);
}

/* ===== product cards ===== */
.product-card {
  background: #FBF6EE;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(232,217,190,0.5);
  transition: transform .5s, box-shadow .5s;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -25px rgba(160,126,63,0.45);
}
.product-image { position: relative; overflow: hidden; }
.product-svg {
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.18));
}
.product-card:hover .product-svg { transform: scale(1.08) rotate(-3deg); }

/* ===== story frame ===== */
.story-frame {
  position: relative;
  padding: 20px;
}
.story-frame-inner {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 60px -25px rgba(160,126,63,0.45);
  border: 8px solid #FBF6EE;
  outline: 1px solid rgba(201,165,103,0.4);
}
.story-frame-deco {
  position: absolute; inset: 0;
  border: 1px dashed rgba(201,165,103,0.4);
  border-radius: 32px;
  transform: rotate(-3deg);
  pointer-events: none;
}
.story-frame::before, .story-frame::after {
  content: ''; position: absolute;
  width: 80px; height: 80px;
  background: radial-gradient(circle at 30% 30%, #F7E6C2, #C9A567);
  border-radius: 50% 0 50% 50%;
  opacity: 0.6;
  z-index: -1;
  filter: blur(.5px);
}
.story-frame::before { top: -20px; left: -20px; transform: rotate(-25deg); }
.story-frame::after { bottom: -10px; right: -20px; transform: rotate(30deg); }

/* ===== Az Lioraé tiles ===== */
.lioraé-tile {
  border-radius: 24px;
  aspect-ratio: 1/1;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.4);
  transition: transform .5s;
}
.lioraé-tile.tall { aspect-ratio: 1/1.6; grid-row: span 2; }
.lioraé-tile:hover { transform: translateY(-6px) scale(1.02); }
.lioraé-tile::after {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.2 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ===== promise cards ===== */
.promise-card {
  background: #FBF6EE;
  border: 1px solid rgba(232,217,190,0.6);
  border-radius: 24px;
  padding: 32px 28px;
  text-align: center;
  transition: transform .5s, box-shadow .5s, border-color .5s, background .5s;
}
.promise-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -25px rgba(160,126,63,0.4);
  border-color: rgba(201,165,103,0.6);
  background: linear-gradient(160deg, #FBF6EE, #F4EADB);
}
.promise-icon {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid; place-content: center;
  background: linear-gradient(135deg, #F1DCC7, #C9A567);
  color: #FBF6EE;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.promise-card h3 {
  font-family: 'Italiana', serif;
  font-size: 22px;
  color: #3B2A1C;
  margin-bottom: 8px;
}
.promise-card p {
  font-family: 'Cormorant Infant', serif;
  font-style: italic;
  color: rgba(92,70,48,0.75);
  font-size: 15px;
  line-height: 1.5;
}

/* ===== form ===== */
.form-input {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  background: #F4EADB;
  border: 1px solid rgba(201,165,103,0.25);
  border-radius: 12px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  color: #3B2A1C;
  outline: none;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.form-input:focus {
  border-color: #C9A567;
  background: #FBF6EE;
  box-shadow: 0 0 0 4px rgba(201,165,103,0.15);
}

/* ===== responsive ===== */
@media (max-width: 768px) {
  .card-tile { width: 180px; }
  .story-frame::before, .story-frame::after { display: none; }
}