/* BLINKBUN v1.2.3 UI Polish
   Additive stylesheet: typography + premium motion.
   Safe to load after static/app.css.
*/

/* =========================================================
   v1.2.2 DESKTOP LAYOUT + TYPOGRAPHY TUNING
   - reduce unnecessary line breaks in public hero / section titles
   - slightly enlarge overall public-site typography
   - make desktop navigation a bit larger
   ========================================================= */

@media (min-width: 1121px){
  /* Header / desktop navigation */
  .unified-header{
    min-height:88px;
    padding-top:16px;
    padding-bottom:16px;
  }
  .brand b{
    font-size:22px;
  }
  .brand small{
    font-size:11px;
    line-height:1.35;
  }
  .top-nav{
    gap:8px;
  }
  .top-nav a{
    font-size:16.5px;
    padding:12px 18px;
  }
  .header-actions .lang-select,
  .header-actions button,
  .compact-btn{
    font-size:15px;
  }

  /* Hero: give the copy a little more width so Korean lines wrap later */
  .landing-hero{
    grid-template-columns:minmax(0,1.14fr) minmax(340px,.66fr);
    gap:28px;
    padding-top:78px;
    padding-bottom:62px;
  }
  .landing-copy h1{
    max-width:980px;
    font-size:clamp(60px,5.6vw,96px);
    line-height:.94;
    letter-spacing:-.07em;
    margin-bottom:24px;
  }
  .landing-copy > p{
    max-width:860px;
    font-size:17px;
    line-height:1.8;
  }
  .hero-reward-promise strong{
    font-size:17px;
  }
  .hero-reward-promise small{
    font-size:12px;
    line-height:1.65;
  }
  .season-live-top strong{
    font-size:17px;
  }
  .season-live-metrics b{
    font-size:27px;
  }
  .season-live-metrics small,
  .season-live-spotlight p,
  .season-live-spotlight p span{
    font-size:12.5px;
    line-height:1.6;
  }
  .xl-btn,
  .ghost-link-button{
    font-size:15px;
    padding:15px 22px;
  }
  .hero-trust-row b{
    font-size:15px;
  }
  .hero-trust-row small{
    font-size:11.5px;
    line-height:1.55;
  }

  /* Public headings: wider measure to avoid premature line breaks */
  .section-heading{
    max-width:1120px;
    margin-bottom:38px;
  }
  .login-intro h2,
  .section-heading h2,
  .preview-copy h2,
  .security-copy h2,
  .docs-section h2,
  .final-cta h2{
    font-size:clamp(36px,3.1vw,56px);
    line-height:1.08;
    letter-spacing:-.05em;
  }
  .login-intro p,
  .section-heading p,
  .preview-copy p,
  .security-copy p,
  .final-cta p{
    max-width:960px;
    font-size:15.5px;
    line-height:1.78;
  }
  .section-kicker{
    font-size:12px;
  }

  /* Loop cards: slightly larger copy for desktop readability */
  .loop-grid{
    gap:14px;
  }
  .loop-grid article{
    min-height:236px;
    padding:24px;
  }
  .loop-icon{
    font-size:36px;
    margin:22px 0 20px;
  }
  .loop-grid h3{
    font-size:20px;
    margin-bottom:10px;
  }
  .loop-grid p{
    font-size:14px;
    line-height:1.72;
  }
}

/* =========================================================
   BLINKBUN v1.2.3 UI MOTION POLISH
   Premium, low-noise motion for the public landing experience.
   ========================================================= */

/* A little more depth without turning the page into a light show. */
.site-public{
  position:relative;
  overflow:hidden;
}
.site-public:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.42;
  background:
    radial-gradient(circle at 14% 14%,rgba(92,122,255,.10),transparent 28%),
    radial-gradient(circle at 86% 38%,rgba(80,236,194,.055),transparent 24%),
    radial-gradient(circle at 58% 78%,rgba(137,92,255,.055),transparent 26%);
}

/* Hero motion */
@keyframes bb-bun-float{
  0%,100%{transform:translate3d(0,0,0) rotate(-.25deg)}
  50%{transform:translate3d(0,-12px,0) rotate(.35deg)}
}
@keyframes bb-glow-breathe{
  0%,100%{transform:scale(.96);opacity:.66}
  50%{transform:scale(1.055);opacity:1}
}
@keyframes bb-orbit-cw{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes bb-orbit-ccw{
  from{transform:rotate(18deg)}
  to{transform:rotate(-342deg)}
}
@keyframes bb-chip-float-a{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-7px,0)}
}
@keyframes bb-chip-float-b{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,6px,0)}
}
@keyframes bb-soft-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(112,241,168,0)}
  50%{box-shadow:0 0 0 7px rgba(112,241,168,.045)}
}
@keyframes bb-progress-shine{
  from{background-position:180% 50%}
  to{background-position:-80% 50%}
}
@keyframes bb-hero-enter{
  from{opacity:0;transform:translate3d(0,18px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

.landing-bun,
.landing-bun-fallback{
  will-change:transform;
  animation:bb-bun-float 4.8s ease-in-out infinite;
}
.landing-glow{
  will-change:transform,opacity;
  animation:bb-glow-breathe 4.6s ease-in-out infinite;
}
.lo1{animation:bb-orbit-cw 34s linear infinite}
.lo2{animation:bb-orbit-ccw 27s linear infinite}
.vc1{animation:bb-chip-float-a 4.2s ease-in-out infinite}
.vc2{animation:bb-chip-float-b 4.8s ease-in-out .35s infinite}
.vc3{animation:bb-chip-float-a 5.1s ease-in-out .7s infinite}

/* A restrained entrance sequence above the fold. */
.landing-copy>.pill{animation:bb-hero-enter .55s cubic-bezier(.2,.75,.25,1) both}
.landing-copy>h1{animation:bb-hero-enter .65s .07s cubic-bezier(.2,.75,.25,1) both}
.landing-copy>p{animation:bb-hero-enter .65s .14s cubic-bezier(.2,.75,.25,1) both}
.hero-reward-promise{animation:bb-hero-enter .65s .20s cubic-bezier(.2,.75,.25,1) both}
.season-live-spotlight{animation:bb-hero-enter .65s .26s cubic-bezier(.2,.75,.25,1) both}
.landing-actions{animation:bb-hero-enter .62s .32s cubic-bezier(.2,.75,.25,1) both}
.hero-trust-row{animation:bb-hero-enter .62s .38s cubic-bezier(.2,.75,.25,1) both}
.landing-visual{animation:bb-hero-enter .8s .12s cubic-bezier(.2,.75,.25,1) both}

/* Live-state details */
.season-live-badge{
  animation:bb-soft-pulse 2.8s ease-in-out infinite;
}
.season-live-progress i{
  background-image:linear-gradient(90deg,#65e9b1 0%,#71bfff 36%,#d7f8ff 50%,#ab78ff 64%,#65e9b1 100%);
  background-size:220% 100%;
  animation:bb-progress-shine 4.5s linear infinite;
}

/* Premium hover lift: desktop/pointer devices only. */
@media (hover:hover) and (pointer:fine){
  .loop-grid article,
  .reward-path-grid article,
  .token-facts>div,
  .allocation-grid article,
  .roadmap-line article,
  .hero-trust-row>span,
  .season-live-metrics>div,
  .security-card>div,
  .doc-grid a,
  .market-mini,
  .mini-game-preview{
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background-color .22s ease;
    will-change:transform;
  }
  .loop-grid article:hover,
  .reward-path-grid article:hover,
  .token-facts>div:hover,
  .allocation-grid article:hover,
  .roadmap-line article:hover,
  .hero-trust-row>span:hover,
  .season-live-metrics>div:hover,
  .security-card>div:hover,
  .doc-grid a:hover,
  .market-mini:hover{
    transform:translate3d(0,-5px,0);
    border-color:#405c82;
    box-shadow:0 16px 38px rgba(0,0,0,.20),0 0 28px rgba(104,129,255,.055);
  }
  .mini-game-preview:hover{
    transform:translate3d(0,-4px,0);
    border-color:#435d82;
    box-shadow:0 28px 72px rgba(0,0,0,.28),0 0 38px rgba(112,105,255,.07);
  }

  .primary,
  .ghost-link-button{
    position:relative;
    overflow:hidden;
    transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease,filter .2s ease;
  }
  .primary:hover,
  .ghost-link-button:hover{
    transform:translate3d(0,-2px,0);
  }
  .primary:hover{
    box-shadow:0 12px 32px rgba(93,235,158,.18),0 0 22px rgba(113,236,165,.10);
    filter:saturate(1.06) brightness(1.035);
  }
  .ghost-link-button:hover{
    border-color:#496689;
    box-shadow:0 12px 28px rgba(0,0,0,.16);
  }
  .primary:after{
    content:"";
    position:absolute;
    top:-70%;
    left:-42%;
    width:30%;
    height:240%;
    pointer-events:none;
    transform:rotate(20deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
    transition:left .55s ease;
  }
  .primary:hover:after{left:118%}
}

/* Scroll reveal. Hidden state is enabled only after JS marks motion ready. */
body.bb-motion-ready .bb-reveal{
  opacity:0;
  transform:translate3d(0,24px,0) scale(.992);
  transition:
    opacity .68s cubic-bezier(.2,.75,.25,1),
    transform .68s cubic-bezier(.2,.75,.25,1);
  transition-delay:var(--bb-reveal-delay,0ms);
}
body.bb-motion-ready .bb-reveal.bb-inview{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}

/* Slight visual polish to major public cards. */
.hero-reward-promise,
.season-live-spotlight,
.loop-grid article,
.reward-path-grid article,
.token-facts>div,
.allocation-grid article,
.security-card,
.mini-game-preview{
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

/* Keep motion cheap and calm on smaller screens. */
@media(max-width:760px){
  .landing-bun,
  .landing-bun-fallback{animation-duration:6.2s}
  .lo1,.lo2{animation:none}
  .visual-chip{animation:none}
  body.bb-motion-ready .bb-reveal{
    transform:translate3d(0,14px,0);
    transition-duration:.5s;
  }
}

/* Accessibility: no forced motion for users who prefer reduced motion. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .landing-bun,
  .landing-bun-fallback,
  .landing-glow,
  .lo1,.lo2,
  .visual-chip,
  .season-live-badge,
  .season-live-progress i,
  .landing-copy>.pill,
  .landing-copy>h1,
  .landing-copy>p,
  .hero-reward-promise,
  .season-live-spotlight,
  .landing-actions,
  .hero-trust-row,
  .landing-visual{
    animation:none!important;
  }
  body.bb-motion-ready .bb-reveal,
  body.bb-motion-ready .bb-reveal.bb-inview{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
  .primary,.ghost-link-button,
  .loop-grid article,
  .reward-path-grid article,
  .token-facts>div,
  .allocation-grid article,
  .roadmap-line article,
  .hero-trust-row>span,
  .season-live-metrics>div,
  .security-card>div,
  .doc-grid a,
  .market-mini,
  .mini-game-preview{
    transition:none!important;
  }
}