/* Sable Studio — shared styles. Tokens and timings per README.md design system. */

html { scroll-behavior: auto; }
html, body { margin: 0; background: #ffffff; }
a { color: inherit; text-decoration: none; }
::selection { background: #0EBA83; color: #F2F2F2; }

:focus-visible { outline: 2px solid #0f9e73; outline-offset: 2px; }

/* Lift-on-hover buttons and pills (README: translateY(-3px) over 400ms, standard easing) */
.btn-lift { transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); }
.btn-lift:hover, .btn-lift:focus-visible { transform: translateY(-3px); }

.backlink:hover { color: #1d1d1f; }
.lgl a { color: #0f9e73; border-bottom: 1px solid rgba(15,158,115,0.35); }
.lgl a:hover { border-bottom-color: #0f9e73; }

/* ---------- Home page ---------- */

@keyframes blobDrift {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(calc(100% * var(--tx1)), calc(100% * var(--ty1))); }
  40% { transform: translate(calc(100% * var(--tx2)), calc(100% * var(--ty2))); }
  60% { transform: translate(calc(100% * var(--tx3)), calc(100% * var(--ty3))); }
  80% { transform: translate(calc(100% * var(--tx4)), calc(100% * var(--ty4))); }
}
@media (prefers-reduced-motion: reduce) { .tblob { animation: none !important; } }

.tword {
  display: flex; align-items: baseline; gap: clamp(12px,1.2vw,20px);
  cursor: pointer; padding: clamp(5px,0.8vh,11px) 0; border: none; background: none; text-align: left; width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', 'Hanken Grotesk', sans-serif;
  font-weight: 500; font-size: clamp(20px,2vw,30px); line-height: 1.1; letter-spacing: -0.022em;
  color: #b0b0b6;
  transition: color .45s ease, font-size .45s cubic-bezier(0.22,1,0.36,1);
}
.tword:hover { color: #141416; }
.tword.is-active { font-weight: 600; font-size: clamp(27px,2.9vw,44px); color: #1d1d1f; }
.tword .tnum {
  flex: none; min-width: 2.2ch;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  font-size: 12px; letter-spacing: 0.02em; font-weight: 500;
  color: #c4c4ca; transform: translateY(-0.35em);
  transition: color .45s ease;
}
.tword.is-active .tnum { color: #0f9e73; }

.tpanel { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .55s ease, transform .55s cubic-bezier(0.22,1,0.36,1); }
.tpanel[data-active="true"] { opacity: 1; transform: translateY(0); pointer-events: auto; }

.dbox { transition: transform .5s cubic-bezier(0.34, 1.56, 0.64, 1); will-change: transform; }
.dbox[data-stretch="true"] { transform: scaleY(1.055) scaleX(0.982); transition: transform .17s cubic-bezier(0.4, 0, 0.6, 1); }
@media (prefers-reduced-motion: reduce) { .dbox, .dbox[data-stretch="true"] { transform: none !important; } }

.dpage { position: absolute; inset: 0; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .5s ease, transform .5s cubic-bezier(0.22,1,0.36,1); }
.dpage[data-active="true"] { opacity: 1; transform: translateY(0); pointer-events: auto; }

.heroline { grid-area: 1 / 1; transition: opacity .45s ease, transform .45s cubic-bezier(0.22,1,0.36,1); }
.heroline[data-on="false"] { opacity: 0; transform: translateY(8px); pointer-events: none; }

.logoSwap { perspective: 1400px; border: none; background: none; padding: 0; cursor: default; }
.logoSwap[data-flip="true"] { cursor: pointer; }
.logoFlip { display: grid; place-items: center; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(0.55, 0, 0.2, 1); }
.logoSwap[data-flip="true"]:hover .logoFlip, .logoSwap[data-flip="true"]:focus-visible .logoFlip { transform: rotateY(180deg); }
@keyframes logoTurn { 0% { transform: rotateY(0deg); } 42% { transform: rotateY(180deg); } 58% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
.logoSwap[data-auto="true"] .logoFlip { animation: logoTurn 2.4s cubic-bezier(0.55, 0, 0.2, 1) both; }
@media (prefers-reduced-motion: reduce) { .logoSwap[data-auto="true"] .logoFlip { animation: none; } }
.lgWord, .lgMark { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lgMark { visibility: hidden; }
.logoSwap[data-flip="true"] .lgMark { visibility: visible; }

/* Price figure: hover swaps currency; click/tap toggles it too (keyboard + touch path) */
#priceHead { cursor: pointer; border: none; background: none; padding: 0; font: inherit; }

@media (max-width: 768px) {
  #topicsTrack { height: auto !important; }
  #topicsPin { position: static !important; height: auto !important; overflow: visible !important; display: block !important; padding: clamp(64px,10vh,100px) clamp(24px,7vw,40px) !important; }
  #topicList { flex-direction: row !important; flex-wrap: wrap !important; gap: 14px 24px !important; margin-bottom: 44px !important; }
  .tword { width: auto !important; font-size: clamp(22px,7vw,32px) !important; }
  #topicPanels { height: auto !important; display: flex !important; flex-direction: column !important; gap: 18px !important; }
  .tpanel { position: static !important; opacity: 1 !important; transform: none !important; }
  #rail { display: none !important; }
}

/* Scroll-in reveals */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1); }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}