/* Spooky Froot — one continuous moonlit world behind the homepage, with friendly panels floating over it. */
@property --sf-mood{syntax:'<color>';inherits:true;initial-value:#d3ef70}
:root{--sf-mood:#d3ef70;transition:--sf-mood 1s ease}

/* Ambient mood glow (changes colour as you pass each game) + a whisper of paper grain */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60vmax 48vmax at 88% 6%,color-mix(in srgb,var(--sf-mood) 20%,transparent),transparent 70%),radial-gradient(50vmax 40vmax at 4% 92%,color-mix(in srgb,var(--sf-mood) 12%,transparent),transparent 72%)}
body::after{content:"";position:fixed;inset:0;z-index:95;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============ THE WORLD (fixed backdrop, driven by page scroll) ============ */
.sf-world{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;--p:0;--mx:0;--my:0;background:linear-gradient(180deg,#3b2468 0%,#8c3f7c 44%,#ff9868 80%,#ffca8c 100%)}
.sf-sky-night,.sf-sky-late{position:absolute;inset:0}
.sf-sky-night{background:linear-gradient(180deg,#06061a 0%,#110f36 45%,#33236a 100%);opacity:calc(var(--p)*3.2)}
.sf-sky-late{background:radial-gradient(70% 50% at 28% 92%,rgba(255,190,130,.75),transparent 70%),radial-gradient(60% 40% at 80% 88%,rgba(255,140,170,.55),transparent 72%),linear-gradient(180deg,#1b1852 0%,#4b3585 34%,#a05a8c 66%,#f2a07e 100%);opacity:clamp(0,calc((var(--p) - .5)*2.6),1)}
.sf-l{position:absolute;will-change:transform;background-repeat:no-repeat}
.sf-stars,.sf-stars2{left:0;right:0;top:0;height:64%;background-image:var(--sf-u-stars);background-size:cover;opacity:calc(clamp(0,calc(.12 + var(--p)*3),1) * clamp(.05,calc(1.7 - var(--p)*1.5),1))}
.sf-stars2{transform:scaleX(-1) translateY(6%);animation:sf-twinkle 3.6s ease-in-out infinite alternate;opacity:calc(clamp(0,calc(var(--p)*2.6),1) * clamp(.05,calc(1.7 - var(--p)*1.5),1))}
@keyframes sf-twinkle{from{filter:brightness(.6)}to{filter:brightness(1.5)}}
.sf-moon{left:70%;top:36%;width:clamp(170px,30vmin,330px);aspect-ratio:1;margin:calc(clamp(170px,30vmin,330px)/-2) 0 0 calc(clamp(170px,30vmin,330px)/-2);background:var(--sf-u-moon) center/contain no-repeat;transform:translate3d(calc(var(--mx)*-6px),calc(var(--p)*-30vh),0);z-index:1;opacity:clamp(0,calc(1 - (var(--p) - .52)*4.5),1)}
.sf-sun{animation:none;left:26%;top:44%;width:clamp(200px,34vmin,380px);aspect-ratio:1;margin:calc(clamp(200px,34vmin,380px)/-2) 0 0 calc(clamp(200px,34vmin,380px)/-2);background:var(--sf-u-sun) center/contain no-repeat;z-index:1;opacity:clamp(0,calc((var(--p) - .6)*3.4),1);transform:translate3d(calc(var(--mx)*-6px),calc((1 - clamp(0,calc((var(--p) - .58)*2.6),1))*38vh),0)}

.sf-cloud{width:70%;height:22%;background-image:var(--sf-u-cloud);background-size:100% 100%;opacity:.9;z-index:1}
.sf-cloud.c1{top:14%;left:-10%;animation:sf-drift 90s linear infinite}
.sf-cloud.c2{top:30%;left:40%;width:60%;opacity:.6;animation:sf-drift 130s linear infinite reverse}
@keyframes sf-drift{from{transform:translateX(-8%)}to{transform:translateX(18%)}}
.sf-far,.sf-mid,.sf-front{left:-4%;right:-4%;background-size:100% 100%}
.sf-far{bottom:12%;height:48%;background-image:var(--sf-u-far);background-position:0 100%;z-index:2;filter:drop-shadow(0 -8px 14px rgba(30,12,50,.4));transform:translate3d(calc(var(--mx)*-8px),calc(var(--p)*8vh),0)}
.sf-mid{bottom:0;height:60%;background-image:var(--sf-u-mid);background-position:0 100%;z-index:3;filter:drop-shadow(0 -10px 16px rgba(20,8,36,.5));transform:translate3d(calc(var(--mx)*-16px),calc(var(--p)*16vh),0)}
.sf-front{bottom:-6%;height:46%;background-image:var(--sf-u-front);background-position:0 100%;z-index:4;filter:drop-shadow(0 -12px 18px rgba(10,4,20,.6));transform:translate3d(calc(var(--mx)*-30px),calc(var(--p)*26vh),0)}

/* Characters: each ghost transforms into a fruit friend in turn, with a little poof (driven by --t, 0 → 1, per character) */
.sf-pair{--t:0;width:clamp(64px,9.2vw,140px);z-index:var(--z,2);transform:translate3d(calc(var(--mx)*var(--d,10)*1px),calc(var(--p)*var(--sy,8)*-1vh - var(--t)*3vh),0)}
.sf-pb{position:relative;animation:sf-bob var(--bt,5s) ease-in-out infinite;animation-delay:var(--bd,0s)}
.sf-pg,.sf-pf{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 12px rgba(10,4,24,.4))}
.sf-pg{opacity:clamp(0,calc(1 - var(--t)*2.3),1);transform:scale(calc(1 + var(--t)*.3)) rotate(calc(var(--t)*-12deg));filter:blur(calc(var(--t)*4px)) drop-shadow(0 10px 12px rgba(10,4,24,.4))}
.sf-pf{position:absolute;left:0;top:0;opacity:clamp(0,calc((var(--t) - .36)*3),1);transform:scale(max(.2,min(calc(.3 + (var(--t) - .36)*2.3),calc(1.14 - (var(--t) - .74)*.54)))) rotate(calc((1 - var(--t))*14deg))}
.sf-poof{position:absolute;left:50%;top:50%;width:190%;aspect-ratio:1;margin:-95% 0 0 -95%;pointer-events:none;opacity:clamp(0,min(calc(var(--t)*3),calc(3 - var(--t)*3)),1)}
.sf-poof::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,244,214,.75) 0%,rgba(190,160,255,.35) 38%,transparent 68%);transform:scale(calc(.25 + var(--t)*.85))}
.sf-poof i{position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5px;background:#fff3c4;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);transform:rotate(var(--a)) translateY(calc(var(--t)*var(--r,-80px))) scale(calc(.4 + var(--t)*.9)) rotate(calc(var(--t)*160deg))}
@keyframes sf-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(3deg)}}
.sf-flies{position:absolute;inset:0;z-index:6}
.sf-flies span{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffe08a;box-shadow:0 0 10px 3px rgba(255,224,138,.75);animation:sf-fly var(--t,9s) ease-in-out infinite alternate,sf-blink 2.6s ease-in-out infinite;animation-delay:0s,var(--dl,0s);opacity:calc(.35 + var(--p)*.65)}
@keyframes sf-fly{from{transform:translate(0,0)}to{transform:translate(var(--dx,30px),var(--dy,-40px))}}
@keyframes sf-blink{0%,100%{filter:brightness(.5)}50%{filter:brightness(1.6)}}
.sf-fog{position:absolute;left:0;right:0;bottom:0;height:34%;z-index:5;background:linear-gradient(0deg,rgba(22,10,40,.75),rgba(22,10,40,0))}
/* a soft veil keeps text comfortable over the artwork as you read */
.sf-veil{position:absolute;inset:0;z-index:7;background:linear-gradient(180deg,rgba(14,8,30,0) 0%,rgba(14,8,30,.35) 100%);opacity:calc(.2 + var(--p)*1.4)}

/* ============ HERO (first screen, normal scrolling) ============ */
.sf-scene{position:relative;margin-block:0!important;padding:0!important;max-width:none!important}
.sf-scene-stage{position:relative;min-height:calc(100svh - var(--sf-hh,0px) - clamp(110px,19vh,190px));margin:0!important;padding:0!important;background:linear-gradient(180deg,#3b2468 0%,#8c3f7c 44%,#ff9868 80%,#ffca8c 100%)}
.sf-world-on .sf-scene-stage{background:transparent}
.sf-scene-content{position:relative;z-index:8;min-height:calc(100svh - var(--sf-hh,0px) - clamp(110px,19vh,190px));display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:clamp(1rem,4vh,2.5rem) 1.25rem clamp(1rem,3vh,2rem)!important;max-width:none!important;color:#fff7e6;text-shadow:0 2px 18px rgba(20,8,40,.55)}
.sf-scene-content>*{margin-inline:auto!important;max-width:820px}
.sf-scene-content .sf-eyebrow{color:#ffd9a0;text-shadow:none;margin-bottom:.25rem}
.sf-scene-content h1{font-size:clamp(2rem,4.4vw,3.8rem)!important;line-height:1;margin:.1rem 0}
.sf-scene-content h1 em{font-family:var(--wp--preset--font-family--serif);font-weight:400;color:#ffd9a0}
.sf-scene-content .sf-lead{color:#f4e6ff;font-size:clamp(1rem,1.5vw,1.2rem);margin:.3rem auto .7rem}
.sf-scene-logo{margin:0 auto!important}
.sf-scene-logo img{width:clamp(120px,15.5vw,215px);height:auto;filter:drop-shadow(0 10px 0 rgba(20,8,40,.18)) drop-shadow(0 18px 26px rgba(20,8,40,.5));animation:sf-float 6s ease-in-out infinite}
.sf-scene-content .wp-block-buttons{justify-content:center}
.sf-scene-content .wp-block-button.is-style-outline>.wp-block-button__link{color:#fff7e6;border-color:rgba(255,247,230,.55)}

/* ============ FRIENDLY PANELS ============ */
/* Any group with the "sf-panel" class becomes a soft frosted card that lets the world glow through. */
.sf-panel{background:color-mix(in srgb,#1a0f2e 70%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:32px;padding:clamp(1.4rem,4vw,3.25rem)!important;box-shadow:0 30px 80px rgba(8,4,20,.35)}
.wp-block-columns.sf-panel{gap:clamp(1.5rem,4vw,3.5rem)}
.sf-world-on main .sf-section.has-surface-background-color{background:transparent!important}

.sf-scenes{position:relative;padding-block:0 clamp(3rem,8vw,6rem)}
.sf-scenes-inner{max-width:var(--wp--style--global--wide-size,1240px);margin-inline:auto;padding-inline:clamp(1rem,4vw,3rem)}
.sf-scenes-head{margin-bottom:clamp(.75rem,1.6vw,1.25rem)}
.sf-scenes-head h2{margin:0;font-size:clamp(1.6rem,3vw,2.3rem)}
.sf-scenes-head .sf-eyebrow{margin:0 0 .15rem}
.sf-gp{position:relative;isolation:isolate;display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(1.25rem,4vw,3.5rem);align-items:center;padding:clamp(.9rem,2vw,1.4rem);margin-bottom:clamp(1.5rem,4vw,2.75rem);background:color-mix(in srgb,#1a0f2e 66%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:34px;box-shadow:0 30px 80px rgba(8,4,20,.38)}
.sf-gp::before{content:"";position:absolute;inset:-14% -6%;z-index:-1;background:radial-gradient(48% 60% at 28% 50%,color-mix(in srgb,var(--mood,#d3ef70) 34%,transparent),transparent 72%);filter:blur(26px);pointer-events:none}
.sf-gp:nth-of-type(even) .sf-gp-img{order:2}
.sf-gp-img{display:block;position:relative;border-radius:26px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 20px 50px rgba(0,0,0,.4);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.sf-gp-img img{width:100%;height:100%;object-fit:cover;object-position:30% 50%;display:block;border-radius:0;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sf-gp:hover .sf-gp-img{transform:translateY(-4px) rotate(-.4deg)}
.sf-gp:hover .sf-gp-img img{transform:scale(1.05)}
.sf-gp-copy{padding:clamp(.5rem,2vw,1.5rem) clamp(.5rem,2vw,1.75rem) clamp(.5rem,2vw,1.5rem) 0}
.sf-gp:nth-of-type(even) .sf-gp-copy{padding:clamp(.5rem,2vw,1.5rem) 0 clamp(.5rem,2vw,1.5rem) clamp(.5rem,2vw,1.75rem)}
.sf-gp-copy .sf-status{margin-bottom:.7rem}
.sf-gp-copy h3{font-size:clamp(2rem,4vw,3.2rem);line-height:1;margin:.15rem 0 .5rem}
.sf-gp-copy h3 a{color:inherit;text-decoration:none}
.sf-gp-tag{font-family:var(--wp--preset--font-family--serif);font-style:italic;color:var(--wp--preset--color--secondary);font-size:clamp(1.1rem,1.9vw,1.4rem);margin:0 0 .7rem}
.sf-gp-ex{color:var(--wp--preset--color--muted);margin:0 0 1.2rem}
.sf-gp-copy .sf-game-links{margin:0}
@media(max-width:781px){
	.sf-gp{grid-template-columns:1fr;border-radius:26px}
	.sf-gp:nth-of-type(even) .sf-gp-img{order:0}
	.sf-gp-copy,.sf-gp:nth-of-type(even) .sf-gp-copy{padding:.5rem .6rem .8rem}
	.sf-panel{border-radius:24px}
	.sf-pair.g1,.sf-pair.g2,.sf-pair.g5,.sf-pair.g6{display:none}
}

/* Gold flourish separator (block style for the Separator block) */
.wp-block-separator.is-style-flourish{border:0!important;height:36px;max-width:420px;background:var(--sf-u-flourish) center/contain no-repeat;opacity:1}

/* Editor: show the hero as a plain, editable block */
.editor-styles-wrapper .sf-scene-stage{min-height:60vh}
.editor-styles-wrapper .sf-scene-content{min-height:0;padding-bottom:4rem!important}

@media(prefers-reduced-motion:reduce){.sf-world *{animation:none!important}}
.sf-scenes-head,.sf-scenes-head h2{text-shadow:0 2px 16px rgba(14,8,30,.8)}