/* ============================================================
   AFIKO — Motion layer  ·  premium, consistent, subtle
   Hero cinematic + elegant site-wide micro-motion.
   Everything degrades gracefully under prefers-reduced-motion.
   ============================================================ */

:root{
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --ease-back: cubic-bezier(.34,1.32,.64,1);
}

/* ---------- Page load ---------- */
@media (prefers-reduced-motion: no-preference){
  body{ animation: af-page-in .55s var(--ease-out) both; }
}
@keyframes af-page-in{ from{ opacity:0; } to{ opacity:1; } }

/* ============================================================
   REVEAL ON SCROLL  (directional + scale variants)
   ============================================================ */
/* Solo se oculta bajo html.js (la añade el JS al cargar);
   sin JS todo queda visible — nunca una sección en blanco. */
.js [data-reveal]{
  opacity:0; transform: translateY(28px);
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
  will-change: opacity, transform;
}
.js [data-reveal="left"]  { transform: translateX(-34px); }
.js [data-reveal="right"] { transform: translateX(34px); }
.js [data-reveal="scale"] { transform: scale(.93); }
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal].in      { opacity:1; transform:none; }

/* Stagger: children of a revealed container cascade in.
   Pair with class="reveal stagger" (afiko.js toggles .in). */
.js .stagger > *{
  opacity:0; transform: translateY(20px);
  transition: opacity .65s var(--ease-soft), transform .65s var(--ease-soft);
  will-change: opacity, transform;
}
.stagger.in > *{ opacity:1; transform:none; }
.stagger.in > *:nth-child(1){ transition-delay:.02s; }
.stagger.in > *:nth-child(2){ transition-delay:.09s; }
.stagger.in > *:nth-child(3){ transition-delay:.16s; }
.stagger.in > *:nth-child(4){ transition-delay:.23s; }
.stagger.in > *:nth-child(5){ transition-delay:.30s; }
.stagger.in > *:nth-child(6){ transition-delay:.37s; }
.stagger.in > *:nth-child(7){ transition-delay:.44s; }
.stagger.in > *:nth-child(8){ transition-delay:.51s; }
.stagger.in > *:nth-child(9){ transition-delay:.58s; }
.stagger.in > *:nth-child(10){ transition-delay:.65s; }
.stagger.in > *:nth-child(n+11){ transition-delay:.72s; }

/* ============================================================
   HEADER — refine on scroll
   ============================================================ */
.header{ transition: background .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out); }
.header.scrolled{
  background: rgba(248,245,242,.94);
  box-shadow: 0 6px 24px rgba(59,59,59,.06);
  border-bottom-color: transparent;
}
.header.scrolled .header__logo img{ height:34px; transition: height .3s var(--ease-out); }
.header__logo img{ transition: height .3s var(--ease-out); }
/* topbar gently collapses away as you scroll into content */
.topbar{ transition: opacity .3s var(--ease-out); }

/* ============================================================
   BUTTONS — press feedback + ripple
   ============================================================ */
.btn{ position:relative; overflow:hidden; }
.btn:active{ transform: translateY(0) scale(.975); }
.af-ripple{
  position:absolute; border-radius:50%; transform: translate(-50%,-50%) scale(0);
  background: rgba(255,255,255,.45); pointer-events:none;
  animation: af-ripple .6s var(--ease-out) forwards;
}
.btn--secondary .af-ripple, .btn--outline .af-ripple, .btn--ghost .af-ripple{ background: rgba(200,136,42,.22); }
@keyframes af-ripple{ to{ transform: translate(-50%,-50%) scale(2.6); opacity:0; } }

/* icon buttons + add buttons get a soft press */
.icon-btn:active, .product-card__add:active, .chip:active{ transform: scale(.92); }

/* card media subtle zoom on hover (photos feel alive) */
.product-card__media .pshot,
.product-card__media image-slot,
.recipe-card__media image-slot,
.recipe-card__media .pshot{ transition: transform .5s var(--ease-out); }
.product-card:hover .product-card__media .pshot,
.product-card:hover .product-card__media image-slot,
.recipe-card:hover .recipe-card__media image-slot,
.recipe-card:hover .recipe-card__media .pshot{ transform: scale(1.045); }

/* count-up numbers don't reflow */
[data-count]{ font-variant-numeric: tabular-nums; }

/* ============================================================
   HERO — cinematic
   ============================================================ */
/* ambient marine field behind the hero */
.hero__ambient{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.hero__inner{ position:relative; z-index:1; }
.hero__glow{
  position:absolute; border-radius:50%; filter: blur(8px); opacity:.5;
}
.hero__glow--1{ width:520px; height:520px; top:-160px; right:-120px;
  background: radial-gradient(circle, rgba(238,172,92,.30), transparent 68%); }
.hero__glow--2{ width:460px; height:460px; bottom:-200px; left:-140px;
  background: radial-gradient(circle, rgba(183,200,214,.40), transparent 68%); }
@media (prefers-reduced-motion: no-preference){
  .hero__glow--1{ animation: af-drift1 18s ease-in-out infinite alternate; }
  .hero__glow--2{ animation: af-drift2 22s ease-in-out infinite alternate; }
}
@keyframes af-drift1{ to{ transform: translate(-34px, 30px) scale(1.08); } }
@keyframes af-drift2{ to{ transform: translate(40px, -26px) scale(1.1); } }

/* rising bubbles */
.hero__bubble{
  position:absolute; bottom:-30px; border-radius:50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), rgba(183,200,214,.28) 60%, transparent 72%);
  border:1px solid rgba(255,255,255,.5); opacity:0;
}
@media (prefers-reduced-motion: no-preference){
  .hero__bubble{ animation: af-bubble linear infinite; }
}
@keyframes af-bubble{
  0%{ transform: translateY(0) translateX(0); opacity:0; }
  12%{ opacity:.75; }
  85%{ opacity:.5; }
  100%{ transform: translateY(-94vh) translateX(var(--bx,16px)); opacity:0; }
}

/* sequenced entrance of the hero copy */
@media (prefers-reduced-motion: no-preference){
  .hero[data-anim] .hseq{ opacity:0; transform: translateY(22px); animation: af-hseq .85s var(--ease-soft) forwards; animation-delay: calc(var(--i,0) * .11s + .12s); }
}
@keyframes af-hseq{ to{ opacity:1; transform:none; } }

/* hero visual: Ken Burns + float bob */
.hero__photo-frame{
  position:relative; width:100%; aspect-ratio:4/5; border-radius: var(--radius-xl);
  overflow:hidden; box-shadow: var(--shadow-xl); isolation:isolate;
}
.hero__photo-frame image-slot{ position:absolute; inset:0; width:100%; height:100%; border-radius:0; }
@media (prefers-reduced-motion: no-preference){
  .hero[data-anim] .hero__photo-frame image-slot{ animation: af-kenburns 22s ease-in-out infinite alternate; transform-origin:60% 40%; }
}
@keyframes af-kenburns{ from{ transform: scale(1.02); } to{ transform: scale(1.12); } }

/* parallax helpers (JS sets transform on [data-mouse]) */
[data-mouse]{ transition: transform .4s var(--ease-out); will-change: transform; }
.hero__layer{ transition: transform .4s var(--ease-out); will-change: transform; }

/* scroll-driven section accents */
.kicker-line{ position:relative; }

@media (prefers-reduced-motion: reduce){
  [data-reveal], .stagger > *{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero__bubble, .hero__glow{ animation:none !important; }
  .hero[data-anim] .hseq{ opacity:1 !important; transform:none !important; animation:none !important; }
  body{ animation:none !important; }
}