/* Divider (render.php, view.js). Six styles; .in is added by view.js when it scrolls into view
   (without JS / reduced motion everything is shown finished). */
.fratoz-divider {
	--red: #ab1f24; --ink: #141414; --sand: #f5f1ed;
	--mont: var(--wp--preset--font-family--montserrat, Montserrat, sans-serif);
	--edge: 0px;
	position: relative;
	margin-block: clamp(2rem, 5vw, 3.5rem) !important;
	color: var(--ink);
}
.fratoz-divider.alignfull { --edge: clamp(1rem, 2.5vw, 2rem); width: calc(100% - 2 * var(--edge)) !important; margin-inline: auto !important; max-width: none; }
.fratoz-divider.is-mark.alignfull, .fratoz-divider.is-heads.alignfull, .fratoz-divider.is-ticker, .fratoz-divider.is-pointing.col-red.alignfull { --edge: 0px; }
.fratoz-divider svg { display: block; overflow: visible; }

/* animation start states (only once view.js is running) */
.fratoz-divider.is-ready:not(.in) .fdv-ln { transform: scaleX(0); }
.fratoz-divider.is-ready:not(.in) .fdv-tk { transform: scaleY(0); }
.fratoz-divider.is-ready:not(.in) .fdv-ar, .fratoz-divider.is-ready:not(.in) .fdv-lab { opacity: 0; }
.fratoz-divider.is-ready:not(.in) .fdv-lab { transform: translate(-50%, -50%) scale(.6); }
.fratoz-divider.is-mark.is-ready:not(.in)::before, .fratoz-divider.is-mark.is-ready:not(.in)::after { transform: scaleX(0); }
.fratoz-divider.is-mark.is-ready:not(.in) .fdv-mk svg { transform: scale(0) rotate(-30deg); }
.fratoz-divider.is-pointing.is-ready:not(.in) svg { opacity: 0; transform: translateX(-12px) scale(.5); }
.fratoz-divider.is-pointing.is-left.is-ready:not(.in) svg { transform: translateX(12px) scale(.5) scaleX(-1); }
.fratoz-divider.is-heads.is-ready:not(.in) .fdv-clip svg { transform: translateY(105%); }

/* 1. dimension line */
.fratoz-divider.is-dimension { height: 70px; }
.fratoz-divider .fdv-ln { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--ink); transition: transform 1.1s cubic-bezier(.6, 0, .2, 1); }
.fratoz-divider .fdv-tk { position: absolute; top: calc(50% - 14px); width: 2px; height: 28px; background: var(--ink); transition: transform .3s ease 1s; }
.fratoz-divider .fdv-tk.is-l { left: 0; } .fratoz-divider .fdv-tk.is-r { right: 0; }
.fratoz-divider .fdv-ar { position: absolute; top: calc(50% - 6px); width: 12px; height: 12px; border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); transition: opacity .3s ease 1s; }
.fratoz-divider .fdv-ar.is-l { left: 4px; transform: rotate(-45deg); } .fratoz-divider .fdv-ar.is-r { right: 4px; transform: rotate(135deg); }
.fratoz-divider .fdv-lab { position: absolute; left: 50%; top: 50%; padding: .3rem 1rem; background: var(--wp--preset--color--white, #fff); font: 800 .8rem/1 var(--mont); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; transform: translate(-50%, -50%); transition: opacity .35s .5s, transform .5s cubic-bezier(.3, 1.6, .5, 1) .5s; }

/* 2. handshake mark */
.fratoz-divider.is-mark { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.6rem; }
.fratoz-divider.is-mark::before, .fratoz-divider.is-mark::after { content: ""; height: 2px; background: var(--ink); transition: transform 1s cubic-bezier(.6, 0, .2, 1) .35s; }
.fratoz-divider.is-mark::before { transform-origin: right; } .fratoz-divider.is-mark::after { transform-origin: left; }
.fratoz-divider .fdv-mk svg { width: 64px; height: auto; color: var(--red); transition: transform .7s cubic-bezier(.3, 1.6, .5, 1); }
.fratoz-divider.is-mark.in .fdv-mk svg { animation: fdv-shake 4s ease-in-out 1.2s infinite; }
@keyframes fdv-shake { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(-9deg); } 79% { transform: rotate(7deg); } 84% { transform: rotate(-5deg); } 89% { transform: rotate(3deg); } }

/* 3. ticker */
.fratoz-divider.is-ticker { overflow: hidden; padding: .85rem 0; background: var(--ink); color: #fff; }
.fratoz-divider.is-ticker.col-red { background: var(--red); }
.fratoz-divider.is-ticker.col-sand { background: var(--sand); color: var(--ink); }
.fratoz-divider .fdv-tick-row { display: flex; width: max-content; animation: fdv-tick 40s linear infinite; }
.fratoz-divider.is-ticker.is-left .fdv-tick-row { animation-direction: reverse; }
.fratoz-divider.is-ticker:hover .fdv-tick-row { animation-play-state: paused; }
.fratoz-divider .fdv-run { display: inline-flex; align-items: center; gap: 1.4rem; padding-right: 1.4rem; font: 800 .85rem/1 var(--mont); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.fratoz-divider .fdv-run svg { width: 20px; height: auto; color: var(--red); }
.fratoz-divider.is-ticker.col-red .fdv-run svg { color: #fff; }
@keyframes fdv-tick { to { transform: translateX(-50%); } }

/* 4. pointing hands */
.fratoz-divider.is-pointing { --cut: #fff; display: flex; gap: 16px; align-items: center; height: 46px; overflow: hidden; }
.fratoz-divider.is-pointing.is-left { flex-direction: row-reverse; }
.fratoz-divider.is-pointing.col-red { --cut: var(--red); height: 64px; padding: 0 clamp(1rem, 2.5vw, 2rem); background: var(--red); }
.fratoz-divider.is-pointing svg { flex: none; width: 30px; height: 18px; color: var(--ink); transition: opacity .35s, transform .5s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(var(--i) * 18ms); }
.fratoz-divider.is-pointing.is-left svg { transform: scaleX(-1); }
.fratoz-divider.is-pointing.col-red svg { color: #fff; }
.fratoz-divider.is-pointing .h { fill: currentColor; }
.fratoz-divider.is-pointing .c { fill: none; stroke: var(--cut); stroke-width: 1.6; stroke-linecap: round; }
.fratoz-divider.is-pointing.in svg { animation: fdv-flow 2.2s linear infinite; animation-delay: calc(var(--i) * 70ms - 10s); }
.fratoz-divider.is-pointing.col-red.in svg { animation-name: fdv-flow-r; }
@keyframes fdv-flow { 0%, 12%, 100% { color: var(--ink); } 3% { color: var(--red); } }
@keyframes fdv-flow-r { 0%, 12%, 100% { color: #fff; } 3% { color: var(--ink); } }

/* 5. pencil hand */
.fratoz-divider.is-pencil { height: 130px; --p: 1; }
.fratoz-divider .fdv-pl { position: absolute; left: 0; bottom: 28px; width: calc(var(--p) * 100%); height: 3px; border-radius: 2px; background: var(--ink); }
.fratoz-divider .fdv-hand { position: absolute; bottom: 28px; left: calc(var(--p) * 100%); width: 84px; color: var(--red); transform: translate(-6px, 18px) rotate(calc(var(--w, 0) * 1deg)); transform-origin: 6px 100%; }
.fratoz-divider .fdv-hand svg { width: 100%; height: auto; fill: currentColor; }
.fratoz-divider.is-pencil.done .fdv-hand { animation: fdv-tap 1.6s ease-in-out infinite; }
@keyframes fdv-tap { 50% { transform: translate(-6px, 10px) rotate(-6deg); } }

/* 6. crew heads */
.fratoz-divider.is-heads { display: flex; justify-content: space-evenly; align-items: flex-end; margin-top: clamp(3rem, 6vw, 4rem) !important; border-bottom: 3px solid var(--ink); }
.fratoz-divider .fdv-hd { position: relative; width: clamp(56px, 7vw, 84px); cursor: pointer; }
.fratoz-divider .fdv-clip { display: block; height: clamp(62px, 7.8vw, 92px); overflow: hidden; }
.fratoz-divider .fdv-clip svg { width: 100%; height: auto; transform: translateY(30%); transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); transition-delay: calc(var(--i) * 140ms); }
/* each head turns toward the cursor (view.js sets the transform on this wrapper, like the crew over the home page's request board) */
.fratoz-divider .fdv-look { display: block; transform-origin: 50% 85%; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.fratoz-divider .fdv-hd.up .fdv-clip svg { transform: translateY(4%) rotate(-6deg); transition-delay: 0s; transition-duration: .35s; }
.fratoz-divider .fdv-bub { position: absolute; left: 50%; bottom: calc(100% + 4px); padding: .35rem .6rem; border: 2px solid var(--ink); border-radius: 14px; background: #fff; color: var(--red); font: 900 .8rem/1 var(--mont); white-space: nowrap; opacity: 0; transform: translateX(-50%) scale(.5); transition: opacity .15s, transform .25s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none; }
.fratoz-divider .fdv-hd.up .fdv-bub { opacity: 1; transform: translateX(-50%); }

@media (prefers-reduced-motion: reduce) {
	.fratoz-divider *, .fratoz-divider::before, .fratoz-divider::after { animation: none !important; transition: none !important; }
}