/* =========================================================
   Portfolio Stylesheet - Movin Vinusandha
   DevOps & Cloud Engineering Portfolio
   ========================================================= */

:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#faf9f7; --ink:#1d1c1a; --muted:#67645e; --line:#e6e3dd; --accent:#1f65bd; --on-ink:#faf9f7;
  --card:rgba(255,255,255,.74); --card-line:#d9e6f1; --card-hover:#9ec5e8; --pill:#e6f1fb; --pill-ink:#1b5a9e;
  --wave-line:#b9d6ee; --cloud-op:1; --gear:#2f6fb0; --bgl-op:.13;
  --sky1:#79b7e6; --sky2:#cfe6f7;
  --c0:#ffffff; --c1:#e3f0fa; --c2:#8fc3ea; --c3:#5ea7de; --c4:#3f8fd0;
  --t0:#9fcdf0; --t1:#c6e1f6; --t2:#e4f1fb;
  --f0:#dcebf8; --f1:#8fc3ea; --f2:#5ea7de; --f3:#2c74b8; --foot-ink:#fff;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#141516; --ink:#eceae6; --muted:#9b9892; --line:#2a2b2d; --accent:#7ab6ee; --on-ink:#141516;
    --card:rgba(255,255,255,.045); --card-line:#2b3441; --card-hover:#476c93; --pill:#1f3249; --pill-ink:#9cc9f3;
    --wave-line:#2f4963; --cloud-op:.15; --gear:#7ab6ee; --bgl-op:.16;
    --sky1:#1a2f48; --sky2:#2a4a6c;
    --c0:#34557b; --c1:#2b4a6f; --c2:#223e5f; --c3:#1b3352; --c4:#152a45;
    --t0:#2e5079; --t1:#244368; --t2:#1b3454;
    --f0:#1f3652; --f1:#1a3049; --f2:#152a42; --f3:#10223a; --foot-ink:#cfe3f7;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#141516; --ink:#eceae6; --muted:#9b9892; --line:#2a2b2d; --accent:#7ab6ee; --on-ink:#141516;
  --card:rgba(255,255,255,.045); --card-line:#2b3441; --card-hover:#476c93; --pill:#1f3249; --pill-ink:#9cc9f3;
  --wave-line:#2f4963; --cloud-op:.15; --gear:#7ab6ee; --bgl-op:.16;
  --sky1:#1a2f48; --sky2:#2a4a6c;
  --c0:#34557b; --c1:#2b4a6f; --c2:#223e5f; --c3:#1b3352; --c4:#152a45;
  --t0:#2e5079; --t1:#244368; --t2:#1b3454;
  --f0:#1f3652; --f1:#1a3049; --f2:#152a42; --f3:#10223a; --foot-ink:#cfe3f7;
  color-scheme:dark;
}
html{height:100%;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 64px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{
  margin:0;min-height:100%;background:var(--bg);color:var(--ink);overflow-x:hidden;
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:760px;margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:56px}
.brand{font-weight:600;text-decoration:none;white-space:nowrap}
.nav{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;font-size:.9375rem}
.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--muted);text-decoration:none;white-space:nowrap;padding:4px 0}
.nav a:hover{color:var(--ink)}

/* page canvas: tool logos float in the background */
.page{position:relative}
.bg-logos{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bgl{position:absolute;width:var(--w);opacity:var(--bgl-op)}
.bgl svg{display:block;width:100%;height:auto;overflow:visible}
.content{position:relative;z-index:1}

/* hero */
.hero{
  min-height:calc(100vh - 56px);
  display:flex;
  align-items:center;
  padding:40px 0 60px;
  position:relative;
  z-index:2;
}
.hero > .wrap{width:100%}
.mascot-wrap{position:relative;display:inline-block;margin-bottom:20px}
.mascot-btn{
  display:block;background:none;border:0;padding:0;cursor:pointer;
  width:200px;height:200px;
  animation:float 6s ease-in-out infinite;-webkit-tap-highlight-color:transparent;
  user-select:none;touch-action:manipulation;
}
.mascot-character{
  position:relative;display:block;
  width:100%;height:100%;
  transform-origin:50% 78%;
  background-image:url('../assets/mascot-directions.png');
  background-size:300% 300%;
  background-position:50% 50%;
  background-repeat:no-repeat;
  image-rendering:auto;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,0.13));
}
.mascot-btn:hover .mascot-character{
  transform:scale(1.03);
}
.mascot-btn.reacting .mascot-character{
  background-image:url('../assets/mascot-reactions.png');
}
.say{
  position:absolute;left:100%;top:24px;margin-left:14px;white-space:nowrap;
  background:var(--ink);color:var(--on-ink);font-size:.875rem;font-weight:500;
  line-height:1;padding:8px 14px;border-radius:14px 14px 14px 3px;
  box-shadow:0 6px 18px rgba(0,0,0,0.14);
  opacity:0;transform:translateY(6px) scale(0.96);
  transition:opacity .18s cubic-bezier(0.16, 1, 0.3, 1), transform .18s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events:none;
}
.say.on{opacity:1;transform:none}
h1{
  margin:0;
  font-family:"Inter","Instrument Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:clamp(2.5rem,6.5vw,3.75rem);
  line-height:1;
  letter-spacing:-.05em;
  font-weight:700;
  color:var(--ink);
}
h1 .slash,
.brand .slash{
  display:inline-block;
  margin-right:2px;
  opacity:.9;
}
.role{margin:12px 0 0;font-size:1.0625rem;line-height:1.55;color:var(--muted);max-width:34rem}
.lead{margin:20px 0 0;max-width:34rem}
.status{display:flex;align-items:center;gap:10px;margin:22px 0 0;font-size:.9375rem;color:var(--muted)}
.status i{width:8px;height:8px;border-radius:50%;background:#2e9d62;flex:none}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:10px;font-weight:500;font-size:.9688rem;text-decoration:none;border:1px solid var(--card-line);background:var(--bg);transition:background .15s,border-color .15s}
.btn .ico{color:inherit}
.btn.primary{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.btn.primary:hover{opacity:.88}
.btn.ghost:hover{border-color:var(--card-hover)}

/* the sea scene: no edges. The sky fades in from the page colour and the front wave is the page colour. */
.banner{position:relative;overflow:hidden;pointer-events:none}
.banner.top{height:360px;margin-top:-64px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 66%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 66%,transparent 100%)}
.banner .sky{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,var(--sky1) 30%,var(--sky2) 100%)}
.banner .z1,.banner .z2,.banner .z3{position:absolute;inset:0}
.banner .z1{z-index:1}.banner .z2{z-index:2}.banner .z3{z-index:3}
.layer{position:absolute;left:0;bottom:0;width:100%}
.layer svg{display:block;max-width:none;animation:var(--anim) var(--dur) linear infinite;will-change:transform}
.c0 circle,.c0 rect,.c0 :is(circle,rect){fill:var(--c0)}
.c1 circle,.c1 rect,.c1 :is(circle,rect){fill:var(--c1)}
.c2 circle,.c2 rect,.c2 :is(circle,rect){fill:var(--c2)}
.c3 circle,.c3 rect,.c3 :is(circle,rect){fill:var(--c3)}
.c4 circle,.c4 rect,.c4 :is(circle,rect){fill:var(--c4)}
.f0 circle,.f0 rect,.f0 :is(circle,rect){fill:var(--f0)}
.f1 circle,.f1 rect,.f1 :is(circle,rect){fill:var(--f1)}
.f2 circle,.f2 rect,.f2 :is(circle,rect){fill:var(--f2)}
.f3 circle,.f3 rect,.f3 :is(circle,rect){fill:var(--f3)}
.it{position:absolute;left:var(--x,0);bottom:var(--b,0);width:var(--w,40px);pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.it.drift{left:0;animation:drift var(--dur) linear infinite;animation-delay:var(--delay,0s)}
.it.k-docker.drift{animation-name:driftL}
.it svg{display:block;width:100%;height:auto;overflow:visible;transition:filter .2s ease}
.it:hover svg{filter:brightness(1.15) drop-shadow(0 2px 8px rgba(32,136,255,0.35))}
.it.k-gear{color:var(--gear);opacity:.55}
.bob{animation:bob var(--bd,6s) ease-in-out infinite;animation-delay:var(--bdel,0s)}
.rock{transform-origin:50% 85%;animation:rock var(--bd,6s) ease-in-out infinite;animation-delay:var(--bdel,0s)}
.spin{animation:spin var(--dur,24s) linear infinite}
.spin.rev{animation-direction:reverse}

/* DevOps banner easter egg interactive states */
.docker-pet-wrap{transform-origin:135px 125px;transform-box:view-box}
.docker-whale{transform-origin:135px 170px;transform-box:view-box}
.docker-cargo{transform-origin:124px 55px;transform-box:view-box}
.cb1{transform-origin:71px 70px;transform-box:view-box}
.cb2{transform-origin:100px 60px;transform-box:view-box}
.cb3{transform-origin:127px 50px;transform-box:view-box}
.cb4{transform-origin:150px 45px;transform-box:view-box}
.cb5{transform-origin:176px 70px;transform-box:view-box}
.docker-eye{transform-origin:120px 127px;transform-box:view-box}
.docker-brow{transform-origin:120px 104px;transform-box:view-box}
.eye-open{transform-origin:120px 127px;transform-box:view-box;opacity:1}
.eye-closed{transform-origin:120px 127px;transform-box:view-box;opacity:0}

/* Single click: shallow dip */
.it.diving .bob{animation:whaleShallowDip 1.3s cubic-bezier(0.35, 0, 0.2, 1) forwards !important}
.it.diving .docker-whale{animation:whaleRubberShallow 1.3s cubic-bezier(0.35, 0, 0.2, 1) forwards !important}
.it.diving .eye-open{animation:eyeOpenDive 1.3s cubic-bezier(0.35, 0, 0.2, 1) forwards !important}
.it.diving .eye-closed{animation:eyeClosedDive 1.3s cubic-bezier(0.35, 0, 0.2, 1) forwards !important}
.it.diving .docker-brow{animation:browDive 1.3s cubic-bezier(0.35, 0, 0.2, 1) forwards !important}
.it.diving .cb1{animation:cb1Wave 1.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important}
.it.diving .cb2{animation:cb2Wave 1.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important}
.it.diving .cb3{animation:cb3Wave 1.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important}
.it.diving .cb4{animation:cb4Wave 1.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important}
.it.diving .cb5{animation:cb5Wave 1.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important}

/* Double click: joyful bouncy cartoon leap */
.it.rolling .bob{animation:whaleBouncyLeap 1.4s cubic-bezier(0.28, 0.1, 0.25, 1) forwards !important}
.it.rolling .docker-pet-wrap{animation:whalePitchArc 1.4s cubic-bezier(0.28, 0.1, 0.25, 1) forwards !important}
.it.rolling .docker-whale{animation:whaleRubberBody 1.4s cubic-bezier(0.28, 0.1, 0.25, 1) forwards !important}
.it.rolling .eye-open{animation:eyeOpenLeap 1.4s cubic-bezier(0.28, 0.1, 0.25, 1) forwards !important}
.it.rolling .eye-closed{animation:eyeClosedLeap 1.4s cubic-bezier(0.28, 0.1, 0.25, 1) forwards !important}
.it.rolling .docker-brow{animation:browLeap 1.4s cubic-bezier(0.28, 0.1, 0.25, 1) forwards !important}
.it.rolling .cb1{animation:cb1Cheer 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important}
.it.rolling .cb2{animation:cb2Cheer 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important}
.it.rolling .cb3{animation:cb3Cheer 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important}
.it.rolling .cb4{animation:cb4Cheer 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important}
.it.rolling .cb5{animation:cb5Cheer 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important}

.it.scaling .bob{animation:k8sPulse .75s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important}
.it.revving .spin{animation:gearHyper .9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important}
.it.bouncing .rock{animation:containerBounce .65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important}

/* Easter egg particles */
.banner-fx-layer{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.fx-particle{position:absolute;border-radius:50%;pointer-events:none;transform:translate(-50%, -50%)}
.fx-pod{background:radial-gradient(circle, #5ba4e5 0%, #326ce5 100%);box-shadow:0 0 10px rgba(50, 108, 229, 0.6);animation:fxPodFloat .8s cubic-bezier(0.16, 1, 0.3, 1) forwards}
.fx-spark{background:#ffbd2e;box-shadow:0 0 8px #ffbd2e;animation:fxSparkPop .5s ease-out forwards}
.fx-splash{background:radial-gradient(circle, #82e3ff 0%, #2088ff 100%);box-shadow:0 0 8px rgba(32,136,255,0.7);animation:fxSplashPop .7s cubic-bezier(0.12, 0.9, 0.3, 1) forwards}

/* sections */
.block{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 32px;padding-top:56px}
.block::before{
  content:"";grid-column:1/-1;height:10px;margin-bottom:32px;background:var(--wave-line);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 5Q10 0 20 5T40 5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x left center;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'%3E%3Cpath d='M0 5Q10 0 20 5T40 5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x left center;
}
.block.first{padding-top:20px}
.block.first::before{display:none}
.block>h2{margin:0;font-size:1.0625rem;font-weight:600;line-height:1.65}
.block>.body{min-width:0}
.body p{margin:0 0 16px}
.body p:last-child{margin-bottom:0}
.muted{color:var(--muted)}
.inline-ai{display:inline-flex;gap:7px;vertical-align:-4px;margin-left:5px}
.ico{width:18px;height:18px;flex:none;display:inline-block;color:var(--ink)}
.sm{width:22px;height:22px;flex:none;display:block}
.tl{width:36px;height:36px;flex:none;display:block}

.card{background:var(--card);border:1px solid var(--card-line);border-radius:16px;padding:18px 20px;transition:border-color .18s,transform .18s}
.card:hover{border-color:var(--card-hover);transform:translateY(-2px)}
.stack{display:grid;gap:14px;list-style:none;margin:0;padding:0}

.group+.group{margin-top:22px}
.group h3{margin:0 0 10px;font-size:.9688rem;font-weight:600}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;list-style:none;margin:0;padding:0}
.tile{display:flex;align-items:center;gap:12px;padding:12px 14px}
.tile span{font-weight:500;line-height:1.3}
.tile small{display:block;font-weight:400;color:var(--muted);font-size:.8125rem;line-height:1.3}
.ai-card{margin-top:28px}
.ai-card h3{margin:0;font-size:1rem;font-weight:600}
.ai-card p{margin:2px 0 0;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:14px 0 0}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border:1px solid var(--card-line);border-radius:999px;background:var(--bg);font-size:.9rem;line-height:1.3}

.row-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.row-title{margin:0;font-size:1.0625rem;font-weight:600;line-height:1.4}
.row-title a{text-decoration:none}
.row-title a:hover{text-decoration:underline;text-underline-offset:4px}
.row-side{color:var(--muted);font-size:.9375rem;white-space:nowrap}
.row-desc{margin:4px 0 0;color:var(--muted)}
.tech{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:14px}
.tech .sm{width:26px;height:26px}
.ai-by{display:inline-flex;align-items:center;gap:7px;font-size:.875rem;color:var(--muted);margin-left:auto}
.cert{display:flex;align-items:center;gap:16px}
.cert .tl{width:44px;height:44px}
.cert>div{flex:1;min-width:0}
.cert .row-desc{margin:0;font-size:.875rem}
.pill{display:inline-block;padding:3px 12px;border-radius:999px;background:var(--pill);color:var(--pill-ink);font-size:.8438rem;font-weight:500;white-space:nowrap}
.pill.plan,.pill.progress{background:transparent;border:1px solid var(--card-line);color:var(--muted)}
.link{color:var(--accent);text-decoration:none;font-weight:500}
.link:hover{text-decoration:underline;text-underline-offset:4px}
#projects .row-desc .link{font-size:.875rem}
.contact-list{display:flex;flex-wrap:wrap;gap:8px 24px;margin:20px 0 0;padding:0;list-style:none}

/* sea footer: rises out of the page, ends in a solid water band */
.banner.foot{height:250px;margin-top:88px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%);mask-image:linear-gradient(180deg,transparent 0,#000 24%)}
.sea-foot{position:relative}
.foot-text{position:absolute;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:5;color:var(--foot-ink);font-size:.9rem}
.foot-text .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* animation */
@keyframes slideL{from{transform:translateX(0)}to{transform:translateX(calc(var(--p) * -1))}}
@keyframes slideR{from{transform:translateX(calc(var(--p) * -1))}to{transform:translateX(0)}}
@keyframes drift{from{transform:translateX(-260px)}to{transform:translateX(calc(100vw + 260px))}}
@keyframes driftL{from{transform:translateX(calc(100vw + 260px))}to{transform:translateX(-260px)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}
@keyframes rock{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-4px) rotate(6deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes hop{0%{transform:none}30%{transform:translateY(-9px) scale(.97,1.04)}62%{transform:translateY(0) scale(1.04,.96)}100%{transform:none}}
@keyframes blink{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0)}}

/* Easter egg animation keyframes */
@keyframes whaleShallowDip{
  0%{
    transform:translateY(0) rotate(0deg);
  }
  18%{
    /* Pitch down into water */
    transform:translateY(12px) rotate(-11deg);
  }
  42%{
    /* Substantial dive-in peak into wave: 26px deep */
    transform:translateY(26px) rotate(-5deg);
  }
  65%{
    /* Scooping back upward out of water */
    transform:translateY(8px) rotate(6deg);
  }
  85%{
    /* Bouncy rebound recovery */
    transform:translateY(-4px) rotate(1.5deg);
  }
  100%{
    transform:translateY(0) rotate(0deg);
  }
}
@keyframes whaleRubberShallow{
  0%{
    transform:scale(1, 1);
  }
  18%{
    /* Streamlined downward stretch into the dive */
    transform:scale(0.94, 1.08) skewX(3deg);
  }
  42%{
    /* Rich water cushion squash when deep in wave */
    transform:scale(1.10, 0.90) skewX(-3deg);
  }
  65%{
    /* Upward scooping recoil */
    transform:scale(0.96, 1.05) skewX(2deg);
  }
  85%{
    /* Settle */
    transform:scale(1.03, 0.98);
  }
  100%{
    transform:scale(1, 1);
  }
}

@keyframes eyeOpenDive{
  0%, 18%{opacity:1;transform:scaleY(1)}
  25%, 52%{opacity:0;transform:scaleY(0.2)}
  65%, 100%{opacity:1;transform:scaleY(1)}
}
@keyframes eyeClosedDive{
  0%, 18%{opacity:0;transform:scale(0.8)}
  25%, 52%{opacity:1;transform:scale(1)}
  65%, 100%{opacity:0;transform:scale(0.8)}
}
@keyframes browDive{
  0%, 18%{transform:translateY(0)}
  28%, 52%{transform:translateY(-2.5px)}
  65%, 100%{transform:translateY(0)}
}

@keyframes cb1Wave{
  0%, 15%{transform:translate(0, 0)}
  25%{transform:translate(0, -16px)}
  35%{transform:translate(0, 0)}
  40%{transform:translate(0, -2.5px)}
  45%, 100%{transform:translate(0, 0)}
}
@keyframes cb2Wave{
  0%, 22%{transform:translate(0, 0)}
  32%{transform:translate(0, -24px)}
  42%{transform:translate(0, 0)}
  47%{transform:translate(0, -3.5px)}
  52%, 100%{transform:translate(0, 0)}
}
@keyframes cb3Wave{
  0%, 30%{transform:translate(0, 0)}
  40%{transform:translate(0, -30px)}
  50%{transform:translate(0, 0)}
  55%{transform:translate(0, -4px)}
  60%, 100%{transform:translate(0, 0)}
}
@keyframes cb4Wave{
  /* Crown container tower: highest jump and double-bounce clack */
  0%, 38%{transform:translate(0, 0)}
  50%{transform:translate(0, -40px)}
  65%{transform:translate(0, 0)}
  72%{transform:translate(0, -6px)}
  77%, 100%{transform:translate(0, 0)}
}
@keyframes cb5Wave{
  0%, 48%{transform:translate(0, 0)}
  60%{transform:translate(0, -20px)}
  72%{transform:translate(0, 0)}
  77%{transform:translate(0, -2.5px)}
  82%, 100%{transform:translate(0, 0)}
}
@keyframes k8sPulse{
  0%{transform:scale(1) rotate(0deg)}
  35%{transform:scale(1.35) rotate(180deg)}
  70%{transform:scale(0.88) rotate(320deg)}
  100%{transform:scale(1) rotate(360deg)}
}
@keyframes gearHyper{
  0%{transform:rotate(0deg) scale(1)}
  20%{transform:rotate(240deg) scale(1.22)}
  60%{transform:rotate(960deg) scale(1.1)}
  100%{transform:rotate(1440deg) scale(1)}
}
@keyframes containerBounce{
  0%{transform:scale(1, 1) translateY(0)}
  25%{transform:scale(1.25, 0.75) translateY(3px)}
  50%{transform:scale(0.85, 1.25) translateY(-16px)}
  75%{transform:scale(1.08, 0.94) translateY(0)}
  100%{transform:scale(1, 1) translateY(0)}
}
@keyframes fxPodFloat{
  0%{opacity:1;transform:translate(-50%, -50%) translate(0, 0) scale(0.5)}
  60%{opacity:0.9;transform:translate(-50%, -50%) translate(var(--tx, 0px), var(--ty, -30px)) scale(1.15)}
  100%{opacity:0;transform:translate(-50%, -50%) translate(calc(var(--tx, 0px) * 1.3), calc(var(--ty, -30px) - 20px)) scale(0.3)}
}
@keyframes fxSparkPop{
  0%{opacity:1;transform:translate(-50%, -50%) scale(0.4)}
  50%{opacity:1;transform:translate(-50%, -50%) translate(var(--tx, 0px), var(--ty, 0px)) scale(1.2)}
  100%{opacity:0;transform:translate(-50%, -50%) translate(calc(var(--tx, 0px) * 1.4), calc(var(--ty, 0px) * 1.4)) scale(0)}
}
@keyframes whaleBouncyLeap{
  0%{transform:translateY(0)}
  12%{transform:translateY(9px)}
  28%{transform:translateY(-34px)}
  45%{transform:translateY(-54px)}
  55%{transform:translateY(-48px)}
  70%{transform:translateY(-14px)}
  77%{transform:translateY(12px)}
  86%{transform:translateY(-7px)}
  93%{transform:translateY(2px)}
  100%{transform:translateY(0)}
}
@keyframes whalePitchArc{
  0%{transform:rotate(0deg)}
  12%{transform:rotate(3deg)}
  28%{transform:rotate(13deg)}
  45%{transform:rotate(2deg)}
  58%{transform:rotate(-3deg)}
  70%{transform:rotate(-12deg)}
  77%{transform:rotate(0deg)}
  86%{transform:rotate(2deg)}
  94%{transform:rotate(-0.5deg)}
  100%{transform:rotate(0deg)}
}
@keyframes whaleRubberBody{
  0%{transform:scale(1, 1) skewX(0deg)}
  12%{transform:scale(1.14, 0.88) skewX(2deg)}
  28%{transform:scale(0.90, 1.12) skewX(-3deg)}
  45%{transform:scale(1.03, 0.97) skewX(0deg)}
  70%{transform:scale(0.92, 1.10) skewX(3deg)}
  77%{transform:scale(1.16, 0.86) skewX(-2deg)}
  86%{transform:scale(0.95, 1.06) skewX(1deg)}
  93%{transform:scale(1.03, 0.98) skewX(0deg)}
  100%{transform:scale(1, 1) skewX(0deg)}
}
@keyframes eyeOpenLeap{
  0%, 14%{opacity:1;transform:scaleY(1)}
  22%, 76%{opacity:0;transform:scaleY(0.2)}
  84%, 100%{opacity:1;transform:scaleY(1)}
}
@keyframes eyeClosedLeap{
  0%, 14%{opacity:0;transform:scale(0.8)}
  22%, 68%{opacity:1;transform:scale(1)}
  76%{opacity:1;transform:scale(1.05)}
  84%, 100%{opacity:0;transform:scale(0.8)}
}
@keyframes browLeap{
  0%, 14%{transform:translateY(0)}
  22%, 68%{transform:translateY(-3.5px) scale(1.06)}
  76%{transform:translateY(1px)}
  84%{transform:translateY(-4px) scale(1.1)}
  94%, 100%{transform:translateY(0)}
}
@keyframes cb1Cheer{
  0%{transform:translate(0, 0)}
  12%{transform:translate(0, 2px)}
  30%{transform:translate(0, -14px)}
  48%{transform:translate(0, -12px)}
  68%{transform:translate(0, -4px)}
  76%{transform:translate(0, 0)}
  82%{transform:translate(0, -10px)}
  88%{transform:translate(0, 0)}
  92%{transform:translate(0, -2px)}
  96%, 100%{transform:translate(0, 0)}
}
@keyframes cb2Cheer{
  0%{transform:translate(0, 0)}
  12%{transform:translate(0, 2px)}
  32%{transform:translate(0, -20px)}
  50%{transform:translate(0, -16px)}
  70%{transform:translate(0, -5px)}
  76%{transform:translate(0, 0)}
  84%{transform:translate(0, -16px)}
  90%{transform:translate(0, 0)}
  94%{transform:translate(0, -3px)}
  98%, 100%{transform:translate(0, 0)}
}
@keyframes cb3Cheer{
  0%{transform:translate(0, 0)}
  12%{transform:translate(0, 2.5px)}
  34%{transform:translate(0, -24px)}
  52%{transform:translate(0, -20px)}
  72%{transform:translate(0, -6px)}
  76%{transform:translate(0, 0)}
  86%{transform:translate(0, -22px)}
  92%{transform:translate(0, 0)}
  95%{transform:translate(0, -4px)}
  99%, 100%{transform:translate(0, 0)}
}
@keyframes cb4Cheer{
  /* Crown container tower: highest initial launch and victory clack pop */
  0%{transform:translate(0, 0)}
  12%{transform:translate(0, 3px)}
  36%{transform:translate(0, -28px)}
  54%{transform:translate(0, -24px)}
  72%{transform:translate(0, -7px)}
  76%{transform:translate(0, 0)}
  88%{transform:translate(0, -26px)}
  94%{transform:translate(0, 0)}
  97%{transform:translate(0, -5px)}
  100%{transform:translate(0, 0)}
}
@keyframes cb5Cheer{
  0%{transform:translate(0, 0)}
  12%{transform:translate(0, 2px)}
  32%{transform:translate(0, -16px)}
  50%{transform:translate(0, -13px)}
  70%{transform:translate(0, -4px)}
  76%{transform:translate(0, 0)}
  85%{transform:translate(0, -13px)}
  91%{transform:translate(0, 0)}
  95%{transform:translate(0, -2.5px)}
  99%, 100%{transform:translate(0, 0)}
}
@keyframes fxSplashPop{
  0%{opacity:1;transform:translate(-50%, -50%) scale(0.4)}
  50%{opacity:0.95;transform:translate(-50%, -50%) translate(var(--tx, 0px), var(--ty, 0px)) scale(1.15)}
  100%{opacity:0;transform:translate(-50%, -50%) translate(calc(var(--tx, 0px) * 1.3), calc(var(--ty, 0px) + 14px)) scale(0.2)}
}

@media (max-width:720px){
  .hero{min-height:calc(100vh - 56px);padding:24px 0 40px}
  .mascot-btn{width:160px;height:160px}
  .block{grid-template-columns:1fr;gap:12px;padding-top:44px}
  .block::before{margin-bottom:20px}
  .banner.top{height:330px;margin-top:-40px}
  .banner.foot{height:230px}
  .it{width:var(--ws,var(--w,40px))}
  .hide-sm{display:none}
  .nav{gap:16px}
  .say{
    left:50%;right:auto;top:-38px;margin:0;
    transform:translateX(-50%) translateY(4px) scale(.96);
    border-radius:12px;
  }
  .say.on{transform:translateX(-50%) scale(1)}
  .row-head{flex-direction:column;align-items:flex-start;gap:0}
  .row-side{order:2;font-size:.875rem}
  .bgl{--bgl-op:.07}
  .cert{flex-wrap:wrap}
  .ai-by{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .it.drift{left:55%}
  .it.drift.hide-sm{display:none}
}