/* ============================================================
   CIBORO FOODS — ANIMATION STATES & CINEMATIC CSS
   Progressive Enhancement: all content visible by default.
   .js-ready is added by JS on DOMContentLoaded — only THEN
   do we hide elements so GSAP can animate them in.
   Without JS (or if GSAP fails), everything stays visible.
   ============================================================ */

/* ── Initial hidden states — ONLY active when JS is running ── */

/* Hero: hide individual lines, NOT the container .hero-display */
.js-ready .hero-line           { opacity: 0; transform: translateY(100%); }
.js-ready .hero-fade-in        { opacity: 0; transform: translateY(28px); }
.js-ready .fade-in             { opacity: 0; transform: translateY(28px); }

/* ── Hairline draw ── */
.hairline-draw {
  display: block;
  height: 1px;
  background: var(--border);
  transform-origin: left;
}
.js-ready .hairline-draw { transform: scaleX(0); }
.hairline-draw.drawn { transform: scaleX(1); transition: transform 1.1s cubic-bezier(0.65,0,0.35,1); }

/* ── Clip reveal base ── */
.js-ready .clip-reveal,
.js-ready .what-col-img,
.js-ready .product-cat-img {
  clip-path: inset(0 0 100% 0);
}

/* ── Shelf cards ── */
.js-ready .shelf-card {
  opacity: 0;
  transform: translateY(50px);
}

/* ── Cert / value / packing cards ── */
.js-ready .cert-card,
.js-ready .value-card,
.js-ready .packing-service-card,
.js-ready .process-step,
.js-ready .esg-stat-card {
  opacity: 0;
  transform: translateY(40px);
}

/* ── Eyebrows ── */
.js-ready .eyebrow { opacity: 0; }

/* ── Timeline items ── */
.js-ready .timeline-item { opacity: 0; transform: translateX(40px); }

/* ── About image pair ── */
.js-ready .about-img-pair img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.08);
}

/* ── Product categories ── */
.js-ready .product-category { opacity: 0; transform: translateY(50px); }

/* ── ESG bilingual cols ── */
.js-ready .esg-lang-col { opacity: 0; }

/* ── ESG section headers ── */
.js-ready .esg-section-header { opacity: 0; }

/* ── Footer ── */
.js-ready .footer-wordmark { opacity: 0; transform: scale(0.92); }
.js-ready .footer-col      { opacity: 0; transform: translateY(30px); }
.js-ready .cta-display     { opacity: 0; transform: translateY(60px) scale(0.96); }
.js-ready .cta-sub         { opacity: 0; transform: translateY(30px); }
.js-ready .cta-btns        { opacity: 0; transform: translateY(20px); }

/* ─── PINNED HORIZONTAL PROCESS SECTION ────────────────────── */
.process-pin-section {
  overflow: hidden;
  position: relative;
}
.process-h-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
}
.process-h-step {
  width: 40vw;
  min-width: 380px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-12) var(--sp-8);
  border-right: 1px solid color-mix(in oklab, var(--bg) 10%, transparent);
  flex-shrink: 0;
  position: relative;
}
.process-h-step-num {
  font-family: var(--font-mono);
  font-size: clamp(6rem, 12vw, 14rem);
  font-weight: 400;
  line-height: 1;
  color: color-mix(in oklab, var(--bg) 7%, transparent);
  position: absolute;
  bottom: var(--sp-8);
  right: var(--sp-6);
  pointer-events: none;
  font-feature-settings: 'tnum';
}
.process-h-step-tag {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}
.process-h-step-title {
  font-family: var(--font-display);;
  font-size: clamp(2.5rem, 5vw, 5rem);
  color: var(--bg);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-5);
  font-variation-settings: "opsz" 144;
}
.process-h-step-body {
  font-size: var(--text-base);
  color: color-mix(in oklab, var(--bg) 60%, transparent);
  max-width: 34ch;
  line-height: 1.65;
}
.process-h-progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: color-mix(in oklab, var(--bg) 10%, transparent);
}
.process-h-progress-fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 50ms linear;
}

/* ─── FLOATING SCROLL INDICATOR ────────────────────────────── */
.scroll-indicator {
  position: fixed;
  bottom: var(--sp-6);
  right: var(--gutter);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}
.scroll-indicator.visible { opacity: 1; }
.scroll-indicator-line {
  width: 1px;
  height: 48px;
  background: var(--border);
  position: relative;
  overflow: hidden;
}
.scroll-indicator-fill {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--accent);
  animation: scroll-fill 2s ease-in-out infinite;
}
@keyframes scroll-fill {
  0%   { top: -100%; }
  50%  { top: 0%; }
  100% { top: 100%; }
}
.scroll-indicator-label {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  writing-mode: vertical-rl;
}

/* ─── GRAIN TEXTURE OVERLAY ──────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ─── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .js-ready .hero-line, .js-ready .hero-fade-in,
  .js-ready .fade-in, .js-ready .shelf-card,
  .js-ready .cert-card, .js-ready .value-card, .js-ready .packing-service-card,
  .js-ready .process-step, .js-ready .esg-stat-card, .js-ready .timeline-item,
  .js-ready .product-category, .js-ready .esg-lang-col, .js-ready .esg-section-header,
  .js-ready .footer-wordmark, .js-ready .footer-col,
  .js-ready .cta-display, .js-ready .cta-sub, .js-ready .cta-btns,
  .js-ready .eyebrow, .js-ready .clip-reveal,
  .js-ready .what-col-img, .js-ready .product-cat-img,
  .js-ready .about-img-pair img {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}