/* Fa's Roses: motion. Eén taal voor de hele winkel, zie ontwerp/motion.md.
   Uitgangspunt uit het brandbook: ingetogen luxe, met de hand. Dus traag en zacht als satijn,
   getekend als met een pen, en goud alleen als een korte glans. Niets stuitert, niets knippert.
   Alles staat achter html.fas-motion (gezet in layout/theme.liquid, niet bij "minder beweging"). */

:root {
  --fas-ease-silk: cubic-bezier(0.16, 1, 0.3, 1);     /* komt snel, landt heel zacht: satijn dat valt */
  --fas-ease-draw: cubic-bezier(0.65, 0, 0.35, 1);    /* pen op papier: rustig aanzetten en uitlopen */
  --fas-ease-lift: cubic-bezier(0.76, 0, 0.24, 1);    /* papier dat wordt opengeslagen */
  --fas-dur: 0.9s;
  --fas-dur-slow: 1.4s;
  --fas-d0: 0ms;                                       /* startvertraging (tijdens de intro) */
}

/* ------------------------------------------------------------------ 1. Intro: het papier gaat open
   Eén keer per bezoek. Roos verschijnt, het crème vel schuift omhoog. Puur CSS, dus ook zonder script klaar. */
html.fas-intro body::before,
html.fas-intro body::after { content: ""; position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
html.fas-intro body::before { background: var(--fas-cream, #FFF2D8); animation: fas-intro-sheet 1.9s var(--fas-ease-lift) forwards; }
html.fas-intro body::after {
  background: var(--fas-intro-mark) center / 7.2rem no-repeat;
  animation: fas-intro-mark 1.9s var(--fas-ease-silk) forwards;
}
@keyframes fas-intro-sheet { 0%, 55% { translate: 0 0; } 100% { translate: 0 -101%; } }
@keyframes fas-intro-mark {
  0% { opacity: 0; scale: 0.86; translate: 0 1.2rem; }
  30%, 52% { opacity: 1; scale: 1; translate: 0 0; }
  78%, 100% { opacity: 0; scale: 1; translate: 0 -6rem; }
}

/* ------------------------------------------------------------------ 2. Koppen: woord voor woord omhoog
   Het script knipt h1 en h2 in woorden. Tot dat gebeurd is, blijft de kop onzichtbaar (geen flits). */
html.fas-motion main :is(h1, h2):not(.fas-m-split):not(:where(.fas-studio, .fas-bon, .fas-m-off) *) { opacity: 0; }
.fas-w { display: inline-block; overflow: clip; overflow-clip-margin: 0.04em; vertical-align: bottom; padding: 0.08em 0.06em 0.16em; margin: -0.08em -0.06em -0.16em; }
.fas-w__i { display: inline-block; }
html.fas-motion .fas-m-split .fas-w__i {
  translate: 0 115%;
  transition: translate var(--fas-dur-slow) var(--fas-ease-silk) calc(var(--fas-d0) + var(--fas-d, 0ms) + var(--w, 0) * 55ms);
}
html.fas-motion .fas-m-split.is-in .fas-w__i { translate: 0 0; }

/* ------------------------------------------------------------------ 3. Tekst en knoppen: zacht omhoog */
html.fas-motion .fas-m-rise {
  opacity: 0; translate: 0 1.8rem;
  transition: opacity var(--fas-dur) ease calc(var(--fas-d0) + var(--fas-d, 0ms)), translate var(--fas-dur-slow) var(--fas-ease-silk) calc(var(--fas-d0) + var(--fas-d, 0ms));
}
html.fas-motion .fas-m-rise.is-in { opacity: 1; translate: 0 0; }

/* ------------------------------------------------------------------ 4. Beeld: uitpakken
   Het beeld komt van onder naar boven vrij, de foto zakt daarbij van iets te groot naar zijn plek. */
/* De knip zit op de foto zelf, niet op het vak: zo ziet de browser het vak nog wel in beeld komen. */
html.fas-motion .fas-m-unwrap { overflow: clip; }
html.fas-motion .fas-m-unwrap img {
  clip-path: inset(100% 0 0 0); scale: 1.14;
  transition: clip-path var(--fas-dur-slow) var(--fas-ease-lift) calc(var(--fas-d0) + var(--fas-d, 0ms)), scale 2.2s var(--fas-ease-silk) calc(var(--fas-d0) + var(--fas-d, 0ms));
}
html.fas-motion .fas-m-unwrap.is-in img { clip-path: inset(0 0 0 0); scale: 1; }
/* Na het uitpakken neemt de gewone hover het weer over */
html.fas-motion .fas-m-unwrap.is-done img { clip-path: none; transition: opacity 0.6s ease, scale 1.4s var(--fas-ease-silk); }

/* ------------------------------------------------------------------ 5. Goudfolie: één glans
   Gouden tekst krijgt bij binnenkomst één keer een lichtstreep, als folie die het licht vangt. */
html.fas-motion .fas-m-foil {
  background: linear-gradient(100deg, var(--fas-gold) 0 42%, #F6E3B4 50%, var(--fas-gold) 58% 100%) 100% 0 / 280% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
html.fas-motion .fas-m-foil.is-in { animation: fas-foil 2.6s var(--fas-ease-draw) 0.5s both; }
@keyframes fas-foil { from { background-position: 100% 0; } to { background-position: 0% 0; } }

/* ------------------------------------------------------------------ 6. De ring: boeketten komen één voor één op */
html.fas-motion .fas-ring:not(.is-grid) .fas-ring__link { animation: fas-ring-in 1.4s var(--fas-ease-silk) calc(var(--fas-d0) + 250ms + var(--i, 0) * 90ms) both; }
html.fas-motion .fas-ring:not(.is-grid) .fas-ring__orbit { animation: fas-orbit-in 2s var(--fas-ease-silk) var(--fas-d0) both; }
@keyframes fas-ring-in { from { opacity: 0; transform: translateY(3.2rem) scale(0.86); } to { opacity: 1; transform: none; } }
@keyframes fas-orbit-in { from { opacity: 0; scale: 0.9; } to { opacity: 1; scale: 1; } }

/* Rozenblaadjes: een paar, heel traag, alleen achter de ring. Uit te zetten in de thema-instellingen. */
.fas-petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fas-petal {
  position: absolute; top: -6%; left: var(--x);
  width: var(--s); height: calc(var(--s) * 1.25);
  background: radial-gradient(120% 90% at 30% 25%, color-mix(in srgb, var(--fas-brand) 78%, #fff) 0%, var(--fas-brand) 55%, var(--fas-wine) 100%);
  border-radius: 80% 12% 80% 12% / 90% 12% 90% 12%;
  opacity: 0; filter: blur(var(--b, 0px));
  animation: fas-petal-fall var(--t) linear var(--delay) infinite, fas-petal-sway calc(var(--t) / 3) ease-in-out var(--delay) infinite alternate;
}
@keyframes fas-petal-fall {
  0% { top: -6%; opacity: 0; rotate: 0deg; }
  8% { opacity: var(--o, 0.55); }
  88% { opacity: var(--o, 0.55); }
  100% { top: 104%; opacity: 0; rotate: var(--r, 220deg); }
}
@keyframes fas-petal-sway { from { translate: -2.4rem 0; } to { translate: 2.4rem 0; } }

/* ------------------------------------------------------------------ 7. Hover: klein en precies */
/* Knoppen: een satijnglans die één keer over de knop trekt, en de pijl schuift mee */
html.fas-motion .fas-btn {
  background-image: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.18) 50%, transparent 62%);
  background-size: 260% 100%; background-position: 130% 0; background-repeat: no-repeat;
  transition: background-color 0.5s ease, background-position 0s, color 0.4s ease, box-shadow 0.4s ease;
}
html.fas-motion .fas-btn:hover { background-position: -30% 0; transition: background-color 0.5s ease, background-position 1.1s var(--fas-ease-silk), color 0.4s ease, box-shadow 0.4s ease; }
html.fas-motion .fas-btn > span[aria-hidden] { display: inline-block; transition: translate 0.6s var(--fas-ease-silk); }
html.fas-motion .fas-btn:hover > span[aria-hidden] { translate: 0.4rem 0; }

/* Menu: de lijn wordt onder het woord getrokken, van links naar rechts, en loopt rechts weer weg */
html.fas-motion .fas-footer nav a, html.fas-motion .fas-bon__customize {
  background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
  padding-bottom: 0.3rem; text-decoration: none;
  transition: background-size 0.6s var(--fas-ease-draw), color 0.3s ease;
}
html.fas-motion .fas-footer nav a:hover, html.fas-motion .fas-bon__customize:hover { background-position: 0 100%; background-size: 100% 1px; }

/* Kaarten: de foto komt heel traag iets dichterbij, de naam schuift een fractie op */
html.fas-motion .fas-card__img { transition: opacity 0.6s ease, scale 1.4s var(--fas-ease-silk); }
html.fas-motion .fas-card__link:hover .fas-card__img { scale: 1.045; }
html.fas-motion .fas-card__name { transition: translate 0.6s var(--fas-ease-silk); }
html.fas-motion .fas-card__link:hover .fas-card__name { translate: 0.4rem 0; }
html.fas-motion .fas-gezien__img { transition: scale 1.4s var(--fas-ease-silk); }

/* Kop: zie assets/fas-header.css */

/* ------------------------------------------------------------------ 8. De cursor: een klein rond kaartje "Bekijk" */
.fas-cursor {
  position: fixed; left: 0; top: 0; z-index: 900; pointer-events: none;
  width: 8.4rem; height: 8.4rem; margin: -4.2rem 0 0 -4.2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--fas-cream); color: var(--fas-brand);
  font: var(--fas-label); letter-spacing: 0.02em; text-transform: uppercase;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fas-brand) 35%, transparent), 0 12px 32px rgba(26, 20, 20, 0.14);
  scale: 0; opacity: 0;
  transition: scale 0.5s var(--fas-ease-silk), opacity 0.3s ease;
}
.fas-cursor.is-on { scale: 1; opacity: 1; }
.fas-cursor.is-down { scale: 0.86; }

/* ------------------------------------------------------------------ 9. Scrollen: het beeld beweegt een fractie trager dan de pagina */
@supports (animation-timeline: view()) {
  html.fas-motion .fas-bt__media { overflow: clip; }
  html.fas-motion .fas-bt__img { animation: fas-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes fas-drift { from { transform: translateY(-3.5%) scale(1.08); } to { transform: translateY(3.5%) scale(1.08); } }
}

/* ------------------------------------------------------------------ 10. Van pagina naar pagina
   De pagina's lopen in elkaar over en het boeket waar je op klikt, groeit door naar het look-scherm. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fas-vt-out 0.45s ease both; }
::view-transition-new(root) { animation: fas-vt-in 0.7s ease 0.1s both; }
@keyframes fas-vt-out { to { opacity: 0; } }
@keyframes fas-vt-in { from { opacity: 0; } }
.fas-section-header { view-transition-name: fas-header; }
html.fas-motion .fas-look__img { view-transition-name: fas-product; }
::view-transition-group(fas-product) { animation-duration: 0.9s; animation-timing-function: var(--fas-ease-lift); }
::view-transition-old(fas-product), ::view-transition-new(fas-product) { height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ Minder beweging: alles uit */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.fas-intro body::before, html.fas-intro body::after { display: none; }
  .fas-petals, .fas-cursor { display: none; }
}