/*
Theme Name: Ilm Foundation Coming Soon
Theme URI: https://ilmfoundation.example
Author: Ilm Foundation School System
Description: Animated "coming soon" landing page with children planting in a school garden. Edit the heading, message, colors and Instagram link from Appearance > Customize > Coming Soon Page.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: ilm-coming-soon
*/

:root{--title:#0a2a6c;--banner:#fbe48a;--ink:#16336f}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:'Baloo 2','Fredoka','Comic Sans MS','Trebuchet MS',sans-serif;color:var(--ink);overflow:hidden;background:#bfe4ff}
.ilm-page{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;background:linear-gradient(180deg,#a9dbff 0%,#d6efff 55%,#e9f8ff 100%)}

/* scene sits at the bottom and always covers the width */
.ilm-scene{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:max(100vw,150vh);aspect-ratio:3/2;pointer-events:none}
.scene-svg{display:block;width:100%;height:100%;overflow:visible}

/* text */
.ilm-hero{position:relative;z-index:5;text-align:center;padding:clamp(18px,5vh,56px) 16px 0}
.ilm-title{margin:0 auto;max-width:11em;font-weight:800;line-height:1.02;font-size:clamp(2.4rem,7vw,5.6rem);color:var(--title);text-wrap:balance;
  text-shadow:0 3px 0 rgba(255,255,255,.7);animation:dropIn .9s cubic-bezier(.2,1.4,.4,1) both}
.ilm-title-wrap{position:relative;display:inline-block}
.ilm-title-wrap:before,.ilm-title-wrap:after{content:"";position:absolute;top:30%;width:clamp(26px,4vw,52px);height:clamp(26px,4vw,52px);
  background:
   linear-gradient(#f6b91c,#f6b91c) 50% 0/6px 40% no-repeat,
   linear-gradient(#f6b91c,#f6b91c) 0 50%/40% 6px no-repeat;opacity:.95;animation:twinkle 2.4s ease-in-out infinite}
.ilm-title-wrap:before{left:-9%;transform:rotate(-40deg)}
.ilm-title-wrap:after{right:-9%;transform:rotate(40deg);animation-delay:1.2s}
.ilm-divider{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px auto 14px;animation:fadeUp .8s .5s both}
.ilm-divider i{display:block;width:clamp(60px,12vw,150px);height:3px;border-radius:3px;background:#5aa83a}
.ilm-divider svg{width:44px;height:44px;transform-origin:50% 90%;animation:sway 3s ease-in-out infinite}
.ilm-banner{display:inline-block;position:relative;padding:14px clamp(26px,5vw,60px);font-size:clamp(1.05rem,2.5vw,1.9rem);font-weight:600;color:var(--ink);
  background:var(--banner);clip-path:polygon(1% 14%,6% 4%,22% 10%,40% 2%,62% 8%,80% 3%,97% 12%,100% 38%,98% 62%,100% 86%,92% 97%,70% 91%,48% 99%,26% 92%,8% 98%,0 78%,2% 50%);
  animation:fadeUp .8s .8s both}
.ilm-extra{margin:14px 0 0;font-size:clamp(.95rem,1.8vw,1.25rem);font-weight:600;opacity:.9;animation:fadeUp .8s 1.1s both}
.ilm-btn{display:inline-block;margin-top:12px;padding:10px 24px;border-radius:999px;background:#fff;color:var(--title);font-weight:800;text-decoration:none;
  box-shadow:0 5px 0 rgba(10,42,108,.18);transition:transform .2s;animation:fadeUp .8s 1.3s both,bounce 2.6s 2.4s ease-in-out infinite}
.ilm-btn:hover{transform:translateY(-3px) scale(1.04)}
.ilm-progress{margin:16px auto 0;width:min(320px,70vw);height:12px;border-radius:99px;background:rgba(255,255,255,.7);overflow:hidden;animation:fadeUp .8s 1.4s both}
.ilm-progress b{display:block;height:100%;width:70%;border-radius:99px;background:linear-gradient(90deg,#69c94a,#a8e063);animation:grow 3s ease-in-out infinite alternate}
.ilm-foot{position:absolute;z-index:6;left:0;right:0;bottom:6px;text-align:center;font-size:.85rem;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45)}

/* scene animation */
.cloud{animation:drift 40s linear infinite alternate}.c2{animation-duration:55s}.c3{animation-duration:48s}
.sunglow{animation:glow 5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
.canopy,.leaves,.treeTrunk{transform-box:fill-box;transform-origin:20% 100%}
.canopy{animation:treeSway 6s ease-in-out infinite}
.leaves{animation:treeSway 4s ease-in-out infinite}
.sway,.sprout{transform-box:fill-box;transform-origin:50% 100%}
.sway{animation:sway 3.4s ease-in-out infinite}
.sprout{animation:sprout 4.5s ease-in-out infinite;transform:scale(0)}
.head{transform-box:fill-box;transform-origin:50% 100%;animation:nod 2.6s ease-in-out infinite}
.eyes{transform-box:fill-box;transform-origin:50% 50%;animation:blink 4.2s infinite}
.work{animation:work var(--d) ease-in-out var(--delay) infinite}
.spark{transform-box:fill-box;transform-origin:center;opacity:0;animation:spark var(--d) ease-out var(--delay) infinite}
.fly{animation:flyAround 14s ease-in-out infinite alternate}.f2{animation-duration:18s}.f3{animation-duration:16s}
.wings{transform-box:fill-box;transform-origin:50% 50%;animation:flap .25s ease-in-out infinite alternate}

@keyframes work{0%,100%{transform:translateY(var(--up))}42%,62%{transform:translateY(var(--down))}}
@keyframes spark{0%,40%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(40deg)}72%,100%{opacity:0;transform:scale(.4) rotate(90deg) translateY(-14px)}}
@keyframes nod{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes treeSway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
@keyframes sprout{0%,10%{transform:scale(0)}40%,80%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes drift{from{transform:translateX(-60px)}to{transform:translateX(120px)}}
@keyframes glow{from{opacity:.6;transform:scale(.95)}to{opacity:1;transform:scale(1.08)}}
@keyframes flap{from{transform:scaleX(1)}to{transform:scaleX(.25)}}
@keyframes flyAround{0%{transform:translate(0,0) rotate(-6deg)}25%{transform:translate(140px,-70px) rotate(8deg)}50%{transform:translate(260px,20px) rotate(-4deg)}75%{transform:translate(120px,70px) rotate(6deg)}100%{transform:translate(-90px,-30px) rotate(-8deg)}}
@keyframes dropIn{from{opacity:0;transform:translateY(-40px) scale(.92)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes twinkle{0%,100%{opacity:.35;scale:.8}50%{opacity:1;scale:1.15}}
@keyframes bounce{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes grow{from{width:55%}to{width:85%}}

@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important}.sprout{transform:scale(1)}}
@media (max-aspect-ratio:1/1){.ilm-scene{width:118vw}}
@media (max-width:600px){.ilm-title-wrap:before,.ilm-title-wrap:after{display:none}}