/* ============================================================================
   AQW refinement layer — 2026-10-19
   Loaded last so it can settle typography, rhythm and motion without editing
   the established stylesheets.

   Scoping rule, and it matters: `.aqw-anim` gates ONLY the entrance animation
   (the hidden state and its transition). Typography, spacing and layout
   corrections are unconditional — a reader who prefers reduced motion, or a
   browser without IntersectionObserver, still gets the fixed layout. Tying
   those to the animation class would make the page silently regress for them.

   Safety invariant: nothing that was visible before is hidden now. The hidden
   state exists only while `.aqw-anim` is set, which visual-entrance.js does
   only when it can guarantee a reveal path.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens -- */
:root{
  --aqw-ease:cubic-bezier(.22,1,.36,1);
  --aqw-ease-out:cubic-bezier(.16,1,.3,1);
  --aqw-rhythm:clamp(78px,7.2vw,118px);
  --aqw-seam:linear-gradient(90deg,transparent,rgba(99,196,214,.28) 18%,rgba(140,184,255,.34) 50%,rgba(99,196,214,.28) 82%,transparent);
}

/* ======================================================== LAYOUT & TYPE ====
   Unconditional. Applies with or without animation.
   ========================================================================= */

/* ------------------------------------------------------- vertical rhythm -- */
/* Sections used a flat 105px. Scaling with the viewport keeps long-form
   reading comfortable on laptops without stranding content on large screens. */
.section{padding:var(--aqw-rhythm) 0}

/* Dark/light boundaries met as a hard cut. A hairline seam reads as intent. */
.section.light{position:relative}
.section.light:before,
.section.light:after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:var(--aqw-seam);opacity:.5;pointer-events:none;z-index:1;
}
.section.light:before{top:0}
.section.light:after{bottom:0}

/* ----------------------------------------------------------- typography -- */
/* CJK headings were set with Latin tracking (-.055em at 82px), which pushes
   glyphs into each other and cost roughly a character of width per line.
   Matching is by [lang] prefix rather than :lang(): inner wrappers carry
   lang="zh-Hans" while <html> carries lang="zh-CN", and :lang(zh-CN) does not
   match a zh-Hans subtree. The |= operator matches both. */
:is([lang|="zh"],[lang|="ja"],[lang|="ko"]) :is(h1,h2),
:is([lang|="zh"],[lang|="ja"],[lang|="ko"]):is(h1,h2){
  letter-spacing:-.012em;line-height:1.2;
}
:is([lang|="zh"],[lang|="ja"],[lang|="ko"]) h3{letter-spacing:0;line-height:1.45}

/* Headlines break mid-phrase at narrow widths; balancing keeps lines even. */
:is(h1,h2,h3){text-wrap:balance}
.lead,.section-head>p{text-wrap:pretty}

/* --------------------------------------------------------------- quant --- */
/* Four cards shared a .8fr column that measures ~573px at any desktop width,
   leaving each card 134px — every heading wrapped to four lines. Two rows of
   two is the honest fit for this column, so size by container, not viewport. */
#quant .single-journey{grid-template-columns:repeat(2,minmax(0,1fr))}
.single-journey .card{min-height:0;padding:20px 20px 22px}
.single-journey h3{font-size:clamp(15px,1.15vw,17px);line-height:1.4}

/* --------------------------------------------------------------- earn ---- */
/* The ≈2%/日* figure rendered at 88px against a 10px disclaimer directly
   beneath it. Narrowing that ratio makes the qualifier legible, which for a
   yield claim is the part that has to be readable. */
.yield-number{
  font-size:clamp(46px,5.4vw,74px);line-height:1.08;letter-spacing:-.03em;
  overflow-wrap:break-word;
}
.yield-display{padding:clamp(26px,2.4vw,34px)}
.risk-note{font-size:13px;line-height:1.7;padding:14px 16px}

/* --------------------------------------------------------- chapter bar --- */
/* Chips repeated the chapter headline verbatim, so three of six read as the
   same truncated sentence. site-nav.js now prefers each section's kicker and
   drops duplicates; this fades the strip edges to signal it scrolls. */
.aqw-chapterbar-links{
  scroll-behavior:smooth;
  mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 22px),transparent);
}

/* ============================================================== MOTION =====
   Hover, focus and press feedback. Safe without the entrance layer.
   ========================================================================= */

.card,.trust,.earn-card,.ai-feature{
  transition:transform .42s var(--aqw-ease),border-color .32s ease,box-shadow .42s var(--aqw-ease);
}
.card:hover{transform:translateY(-6px)}

/* A light sweep along the top edge makes hover read as a surface, not a jump. */
.cards .card,.single-journey .card{position:relative}
.cards .card:after,.single-journey .card:after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(99,226,205,.55),transparent);
  transform:scaleX(0);opacity:0;pointer-events:none;
  transition:transform .45s var(--aqw-ease),opacity .3s ease;
}
.cards .card:hover:after,.single-journey .card:hover:after{transform:scaleX(1);opacity:1}

/* Buttons acknowledge the press, not just the hover. */
.btn{transition:transform .2s var(--aqw-ease),border-color .23s ease,box-shadow .28s ease,background .23s ease}
.btn:active{transform:translateY(0) scale(.985)}

/* Focus was easy to lose against the dark panels. */
:is(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid #6ee6d6;outline-offset:3px;border-radius:10px;
}

/* The orb pulsed unconditionally, including off-screen and in background tabs. */
.orb{animation-play-state:paused}
.hero:hover .orb,.aqw-motion-active .orb{animation-play-state:running}

/* Rajesh Pahwa's portrait is a 200x200 source shown at 232px; a slow scale on
   hover reads as intent rather than as an upscale artefact. */
.team-portrait img{transition:transform .6s var(--aqw-ease)}
.team-card:hover .team-portrait img{transform:scale(1.035)}

/* ============================================================ ENTRANCE =====
   Gated on .aqw-anim, set by visual-entrance.js only when a reveal path is
   guaranteed. Without the class these rules do not exist and all content
   renders at full opacity, exactly as it did before.
   ========================================================================= */

.aqw-anim .reveal,
.aqw-anim .stagger>*{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .66s var(--aqw-ease-out),transform .66s var(--aqw-ease-out);
  will-change:opacity,transform;
}
.aqw-anim .reveal.visible,
.aqw-anim .reveal.aqw-shown,
.aqw-anim .stagger.visible>*,
.aqw-anim .stagger.aqw-shown>*{opacity:1;transform:none;will-change:auto}

/* Staggered children cascade rather than arriving as one block. */
.aqw-anim .stagger.visible>*:nth-child(2){transition-delay:70ms}
.aqw-anim .stagger.visible>*:nth-child(3){transition-delay:140ms}
.aqw-anim .stagger.visible>*:nth-child(4){transition-delay:210ms}
.aqw-anim .stagger.visible>*:nth-child(5){transition-delay:280ms}
.aqw-anim .stagger.visible>*:nth-child(n+6){transition-delay:340ms}

/* Headings travel slightly further than the body blocks they introduce. */
.aqw-anim .section-head.reveal,.aqw-anim .v2-head.reveal{transform:translate3d(0,24px,0)}

/* ============================================================ FALLBACKS ====
   Belt and braces. The animation class is never set under reduced motion, but
   if the preference flips mid-session nothing stays hidden or keeps moving.
   ========================================================================= */

@media(prefers-reduced-motion:reduce){
  .aqw-anim .reveal,.aqw-anim .stagger>*{
    opacity:1!important;transform:none!important;transition:none!important;
  }
  .card:hover,.btn:active{transform:none}
  .orb{animation:none!important}
  .team-card:hover .team-portrait img{transform:none}
  .cards .card:after,.single-journey .card:after{transition:none}
}

@media print{
  .aqw-anim .reveal,.aqw-anim .stagger>*{opacity:1!important;transform:none!important}
  .section.light:before,.section.light:after{display:none}
}