/* Noa & Dje -- homeblok "Prints & stoffen" (stapel foto's + printrondjes).
   29-10-2026, voorstel Angela. Markup: template-parts/home/stoffen.php, gedrag: assets/js/stoffen-v2.js. */

.fabric2 {
  position: relative;
  background: var(--lavender, #D7C9E8);
  overflow: hidden;
  border-radius: 50% 50% 50% 50% / 5.5vw 5.5vw 5.5vw 5.5vw;
  padding: 7rem 0;
  color: var(--text, #4a3b38);
}
.f2-inner {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto; padding: 0 5%;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 4rem; align-items: center;
}
.f2-inner > * { min-width: 0; }

/* zwevende versiering */
.f2-deco { position: absolute; z-index: 1; pointer-events: none; color: #955251; opacity: .22; will-change: transform; }
.f2-deco.is-w { color: #fff; opacity: .6; }
.f2-deco svg { display: block; width: 100%; height: auto; animation: f2bob var(--d, 9s) ease-in-out infinite; animation-delay: var(--w, 0s); }
@keyframes f2bob { 0%, 100% { transform: translateY(0) rotate(var(--r0, -6deg)); } 50% { transform: translateY(-16px) rotate(var(--r1, 8deg)); } }

/* stapel foto's */
.f2-stack { position: relative; width: min(440px, 86vw); aspect-ratio: 3 / 4.1; margin: 0 auto; perspective: 1000px; }
.f2-card {
  position: absolute; inset: 0;
  border-radius: 50% 50% 22px 22px / 37% 37% 22px 22px;
  overflow: hidden; background: #fff;
  box-shadow: 0 22px 50px rgba(74, 59, 56, .22);
  transition: transform .8s cubic-bezier(.22, .9, .28, 1), opacity .6s, filter .6s;
  cursor: pointer;
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--rot, 0deg)) scale(var(--s, 1));
}
.f2-card img { display: block; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.f2-card[data-pos="0"] { --x: 0; --y: 0; --rot: -2deg; --s: 1; z-index: 5; cursor: default; transform: translate(0, 0) rotate(-2deg) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); }
.f2-card[data-pos="1"] { --x: 46px; --y: 14px; --rot: 5deg; --s: .95; z-index: 4; filter: saturate(.9); }
.f2-card[data-pos="2"] { --x: -48px; --y: 26px; --rot: -7deg; --s: .9; z-index: 3; filter: saturate(.85); }
.f2-card[data-pos="1"]:hover, .f2-card[data-pos="2"]:hover { --y: 6px; }
.f2-card:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="2"]) { --x: 0; --y: 34px; --rot: 0deg; --s: .86; z-index: 2; opacity: 0; pointer-events: none; }
.f2-card[data-pos="0"].is-swing { animation: f2swing .8s cubic-bezier(.22, .9, .28, 1); }
@keyframes f2swing { 0% { transform: translate(70px, 10px) rotate(10deg) scale(.94); opacity: .2; } 100% { transform: translate(0, 0) rotate(-2deg); } }
.f2-tag {
  position: absolute; z-index: 6; right: -6px; top: 24px;
  background: #fff; color: #955251;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 16px; border-radius: 999px;
  box-shadow: 0 8px 22px rgba(74, 59, 56, .16); transform: rotate(6deg);
}
.f2-cap { text-align: center; margin-top: 1.8rem; min-height: 3.6rem; }
.f2-cap b { display: block; font-family: var(--serif, "Cormorant Garamond", Georgia, serif); font-weight: 600; font-size: 1.6rem; line-height: 1.2; transition: opacity .35s, transform .35s; }
.f2-cap a { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #955251; text-decoration: none; border-bottom: 1.5px solid #955251; padding-bottom: 2px; transition: opacity .35s, transform .35s; display: inline-block; }
.f2-cap.is-out b, .f2-cap.is-out a { opacity: 0; transform: translateY(6px); }

/* tekst */
.fabric2 .eyebrow { display: block; margin-bottom: .8rem; }
.fabric2 h2 { font-size: clamp(2.4rem, 4.2vw, 3.6rem); line-height: 1.1; margin: 0 0 1rem; }
.fabric2 h2 em {
  display: inline-block; font-size: .78em; line-height: 1; margin-top: .7em; padding: 0 .1em .35em;
  clip-path: inset(-90% 100% -90% -45%);
  transition: clip-path 1.6s cubic-bezier(.5, .1, .2, 1) .35s;
}
.fabric2.is-in h2 em { clip-path: inset(-90% -45% -90% -45%); }
.f2-body > p { margin: 0 0 1.6rem; max-width: 430px; line-height: 1.7; }
.f2-reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s, transform .9s; }
.fabric2.is-in .f2-reveal { opacity: 1; transform: none; }
.fabric2.is-in .f2-r2 { transition-delay: .15s; }
.fabric2.is-in .f2-r3 { transition-delay: .3s; }
.fabric2.is-in .f2-r4 { transition-delay: .45s; }

/* ronde printkiezer met voortgangsring */
.f2-sw { display: flex; flex-wrap: wrap; gap: .9rem; margin: 0 0 2rem; }
.f2-s { position: relative; width: 64px; height: 64px; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; transition: transform .35s; }
.f2-s i { position: absolute; inset: 5px; border-radius: 50%; overflow: hidden; box-shadow: 0 3px 10px rgba(74, 59, 56, .2); transition: inset .35s; }
.f2-s i img { display: block; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.f2-s:hover { transform: translateY(-4px); }
.f2-s.on i { inset: 6px; }
.f2-s svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.f2-s circle { fill: none; stroke: #955251; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 176; stroke-dashoffset: 176; opacity: 0; }
.f2-s.on circle { opacity: 1; }
.f2-s.on.is-run circle { animation: f2ring var(--t, 4.6s) linear forwards; }
.f2-s.on.is-static circle { stroke-dashoffset: 0; }
@keyframes f2ring { to { stroke-dashoffset: 0; } }
.f2-s:focus-visible { outline: 2px solid #955251; outline-offset: 3px; }

.f2-btn {
  display: inline-flex; gap: .7rem; align-items: center;
  background: #955251; color: #fff; text-decoration: none;
  padding: 1.05rem 1.9rem; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  transition: background .3s, opacity .9s, transform .9s;
}
.f2-btn span { display: inline-block; transition: transform .3s; }
.f2-btn:hover { background: #7d4241; color: #fff; }
.f2-btn:hover span { transform: translateX(6px); }

@media (max-width: 860px) {
  .fabric2 { padding: 5rem 0 4.5rem; border-radius: 50% 50% 50% 50% / 8vw 8vw 8vw 8vw; }
  .f2-inner { grid-template-columns: 1fr; gap: 2.4rem; }
  .f2-card[data-pos="1"] { --x: 26px; }
  .f2-card[data-pos="2"] { --x: -28px; }
  .f2-tag { right: 14px; top: 14px; transform: rotate(4deg); }
  .f2-sw { flex-wrap: nowrap; overflow-x: auto; margin-right: -5%; padding-right: 5%; scrollbar-width: none; }
  .f2-sw::-webkit-scrollbar { display: none; }
  .f2-s { flex: none; }
  .f2-deco:nth-child(3), .f2-deco:nth-child(4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fabric2 *, .fabric2 *::before, .fabric2 *::after { animation: none !important; transition: none !important; }
  .fabric2 h2 em { clip-path: none; }
  .f2-reveal { opacity: 1; transform: none; }
}