:root{--bg:#090d0a;--panel:#101711;--panel2:#131d15;--lime:#b7ff32;--lime2:#8be51b;--text:#f3f5ef;--muted:#8a9687;--line:rgba(183,255,50,.2);--mono:'Space Mono',monospace;--sans:'Space Grotesk',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}.noise{position:fixed;inset:0;pointer-events:none;z-index:10;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}.wrap{width:min(1160px,calc(100% - 48px));margin-inline:auto}.topline{height:34px;padding:0 max(24px,calc((100vw - 1160px)/2));display:flex;align-items:center;gap:9px;background:var(--lime);color:#11180b;font:700 10px var(--mono);letter-spacing:.07em}.pulse,.meta-dot{width:7px;height:7px;background:#15220a;border-radius:50%;display:inline-block;box-shadow:0 0 0 4px rgba(10,20,5,.09)}.topline-right{margin-left:auto;opacity:.72}.nav{height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid rgba(255,255,255,.08)}.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:700;letter-spacing:-.07em;line-height:1}.brand small{display:block;margin-top:6px;font:8px var(--mono);letter-spacing:.08em;color:var(--muted)}.brand-mark{width:38px;height:38px;display:grid;place-items:center;position:relative;border:1px solid var(--lime);color:var(--lime);font-size:22px;letter-spacing:-.1em;clip-path:polygon(14% 0,100% 0,100% 80%,82% 100%,0 100%,0 18%)}.brand-mark span{font-size:10px;position:absolute;right:3px;top:3px;color:#fff}.lime{color:var(--lime)}.nav-links{display:flex;align-items:center;gap:29px;color:#bac2b7;font-size:12px}.nav-links a{transition:color .2s}.nav-links a:hover,.footer-links a:hover{color:var(--lime)}.button{display:inline-flex;align-items:center;justify-content:center;gap:26px;padding:15px 19px;font-size:12px;font-weight:700;letter-spacing:.01em;transition:transform .2s,background .2s,border-color .2s}.button:hover{transform:translateY(-2px)}.button span{font-size:16px}.button-small{padding:12px 14px;gap:15px;font-size:11px}.button-outline{border:1px solid var(--line);color:var(--lime)}.button-outline:hover{background:rgba(183,255,50,.08)}.button-primary{background:var(--lime);color:#0a1106;box-shadow:0 0 26px rgba(183,255,50,.12)}.button-primary:hover{background:#d0ff76}.button-ghost{border:1px solid rgba(255,255,255,.13);color:#d5dbd2}.play{font-size:9px;border:1px solid var(--lime);border-radius:50%;width:25px;height:25px;display:grid;place-items:center;color:var(--lime)}.menu-toggle{display:none;background:none;color:var(--lime);border:0;font-size:24px}.hero{min-height:620px;display:grid;grid-template-columns:1fr 1fr;align-items:center;position:relative;padding-top:36px;padding-bottom:68px}.hero-copy{position:relative;z-index:2;padding:25px 0 20px}.eyebrow{display:flex;align-items:center;gap:10px;font:10px var(--mono);letter-spacing:.13em;color:var(--lime)}.eyebrow-line{display:inline-block;width:25px;height:1px;background:var(--lime)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(56px,7.2vw,91px);line-height:.91;letter-spacing:-.09em;margin:26px 0 25px;font-weight:700}.outline-text{-webkit-text-stroke:1.5px #f3f5ef;color:transparent}.hero-sub{color:#a8b1a5;font-size:15px;line-height:1.8;max-width:460px;margin-bottom:27px}.hero-sub strong{color:#f4f7ef}.hero-actions{display:flex;flex-wrap:wrap;gap:11px}.hero-meta{display:flex;gap:22px;margin-top:37px;color:#778376;font:9px var(--mono);letter-spacing:.06em}.meta-item{display:flex;align-items:center;gap:9px}.meta-dot{width:5px;height:5px;background:var(--lime);box-shadow:none}.hero-art{position:relative;min-height:510px;display:flex;align-items:center;justify-content:center;isolation:isolate}.art-grid{position:absolute;inset:35px 0 25px;background-image:linear-gradient(rgba(183,255,50,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(183,255,50,.075) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(ellipse at center,#000 20%,transparent 72%);z-index:-2}.hero-art:before{content:"";position:absolute;width:370px;height:370px;border-radius:50%;background:radial-gradient(circle,rgba(137,255,27,.18),rgba(10,18,8,0) 68%);z-index:-1}.mascot{position:relative;z-index:1;width:min(115%,550px);max-height:530px;object-fit:contain;filter:drop-shadow(0 0 22px rgba(140,255,35,.13));animation:float 5s ease-in-out infinite}.orbit{position:absolute;border:1px solid rgba(183,255,50,.24);border-radius:50%;width:420px;height:150px;transform:rotate(-28deg)}.orbit-two{width:360px;height:125px;transform:rotate(43deg);border-color:rgba(183,255,50,.12)}.vertical-tag{position:absolute;right:-8px;top:125px;writing-mode:vertical-rl;font:9px var(--mono);letter-spacing:.18em;color:#71816c}.art-label{position:absolute;z-index:2;display:flex;align-items:center;gap:11px;background:rgba(10,17,11,.88);border:1px solid rgba(183,255,50,.3);padding:10px 13px;backdrop-filter:blur(8px)}.art-label>span:first-child{display:grid;place-items:center;width:30px;height:30px;background:var(--lime);color:#11180b;font-size:20px}.art-label b,.art-label small{display:block}.art-label b{font:9px var(--mono);letter-spacing:.04em}.art-label small{font:7px var(--mono);color:var(--lime);margin-top:5px}.label-top{top:48px;left:0}.label-bottom{bottom:45px;right:0}.signal-bars{height:28px;display:flex;gap:3px;align-items:end;padding:0 5px}.signal-bars i{display:block;width:3px;background:var(--lime);height:45%}.signal-bars i:nth-child(2){height:75%}.signal-bars i:nth-child(3){height:100%}.signal-bars i:nth-child(4){height:60%}.cross{position:absolute;color:var(--lime);font:18px var(--mono)}.cross-a{top:22%;right:16%}.cross-b{bottom:19%;left:13%}.hero-bottom-mark{position:absolute;bottom:24px;left:0;color:#65715f;font:9px var(--mono);letter-spacing:.1em}.hero-bottom-mark span{color:var(--lime);padding:0 8px}.ticker{overflow:hidden;background:var(--lime);color:#0a1106;transform:rotate(-1.1deg) scale(1.02);padding:15px 0;white-space:nowrap}.ticker-track{display:flex;align-items:center;justify-content:space-around;gap:26px;width:max-content;animation:marquee 30s linear infinite;font:700 12px var(--mono);letter-spacing:.08em}.ticker-track b{font-size:18px}.section{padding-top:112px;padding-bottom:112px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:44px}.section-heading h2,.dojo h2,.community-section h2{font-size:clamp(43px,6vw,68px);line-height:.95;letter-spacing:-.075em;margin:19px 0 0}.section-intro{max-width:310px;color:#9aa596;font-size:14px;line-height:1.8;margin-bottom:4px}.lore-grid{display:grid;grid-template-columns:.92fr 1fr;gap:90px;align-items:center}.lore-visual{min-height:350px;position:relative;display:grid;place-items:center;background:radial-gradient(ellipse at center,rgba(183,255,50,.11),transparent 60%),linear-gradient(135deg,#101910,#0a100b);border:1px solid rgba(183,255,50,.15);overflow:hidden}.lore-visual:before,.lore-visual:after{content:"";position:absolute;background:rgba(183,255,50,.17)}.lore-visual:before{width:1px;height:100%}.lore-visual:after{height:1px;width:100%}.lore-ring{width:230px;height:230px;border:1px solid rgba(183,255,50,.45);border-radius:50%;position:absolute;box-shadow:0 0 50px rgba(183,255,50,.07),inset 0 0 50px rgba(183,255,50,.04)}.lore-ring:before,.lore-ring:after{content:"";position:absolute;inset:18px;border:1px dashed rgba(183,255,50,.35);border-radius:50%}.lore-ring:after{inset:-17px;border-style:solid;border-color:rgba(183,255,50,.12)}.kanji{font-size:145px;color:var(--lime);font-weight:700;text-shadow:0 0 35px rgba(183,255,50,.28);z-index:1}.lore-caption{position:absolute;left:20px;bottom:18px;font:9px/1.8 var(--mono);color:#7c8a76;letter-spacing:.08em}.lore-caption span{color:var(--lime)}.big-copy{font-size:29px;line-height:1.25;letter-spacing:-.05em;color:#f1f4ed;margin-bottom:18px}.lore-copy>p:not(.big-copy){font-size:13px;line-height:1.9;color:#929e8f;max-width:475px}.text-link{display:inline-flex;gap:25px;margin-top:13px;padding-bottom:8px;border-bottom:1px solid var(--lime);font-size:12px;color:var(--lime)}.squad-section{background:#0c120d;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}.character-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.character-card{min-width:0;border:1px solid rgba(255,255,255,.09);background:#101711;transition:transform .25s,border-color .25s;overflow:hidden}.character-card:hover{transform:translateY(-5px);border-color:rgba(183,255,50,.45)}.card-top,.card-bottom{display:flex;justify-content:space-between;gap:8px;padding:17px 17px 0;font:9px var(--mono);color:#84917e;letter-spacing:.04em}.rarity{color:var(--lime)}.rarity.muted{color:#687363}.character-art{height:290px;display:grid;place-items:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,rgba(183,255,50,.1),transparent 67%)}.character-art:before{content:"";position:absolute;inset:20px;background-image:linear-gradient(rgba(183,255,50,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(183,255,50,.06) 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(ellipse,#000,transparent 75%)}.character-art img{height:115%;max-width:110%;object-fit:contain;position:relative;filter:drop-shadow(0 0 14px rgba(183,255,50,.12))}.character-info{display:flex;align-items:center;justify-content:space-between;padding:3px 18px 17px}.character-info h3{font-size:25px;letter-spacing:-.06em;margin:0 0 3px}.character-info p{font-size:11px;color:#899586;margin:0}.card-arrow{color:var(--lime);font-size:20px}.card-bottom{padding:13px 18px;border-top:1px solid rgba(255,255,255,.07);font-size:7px;letter-spacing:.04em}.concept-art{height:290px;display:grid;place-items:center;position:relative;overflow:hidden}.red-art{background:radial-gradient(ellipse at center,rgba(255,53,83,.16),transparent 66%)}.purple-art{background:radial-gradient(ellipse at center,rgba(130,79,255,.18),transparent 66%)}.concept-symbol{font-size:130px;color:rgba(255,255,255,.75);font-weight:700;position:relative;z-index:1;text-shadow:0 0 30px rgba(255,255,255,.12)}.concept-orbit{position:absolute;width:220px;height:220px;border:1px dashed rgba(255,255,255,.19);border-radius:50%;transform:rotate(28deg) scaleX(.7)}.concept-orbit:after{content:"";position:absolute;inset:18px;border:1px solid rgba(255,255,255,.12);border-radius:50%}.squad-note{font-size:11px;color:#7d8979;margin:23px 0 0}.dojo-panel{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(183,255,50,.22);background:linear-gradient(120deg,#101a10,#0d130e);min-height:380px;position:relative;overflow:hidden}.dojo-copy{padding:48px 48px 42px}.dojo-copy h2{margin:22px 0 18px}.dojo-copy p{max-width:350px;font-size:13px;line-height:1.9;color:#929e8f;margin-bottom:24px}.dojo-stats{padding:42px 38px;display:flex;flex-direction:column;justify-content:center;gap:0;position:relative;background:linear-gradient(90deg,rgba(183,255,50,.025),transparent)}.dojo-stat{display:flex;align-items:center;gap:18px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.08)}.stat-number{font:13px var(--mono);color:var(--lime)}.dojo-stat b,.dojo-stat small{display:block}.dojo-stat b{font-size:12px;letter-spacing:.06em;margin-bottom:5px}.dojo-stat small{font-size:11px;color:#8b9787}.dojo-stamp{position:absolute;right:22px;top:20px;border:1px solid rgba(183,255,50,.32);padding:8px 10px;color:var(--lime);font-size:22px;text-align:center;line-height:1}.dojo-stamp small{font:7px/1.4 var(--mono);letter-spacing:.08em}.community-section{background:#0c120d;border-top:1px solid rgba(255,255,255,.05)}.community-wrap{text-align:center}.community-wrap>.eyebrow{justify-content:center}.community-section h2{margin:20px 0 17px}.community-intro{max-width:480px;margin:0 auto 35px;font-size:13px;line-height:1.8;color:#96a191}.social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:left}.social-card{display:flex;align-items:center;gap:13px;padding:19px 16px;border:1px solid rgba(255,255,255,.1);background:#101711;transition:border-color .2s,transform .2s}.social-card:hover{border-color:var(--lime);transform:translateY(-3px)}.social-icon{width:37px;height:37px;display:grid;place-items:center;border:1px solid rgba(183,255,50,.35);color:var(--lime);font-size:18px;flex-shrink:0}.social-card b,.social-card small{display:block}.social-card b{font:9px var(--mono);letter-spacing:.02em}.social-card small{font-size:10px;color:#879383;margin-top:5px}.social-arrow{margin-left:auto;color:var(--lime);font-size:17px}.contract-box{margin-top:28px;padding:17px 20px;border:1px dashed rgba(183,255,50,.3);display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left;background:rgba(183,255,50,.025)}.contract-label{font:9px var(--mono);letter-spacing:.09em;color:var(--lime)}.contract-box p{font:11px var(--mono);color:#a2ad9e;margin:8px 0 0;word-break:break-all}.copy-button{border:1px solid rgba(183,255,50,.4);color:var(--lime);background:transparent;padding:11px 13px;font:9px var(--mono);cursor:pointer;white-space:nowrap}.copy-button:hover{background:rgba(183,255,50,.1)}.small-note{color:#687465;font-size:10px;margin:12px 0 0}.footer{border-top:1px solid rgba(255,255,255,.08)}.footer-inner{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:25px}.footer-brand{font-size:16px}.footer-brand .brand-mark{width:32px;height:32px;font-size:18px}.footer-inner>p{font-size:11px;color:#899586;margin:0}.footer-links{display:flex;gap:20px;color:#a4afa0;font-size:11px}.footer-legal{display:flex;justify-content:space-between;padding:15px 0 22px;border-top:1px solid rgba(255,255,255,.06);color:#606d5d;font:8px var(--mono);letter-spacing:.04em}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--lime);color:#10170b;padding:12px 18px;font:11px var(--mono);z-index:20;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(.5deg)}}@keyframes marquee{to{transform:translateX(-50%)}}@media(max-width:900px){.nav-links{gap:17px}.nav-cta{display:none}.hero{min-height:560px}.hero-art{min-height:440px}.mascot{width:120%}.lore-grid{gap:45px}.character-art,.concept-art{height:240px}.dojo-copy{padding:38px 30px}.dojo-stats{padding:35px 28px}.social-card{padding:15px 11px;gap:9px}.social-card b{font-size:8px}}@media(max-width:680px){.wrap{width:calc(100% - 36px)}.topline{padding:0 18px;font-size:8px}.topline-right{display:none}.nav{height:72px;position:relative}.menu-toggle{display:block;margin-left:auto}.nav-links{display:none;position:absolute;top:71px;left:-18px;right:-18px;padding:18px;background:#0d140e;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;z-index:8}.nav-links.open{display:flex}.nav-links a{padding:13px 8px;border-bottom:1px solid rgba(255,255,255,.05)}.brand{font-size:17px}.brand-mark{width:34px;height:34px}.hero{grid-template-columns:1fr;padding-top:40px;padding-bottom:58px;min-height:auto}.hero-copy{padding:10px 0 0}.hero h1{font-size:clamp(56px,15vw,80px);margin-top:23px}.hero-sub{font-size:13px}.hero-actions{gap:9px}.button{padding:14px 15px;gap:15px}.hero-meta{gap:15px;font-size:8px;margin-top:27px}.hero-art{min-height:370px;margin-top:4px}.mascot{width:min(105%,430px);max-height:410px}.orbit{width:300px;height:110px}.orbit-two{width:260px;height:100px}.label-top{top:19px;left:0}.label-bottom{bottom:17px;right:0}.vertical-tag{right:0;top:90px}.hero-bottom-mark{bottom:14px}.ticker{padding:12px 0}.ticker-track{font-size:10px}.section{padding-top:78px;padding-bottom:78px}.section-heading{display:block;margin-bottom:30px}.section-heading h2,.dojo h2,.community-section h2{font-size:50px}.section-intro{margin-top:18px;font-size:13px}.lore-grid{grid-template-columns:1fr;gap:28px}.lore-visual{min-height:280px}.lore-ring{width:185px;height:185px}.kanji{font-size:120px}.big-copy{font-size:26px}.character-grid{grid-template-columns:1fr;gap:14px}.character-art,.concept-art{height:280px}.character-art img{height:120%}.card-top{padding-top:14px}.card-bottom{font-size:8px}.squad-note{line-height:1.7}.dojo-panel{grid-template-columns:1fr}.dojo-copy{padding:32px 24px 24px}.dojo-stats{padding:10px 24px 28px}.dojo-stamp{right:16px;top:16px}.dojo-copy h2{font-size:47px}.social-grid{grid-template-columns:1fr;gap:9px}.social-card{padding:16px}.social-card b{font-size:9px}.community-intro{font-size:12px}.contract-box{align-items:flex-start;padding:15px;gap:12px}.contract-box p{font-size:9px;max-width:220px}.copy-button{padding:10px}.footer-inner{padding:24px 0;align-items:flex-start;flex-wrap:wrap}.footer-inner>p{order:3;width:100%}.footer-links{gap:13px}.footer-legal{gap:12px;line-height:1.6;flex-wrap:wrap}.footer-legal span:last-child{max-width:170px;text-align:right}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.lore-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.95;z-index:1}
.lore-visual{position:relative;overflow:hidden}
.lore-caption{z-index:2}

.ninja-placeholder {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.concept-orbit {
  display: none;
}

/* Give concept characters more room */
.concept-art {
  height: 360px;
  position: relative;
  overflow: hidden;
}

.ninja-placeholder {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}


@media (max-width: 600px) {
  .concept-art {
    height: 380px;
    position: relative;
    overflow: hidden;
  }

  .ninja-placeholder {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
  }
}


@media (max-width: 680px) {
  .character-art {
    height: 320px;
  }

  .character-art img {
    height: 100%;
    max-width: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center;
  }
}


/* Subtle floating animation for all ninjas */
.character-art img,
.concept-art img {
  animation: ninjaFloat 3.5s ease-in-out infinite;
  transform-origin: center bottom;
  will-change: transform;
}

@keyframes ninjaFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
  .character-art img,
  .concept-art img {
    animation: none;
  }
}


/* Samakan area gambar semua karakter */
.character-art,
.concept-art {
  height: 360px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Samakan ukuran dan posisi karakter */
.character-art img,
.concept-art img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center bottom;
}

/* Tampilan mobile */
@media (max-width: 680px) {
  .character-art,
  .concept-art {
    height: 320px;
  }

  .character-art img,
  .concept-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
  }
}




/* PIPNINJA — full-page neon leaf rain */
.leaf-rain {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}

.leaf-rain img {
  position: absolute;
  top: -12vh;
  left: var(--left);
  width: var(--size);
  height: auto;
  opacity: var(--opacity);
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(183, 255, 50, .3));
  animation: leafPageFall var(--duration) linear var(--delay) infinite;
  will-change: transform;
}

.leaf-rain img:nth-child(1)  { --left: 5%;  --size: 39px; --duration: 13s; --delay: -8s;  --sway: 45px; --opacity: .65; }
.leaf-rain img:nth-child(2)  { --left: 15%; --size: 47px; --duration: 18s; --delay: -3s;  --sway: -55px; --opacity: .8; }
.leaf-rain img:nth-child(3)  { --left: 26%; --size: 35px; --duration: 11s; --delay: -6s;  --sway: 35px; --opacity: .55; }
.leaf-rain img:nth-child(4)  { --left: 37%; --size: 43px; --duration: 16s; --delay: -12s; --sway: -40px; --opacity: .7; }
.leaf-rain img:nth-child(5)  { --left: 48%; --size: 37px; --duration: 12s; --delay: -2s;  --sway: 50px; --opacity: .6; }
.leaf-rain img:nth-child(6)  { --left: 59%; --size: 49px; --duration: 20s; --delay: -15s; --sway: -35px; --opacity: .75; }
.leaf-rain img:nth-child(7)  { --left: 70%; --size: 38px; --duration: 14s; --delay: -5s;  --sway: 55px; --opacity: .6; }
.leaf-rain img:nth-child(8)  { --left: 80%; --size: 44px; --duration: 17s; --delay: -10s; --sway: -45px; --opacity: .7; }
.leaf-rain img:nth-child(9)  { --left: 90%; --size: 34px; --duration: 11s; --delay: -4s;  --sway: 30px; --opacity: .5; }
.leaf-rain img:nth-child(10) { --left: 96%; --size: 41px; --duration: 15s; --delay: -9s;  --sway: -50px; --opacity: .65; }


@keyframes leafPageFall {
  0% {
    transform: translate3d(0, -12vh, 0) rotate(0deg);
  }

  20% {
    transform: translate3d(45px, 15vh, 0) rotate(100deg);
  }

  40% {
    transform: translate3d(-35px, 38vh, 0) rotate(210deg);
  }

  60% {
    transform: translate3d(55px, 62vh, 0) rotate(300deg);
  }

  80% {
    transform: translate3d(-45px, 85vh, 0) rotate(410deg);
  }

  100% {
    transform: translate3d(20px, 115vh, 0) rotate(540deg);
  }
}


.leaf-rain img {
  animation-timing-function: ease-in-out;
}


@media (max-width: 680px) {
  .leaf-rain img { width: calc(var(--size) * .8); }
}

@media (prefers-reduced-motion: reduce) {
  .leaf-rain { display: none; }
}