/* =========================================================================
   LG Studio - animated case card
   Luis's design, lifted out of its standalone page. Hanken Grotesk and
   JetBrains Mono come from the site; only Source Serif 4 is new. Every
   selector and every svg id is namespaced so the card cannot reach the
   page and the page cannot reach the card.
   ========================================================================= */
@font-face{font-family:'Source Serif 4';src:url(../assets/fonts/SourceSerif4-Regular-latin.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url(../assets/fonts/SourceSerif4-Italic-latin.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
/* ============ EMBEDDED FONTS (LG Studio site stack) ============ */

/* ============ DESIGN TOKENS — pulled from lg.css ============ */
.lgcard {
  --ink:#12110F;
  --ivory:#F0ECE3;
  --champ:#D3C09A;
  --champ-d:#8A7448;
  --flag:oklch(0.58 0.155 45);          /* the amber trajectory line, from your own CSS */
  --navy:#18202D;                        /* the case study ink panel */
  --navy-deep:#0C121C;
  --rule-k:rgba(240,236,227,.14);
  --ease-out:cubic-bezier(.16,1,.3,1);  /* your signature ease */
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --T:16s;                               /* master loop */
}/* ============ THE CARD ============ */
.lgcard {
  position:relative;
  width:min(1280px,100%);
  aspect-ratio:16/9;
  container-type:inline-size;
  overflow:hidden;
  border-radius:2px;
  background:var(--navy);
  box-shadow:0 32px 80px rgba(0,0,0,.4);
}.lgcard svg.scene {position:absolute;inset:0;width:100%;height:100%;display:block}/* ---- copy block (HTML overlay for crisp type) ---- */
.lgcard .copy {position:absolute;left:47.5%;right:6.5%;top:21%;z-index:3}.lgcard .eyebrow {
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.95cqw;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;
  color:var(--champ);
  opacity:0;
  animation:eyebrowIn var(--T) infinite;
}
.lgcard h3 {margin-top:2.6cqw;font-weight:600;font-size:4.55cqw;line-height:1.16;letter-spacing:-.012em}.lgcard .l {display:block;overflow:hidden}.lgcard .l>span {display:inline-block;transform:translateY(112%)}.lgcard .l1>span {animation:rise1 var(--T) infinite}.lgcard .l2>span {animation:rise2 var(--T) infinite}.lgcard .l3>span {animation:rise3 var(--T) infinite}.lgcard .l1, .lgcard .l2 {color:var(--ivory)}.lgcard .l3 {
  font-family:'Source Serif 4',Georgia,serif;
  font-style:italic;font-weight:400;
  font-size:1.06em;letter-spacing:0;
  color:var(--champ);
  margin-top:.4cqw;
}/* ---- CTA ---- */
.lgcard .cta {
  margin-top:4.4cqw;
  display:inline-flex;align-items:center;gap:1.1cqw;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.9cqw;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(240,236,227,.72);
  opacity:0;
  animation:ctaIn var(--T) infinite;
}.lgcard .cta::after {
  content:"";position:absolute;left:0;bottom:-1.3cqw;
  width:15cqw;height:1px;background:var(--rule-k);
  transform:scaleX(0);transform-origin:left;
  animation:ruleIn var(--T) infinite;
}.lgcard .cta svg {width:2.2cqw;height:auto;overflow:visible}.lgcard .cta svg path {
  stroke:var(--champ);stroke-width:1.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .45s var(--ease-out);
}.lgcard:hover .cta svg path {transform:translateX(18%)}.lgcard:hover .cta {color:var(--ivory);transition:color .45s var(--ease-out)}/* ---- SVG scene element animation ---- */
.lgcard .traj {
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:draw var(--T) infinite;
}.lgcard .traj-dot {
  transform-origin:center;transform-box:fill-box;
  transform:scale(0);
  animation:dotIn var(--T) infinite;
}.lgcard .msg {
  animation:msgFade var(--T) infinite;
}.lgcard .cloud {animation:drift 34s ease-in-out infinite alternate}.lgcard .cloud2 {animation:drift2 47s ease-in-out infinite alternate}.lgcard .wash {animation:breathe 9s ease-in-out infinite alternate}

/* ============ KEYFRAMES (one 16s master timeline) ============ */
@keyframes eyebrowIn {
  0%,5%{opacity:0;letter-spacing:.55em;animation-timing-function:var(--ease-out)}
  13%{opacity:1;letter-spacing:.34em}
  91%{opacity:1;letter-spacing:.34em;animation-timing-function:var(--ease-inout)}
  97%,100%{opacity:0;letter-spacing:.34em}
}
@keyframes rise1 {
  0%,12%{transform:translateY(112%);animation-timing-function:var(--ease-out)}
  22%{transform:translateY(0)}
  91%{transform:translateY(0);animation-timing-function:var(--ease-inout)}
  97%,100%{transform:translateY(112%)}
}
@keyframes rise2 {
  0%,19%{transform:translateY(112%);animation-timing-function:var(--ease-out)}
  29%{transform:translateY(0)}
  91%{transform:translateY(0);animation-timing-function:var(--ease-inout)}
  97%,100%{transform:translateY(112%)}
}
@keyframes rise3 {
  0%,26%{transform:translateY(112%);animation-timing-function:var(--ease-out)}
  38%{transform:translateY(0)}
  91%{transform:translateY(0);animation-timing-function:var(--ease-inout)}
  97%,100%{transform:translateY(112%)}
}
@keyframes draw {
  0%,34%{stroke-dashoffset:1;animation-timing-function:var(--ease-inout)}
  58%{stroke-dashoffset:0}
  91%{stroke-dashoffset:0;animation-timing-function:var(--ease-inout)}
  97%,100%{stroke-dashoffset:0;opacity:0}
}
@keyframes dotIn {
  0%,55%{transform:scale(0);animation-timing-function:var(--ease-out)}
  59%{transform:scale(1)}
  91%{transform:scale(1);animation-timing-function:var(--ease-inout)}
  97%,100%{transform:scale(0)}
}
@keyframes ctaIn {
  0%,60%{opacity:0;animation-timing-function:var(--ease-out)}
  70%{opacity:1}
  91%{opacity:1;animation-timing-function:var(--ease-inout)}
  97%,100%{opacity:0}
}
@keyframes ruleIn {
  0%,66%{transform:scaleX(0);animation-timing-function:var(--ease-out)}
  74%{transform:scaleX(1)}
  91%{transform:scaleX(1);animation-timing-function:var(--ease-inout)}
  97%,100%{transform:scaleX(0)}
}
@keyframes msgFade {
  0%,91%{opacity:1}
  97%,100%{opacity:0}
}
@keyframes drift {
from {transform:translateX(-36px)}to {transform:translateX(44px)}
}
@keyframes drift2 {
from {transform:translate(30px,-10px)}to {transform:translate(-44px,14px)}
}
@keyframes breathe {
from {opacity:.45}to {opacity:.72}
}/* ============ SETTLED STATE — .hold class + reduced motion ============ */
.lgcard .hold .eyebrow, .lgcard .hold .l>span, .lgcard .hold .cta, .lgcard .hold .traj-dot {animation:none;opacity:1;transform:none}.lgcard .hold .traj {animation:none;stroke-dashoffset:0;opacity:1}.lgcard .hold .cta::after {animation:none;transform:scaleX(1)}
@media (prefers-reduced-motion:reduce) {.lgcard .eyebrow, .lgcard .l>span, .lgcard .cta, .lgcard .traj-dot {animation:none;opacity:1;transform:none}.lgcard .traj {animation:none;stroke-dashoffset:0;opacity:1}.lgcard .cta::after {animation:none;transform:scaleX(1)}.lgcard .cloud, .lgcard .wash {animation:none}
}

/* The card was authored as a standalone page element. Inside the work frame it
   fills the frame, which already carries the 16:9 and the overflow clip. */
.ph .lgcard{position:absolute;inset:0;width:100%;height:100%;
  aspect-ratio:auto;border-radius:0;box-shadow:none}
/* The whole row is a link, so the card must not eat the click. */
.card .lgcard{pointer-events:none}