/* ==========================================================================
   DRAFT — the motion layer. Loaded only by `build.py --draft`, on top of
   site.css, so the approved page is untouched. Everything here is additive:
   remove the file and the page is exactly the version before it.

   The brief: more movement, more visual life, in the spirit of the reference
   (glass edges, cards that slide over one another, a figure that answers the
   pointer) — and still only white, black and grey.
   ========================================================================== */

/* --- 1. The hero headline arrives word by word ---------------------------- */
/* Each word starts a little low and out of focus and settles in turn: the
   blur is what makes it read as the line coming into focus rather than as
   text being dropped onto the page. */
.d-w{display:inline-block;opacity:0;transform:translateY(.35em);filter:blur(6px)}
.d-in .d-w{animation:d-word .9s var(--ease-out) forwards}
.d-in .d-w:nth-child(1){animation-delay:.05s}
.d-in .d-w:nth-child(2){animation-delay:.15s}
.d-in .d-w:nth-child(3){animation-delay:.25s}
.d-in .d-w:nth-child(4){animation-delay:.35s}
.d-in .d-w:nth-child(5){animation-delay:.45s}
.d-in .d-w:nth-child(6){animation-delay:.55s}
.d-in .d-w:nth-child(7){animation-delay:.65s}
.d-in .d-w:nth-child(8){animation-delay:.75s}
@keyframes d-word{to{opacity:1;transform:none;filter:blur(0)}}
/* the lede and buttons follow the last word */
.d-in .hero .lede,.d-in .hero-act{animation:d-rise .8s var(--ease-out) both}
.d-in .hero .lede{animation-delay:.85s}
.d-in .hero-act{animation-delay:1s}
@keyframes d-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* --- 2. Cards enter stacked, the way the reference's boxes overlap -------- */
/* A card that has not been reached yet sits a little lower and tilted back
   in depth; as it scrolls in it stands up. Neighbours in a row are staggered
   by site.js's existing 55ms, so a row arrives as a fan, not a slab. */
.works,.wall,.strata{perspective:1200px}
.works .work.rv,.wall .tile.rv{transform:translateY(28px) rotateX(9deg);transform-origin:50% 100%}
.works .work.rv.in,.wall .tile.rv.in{transform:none;transition:opacity .8s var(--ease-out),transform .9s var(--ease-out)}
/* and the frame inside brightens after the card lands */
.work.rv .work-hit > img{opacity:.6;transition:opacity .9s var(--ease) .3s,filter .45s var(--ease),transform .55s var(--ease-out)}
.work.rv.in .work-hit > img{opacity:1}

/* --- 3. Glass edge on the logo tiles and work cards ----------------------- */
/* The same turning hairline the strata carry, on every card: a highlight
   that travels round the box while the pointer is on it. */
.tile,.work{isolation:isolate}
.tile::after,.work::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;opacity:0;transition:opacity .35s var(--ease);
  background:conic-gradient(from var(--strk),rgba(255,255,255,0) 0deg,rgba(255,255,255,.6) 50deg,rgba(255,255,255,0) 120deg,rgba(255,255,255,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.work{position:relative}
.tile:hover::after,.work:hover::after{opacity:1;animation:strk 3s linear infinite}

/* --- 4. The portrait card answers the pointer ------------------------------ */
/* draft.js writes --rx/--ry from the pointer's position over the card; the
   card leans toward it, and a soft light (the ::before) slides across the
   glass in the opposite direction, which is what sells the tilt. */
.maker-card{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--fy,0px));
  transition:transform .25s var(--ease-out),border-color .3s var(--ease);
  animation:none;
}
.maker-card::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(60% 45% at var(--lx,50%) var(--ly,30%),rgba(255,255,255,.16),rgba(255,255,255,0) 70%);
  opacity:0;transition:opacity .4s var(--ease);
}
.maker-card:hover::before{opacity:1}

/* --- 5. Strata numerals count up when the band arrives -------------------- */
.stratum-n{transition:transform .4s var(--ease-out),filter .4s var(--ease),opacity .6s var(--ease)}
.strata:not(.d-counted) .stratum-n{opacity:0}

/* --- 6. Eyebrows track in --------------------------------------------------- */
/* Latin eyebrows only — tracking is exactly the device Arabic must never use */
.eyebrow:not(.ar).rv{letter-spacing:.6em;opacity:0}
.eyebrow:not(.ar).rv.in{letter-spacing:.22em;opacity:1;transition:letter-spacing 1.1s var(--ease-out),opacity .7s var(--ease)}

/* --- 7. The logo strip breathes ------------------------------------------- */
.strip:hover .strip-track{animation-play-state:paused}

/* --- 8. Motion preference --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .d-w,.d-in .d-w{opacity:1;transform:none;filter:none;animation:none}
  .d-in .hero .lede,.d-in .hero-act{animation:none}
  .works .work.rv,.wall .tile.rv{transform:none}
  .work.rv .work-hit > img{opacity:1}
  .tile:hover::after,.work:hover::after{animation:none;opacity:0}
  .maker-card{transform:none}
  .strata:not(.d-counted) .stratum-n{opacity:1}
  .eyebrow:not(.ar).rv{letter-spacing:.22em;opacity:1}
}
@media (hover:none){
  .tile:hover::after,.work:hover::after{opacity:0;animation:none}
  .maker-card{transform:none}
}