@keyframes about-line-draw {
  to { stroke-dashoffset: 0; }
}

body.page-about [data-attention-card] {
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.35s ease;
  --proximity: 0;
  transform: translate3d(0, calc(var(--proximity, 0) * -6px), 0);
  will-change: transform, box-shadow;
}
body.page-about [data-attention-card][data-tapped="true"], body.page-about [data-attention-card]:hover {
  --proximity: 1;
  transform: translate3d(0, -8px, 0);
  box-shadow: 0 18px 38px -22px rgba(0, 0, 0, 0.28);
}
body.page-about [data-attention-card]:focus-within {
  outline: 2px solid var(--plum, #6b3a4f);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  
  body.page-about [data-attention-card] {
    --proximity: 0;
    transform: none;
    transition: none;
  }
  body.page-about [data-attention-card]:hover {
    transform: none;
    box-shadow: 0 12px 28px -22px rgba(0, 0, 0, 0.18);
  }
  
  
}

.opt-card p {
  font-size: 1.02rem;
  line-height: 1.6;
}
.opt-card h3 {
  font-size: 1.4rem;
}

.container-narrow > p {
  font-size: 1.08rem;
  line-height: 1.7;
}

@keyframes codex-swap-pulse {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50%      { transform: translateY(-2px); opacity: 1; }
}

::view-transition-old(codex-img-male), ::view-transition-new(codex-img-male), ::view-transition-old(codex-img-female), ::view-transition-new(codex-img-female) {
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (max-width: 700px) {
  
  
  
  
  
  
  

  
  
  
}

body.page-home { --hiw-accent: #4A1F2A; --hiw-tint-soft: #FAF6F0;                 --hiw-tint-edge: #E8DDD8; }

body.page-masterclass { --hiw-accent: #8E3A1F; --hiw-tint-soft: #FAF1EB;               --hiw-tint-edge: #ECD9CD; }