/* ============================================================================
   FurFam painting wait and reveal (2026-10-28), the order page's panel over the gallery while the preview paints.
   Loaded only by page_2026/redesign/page.order.php while the Etsy style is on (body.style-etsy), after
   css/furfam-etsy.css, whose tokens it uses. EVERY rule is scoped under body.style-etsy, and the whole file stays
   within a 5 KB gzip budget. Spec: docs/superpowers/specs/2026-10-28-painting-wait-reveal-design.md; the picked
   mockup is docs/design/painting-reveal-2026-10/a3-charm-sprinkle.html. The markup is in the order page's
   $etsy_gallery; the classes are driven by js/furfam-reveal.js.
   ========================================================================== */

/* ==== REVEAL (spec "What the shopper sees"; mockup a3-charm-sprinkle.html, stage.css) ==== */
/* The panel's base (absolute over the gallery, peach, clipped) is furfam-etsy.css STUDIO. --u is one px of the mockup's
   390 px phone, so the art is 196 px at 390 px wide and the whole picture scales with the gallery. No side padding: cqw
   counts the panel's content box. No display here: the children are blocks, centred by their margins. */
body.style-etsy .ff-studio.ff-reveal{--u:calc(100cqw / 390);padding:calc(40 * var(--u)) 0 calc(16 * var(--u));color:var(--e-ink);transition:background-color .6s ease;}
@supports not (width:1cqw){body.style-etsy .ff-studio.ff-reveal{--u:1px;}}
@media (max-width:959.98px){body.style-etsy .ff-studio.ff-reveal{border-radius:0;}}   /* the gallery is edge to edge there */
body.style-etsy .ff-reveal-skip{position:absolute;right:calc(12 * var(--u));bottom:calc(4 * var(--u));font:400 calc(11 * var(--u))/1 var(--ff-font);color:var(--e-ink-2);opacity:0;transition:opacity .3s;pointer-events:none;}
body.style-etsy .ff-studio.is-revealing .ff-reveal-skip{opacity:.7;}

/* The art: the white circle with its glow, pulse and paw; the charm layer under it; doodles, stars, the pet and the name over
   it. Taps go through to the panel (a tap during the reveal skips). */
body.style-etsy .ff-reveal-art{position:relative;width:calc(196 * var(--u));aspect-ratio:1/1.08;margin:0 auto;pointer-events:none;transition:transform .95s cubic-bezier(.3,.7,.2,1);}
body.style-etsy .ff-reveal-art.is-gather{animation:ffRvShake .5s ease-in-out both;}
body.style-etsy .ff-reveal-disc{position:absolute;left:6%;right:6%;top:4%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:var(--e-s1);overflow:hidden;}
body.style-etsy .ff-reveal-disc.is-ping{animation:ffRvPing 1.15s ease-out both;}
body.style-etsy .ff-reveal-glow{position:absolute;inset:-10%;border-radius:50%;background:radial-gradient(circle at 50% 46%,var(--e-sun) 0%,#FFEDB8 30%,#FFF6DA00 66%);transform:scale(var(--g,.25));opacity:calc(.35 + var(--g,.25) * .6);transition:transform .6s ease,opacity .6s ease;}
body.style-etsy .ff-reveal-pulse{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 46%,#FFF1C4 0%,#FFE7A3 30%,#FFF6DA00 66%);opacity:0;}
body.style-etsy .ff-reveal-pulse.is-go{animation:ffRvPulse 1.15s ease-out both;}
body.style-etsy .ff-reveal-paw{position:absolute;left:21%;top:21%;width:58%;height:58%;stroke:var(--e-ink);stroke-width:.6;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:0;transition:opacity .5s ease;}
body.style-etsy .ff-reveal-floaters{position:absolute;inset:0;pointer-events:none;}
body.style-etsy .ff-reveal-bubble, body.style-etsy .ff-reveal-fan{will-change:transform,opacity;}   /* they paint and place themselves */
body.style-etsy .ff-reveal-doodle{overflow:visible;transition:translate .42s cubic-bezier(.55,0,.85,.3),scale .42s cubic-bezier(.55,0,.85,.3),opacity .4s ease;}
body.style-etsy .ff-reveal-doodle path{fill:none;stroke:var(--e-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:80;stroke-dashoffset:80;transition:stroke-dashoffset .6s ease-in-out;}
body.style-etsy .ff-reveal-doodle.is-drawn path{stroke-dashoffset:0;}
body.style-etsy .ff-reveal-doodle.is-breathing{animation:ffRvBreathe 3.2s ease-in-out infinite;}
body.style-etsy .ff-reveal-art.is-rush .ff-reveal-doodle{translate:var(--rx,0) var(--ry,0);scale:.3;}
body.style-etsy .ff-reveal-art.is-spring .ff-reveal-doodle{transition:translate .7s cubic-bezier(.25,1.5,.45,1),scale .7s cubic-bezier(.25,1.5,.45,1),opacity .4s ease;}
body.style-etsy .ff-reveal-rim, body.style-etsy .ff-reveal-patience{position:absolute;width:calc(13 * var(--u));height:calc(13 * var(--u));color:var(--e-gold-2);animation:ffRvPop .45s cubic-bezier(.3,1.6,.5,1) backwards;}
body.style-etsy .ff-reveal-patience{width:calc(16 * var(--u));height:calc(16 * var(--u));animation-duration:.5s;}
body.style-etsy :is(.ff-reveal-rim,.ff-reveal-patience,.ff-reveal-burst i,.ff-reveal-tip) svg{display:block;width:100%;height:100%;}
/* The burst plays as the controller inserts it (12 stars, each with --i, --x, --y) */
body.style-etsy .ff-reveal-burst{position:absolute;left:50%;top:46%;width:0;height:0;pointer-events:none;}
body.style-etsy .ff-reveal-burst i{position:absolute;left:calc(-7 * var(--u));top:calc(-7 * var(--u));width:calc(14 * var(--u));height:calc(14 * var(--u));color:var(--e-gold-2);opacity:0;animation:ffRvBurst .9s cubic-bezier(.2,.7,.3,1) calc(var(--i) * 35ms) both;}
/* The painting blooms in through the watercolour mask (its image is set inline); the Signature name is an ink block masked by
   its image (set inline at E2), wiped in from the left */
body.style-etsy .ff-reveal-pet{position:absolute;left:12%;top:0;width:76%;height:auto;filter:drop-shadow(0 calc(8 * var(--u)) calc(14 * var(--u)) #150A041A);opacity:0;}
body.style-etsy .ff-reveal-pet.is-bloom{opacity:1;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 32%;mask-position:50% 32%;animation:ffRvBloom 1.05s cubic-bezier(.35,.1,.25,1) both;}
body.style-etsy .ff-reveal-name{position:absolute;left:22%;bottom:calc(2 * var(--u));width:56%;aspect-ratio:2/1;background:var(--e-ink);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;clip-path:inset(0 100% 0 0);}
body.style-etsy .ff-reveal-name.is-in{animation:ffRvInk .8s ease-in-out forwards;}

/* The words and the honest bar, with the marigold star on its tip */
body.style-etsy .ff-reveal-copy{max-width:calc(318 * var(--u));margin:calc(10 * var(--u)) auto 0;}
body.style-etsy .ff-reveal-line, body.style-etsy .ff-reveal-oops p{margin:0;font:400 calc(18 * var(--u))/1.25 var(--e-serif);letter-spacing:-.02em;text-align:center;text-wrap:balance;color:var(--e-ink);}
body.style-etsy .ff-reveal-line{display:flex;align-items:center;justify-content:center;min-height:calc(46 * var(--u));}
body.style-etsy .ff-reveal-meter{margin-top:calc(8 * var(--u));}
body.style-etsy .ff-reveal-label{margin-bottom:calc(6 * var(--u));font:700 calc(13 * var(--u))/1.2 var(--ff-font);color:var(--e-ink);}
body.style-etsy .ff-reveal-track{position:relative;height:calc(10 * var(--u));border-radius:999px;background:#33140030;}
body.style-etsy .ff-reveal-fill{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:999px;background:var(--e-ink-2);transform-origin:0 50%;transform:scaleX(var(--p,0));}
body.style-etsy .ff-reveal-tip{position:absolute;top:50%;left:calc(var(--p,0) * 100%);width:calc(20 * var(--u));height:calc(20 * var(--u));margin:calc(-10 * var(--u)) 0 0 calc(-10 * var(--u));color:var(--e-gold-2);filter:drop-shadow(0 1px 1px #0000002a);}
body.style-etsy .ff-reveal-tip svg{animation:ffRvTwinkle 2.4s ease-in-out infinite;}
body.style-etsy .ff-reveal-tip.is-done svg{animation:ffRvSpin .7s cubic-bezier(.3,1.4,.5,1) both;}
body.style-etsy .ff-reveal-note{margin:calc(8 * var(--u)) 0 0;font:400 calc(12.5 * var(--u))/1.35 var(--ff-font);color:var(--e-ink-2);text-align:center;}

/* The failure stays a warm pet moment: everything fades to a quarter, the inked paw, kind words, two ways forward */
body.style-etsy .ff-reveal-oops{display:flex;flex-wrap:wrap;gap:calc(10 * var(--u)) calc(8 * var(--u));max-width:calc(318 * var(--u));margin:0 auto;}
body.style-etsy .ff-reveal-oops[hidden]{display:none;}
body.style-etsy .ff-reveal-oops p{flex:0 0 100%;}
body.style-etsy :is(.ff-reveal-again,.ff-reveal-other){flex:1 1 0;min-width:0;min-height:max(44px,calc(44 * var(--u)));padding:0 calc(10 * var(--u));border-radius:999px;font:700 calc(14 * var(--u))/1 var(--ff-font);cursor:pointer;}
body.style-etsy .ff-reveal-again{border:0;background:var(--e-gold);color:var(--e-ink);box-shadow:0 4px 12px #E9AE1F44;}
body.style-etsy .ff-reveal-again:not(:disabled):hover{background:var(--e-gold-2);}
body.style-etsy .ff-reveal-again:disabled{background:var(--e-disabled);box-shadow:none;cursor:default;}   /* the Try again cooldown */
body.style-etsy .ff-reveal-other{border:1px solid var(--e-ink);background:#fff;color:var(--e-ink);}
body.style-etsy .ff-studio.is-failed .ff-reveal-copy{display:none;}
body.style-etsy .ff-studio.is-failed .ff-reveal-disc{background:#F7F4F2;}
body.style-etsy .ff-studio.is-failed .ff-reveal-paw{opacity:.9;}
body.style-etsy .ff-studio.is-failed :is(.ff-reveal-doodle,.ff-reveal-rim,.ff-reveal-patience){opacity:.25;animation-play-state:paused;}
body.style-etsy .ff-studio.is-failed :is(.ff-reveal-glow,.ff-reveal-name,.ff-reveal-floaters){opacity:0;transition:opacity .3s ease;}

/* The settle: the art flies onto the blanket (the controller's transform) while the peach and the circle fade away, and the
   painting goes last, as it lands; then the panel is hidden */
body.style-etsy .ff-studio.is-settling{background-color:#FFF3E700;}
body.style-etsy .ff-studio.is-settling :is(.ff-reveal-skip,.ff-reveal-copy,.ff-reveal-disc,.ff-reveal-doodle,.ff-reveal-rim,.ff-reveal-patience,.ff-reveal-floaters){opacity:0!important;transition:opacity .45s ease;}
body.style-etsy .ff-studio.is-settling .ff-reveal-name{opacity:0!important;transition:opacity .25s ease;}
body.style-etsy .ff-studio.is-settling .ff-reveal-pet{opacity:0!important;transition:opacity .3s ease .75s;}

/* The page around it, only while the controller is mounted (body.ff-reveal-on): the buy-box and phone bars show the panel's
   honest value instead of their 17 s / 40 s fills; the blanket skips its own iris while the panel shows and for the 2.4 s after
   it lifts (the panel was the reveal; a saved pet and a pet switch keep it); Add to cart rings once when the panel lifts (a
   ring, never a transform: the walk clicks need a stable box) */
body.style-etsy.ff-reveal-on form#order-info:is(.status-uploading,.status-pregenerating,.status-generating) #design-status-message .status-bar .progress{animation:none;width:calc(var(--ff-paint-p,0)*100%);}
body.style-etsy.ff-reveal-on section#order-page-2 form#order-info.status-complete:is(.ff-reveal-done, :has(.ff-studio:not([hidden]))) div.design-canvas div.custom-design img.custom-design:not(.preloading){-webkit-mask-image:none;mask-image:none;transition:none;}
body.style-etsy form#order-info.ff-reveal-done #add-to-cart{animation:ffRvRing 1.6s ease-out 1;}

@keyframes ffRvShake{0%,100%{rotate:0deg}25%{rotate:-2.2deg}50%{rotate:2deg}75%{rotate:-1.2deg}}
@keyframes ffRvPing{from{box-shadow:var(--e-s1),0 0 0 0 #F6C44575}to{box-shadow:var(--e-s1),0 0 0 calc(18 * var(--u)) #F6C44500}}
@keyframes ffRvPulse{0%{opacity:0;transform:scale(.45)}30%{opacity:.95}100%{opacity:0;transform:scale(1.3)}}
@keyframes ffRvBreathe{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(6deg) scale(1.06)}}
@keyframes ffRvPop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes ffRvBurst{0%{opacity:0;transform:translate(0,0) scale(.3) rotate(0)}25%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1) rotate(160deg)}}
@keyframes ffRvBloom{from{-webkit-mask-size:0% 0%;mask-size:0% 0%}to{-webkit-mask-size:360% 360%;mask-size:360% 360%}}
@keyframes ffRvInk{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes ffRvTwinkle{0%,100%{transform:scale(1)}50%{transform:scale(1.14) rotate(8deg)}}
@keyframes ffRvSpin{from{transform:scale(1) rotate(0)}50%{transform:scale(1.5) rotate(180deg)}to{transform:scale(1.2) rotate(360deg)}}
@keyframes ffRvRing{from{box-shadow:var(--e-gold-glow),0 0 0 0 #F6C4458C}to{box-shadow:var(--e-gold-glow),0 0 0 14px #F6C44500}}
@keyframes ffRvFade{from{opacity:0}to{opacity:1}}
/* Last in this section: a hidden panel is never on screen, whatever else matches it */
body.style-etsy .ff-studio[hidden]{display:none!important;}

/* ==== REDUCED MOTION (spec "Reduced motion"): no bubbles, fans, pulses, breathing or twinkle; things only fade ==== */
@media (prefers-reduced-motion:reduce){
  body.style-etsy .ff-reveal-bubble, body.style-etsy .ff-reveal-fan{display:none;}
  body.style-etsy .ff-reveal-pulse.is-go, body.style-etsy .ff-reveal-disc.is-ping, body.style-etsy .ff-reveal-doodle.is-breathing, body.style-etsy .ff-reveal-tip svg, body.style-etsy .ff-reveal-tip.is-done svg{animation:none;}
  body.style-etsy .ff-reveal-doodle{opacity:0;transition:opacity .7s ease;}
  body.style-etsy .ff-reveal-doodle path{transition:none;}
  body.style-etsy .ff-reveal-doodle.is-drawn{opacity:1;}
  body.style-etsy .ff-reveal-rim, body.style-etsy .ff-reveal-patience, body.style-etsy .ff-reveal-name.is-in{animation:ffRvFade .6s ease backwards;}
  body.style-etsy .ff-reveal-name.is-in{clip-path:inset(0);}
  body.style-etsy form#order-info.ff-reveal-done #add-to-cart{animation:none;box-shadow:var(--e-gold-glow),0 0 0 2px var(--e-gold);}
}