/* Shared refinements for the redesigned pages: tokens, arrivals, section folios and link underlines.
   Loaded after direction.css and pages.css on the homepage, imports and contact pages. */

body.studio {
  --muted: #5d6b6f;
  --ease: cubic-bezier(.2,.75,.15,1);
  --orange-ink: #b9580c;
  --orange-light: #ffac64;
}

/* ---------- Arrivals ---------- */

.reveal-ready [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 1s ease var(--reveal-delay,0s), transform 1.25s var(--ease) var(--reveal-delay,0s); }
.reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; }
.reveal-ready [data-reveal='image'] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1.35s var(--ease) var(--reveal-delay,0s); }
.reveal-ready [data-reveal='image'].is-revealed { clip-path: inset(0); }
.reveal-ready [data-reveal='image'] img { transition: transform 1.6s var(--ease); }
.reveal-ready [data-reveal='image']:not(.is-revealed) img { transform: scale(1.14); }

/* ---------- Section folios ---------- */

.studio main .eyebrow { font-size: 11px; letter-spacing: .12em; }
.studio .eyebrow[data-index]::before { content: attr(data-index); color: var(--orange-ink); padding-right: 42px; margin-right: 13px; background: linear-gradient(currentColor,currentColor) right 52% / 28px 1px no-repeat; }
.studio .on-dark .eyebrow[data-index]::before { color: var(--orange-light); }

/* ---------- Links draw their underline ---------- */

.studio main .text-link { background: linear-gradient(var(--orange),var(--orange)) 0 100% / 0 1px no-repeat; background-origin: border-box; transition: background-size .55s var(--ease); }
.studio main .text-link:hover { background-size: 100% 1px; }

@media print {
  .reveal-ready [data-reveal] { opacity: 1; transform: none; clip-path: none; }
}