/* =============================================================
   Storia Coffee — custom style
   Hanya berisi hal yang tidak praktis ditulis pakai utility Tailwind.
   Token warna & font ada di assets/js/tailwind.config.js
   ============================================================= */

/* ---------- dasar ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  font-family: 'Poppins', system-ui, sans-serif;
  color: #141A38;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

::selection { background: #293A94; color: #fff; }

/* ---------- tipografi ---------- */
/* Poppins bawaannya renggang; headline besar perlu tracking rapat */
.display {
  letter-spacing: -.035em;
  line-height: 1.02;
  font-weight: 600;
}

.label {
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .7rem;
  font-weight: 600;
}

/* ---------- logo di latar gelap ---------- */
/* logo-mark.png/webp aslinya biru; dibalik jadi putih untuk footer */
.brand-mark-invert {
  filter: brightness(0) invert(1);
}

/* ---------- ikon ---------- */
/* dipakai semua <svg><use href="#ic-..."></svg> */
.ico {
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex: none;
}

/* ---------- tekstur ---------- */
.stripes {
  background-image: repeating-linear-gradient(-45deg,
    rgba(255, 255, 255, .06) 0 1px, transparent 1px 11px);
}

.dotgrid {
  background-image: radial-gradient(rgba(41, 58, 148, .16) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* =============================================================
   ILUSTRASI HERO
   PNG transparan, jadi bayangannya dibuat dua lapis:
   1. drop-shadow mengikuti bentuk sosoknya (bukan kotak)
   2. elips kabur di bawah sebagai bayangan lantai
   ============================================================= */
.hero-art {
  filter: drop-shadow(0 14px 10px rgba(41, 58, 148, .10));
}

/* sapuan bayangan lebar di bawah seluruh kelompok */
.hero-shadow {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -10px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(41, 58, 148, .20) 0%, rgba(41, 58, 148, .08) 45%, rgba(41, 58, 148, 0) 72%);
  filter: blur(10px);
  pointer-events: none;
}

/* bayangan kecil tepat di bawah tiap sosok */
.hero-foot {
  position: absolute;
  bottom: -4px;
  width: 9%;
  height: 20px;
  margin-left: -4.5%;
  border-radius: 50%;
  background: rgba(41, 58, 148, .22);
  filter: blur(9px);
  pointer-events: none;
}

@media (max-width: 640px) {
  .hero-shadow { height: 26px; bottom: -6px; filter: blur(7px); }
  .hero-foot   { height: 12px; filter: blur(6px); }
}

/* ---------- marquee ---------- */
.track {
  display: flex;
  gap: 4rem;
  width: max-content;
  animation: run 30s linear infinite;
}

@keyframes run { to { transform: translateX(-50%); } }

/* ---------- slideshow crossfade otomatis, tanpa JS ----------
   Dipakai untuk foto event (img) maupun layar app dummy (div) —
   selector menyasar direct child apa pun. */
.eventslide { position: relative; overflow: hidden; }

.eventslide > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: eventfade 24s infinite;
}

.eventslide img { object-fit: cover; }

.eventslide > *:nth-child(1) { animation-delay: 0s; }
.eventslide > *:nth-child(2) { animation-delay: -20s; }
.eventslide > *:nth-child(3) { animation-delay: -16s; }
.eventslide > *:nth-child(4) { animation-delay: -12s; }
.eventslide > *:nth-child(5) { animation-delay: -8s; }
.eventslide > *:nth-child(6) { animation-delay: -4s; }

@keyframes eventfade {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  22%  { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ---------- phone mockup (Storia Club) ---------- */
.phone-frame {
  animation: phonefloat 6s ease-in-out infinite;
}

.phone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 22px;
  background: #0a0e22;
  border-radius: 999px;
  z-index: 20;
}

@keyframes phonefloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* =============================================================
   SLIDER PRODUK (Swiper)
   Berjalan otomatis. Kartu di tengah = kartu yang sedang disorot:
   jadi biru, membesar, dan foto produknya ikut naik sedikit.
   ============================================================= */
.p-swiper { overflow: visible; }

.p-swiper .swiper-slide {
  width: 290px;
  height: auto;
  transition: transform .45s cubic-bezier(.22, .7, .3, 1);
}

.p-card {
  height: 100%;
  padding: 1.75rem 1.5rem 1.5rem;
  border: 1px solid #E4E8F6;
  border-radius: 1.75rem;
  background: #fff;
  transition: background .45s ease, border-color .45s ease,
              box-shadow .45s ease, color .45s ease;
}

.p-swiper .swiper-slide:not(.swiper-slide-active) .p-card { opacity: .72; }

.p-swiper .swiper-slide-active { transform: scale(1.045); }

.p-swiper .swiper-slide-active .p-card {
  background: #293A94;
  border-color: #293A94;
  color: #fff;
  box-shadow: 0 30px 60px -24px rgba(41, 58, 148, .65);
}

.p-swiper .swiper-slide-active .p-desc { color: rgba(255, 255, 255, .72); }
.p-swiper .swiper-slide-active .p-tag  { background: rgba(255, 255, 255, .16); color: #fff; }
.p-swiper .swiper-slide-active .p-rule { border-color: rgba(255, 255, 255, .22); }

/* foto produk (PNG transparan) */
.p-photo {
  height: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(20, 26, 56, .18));
  transition: transform .5s cubic-bezier(.22, .7, .3, 1);
}

.p-swiper .swiper-slide-active .p-photo { transform: translateY(-8px) scale(1.06); }

/* lingkaran cahaya di belakang produk */
.p-glow {
  background: radial-gradient(circle at 50% 55%, #EDF0FA 0%, rgba(237, 240, 250, 0) 68%);
  transition: background .45s ease;
}

.p-swiper .swiper-slide-active .p-glow {
  background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 68%);
}

/* pagination */
.swiper-pagination-bullet {
  background: #293A94;
  opacity: .22;
  width: 7px;
  height: 7px;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  width: 22px;
  border-radius: 4px;
}

/* =============================================================
   ANIMASI
   State awal dipasang di CSS supaya tidak ada kedipan sebelum
   GSAP jalan. main.js yang mengambil alih setelahnya.
   ============================================================= */
[data-anim] { opacity: 0; }

.no-anim [data-anim] {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .track { animation: none; }
  [data-anim] { opacity: 1 !important; transform: none !important; }
  .eventslide > * { animation: none; opacity: 0; }
  .eventslide > *:first-child { opacity: 1; }
  .phone-frame { animation: none; }
}