/* FOR FUN / white-light studio. Loaded after edition.css. All decoration is non-interactive. */
.ff-motion-ready{--ff-ease:cubic-bezier(.18,.72,.18,1);--ff-coral:#f65439;--ff-silver:#b8cad2}
.ff-motion-toggle{position:fixed;left:20px;bottom:max(18px,env(safe-area-inset-bottom));z-index:75;display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 15px;border:1px solid #cad4db;border-radius:24px;background:#ffffffed;box-shadow:0 5px 22px #1935440b;color:#243b49;font-size:10px;font-weight:600;line-height:1.3;font-family:inherit;letter-spacing:.025em;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:box-shadow .3s,border-color .3s,background .3s}
.ff-motion-toggle:hover{border-color:#8199a7;background:#fff;box-shadow:0 6px 26px #19354416}.ff-motion-toggle:focus-visible{outline:3px solid var(--accent-dark,#c43720);outline-offset:4px}.ff-motion-toggle[aria-disabled=true]{cursor:default}.ff-motion-icon{display:flex;align-items:center;justify-content:center;gap:3px;width:17px;height:17px}.ff-motion-icon i{width:2px;height:7px;border-radius:3px;background:#a5b1b8;transform:scaleY(.7)}.ff-motion-icon i:nth-child(2){height:14px}.ff-motion-icon i:nth-child(3){height:10px}.ff-motion-toggle[aria-pressed=true] .ff-motion-icon i{background:var(--ff-coral);transform:scaleY(1)}.ff-motion-label{font-size:10px;white-space:nowrap}

/* Choreography is opt-in; disabled JS, reduced motion and focus retain visible content. */
html[data-forfun-motion=on] .ff-reveal:not(.ff-entered){opacity:0;translate:0 30px}
html[data-forfun-motion=on] .ff-reveal{transition:opacity .75s var(--ff-ease),translate .95s var(--ff-ease);transition-delay:var(--ff-delay,0ms)}
html[data-forfun-motion=on] .ff-reveal.ff-entered{opacity:1;translate:0 0}
html[data-forfun-motion=on] .ff-reveal:focus-within{opacity:1;translate:0 0;transition-delay:0ms}
html[data-forfun-motion=on] .hero-copy>*{animation:ff-copy-enter .9s var(--ff-ease) both}
html[data-forfun-motion=on] .hero-copy>h1{animation-delay:70ms}
html[data-forfun-motion=on] .hero-copy>p{animation-delay:140ms}
html[data-forfun-motion=on] .hero-copy>.button-row{animation-delay:210ms}
html[data-forfun-motion=on] .hero-copy>.hero-subline{animation-delay:260ms}
html[data-forfun-motion=on] .hero:has(.ff-hero[data-ff-playing=false]) :is(.hero-copy,.hero-copy>*,.hero-show){animation-play-state:paused}
@keyframes ff-copy-enter{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}

/* A real photograph stays on the floor; only light and camera framing move. */
.ff-hero .hero-image{isolation:isolate}
.ff-hero .hero-product{position:relative;z-index:1;transform-origin:50% 86%}
.ff-stage{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ff-stage-halo{position:absolute;inset:1% 5% 4%;border-radius:50%;background:radial-gradient(ellipse at 55% 61%,#ffede566,transparent 55%),radial-gradient(ellipse at 43% 45%,#c7e8f34d,transparent 63%);opacity:.82}
.ff-stage-beam{position:absolute;left:47%;top:-23%;width:43%;height:111%;transform-origin:50% 0%;border-radius:50%;background:linear-gradient(180deg,#fff 0%,#f3ede84a 24%,#e6f1f154 60%,transparent 100%);opacity:.65;transform:rotate(-21deg);filter:blur(9px)}
.ff-stage-beam-b{left:14%;width:37%;transform:rotate(21deg);background:linear-gradient(180deg,#fff 0%,#fff4ed7a 28%,#ffded550 65%,transparent 100%)}
.ff-stage-floor{position:absolute;inset:0;width:100%;height:100%;overflow:visible;stroke-width:1.2;vector-effect:non-scaling-stroke}
.ff-floor-outer{stroke:#c2d1d775}.ff-floor-mid{stroke:#ed9f8d96;stroke-width:1.5}.ff-floor-inner{stroke:#d8e1e557;stroke-dasharray:3 8}.ff-floor-glint{stroke:#f9684b;stroke-width:2.2;stroke-dasharray:10 90;stroke-dashoffset:0}.ff-floor-tick{stroke:#9db3be80;stroke-width:1}
.ff-stage-sweep{position:absolute;inset:0;opacity:0;transform:translateX(-85%) skewX(-22deg);background:linear-gradient(90deg,transparent 38%,#fff8 50%,transparent 62%);mix-blend-mode:screen}
html[data-forfun-motion=on] .ff-stage-halo{animation:ff-light-breathe 8s ease-in-out infinite;animation-play-state:paused}
html[data-forfun-motion=on] .ff-stage-beam-a{animation:ff-light-left 12s ease-in-out infinite;animation-play-state:paused}
html[data-forfun-motion=on] .ff-stage-beam-b{animation:ff-light-right 14s ease-in-out infinite;animation-play-state:paused}
html[data-forfun-motion=on] .ff-floor-glint{animation:ff-ring-light 7s linear infinite;animation-play-state:paused}
html[data-forfun-motion=on] .ff-stage-sweep{animation:ff-stage-sweep 11s var(--ff-ease) infinite;animation-play-state:paused}
html[data-forfun-motion=on] .ff-hero[data-ff-playing=true] :is(.ff-stage-halo,.ff-stage-beam,.ff-floor-glint,.ff-stage-sweep){animation-play-state:running}
@keyframes ff-light-breathe{0%,100%{opacity:.62;transform:scale(.94)}50%{opacity:1;transform:scale(1.02)}}
@keyframes ff-light-left{0%,100%{transform:rotate(-21deg);opacity:.4}50%{transform:rotate(-13deg);opacity:.85}}
@keyframes ff-light-right{0%,100%{transform:rotate(21deg);opacity:.55}50%{transform:rotate(12deg);opacity:.85}}
@keyframes ff-ring-light{to{stroke-dashoffset:-100}}
@keyframes ff-stage-sweep{0%,67%,100%{opacity:0;transform:translateX(-85%) skewX(-22deg)}72%{opacity:.42}90%{opacity:0;transform:translateX(85%) skewX(-22deg)}}

/* Scroll response belongs to large photo compositions; product geometry is never warped. */
@media(hover:hover) and (pointer:fine){
 html[data-forfun-motion=on] .ff-hero .hero-product{translate:var(--ff-x,0px) calc(var(--ff-y,0px) + var(--ff-scroll,0)*-7px);transition:translate .65s var(--ff-ease)}
 html[data-forfun-motion=on] .ff-hero .hero-backtype{translate:calc(var(--ff-x,0px)*-.5) calc(var(--ff-scroll,0)*15px);transition:translate .8s var(--ff-ease)}
 html[data-forfun-motion=on] .ff-hero .ff-stage-floor{translate:calc(var(--ff-x,0px)*-.3) 0;transition:translate .65s var(--ff-ease)}
 html[data-forfun-motion=on] .ff-parallax:not(.ff-hero)>img{translate:0 calc(var(--ff-scroll,0)*-10px);scale:1.045;transition:translate .65s var(--ff-ease),scale 1s var(--ff-ease),transform 1s var(--ff-ease)}
 html[data-forfun-motion=on] .ff-parallax:not(.ff-hero):hover>img{scale:1.06;transform:none}
 html[data-forfun-motion=on] .product-visual.ff-pointer{translate:0 0;transition:translate .5s var(--ff-ease),box-shadow .5s var(--ff-ease),border-color .4s}
 html[data-forfun-motion=on] .product-visual.ff-pointer:hover{translate:0 -5px;box-shadow:0 16px 32px #1c364b0e,0 2px 8px #1c364b08;border-color:#cdd9df}
 html[data-forfun-motion=on] .product-visual.ff-pointer .product-detail-preview{translate:calc(var(--ff-x,0px)*.45) calc(var(--ff-y,0px)*.45);transition:opacity .45s var(--ff-ease),transform .85s var(--ff-ease),translate .65s var(--ff-ease)}
 html[data-forfun-motion=on] .product-card:hover .product-detail-preview{transform:scale(1.035)}
 html[data-forfun-motion=on] .scene-photo.ff-pointer{transition:box-shadow .6s var(--ff-ease),translate .6s var(--ff-ease)}
 html[data-forfun-motion=on] .scene-photo.ff-pointer:hover{translate:0 -4px;box-shadow:0 18px 35px #25374714}
 html[data-forfun-motion=on] .ff-stat-light .stat-orbit{translate:calc(var(--ff-x,0px)*1.8) calc(var(--ff-y,0px)*1.8);transition:translate 1s var(--ff-ease),transform 1.7s var(--ff-ease)}
}

/* Optical accents are restrained and finite except the in-view stage illumination. */
.ff-motion-ready .button.solid{position:relative;isolation:isolate;overflow:hidden}
.ff-motion-ready .button.solid:before{content:"";position:absolute;inset:-70% -30%;pointer-events:none;background:linear-gradient(110deg,transparent 38%,#ffffff24 49%,transparent 60%);translate:-100% 0;z-index:-1}
html[data-forfun-motion=on] .button.solid:hover:before{animation:ff-button-sweep .85s var(--ff-ease) both}
@keyframes ff-button-sweep{to{translate:100% 0}}
.ff-stat-light:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;border:1px solid #ffffff94;box-shadow:inset 0 0 35px #fff3}
html[data-forfun-motion=on] .ff-stat-light .stat-orbit{animation:ff-stat-orbit 10s ease-in-out infinite;animation-play-state:paused}
html[data-forfun-motion=on] .ff-stat-light .orbit-b{animation-delay:-3s;animation-duration:13s}
html[data-forfun-motion=on] .ff-stat-light .orbit-c{animation-delay:-6s;animation-duration:16s}
html[data-forfun-motion=on] .ff-stat-light[data-ff-playing=true] .stat-orbit{animation-play-state:running}
@keyframes ff-stat-orbit{0%,100%{scale:1;opacity:.55}50%{scale:1.07;opacity:1}}

/* Switch and OS preferences also stop the pre-existing motion layer. Hover still reveals content. */
html[data-forfun-motion=off],html[data-forfun-motion=off] body{scroll-behavior:auto!important}
html[data-forfun-motion=off] *,html[data-forfun-motion=off] *:before,html[data-forfun-motion=off] *:after{animation:none!important;transition:none!important}
html[data-forfun-motion=off] :is(.ff-reveal,.reveal){opacity:1!important;transform:none!important;translate:none!important}
html[data-forfun-motion=off] :is(.hero-image,.hero-image.changing){opacity:1!important;transform:none!important}
html[data-forfun-motion=off] :is(.hero-product,.hero-backtype,.ff-stage-floor,.ff-parallax>img,.product-visual,.product-detail-preview,.stat-orbit){translate:none!important;scale:none!important}
html[data-forfun-motion=off] :is(.scene-photo:hover>img,.editorial-visual figure:hover>img,.gallery-main:hover>img,.installation-card>button:hover img){transform:none!important}
html[data-forfun-motion=off] :is(.signature-stat:hover .stat-orbit,.signature-stat:hover .stat-spark,.product-card:hover .product-detail-preview){transform:none!important}
html[data-forfun-motion=off] .tile-photo img{transform:scale(1.02)!important}
html[data-forfun-motion=off] .product-visual:hover .product-art{transform:translateX(-50%)!important}
html[data-forfun-motion-paused=true] *,html[data-forfun-motion-paused=true] *:before,html[data-forfun-motion-paused=true] *:after{animation-play-state:paused!important}
@media(max-width:650px){.ff-motion-toggle{left:12px;bottom:max(12px,env(safe-area-inset-bottom));min-height:44px;padding:9px 12px;gap:8px}.ff-stage-beam{filter:none;opacity:.4}.ff-stage-floor{opacity:.85}.ff-motion-ready .site-footer{padding-bottom:62px}.ff-motion-ready .ff-reveal{--ff-delay:0ms!important}}
@media(prefers-reduced-motion:reduce){.ff-motion-ready .ff-reveal{opacity:1!important;translate:none!important}.ff-motion-ready :is(.hero-product,.hero-backtype,.ff-stage-floor,.ff-parallax>img,.product-visual,.product-detail-preview,.stat-orbit){translate:none!important;scale:none!important}.ff-motion-ready *,.ff-motion-ready *:before,.ff-motion-ready *:after{animation:none!important;transition:none!important}}
@media print{.ff-motion-toggle,.ff-stage{display:none!important}.ff-motion-ready .ff-reveal{opacity:1!important;translate:none!important;transform:none!important}.ff-motion-ready *{animation:none!important}}
