/* ===================================================================
   Athena Buket: Custom Stylesheet
   Berisi hal-hal yang tidak praktis ditulis sebagai Tailwind utility:
   font import, keyframes animasi, dan beberapa pseudo-element/efek
   yang butuh CSS murni (parallax layer, garis dekoratif, dsb).
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Lora:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500&display=swap');

:root{
  --ink:#0E0D0B;
  --ivory:#F7F3EC;
  --ivory-deep:#EFE9DD;
  --gold:#C9A66B;
  --gold-soft:#D9C39C;
  --taupe:#8B8378;
}

html{ scroll-behavior:smooth; }

body{
  font-family:'Lora', serif;
  background:var(--ivory);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}

.font-display{ font-family:'Playfair Display', serif; }
.font-body{ font-family:'Lora', serif; }
.font-label{ font-family:'Inter', sans-serif; }

/* ---------- NAV LINK UNDERLINE ---------- */
.nav-link{
  position:relative;
  padding-bottom:4px;
}
.nav-link::after{
  content:'';
  position:absolute;
  bottom:0; left:0;
  width:0; height:1px;
  background:var(--gold);
  transition:width 0.3s ease;
}
.nav-link:hover::after{ width:100%; }

/* ---------- PARALLAX LAYERS ---------- */
/* Elemen background yang digerakkan via JS (transform: translateY)
   harus lebih tinggi dari container agar tidak bocor saat parallax */
.parallax-layer{
  position:absolute;
  top:-15%;
  left:0;
  width:100%;
  height:130%;
  background-size:cover;
  background-position:center;
  will-change:transform;
}

/* ---------- HERO ENTRANCE ANIMATION ---------- */
@keyframes riseFade{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:translateY(0); }
}
.hero-rise{
  opacity:0;
  animation:riseFade 1.1s ease forwards;
}

/* ---------- SCROLL CUE LINE ---------- */
@keyframes lineGrow{
  0%{ transform:scaleY(0.4); opacity:0.4; }
  50%{ transform:scaleY(1); opacity:1; }
  100%{ transform:scaleY(0.4); opacity:0.4; }
}
.scroll-line{
  width:1px;
  height:38px;
  background:linear-gradient(180deg, var(--gold-soft), transparent);
  animation:lineGrow 2s ease-in-out infinite;
}

/* ---------- DECORATIVE FRAME (story image) ---------- */
.frame-offset::after{
  content:'';
  position:absolute;
  top:18px; left:18px;
  right:-18px; bottom:-18px;
  border:1px solid var(--gold);
  z-index:-1;
}
@media (max-width:880px){
  .frame-offset::after{ display:none; }
}

/* ---------- REVEAL ON SCROLL ---------- */
.reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ---------- PRODUCT CARD HOVER ZOOM ---------- */
.product-frame img,
.product-frame .product-bg{
  transition:transform 0.8s cubic-bezier(.16,1,.3,1);
}
.product:hover .product-bg{ transform:scale(1.06); }

.card-bg{
  transition:transform 0.9s cubic-bezier(.16,1,.3,1);
}
.card:hover .card-bg{ transform:scale(1.08); }

/* ---------- ORDER LINK ARROW NUDGE ---------- */
.product-order svg{ transition:transform 0.3s ease; }
.product-order:hover svg{ transform:translateX(3px); }