/* =====================================================================
   MOTION LAYER
   Techniques studied on Awwwards portfolio winners, rebuilt from
   scratch for the "ledger" concept. Loaded after style.css.
   ===================================================================== */

/* ---------- 1. Colour shift: the page turns to ivory "paper" for Recognition ---------- */
@property --bg     { syntax: "<color>"; inherits: true; initial-value: #0f0e0d; }
@property --bg-2   { syntax: "<color>"; inherits: true; initial-value: #171513; }
@property --fg     { syntax: "<color>"; inherits: true; initial-value: #ede6d9; }
@property --muted  { syntax: "<color>"; inherits: true; initial-value: #8c8478; }
@property --line   { syntax: "<color>"; inherits: true; initial-value: rgba(237, 230, 217, 0.1); }
@property --lime   { syntax: "<color>"; inherits: true; initial-value: #c8a96e; }
:root {
  transition: --bg .9s var(--ease), --bg-2 .9s var(--ease), --fg .9s var(--ease),
              --muted .9s var(--ease), --line .9s var(--ease), --lime .9s var(--ease);
}
:root.is-light {
  --bg: #ece5d8; --bg-2: #e3dbcc; --fg: #15120e; --muted: #6d6457;
  --line: rgba(21, 18, 14, .14); --lime: #9a763a;
}

/* ---------- 2. Masked text reveals (words / letters slide up from a mask) ---------- */
.split-word { display: inline-block; white-space: nowrap; }
.split-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .16em .02em .06em; margin: -.16em -.02em -.06em; }
.split-i { display: inline-block; transform: translate3d(0, 115%, 0); transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 26ms); }
.in .split-i, [data-split].in .split-i { transform: none; }
[data-split][data-in] { opacity: 1; transform: none; }
.section__head[data-in] { opacity: 1; transform: none; }
.section__head .idx, .section__head .by { opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease) .35s, transform .8s var(--ease) .35s; }
.section__head.in .idx, .section__head.in .by { opacity: 1; transform: none; }

/* ---------- 3. Letter-roll hover (each letter flips to its twin, staggered) ---------- */
.roll { display: inline-flex; overflow: hidden; vertical-align: bottom; line-height: 1.25; padding-bottom: .05em; }
.roll .rc { position: relative; display: inline-block; white-space: pre; transition: transform .55s var(--ease); transition-delay: calc(var(--i) * 16ms); }
.roll .rc::after { content: attr(data-c); position: absolute; left: 0; top: 100%; }
:is(a, button):hover .roll .rc,
:is(a, button):focus-visible .roll .rc { transform: translate3d(0, -100%, 0); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 4. Header: live section label + sound toggle ---------- */
.hud__id { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hud__label { display: inline-block; }
.hud__label.is-swap { animation: labelIn .7s var(--ease); }
@keyframes labelIn { from { transform: translate3d(0, 110%, 0); } }
.hud__right { display: flex; align-items: center; gap: 24px; }
.hud__sound {
  appearance: none; background: none; border: 0; padding: 0; color: inherit; font: inherit;
  letter-spacing: inherit; text-transform: inherit; display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
}
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.bars i { width: 2px; height: 3px; background: currentColor; transition: height .3s; }
.hud__sound[aria-pressed="true"] .bars i { animation: eq .8s ease-in-out infinite alternate; }
.hud__sound[aria-pressed="true"] .bars i:nth-child(2) { animation-delay: -.3s; }
.hud__sound[aria-pressed="true"] .bars i:nth-child(3) { animation-delay: -.55s; }
.hud__sound[aria-pressed="true"] .bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { from { height: 3px; } to { height: 12px; } }
@media (max-width: 720px) {
  .hud__right { gap: 14px; }
  .hud__soundTxt { display: none; }
}

/* ---------- 5. Ledger totals — odometer counters ---------- */
.totals { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.totals__item { display: grid; gap: 14px; align-content: start; padding: clamp(28px, 4vw, 60px) var(--pad); border-right: 1px solid var(--line); }
.totals__item:last-child { border-right: 0; }
.totals__num { display: flex; align-items: flex-start; font-size: clamp(56px, 7.4vw, 128px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variation-settings: "wdth" 108; }
.totals__pre, .totals__suf { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--lime); font-size: .5em; letter-spacing: 0; margin: .06em .08em 0; }
.totals__label { color: var(--muted); }
.odo { display: inline-flex; height: 1em; overflow: hidden; }
.odo__col { display: flex; flex-direction: column; transition: transform 2.2s var(--ease); transition-delay: calc(var(--i) * 140ms + .1s); }
.odo__col span { display: block; height: 1em; }
.totals.in .odo__col { transform: translate3d(0, calc(var(--d) * -1em), 0); }
@media (max-width: 800px) {
  .totals { grid-template-columns: 1fr 1fr; }
  .totals__item:nth-child(2) { border-right: 0; }
  .totals__item:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
}

/* ---------- 6. Right now — stacking cards ---------- */
.now__stack { display: grid; gap: 28px; padding-bottom: 6vh; }
.now__card {
  position: sticky; top: calc(96px + var(--i, 0) * 22px);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 24px 48px;
  min-height: clamp(260px, 30vw, 380px); padding: clamp(24px, 3vw, 44px);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px;
  transform-origin: 50% 0; box-shadow: 0 -24px 60px rgba(0, 0, 0, .35);
}
.now__card::before { content: ""; position: absolute; top: -1px; left: 44px; width: 60px; height: 2px; background: var(--lime); }
.now__meta { grid-column: 1 / -1; display: flex; justify-content: space-between; color: var(--muted); }
.now__state { display: inline-flex; align-items: center; color: var(--lime); }
.now__card h3 { align-self: end; margin: 0; font-size: clamp(38px, 5.4vw, 96px); line-height: .9; font-weight: 800; letter-spacing: -0.04em; text-transform: uppercase; font-variation-settings: "wdth" 105; }
.now__card p { align-self: end; justify-self: end; margin: 0; max-width: 34ch; color: var(--muted); font-size: clamp(16px, 1.4vw, 20px); line-height: 1.55; }
@media (max-width: 800px) {
  .now__card { grid-template-columns: 1fr; top: calc(76px + var(--i, 0) * 14px); }
  .now__card p { justify-self: start; }
}

/* ---------- 7. Contact — the section opens up (clip-path) as it arrives ---------- */
.contact { background: var(--bg-2); border-top: 0; clip-path: inset(var(--cy, 0px) var(--cx, 0px) 0 var(--cx, 0px) round var(--cr, 0px)); }
.slot { display: inline-grid; vertical-align: bottom; overflow: hidden; padding: .12em .1em .14em; margin: -.12em -.1em -.14em; }
.slot em { grid-area: 1 / 1; justify-self: center; white-space: nowrap; transform: translate3d(0, 160%, 0); transition: transform .9s var(--ease); }
.slot em.is-on { transform: none; }
.slot em.is-out { transform: translate3d(0, -160%, 0); }
.contact__title:not(.in) .slot em.is-on { transform: translate3d(0, 160%, 0); }

/* ---------- 8. Work rows — highlighter sweep ---------- */
.works__list li { position: relative; }
.works__list li::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(200, 169, 110, .1), transparent 75%);
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease);
}
.works__list li:hover::before,
.works__list li:has([aria-expanded="true"])::before { transform: scaleX(1); }

/* ---------- 9. Mobile menu — letters cascade in ---------- */
.menu nav a .split-i { transition-delay: calc(var(--i) * 22ms + .15s); }
.menu:not(.is-open) nav a .split-i { transform: translate3d(0, 115%, 0); }
.menu.is-open nav a .split-i { transform: none; }