/* Forever Redwood motion kit (owner, Oct 21 - approved from the motion preview). Loaded on every page from
   common/site_header_v2.twig, with js/motion.js. Short, calm motion: presses 160ms, changes 280ms, openings 460ms.
   Everything turns off for visitors whose device asks for less motion (bottom of the file).
   Hover lifts and presses use the individual `translate` / `scale` properties so they add to any transform an
   element already has (centered arrows, carousels) instead of replacing it. */
:root{--fr-ease:cubic-bezier(.2,.7,.2,1);--fr-spring:cubic-bezier(.34,1.56,.64,1);--fr-t1:160ms;--fr-t2:280ms;--fr-t3:460ms;--fr-green:#3F6B3A}

/* ---- 1. sap line: a thin green line along the top while the next page loads (motion.js adds it) ---- */
#fr-sap{position:fixed;top:0;left:0;right:0;height:3px;z-index:100000;pointer-events:none;overflow:hidden}
#fr-sap i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#3F6B3A,#8DB37E 70%,#E9F2E2);box-shadow:0 0 10px rgba(63,107,58,.55)}
#fr-sap.go i{animation:fr-sap 2.4s var(--fr-ease) forwards}
#fr-sap.done i{width:100%!important;opacity:0;transition:opacity .35s .15s,width .2s}
@keyframes fr-sap{0%{width:0}40%{width:55%}100%{width:90%}}

/* ---- 2. page arrival: the page's sections rise in, one after another ---- */
@keyframes fr-rise{from{opacity:0;translate:0 14px}to{opacity:1;translate:none}}
html.fr-motion body :is(section,main):not(section section,main section,.frcfg-layer *,.site-header *,dialog *,.sd *){animation:fr-rise var(--fr-t3) var(--fr-ease) both}
html.fr-motion body :is(section,main):not(section section,main section,.frcfg-layer *,.site-header *,dialog *,.sd *):nth-of-type(2){animation-delay:70ms}
html.fr-motion body :is(section,main):not(section section,main section,.frcfg-layer *,.site-header *,dialog *,.sd *):nth-of-type(3){animation-delay:140ms}
html.fr-motion body :is(section,main):not(section section,main section,.frcfg-layer *,.site-header *,dialog *,.sd *):nth-of-type(n+4){animation-delay:200ms}

/* ---- 3. buttons: lift on hover, press down on click; filled buttons get a soft light sweep ---- */
:is(.frv2 .btn,.frcfg-btn,.sd-btn,.frinfo-send,.frcfg-car__btn,.replay){transition:background .25s,color .25s,border-color .25s,box-shadow var(--fr-t1) var(--fr-ease),translate var(--fr-t1) var(--fr-ease),scale var(--fr-t1) var(--fr-ease)}
:is(.frv2 .btn,.frcfg-btn,.sd-btn,.frinfo-send):not(:disabled):hover{translate:0 -2px;box-shadow:0 10px 22px rgba(30,43,32,.18)}
:is(.frv2 .btn,.frcfg-btn,.sd-btn,.frinfo-send):not(:disabled):active{translate:0 1px;scale:.985;box-shadow:0 3px 8px rgba(30,43,32,.16)}
:is(.frv2 .btn-green,.frcfg-btn-green,.sd-btn,.frinfo-send){position:relative;overflow:hidden}
:is(.frv2 .btn-green,.frcfg-btn-green,.sd-btn,.frinfo-send)::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.26) 50%,transparent 70%);translate:-120% 0;transition:translate .7s var(--fr-ease)}
:is(.frv2 .btn-green,.frcfg-btn-green,.sd-btn,.frinfo-send):not(:disabled):hover::after{translate:120% 0}
/* every other button and icon button: a quick press */
:is(button,[role="button"],.icon-btn,.dd-trigger,a.btn):not(:disabled):active{scale:.97}
:is(button,[role="button"],.icon-btn,.dd-trigger){transition-property:background,color,border-color,box-shadow,opacity,scale,translate;transition-duration:.2s,.2s,.2s,.2s,.2s,var(--fr-t1),var(--fr-t1);transition-timing-function:var(--fr-ease)}
/* links with an arrow: the arrow nudges forward */
:is(.category-heading a,.cv2-more,.frcfg-learn--head) svg{transition:translate var(--fr-t2) var(--fr-spring)}
:is(.category-heading a,.cv2-more,.frcfg-learn--head):hover svg{translate:4px 0}

/* ---- 4. growth rings: the loading mark (tree rings growing outward) ---- */
.fr-rings{position:relative;display:inline-block;width:var(--s,18px);height:var(--s,18px);flex:none;vertical-align:middle;color:inherit}
.fr-rings i{position:absolute;inset:0;border-radius:50%;border:1.6px solid currentColor;opacity:0;animation:fr-ring 1.5s var(--fr-ease) infinite}
.fr-rings i:nth-child(2){animation-delay:.5s}.fr-rings i:nth-child(3){animation-delay:1s}
.fr-rings b{position:absolute;inset:38%;border-radius:50%;background:currentColor}
@keyframes fr-ring{0%{transform:scale(.2);opacity:.95}100%{transform:scale(1);opacity:0}}
/* a button that is working: its label fades, the rings turn in its place (motion.js / the cart add .fr-busy) */
.fr-busy{pointer-events:none}
.fr-busy > :not(.fr-rings){opacity:.0}
.fr-busy > .fr-rings{position:absolute;left:50%;top:50%;margin:calc(var(--s,18px) / -2) 0 0 calc(var(--s,18px) / -2)}
:is(.frv2 .btn,.frcfg-btn,.sd-btn).fr-busy{position:relative}

/* ---- 5. shimmer for numbers being worked out (prices) ---- */
.fr-shimmer{color:transparent!important;-webkit-text-fill-color:transparent;background:linear-gradient(90deg,#C9C2B2 0%,#EFEAE0 40%,#C9C2B2 80%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;animation:fr-shim 1.1s linear infinite}
@keyframes fr-shim{from{background-position:120% 0}to{background-position:-120% 0}}
/* rolling digits (motion.js window.frRoll) */
.fr-roll{font-variant-numeric:tabular-nums;white-space:nowrap}
/* the pieces always keep the number's own type (other rules style spans next to prices) */
.fr-roll span,.fr-roll em{font:inherit!important;letter-spacing:inherit!important;color:inherit!important;margin:0!important;padding:0!important;text-transform:none!important;border:0!important;background:none!important}
.fr-roll > span{display:inline-block!important}
.fr-roll .d{height:1.15em!important;line-height:1.15em!important;overflow:hidden;vertical-align:top}
.fr-roll .d > span{display:block!important;transition:translate .55s var(--fr-ease)}
.fr-roll .d > span > em{display:block!important;height:1.15em;font-style:normal!important}
.fr-shimmer .fr-roll span,.fr-shimmer.fr-roll span{-webkit-text-fill-color:transparent}
/* a value that swaps (size numbers): the new one slides up into place */
.fr-swap{animation:fr-swap .32s var(--fr-ease)}
@keyframes fr-swap{from{opacity:0;translate:0 55%}to{opacity:1;translate:none}}

/* ---- 6. photos: a warm wood-grain shimmer holds the place, then the photo fades in from soft to sharp ---- */
img.fr-img-wait{background-color:#EDE5D8;background-image:repeating-linear-gradient(100deg,rgba(180,106,60,.07) 0 6px,transparent 6px 14px),linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);background-size:auto,200% 100%;animation:fr-grain 1.3s linear infinite}
@keyframes fr-grain{from{background-position:0 0,140% 0}to{background-position:0 0,-140% 0}}
img.fr-img-in{animation:fr-img-in .6s var(--fr-ease) both}
@keyframes fr-img-in{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:none}}

/* ---- 7. menus and dropdowns: the panel grows down from its button and its links ripple in ---- */
.frv2 .dd-panel{transform-origin:50% 0;transition:opacity var(--fr-t2) var(--fr-ease),visibility var(--fr-t2),transform var(--fr-t3) var(--fr-spring)!important;transform:translateY(-10px) scale(.98)}
.frv2 .dd.open .dd-panel{transform:none}
.frv2 .dd .dd-trigger svg.caret{transition:transform var(--fr-t2) var(--fr-spring)}
@keyframes fr-item{from{opacity:0;translate:0 8px}to{opacity:1;translate:none}}
.frv2 .dd.open :is(.category-tiles > a,.category-column,.why-panel li,.help-panel > *,.category-heading){animation:fr-item .38s var(--fr-ease) both}
.frv2 .dd.open :is(.category-tiles > a,.category-column,.why-panel li,.help-panel > *):nth-child(2){animation-delay:30ms}
.frv2 .dd.open :is(.category-tiles > a,.category-column,.why-panel li,.help-panel > *):nth-child(3){animation-delay:60ms}
.frv2 .dd.open :is(.category-tiles > a,.category-column,.why-panel li,.help-panel > *):nth-child(4){animation-delay:90ms}
.frv2 .dd.open :is(.category-tiles > a,.category-column,.why-panel li,.help-panel > *):nth-child(5){animation-delay:120ms}
.frv2 .dd.open :is(.category-tiles > a,.category-column,.why-panel li,.help-panel > *):nth-child(6){animation-delay:150ms}
.frv2 .dd.open :is(.category-tiles > a,.category-column,.why-panel li,.help-panel > *):nth-child(7){animation-delay:180ms}
.frv2 .dd.open :is(.category-tiles > a,.category-column,.why-panel li,.help-panel > *):nth-child(n+8){animation-delay:210ms}
/* account menu, search box: pop down from the icon */
@keyframes fr-pop{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
.frv2 :is(.umenu-panel,.header-search-panel):not([hidden]){transform-origin:90% 0;animation:fr-pop var(--fr-t2) var(--fr-spring)}
.frv2 .umenu-panel:not([hidden]) > *{animation:fr-item .32s var(--fr-ease) both}
.frv2 .umenu-panel:not([hidden]) > :nth-child(2){animation-delay:30ms}.frv2 .umenu-panel:not([hidden]) > :nth-child(3){animation-delay:60ms}
.frv2 .umenu-panel:not([hidden]) > :nth-child(4){animation-delay:90ms}.frv2 .umenu-panel:not([hidden]) > :nth-child(n+5){animation-delay:120ms}
.frv2 .hs-results:not([hidden]){animation:fr-pop var(--fr-t2) var(--fr-ease)}
/* mobile menu: slides in from the right, the page behind fades */
@keyframes fr-slide-in{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes fr-fade{from{opacity:0}to{opacity:1}}
.frv2 .mobile-menu[open]{animation:fr-slide-in var(--fr-t3) var(--fr-ease)}
.frv2 .mobile-menu[open]::backdrop{animation:fr-fade var(--fr-t2) ease}
.frv2 .mobile-menu[open] :is(.mobile-menu-links > *,details,.lang-row){animation:fr-item .4s var(--fr-ease) both;animation-delay:120ms}
.frv2 details[open] > :not(summary){animation:fr-item .32s var(--fr-ease) both}
/* side drawers (cart, sign in, favorites): a softer slide */
.sd-panel{transition-timing-function:var(--fr-ease)!important;transition-duration:.42s!important}

/* ---- 8. product cards: lift and the photo drifts closer ---- */
.cv2-card{transition:translate var(--fr-t2) var(--fr-ease),box-shadow var(--fr-t2)}
.cv2-card:hover{translate:0 -4px;box-shadow:0 16px 34px rgba(16,24,18,.22)}
.cv2-card img{transition:transform 1.2s var(--fr-ease)!important}
.cv2-card:hover img{transform:scale(1.06)!important}

/* ---- 9. the cart (configurator) ---- */
/* opening: the page dims and blurs, the window grows in with a gentle bounce, the step list fills in */
.frcfg-layer .frcfg-shade{transition:opacity var(--fr-t3) ease,backdrop-filter var(--fr-t3) ease!important}
.frcfg-layer.is-open .frcfg-shade{backdrop-filter:blur(3px)}
@media (min-width:1100px){
  .frcfg-layer.is-window .frcfg-drawer{transition:transform var(--fr-t3) var(--fr-spring),opacity var(--fr-t2) ease!important}
  .frcfg-layer.is-window.is-open .frcfg-wnav button{animation:fr-nav .4s var(--fr-ease) both}
  .frcfg-layer.is-window.is-open .frcfg-wnav button:nth-of-type(2){animation-delay:40ms}.frcfg-layer.is-window.is-open .frcfg-wnav button:nth-of-type(3){animation-delay:80ms}
  .frcfg-layer.is-window.is-open .frcfg-wnav button:nth-of-type(4){animation-delay:120ms}.frcfg-layer.is-window.is-open .frcfg-wnav button:nth-of-type(5){animation-delay:160ms}
  .frcfg-layer.is-window.is-open .frcfg-wnav button:nth-of-type(n+6){animation-delay:200ms}
}
@keyframes fr-nav{from{opacity:0;translate:-8px 0}to{opacity:1;translate:none}}
/* changing steps: the new step comes in from the right (from the left when going back), its options ripple up */
.frcfg-body > div{animation:fr-step-in .42s var(--fr-ease) both}
.frcfg-body.is-back > div{animation-name:fr-step-back}
@keyframes fr-step-in{from{opacity:0;translate:26px 0}to{opacity:1;translate:none}}
@keyframes fr-step-back{from{opacity:0;translate:-26px 0}to{opacity:1;translate:none}}
.frcfg-body > div :is(.frcfg-grid > .frcfg-opt,.frcfg-ex__row,.frcfg-stepper){animation:fr-item .4s var(--fr-ease) both}
.frcfg-body > div :is(.frcfg-grid > .frcfg-opt,.frcfg-ex__row,.frcfg-stepper):nth-child(2){animation-delay:40ms}
.frcfg-body > div :is(.frcfg-grid > .frcfg-opt,.frcfg-ex__row,.frcfg-stepper):nth-child(3){animation-delay:80ms}
.frcfg-body > div :is(.frcfg-grid > .frcfg-opt,.frcfg-ex__row,.frcfg-stepper):nth-child(4){animation-delay:120ms}
.frcfg-body > div :is(.frcfg-grid > .frcfg-opt,.frcfg-ex__row,.frcfg-stepper):nth-child(5){animation-delay:150ms}
.frcfg-body > div :is(.frcfg-grid > .frcfg-opt,.frcfg-ex__row,.frcfg-stepper):nth-child(n+6){animation-delay:180ms}
/* choosing an option: the card settles, the green frame draws around it and the check pops */
.frcfg-opt{transition:translate var(--fr-t1) var(--fr-ease),box-shadow var(--fr-t2),border-color var(--fr-t2),scale var(--fr-t1) var(--fr-ease)}
.frcfg-opt:hover{translate:0 -2px;box-shadow:0 8px 18px rgba(30,42,34,.08)}
.frcfg-opt:active{scale:.98}
.frcfg-opt[aria-pressed="true"]::after{animation:fr-frame .38s var(--fr-ease)}
@keyframes fr-frame{from{clip-path:inset(0 100% 100% 0)}to{clip-path:inset(0 0 0 0)}}
.frcfg-opt[aria-pressed="true"] .tick,.frcfg-ex__yn button[aria-pressed="true"],.frcfg-rods__pick button[aria-pressed="true"]{animation:fr-tick .34s var(--fr-spring)}
@keyframes fr-tick{from{scale:.4}to{scale:1}}
.frcfg-ex__yn button{transition:background var(--fr-t2) var(--fr-ease),color var(--fr-t2)}
/* steps tick off in the step list */
.frcfg-wnav button .n.m-ok,.frcfg-wnav button .n.m-part,.frcfg-wnav button .n.m-none{animation:fr-tick .36s var(--fr-spring)}
/* + / - buttons squeeze */
:is(.frcfg-stepper,.frcfg-ex__ct) button:not(:disabled):active{scale:.86}
:is(.frcfg-stepper,.frcfg-ex__ct) button{transition:scale var(--fr-t1) var(--fr-spring),background var(--fr-t1),border-color var(--fr-t1)}
/* Learn more and photo zoom: grow out, the page behind fades */
.frcfg-exinfo{animation:fr-fade var(--fr-t2) ease}
.frcfg-exinfo__box{animation:fr-grow var(--fr-t3) var(--fr-spring)}
@keyframes fr-grow{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:none}}
.frcfg-zoomer:not([hidden]){animation:fr-fade var(--fr-t2) ease}
.frcfg-zoomer:not([hidden]) img{animation:fr-grow var(--fr-t3) var(--fr-spring)}
/* the price while it updates: shimmer + growth rings beside "Updating price" */
.frcfg-price .fr-rings{--s:13px;color:#3F6B3A;margin-right:6px}

/* ---- visitors who ask their device for less motion: no movement at all ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;transition-duration:1ms!important;transition-delay:0ms!important}
  #fr-sap{display:none}
}