/* About-page motion only. Static geometry is the complete fallback. */

/* One quiet mark: a mist underline beneath a phrase. Inline spans retain
   natural Chinese wrapping; GSAP only draws the underline, never the
   letters. The completed line is the default with no JS, no GSAP or
   reduced motion. */
.about [data-about-emphasis] {
  font-weight: 400;
  background-image: linear-gradient(rgba(175, 196, 211, .56), rgba(175, 196, 211, .56));
  background-position: left 96%;
  background-repeat: no-repeat;
  background-size: calc(100% * var(--about-emphasis-progress, 1)) .12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ============================================================
   Round 3 motion states.

   Every hidden or 3D state below sits under `.about-motion-ready`, a
   class about-motion.js puts on `.about` only once GSAP and ScrollTrigger
   exist and motion is allowed. Without that class (no JS, no GSAP,
   reduced motion) none of this applies and the finished page stands:
   cards face up, the whole name, photographs unmasked.

   The reveal system in about.css (html.about-armed ... .is-in) still owns
   everything this file does not name. Where a scroll timeline takes over
   an element, the armed rule is neutralised here with a deliberately
   higher selector, so the CSS transition and the tween never fight.
   ============================================================ */

/* ---------- split text ---------- */

.about-g {
  display: inline-block;
}

/* A Latin word, or a glyph with its closing punctuation, never breaks. */
.about-wd {
  display: inline-block;
  white-space: nowrap;
}

html.about-armed .about.about-motion-ready [data-glyphs][data-glyphs],
html.about-armed .about.about-motion-ready .about-block.is-in [data-glyphs][data-glyphs],
html.about-armed .about.about-motion-ready .about-block--big.is-in .about-u[data-glyphs] {
  clip-path: none;
  opacity: 1;
  transform: none;
  transition: none;
}

/* ---------- photographs: watercolour reveal ---------- */

.about-motion-ready img[data-wash]:not(.is-washed) {
  -webkit-mask-image: url("img/photo-wash-edge-b.svg");
  mask-image: url("img/photo-wash-edge-b.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
  -webkit-mask-size: var(--wash) var(--wash);
  mask-size: var(--wash) var(--wash);
}

html.about-armed .about.about-motion-ready img[data-wash][data-wash][data-wash] {
  clip-path: none;
  transform: none;
  transition: none;
}

/* The mask would clip a drop shadow, so the shadow comes in after it. */
.about-motion-ready .about-fig--consult img[data-wash],
.about-motion-ready .about-fig--hands img[data-wash] {
  box-shadow: 0 16px 36px -12px rgba(30, 58, 95, var(--sh, .14));
}

/* ---------- the name: the heart point ---------- */

/* The drop beside 独立角 travels over the lockup to the brush end, so it
   needs to paint above the logo. */
.about-motion-ready .about-name-drop--src {
  position: relative;
  z-index: 2;
}

/* One watercolour ripple from the dot, played once and then gone. Added by
   about-motion.js, so the static page never has it. Centred on the dot
   (x 885, y 233 of the 931.39 x 365 lockup) with negative percentage
   margins, which resolve against the lockup's width. Rose at about 8%, a soft
   fill with a slightly heavier rim, and an uneven outline: never a ring. */
.about-name-ripple {
  position: absolute;
  left: 95.02%;
  top: 63.84%;
  width: 22%;
  aspect-ratio: 1;
  margin: -11% 0 0 -11%;
  border-radius: 54% 46% 58% 42% / 47% 56% 44% 53%;
  background:
    radial-gradient(closest-side, rgba(197, 139, 142, 0) 58%, rgba(197, 139, 142, .08) 82%, rgba(197, 139, 142, 0) 100%),
    radial-gradient(closest-side, rgba(197, 139, 142, .04), rgba(197, 139, 142, 0));
  pointer-events: none;
  opacity: 0;
}

/* ---------- the 2024 pause ---------- */

html.about-armed .about.about-motion-ready .about-scene--pause .about-p {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ---------- style cards: face-down, then turned over ---------- */

/* The card itself carries no paint, so a turned card has no stray plane
   showing through. Each face carries its own border, paper and shadow. */
.about-motion-ready .about-card {
  transform-style: preserve-3d;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.about-motion-ready .about-card::before {
  content: none;
}

.about-motion-ready .about-card-front,
.about-motion-ready .about-card-back {
  position: absolute;
  inset: 0;
  height: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: 1px solid rgba(30, 58, 95, .3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.about-motion-ready .about-card-front {
  background: var(--white);
  transform: rotateY(180deg);
}

.about-motion-ready .about-card-back {
  visibility: visible;
  background:
    radial-gradient(ellipse 80% 70% at 50% 45%, rgba(175, 196, 211, .5), rgba(175, 196, 211, .2) 70%),
    var(--white);
}

.about-motion-ready .about-card-front::before,
.about-motion-ready .about-card-back::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

/* Turned over and settled: drop back to flat paint so the type is crisp. */
.about-motion-ready .about-card.is-up {
  transform-style: flat;
}

.about-motion-ready .about-card.is-up .about-card-front {
  transform: none;
}

.about-motion-ready .about-card.is-up .about-card-back {
  visibility: hidden;
}

/* The cards fade up with the table; GSAP owns their transform. */
html.about-armed .about.about-motion-ready .about-card.about-p {
  transform: none;
  transition: opacity var(--reveal-dur) var(--reveal-ease) var(--d, 0ms);
}

/* ---------- contact bloom ---------- */

.about-bloom-body.is-turbulent {
  filter: url("#about-bloom-filter");
}

.about-bloom-svg {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .about-bloom-body.is-turbulent {
    filter: none;
  }
}