/* ============================================================
   WRG JAPAN 2026 — Kawaii / Manga theme enhancement layer
   Loads AFTER style.css. Only adds + enriches, never replaces.
   For kids 10–19 · bright, cartoonish, Japan vibes, animated.
   ============================================================ */

:root{
  --sakura:#ff8fc7;
  --sakura-deep:#ff5fa8;
  --sakura-soft:#ffe3f1;
  --jp-red:#ff3b5c;
  --jp-red-deep:#e21b46;
  --jp-gold:#ffce3a;
  --jp-sky:#7ad0ff;
  --jp-mint:#56e2b0;
  --jp-purple:#9b6bff;
  --jp-ink:#10193d;
  --washi:#fffdf7;
  --pop-shadow:0 10px 0 rgba(16,25,61,.12);
  --font-fun:"Baloo 2","Inter",system-ui,sans-serif;
}

/* ---- Fun display font for headings + playful bits ---- */
h1,h2,h3,.btn,.eyebrow,.brand-copy strong,.segment-card h3,
.journey-grid h3,.timer-grid strong{font-family:var(--font-fun)!important;letter-spacing:-.02em}

/* ============================================================
   1. ENTRY EASTER EGG — Sakura / Snow shower + loading screen
   ============================================================ */
#wrg-preloader{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:#fffdfb;
  transition:opacity .6s ease,visibility .6s ease;
}
#wrg-preloader.done{opacity:0;visibility:hidden;pointer-events:none}
.preloader-inner{text-align:center;position:relative;z-index:2}
.preloader-mark{width:96px;height:96px;margin:0 auto 22px;display:grid;place-items:center;
  animation:wrg-gate-in .9s cubic-bezier(.2,.8,.2,1) both}
.preloader-mark .pl-blossom{transform-origin:60px 20px;animation:wrg-blossom-pop 1.2s ease .3s both}
@keyframes wrg-gate-in{0%{opacity:0;transform:translateY(14px) scale(.9)}100%{opacity:1;transform:none}}
@keyframes wrg-blossom-pop{0%{transform:scale(0)}60%{transform:scale(1.4)}100%{transform:scale(1)}}
.preloader-inner h2{font-size:26px;color:#1a2a6c;margin-bottom:6px;font-family:var(--font-fun)}
.preloader-inner p{color:#9aa7c4;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:11px}
.preloader-bar{width:220px;height:12px;border-radius:999px;background:#ffe3f1;margin:18px auto 0;overflow:hidden;box-shadow:inset 0 2px 5px rgba(0,0,0,.06)}
.preloader-bar i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--sakura),var(--jp-sky),var(--jp-gold));
  animation:wrg-load 2s ease forwards}
@keyframes wrg-load{0%{width:0}60%{width:78%}100%{width:100%}}
@keyframes wrg-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}

/* falling petals / snow canvas sits above everything but ignores clicks */
#wrg-fall{position:fixed;inset:0;pointer-events:none;z-index:9998}

/* floating toggle button for the shower */
.petal-toggle{
  position:fixed;right:18px;bottom:18px;z-index:80;
  width:58px;height:58px;border-radius:50%;border:3px solid #fff;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#ffd2e8,#ff7ab8);
  box-shadow:0 12px 26px rgba(255,95,168,.4);font-size:26px;
  display:grid;place-items:center;transition:transform .2s ease}
.petal-toggle:hover{transform:scale(1.12) rotate(12deg)}
.petal-toggle:active{transform:scale(.92)}
.petal-toggle.off{filter:grayscale(.7) opacity(.6)}

/* ============================================================
   2. CARTOON ICON SYSTEM (segment + journey + rulebook)
   ============================================================ */
/* Brand orbit — make the robot eye blink */
.brand-orbit:after{animation:wrg-pulse 2.4s ease-in-out infinite}
@keyframes wrg-pulse{0%,100%{box-shadow:0 0 18px rgba(35,231,121,.55)}50%{box-shadow:0 0 30px rgba(35,231,121,.95)}}

/* Kid icon chips in hero — bouncy + emoji swapped to cuter set via JS-friendly classes */
.kid-icons span{
  border:3px solid #fff!important;box-shadow:0 8px 0 rgba(16,25,61,.10)!important;
  animation:wrg-float 3s ease-in-out infinite;transition:transform .2s ease;cursor:default}
.kid-icons span:nth-child(2){animation-delay:.2s}
.kid-icons span:nth-child(3){animation-delay:.4s}
.kid-icons span:nth-child(4){animation-delay:.6s}
.kid-icons span:nth-child(5){animation-delay:.8s}
.kid-icons span:hover{transform:translateY(-8px) scale(1.15) rotate(-6deg)}
@keyframes wrg-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* Cartoon segment icons — replace plain gradient block with a glyph badge */
.segment-icon, .segment-row>span{position:relative;overflow:visible!important}
.segment-icon{
  display:grid!important;place-items:center;font-size:30px;
  border:4px solid #fff;box-shadow:0 10px 0 color-mix(in srgb,var(--accent) 35%,transparent)!important;
  animation:wrg-wobble 4s ease-in-out infinite}
.segment-card:hover .segment-icon{animation:wrg-spin-pop .6s ease}
@keyframes wrg-wobble{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes wrg-spin-pop{0%{transform:scale(1) rotate(0)}50%{transform:scale(1.25) rotate(12deg)}100%{transform:scale(1) rotate(0)}}

/* the round home segment-row dot becomes a mini emoji badge */
.segment-row>span{display:grid;place-items:center;font-size:20px;border:3px solid #fff;
  box-shadow:0 6px 0 color-mix(in srgb,var(--accent) 30%,transparent)}

/* Journey icons pop */
.journey-grid article{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.journey-grid article:hover{transform:translateY(-10px) rotate(-1.5deg)}
.journey-grid span{display:inline-block;animation:wrg-float 3.4s ease-in-out infinite}
.journey-grid article:nth-child(2) span{animation-delay:.3s}
.journey-grid article:nth-child(3) span{animation-delay:.6s}
.journey-grid article:nth-child(4) span{animation-delay:.9s}

/* Rulebook items — emoji badge instead of flat "PDF" */
.rulebook-item span{font-size:18px}
.rulebook-item{transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.rulebook-item:hover{transform:translateX(6px) rotate(-.5deg)}
.rulebook-item em{animation:wrg-nudge 1.6s ease-in-out infinite}
@keyframes wrg-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ============================================================
   3. JAPAN HERO — animated Fuji, rising sun, torii, lanterns
   ============================================================ */
.sun-ray{animation:wrg-rotate 90s linear infinite}
@keyframes wrg-rotate{to{transform:rotate(360deg)}}

/* a real rising-sun disc behind Fuji */
.japan-hero .rising-sun{
  position:absolute;right:6%;top:6%;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#ffd86e,#ff7a9c 70%,#ff4f7e);
  box-shadow:0 0 80px rgba(255,140,170,.5);opacity:.85;
  animation:wrg-sun 6s ease-in-out infinite;z-index:0}
@keyframes wrg-sun{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.04)}}

.fuji-shape{animation:wrg-breathe 7s ease-in-out infinite}
@keyframes wrg-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.03)}}

/* snow cap on Fuji */
.fuji-shape:after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:0;height:0;border-left:42px solid transparent;border-right:42px solid transparent;
  border-bottom:46px solid rgba(255,255,255,.92)}

.torii-shape{animation:wrg-float 5s ease-in-out infinite}

/* hanging paper lanterns (chochin) */
.jp-lantern{position:absolute;width:46px;height:60px;border-radius:50% 50% 46% 46%/40% 40% 60% 60%;
  background:linear-gradient(180deg,#ff5d6c,#e21b46);z-index:1;
  box-shadow:inset 0 -6px 12px rgba(0,0,0,.18);transform-origin:top center;
  animation:wrg-swing 3.6s ease-in-out infinite}
.jp-lantern:before{content:"";position:absolute;left:50%;top:-14px;transform:translateX(-50%);width:3px;height:14px;background:#7a2530}
.jp-lantern:after{content:"";position:absolute;left:8px;right:8px;top:48%;height:3px;background:rgba(255,255,255,.35);box-shadow:0 -10px 0 rgba(255,255,255,.25),0 10px 0 rgba(255,255,255,.25)}
.jp-lantern.l1{left:6%;top:12%}
.jp-lantern.l2{left:14%;top:22%;animation-delay:.6s;background:linear-gradient(180deg,#ffd86e,#ffb02e)}
@keyframes wrg-swing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}

/* mascot drop-slot in hero (you add the image later) */
.mascot-slot{position:relative;display:grid;place-items:center;border:3px dashed var(--sakura);
  border-radius:28px;background:rgba(255,255,255,.55);min-height:84px;color:var(--sakura-deep);
  font-weight:900;text-align:center;padding:10px;animation:wrg-float 4s ease-in-out infinite}
.mascot-slot img{max-height:120px;width:auto}
.mascot-slot[data-filled] {border-style:solid;background:transparent;animation:wrg-float 4s ease-in-out infinite}

/* ============================================================
   4. PLAYFUL CARDS, BUTTONS, BADGES (manga pop style)
   ============================================================ */
.btn.primary{box-shadow:0 8px 0 rgba(11,73,168,.4)!important}
.btn.primary:hover{transform:translateY(-3px)!important;box-shadow:0 12px 0 rgba(11,73,168,.4)!important}
.btn.primary:active{transform:translateY(2px)!important;box-shadow:0 4px 0 rgba(11,73,168,.4)!important}
.btn.white,.btn.glass{box-shadow:0 6px 0 rgba(16,50,95,.14)!important}
.btn.white:hover,.btn.glass:hover{transform:translateY(-3px)}

/* segment + category cards: manga dashed accent + tilt */
.segment-card,.category-card{transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease}
.segment-card:hover,.category-card:hover{transform:translateY(-8px) rotate(-1deg) scale(1.01)}

/* sticker corner on segment cards */
.segment-card{position:relative}
.segment-card:after{content:"🌸";position:absolute;right:14px;top:12px;font-size:18px;opacity:.55;
  animation:wrg-float 3s ease-in-out infinite}

/* colorful pills bounce in */
.colorful-pills span,.hero-meta-pills span{animation:wrg-pop .5s ease backwards}
.colorful-pills span:nth-child(2){animation-delay:.08s}
.colorful-pills span:nth-child(3){animation-delay:.16s}
.colorful-pills span:nth-child(4){animation-delay:.24s}
@keyframes wrg-pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

/* timer numbers tick-pop */
.timer-grid strong{display:inline-block}
.timer-grid div{border:3px solid #fff;box-shadow:0 6px 0 rgba(16,25,61,.06)}

/* theme card emoji swap to a city+robot vibe, bigger + animated */
.theme-card:after{font-size:120px!important;animation:wrg-float 5s ease-in-out infinite}

/* dotted manga background flourish on light sections */
.child-journey,.segment-playground{position:relative}
.child-journey:before,.segment-playground:before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(123,123,180,.10) 1.4px,transparent 1.4px);
  background-size:22px 22px;pointer-events:none;opacity:.6}
.child-journey>*,.segment-playground>*{position:relative}

/* page hero dark — add subtle sakura drift overlay */
.page-hero:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%,rgba(255,143,199,.18),transparent 30%),
    radial-gradient(circle at 80% 60%,rgba(122,208,255,.18),transparent 30%)}

/* CTA band — add bouncing robot */
.cta-band{position:relative;overflow:hidden}
.cta-band:after{content:"🤖";position:absolute;right:5%;bottom:-10px;font-size:120px;opacity:.18;animation:wrg-bob 2.2s ease-in-out infinite}

/* ============================================================
   5. CONFETTI canvas layer
   ============================================================ */
#wrg-confetti{position:fixed;inset:0;pointer-events:none;z-index:9000}

/* ============================================================
   6. Accessibility — respect reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  #wrg-fall,#wrg-preloader{display:none!important}
}

/* small screens: hide swinging lanterns + sticker to reduce clutter */
@media(max-width:760px){
  .jp-lantern,.segment-card:after{display:none}
  .preloader-mascot{width:100px;height:100px;font-size:50px}
}

/* ============================================================
   7. EXTRA JAPANESE LANDING ANIMATIONS
   ============================================================ */

/* Drifting stylized clouds across the hero */
.jp-cloud{position:absolute;background:rgba(255,255,255,.85);border-radius:999px;
  filter:blur(1px);z-index:0;opacity:.7}
.jp-cloud:before,.jp-cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}
.jp-cloud.c1{width:120px;height:34px;top:14%;left:-160px;animation:wrg-drift 26s linear infinite}
.jp-cloud.c1:before{width:54px;height:54px;top:-22px;left:22px}
.jp-cloud.c1:after{width:40px;height:40px;top:-14px;left:64px}
.jp-cloud.c2{width:90px;height:26px;top:30%;left:-200px;animation:wrg-drift 38s linear infinite 6s;opacity:.55}
.jp-cloud.c2:before{width:40px;height:40px;top:-16px;left:16px}
.jp-cloud.c2:after{width:30px;height:30px;top:-10px;left:48px}
@keyframes wrg-drift{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 260px))}}

/* Seigaiha (wave) animated bottom band on the hero */
.seigaiha-band{position:absolute;left:0;right:0;bottom:0;height:60px;z-index:1;pointer-events:none;
  background-image:radial-gradient(circle at 20px 30px,transparent 12px,rgba(22,119,255,.16) 13px,rgba(22,119,255,.16) 15px,transparent 16px),
                   radial-gradient(circle at 20px 30px,transparent 18px,rgba(255,143,199,.18) 19px,rgba(255,143,199,.18) 21px,transparent 22px);
  background-size:40px 40px;background-position:0 0;
  animation:wrg-wave-move 8s linear infinite;opacity:.8}
@keyframes wrg-wave-move{from{background-position:0 0}to{background-position:40px 0}}

/* gentle parallax-ish float for fuji + torii groups already set; add koi-like swim flourish */
.hero-left h1 span{background-size:200% auto;animation:wrg-shimmer 6s linear infinite}
@keyframes wrg-shimmer{to{background-position:200% center}}

/* Section reveal on scroll (added via tiny IO in jp-fun would be heavier; use CSS-only subtle entrance) */
.journey-grid article,.segment-card{animation:wrg-rise .6s ease backwards}
.segment-grid .segment-card:nth-child(2){animation-delay:.05s}
.segment-grid .segment-card:nth-child(3){animation-delay:.1s}
.segment-grid .segment-card:nth-child(4){animation-delay:.15s}
.segment-grid .segment-card:nth-child(5){animation-delay:.2s}
.segment-grid .segment-card:nth-child(6){animation-delay:.25s}
@keyframes wrg-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media(max-width:760px){.jp-cloud{display:none}}