/* KameraPedia landing — cinematic layer (landing-only, bright).
   Lives beside shared style.css: richer color, HTML-motion "video" hero,
   scroll-linked parallax + reveals. Content stays visible without JS:
   hidden states only apply under .js-cine (added by home-cinematic.js). */

body[data-page="home"] .hero-cine {
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

/* Scroll progress thread (fixed hairline, hero -> footer). */
.cine-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.cine-progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--brand) 0%, #e08b2d 38%, var(--green) 100%);
}

/* ---- Hero backdrop: clean white + yellow glow + dot grid + dust ---- */
.hero-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(640px 420px at 78% 30%, rgba(255, 189, 89, .28), rgba(255, 189, 89, 0) 68%),
    radial-gradient(560px 380px at 8% 90%, rgba(255, 189, 89, .14), rgba(255, 189, 89, 0) 70%),
    var(--surface);
}
.hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(27, 26, 21, .10) 1.1px, transparent 1.1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(560px 420px at 76% 32%, #000 0%, transparent 72%);
}
.hero-bg__mesh {
  position: absolute; inset: 0;
  background:
    radial-gradient(480px 300px at 82% 22%, rgba(255, 189, 89, .30), rgba(255, 189, 89, 0) 68%),
    radial-gradient(520px 340px at 10% 95%, rgba(45, 91, 70, .10), rgba(45, 91, 70, 0) 66%);
  animation: cine-mesh 18s ease-in-out infinite alternate;
}
.hero-dust { position: absolute; inset: 0; width: 100%; height: 100%; }
body[data-page="home"] .hero-cine .hero-inner { position: relative; z-index: 1; }

@keyframes cine-mesh {
  from { opacity: .8; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 1; transform: translate3d(-2%, 2%, 0) scale(1.06); }
}

/* ---- Hero entrance (load choreography, transform/opacity only) ---- */
.js-cine body[data-page="home"] .hero-copy > * { animation: cine-rise .7s cubic-bezier(.16, 1, .3, 1) both; }
.js-cine body[data-page="home"] .hero-copy > *:nth-child(2) { animation-delay: .08s; }
.js-cine body[data-page="home"] .hero-copy > *:nth-child(3) { animation-delay: .16s; }
.js-cine body[data-page="home"] .hero-copy > *:nth-child(4) { animation-delay: .24s; }
.js-cine body[data-page="home"] .hero-copy > *:nth-child(5) { animation-delay: .32s; }
.js-cine body[data-page="home"] .hero-copy > *:nth-child(6) { animation-delay: .38s; }
.js-cine body[data-page="home"] .hero-art { animation: cine-rise .8s .2s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes cine-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Model hero: yellow blob + arch photo + floating product cards */
.hero-art { position: relative; max-width: 560px; width: 100%; justify-self: end; }
.hero-blob {
  position: absolute; z-index: 0;
  inset: 6% -4% 4% 8%;
  background: linear-gradient(135deg, var(--brand) 0%, #f5a93f 55%, #e08b2d 100%);
  border-radius: 46% 54% 52% 48% / 44% 46% 54% 56%;
  transform: rotate(8deg);
  animation: cine-blob 12s ease-in-out infinite alternate;
}
@keyframes cine-blob {
  from { transform: rotate(6deg) scale(1); border-radius: 46% 54% 52% 48% / 44% 46% 54% 56%; }
  to { transform: rotate(10deg) scale(1.03); border-radius: 54% 46% 48% 52% / 52% 54% 46% 48%; }
}
.hero-model {
  position: relative; z-index: 1;
  margin: 0 0 0 auto;
  width: min(78%, 380px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 999px 999px 28px 28px;
  border: 6px solid #fff;
  background: var(--surface-2);
  box-shadow: 0 40px 80px -40px rgba(120, 70, 10, .45);
}
.hero-model img { width: 100%; height: 100%; object-fit: cover; }
.float-card {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 9px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  box-shadow: 0 20px 44px -22px rgba(60, 44, 20, .5);
  text-align: left;
  transition: transform .18s ease, border-color .18s ease;
}
.float-card:hover { transform: translateY(-2px); border-color: var(--brand-dark); }
.float-card img { width: 52px; height: 52px; object-fit: cover; border-radius: 11px; flex: 0 0 auto; background: var(--surface-2); }
.float-card strong { display: block; font-size: 12.5px; line-height: 1.3; max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.float-card em { display: block; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--brand-dark); }
.float-card--a { top: 12%; left: 0; animation: cine-float 6s ease-in-out infinite alternate; }
.float-card--b { top: 44%; left: -2%; animation: cine-float 7s .8s ease-in-out infinite alternate; }
.float-card--trade {
  right: 0; bottom: 6%;
  display: block;
  padding: 13px 18px;
  border: 0;
  background: linear-gradient(135deg, var(--brand), #f0a13a);
  color: #221a0c;
  animation: cine-float 8s .4s ease-in-out infinite alternate;
}
.float-card--trade strong { font-size: 13.5px; white-space: normal; }
.float-card--trade em { color: #4d2f05; }
@keyframes cine-float {
  from { translate: 0 -4px; }
  to { translate: 0 5px; }
}

/* Scroll cue: the thread from hero into the next section */
.scroll-cue {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 10px;
  margin: 6px 0 30px;
  padding: 9px 16px 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 253, 249, .85);
  backdrop-filter: blur(6px);
  font-size: 12.5px; font-weight: 650; color: var(--ink-2);
}
.scroll-cue:hover { border-color: var(--brand-dark); color: var(--brand-dark); }
.scroll-cue__dot { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; }
.scroll-cue__dot svg { width: 13px; height: 13px; animation: cine-cue 1.8s ease-in-out infinite; }
@keyframes cine-cue {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(2px); }
}
.hero-cue-row { position: relative; z-index: 1; display: flex; justify-content: flex-start; }

/* ---- Marquee divider: the color break that kills the monotone ---- */
.cine-marquee {
  overflow: hidden;
  transform: rotate(-.8deg) scale(1.01);
  border-block: 1px solid #2b2a23;
  background: var(--brand);
  color: #221a0c;
}
.cine-marquee__track {
  display: flex; align-items: center; gap: 0;
  width: max-content;
  padding: 10px 0;
  font-size: 13px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase;
  animation: cine-marquee 26s linear infinite;
}
.cine-marquee__track span { padding: 0 18px; white-space: nowrap; }
.cine-marquee__track b { font-weight: 400; opacity: .55; }
@keyframes cine-marquee {
  to { transform: translateX(-50%); }
}

/* ---- Scroll reveals (stagger via --reveal-delay) ---- */
.js-cine body[data-page="home"] [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s cubic-bezier(.16, 1, .3, 1), transform .65s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.js-cine body[data-page="home"] [data-reveal].is-in { opacity: 1; transform: none; }

/* ---- Category photo cards (foto + label + panah, ala referensi) ---- */
body[data-page="home"] .category-grid { gap: 14px; }
body[data-page="home"] .category-tile.cat-photo {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 300px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: #171812;
  box-shadow: 0 24px 48px -30px rgba(27, 26, 21, .55);
}
body[data-page="home"] .category-tile.cat-photo:hover { transform: translateY(-3px); border: 0; box-shadow: 0 30px 54px -28px rgba(27, 26, 21, .6); }
.cat-media { position: absolute; inset: 0; }
.cat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
body[data-page="home"] .category-tile.cat-photo:hover .cat-media img { transform: scale(1.07); }
.cat-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 8, 0) 38%, rgba(10, 10, 8, .30) 62%, rgba(10, 10, 8, .80) 100%);
}
.cat-body { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px; padding: 16px 54px 15px 16px; }
.cat-body strong { color: #fff; font-size: 15px; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.cat-body span { color: rgba(255, 255, 255, .85); font-size: 12px; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }
.cat-go {
  position: absolute; z-index: 1; right: 12px; bottom: 12px;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ink);
  transition: background .2s, transform .2s;
}
.cat-go svg { width: 16px; height: 16px; }
body[data-page="home"] .category-tile.cat-photo:hover .cat-go { background: var(--brand); transform: translate(2px, -2px); }
.cat-credit { margin-top: 12px; text-align: right; }

/* Product cards join the stagger when scrolled into view */
.js-cine body[data-page="home"] #featuredGrid .product-card { transition-delay: var(--reveal-delay, 0s); }

/* Sell panel: gentle light sweep keeps the dark peak alive on scroll */
.sell-panel { position: relative; }
.sell-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 189, 89, .10) 50%, transparent 60%);
  transform: translateX(-60%);
  animation: cine-sweep 9s ease-in-out infinite;
}
@keyframes cine-sweep {
  0%, 55% { transform: translateX(-60%); }
  90%, 100% { transform: translateX(60%); }
}

/* Focus + selection carry the palette */
body[data-page="home"] ::selection { background: var(--brand); color: #221a0c; }

@media (max-width: 980px) {
  .hero-art { justify-self: start; max-width: 520px; }
  .hero-model { width: min(72%, 340px); }
  .cine-marquee { transform: none; }
}

@media (max-width: 640px) {
  body[data-page="home"] .category-tile.cat-photo { flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 0; min-height: 210px; padding: 0; border-radius: 16px; }
  body[data-page="home"] .category-tile.cat-photo .cat-media,
  body[data-page="home"] .category-tile.cat-photo .cat-shade { display: block; }
  body[data-page="home"] .category-tile.cat-photo .cat-body { display: flex; padding: 12px 50px 12px 13px; }
  body[data-page="home"] .category-tile.cat-photo .cat-body strong { font-size: 13px; }
  body[data-page="home"] .category-tile.cat-photo .cat-body > span { display: none; }
  body[data-page="home"] .category-tile.cat-photo .cat-go { display: grid; right: 10px; bottom: 10px; width: 30px; height: 30px; }
  .hero-blob { inset: 4% -6% 2% 4%; }
  .hero-model { width: min(76%, 300px); }
  .float-card img { width: 44px; height: 44px; }
  .float-card strong { font-size: 11.5px; }
  .float-card--a { top: 8%; }
  .float-card--b { top: 40%; left: 0; }
  .float-card--trade { padding: 11px 15px; bottom: 3%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg__mesh, .hero-blob,
  .float-card--a, .float-card--b, .float-card--trade,
  .cine-marquee__track, .scroll-cue__dot svg, .sell-panel::after {
    animation: none !important;
  }
  .js-cine body[data-page="home"] [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js-cine body[data-page="home"] .hero-copy > *,
  .js-cine body[data-page="home"] .hero-art { animation: none; }
}