[data-motion^="tal-"] {
  --tal-pine: #0b2420;
  --tal-graphite: #162126;
  --tal-lichen: #b6d85b;
  --tal-amber: #efa64c;
  --tal-birch: #e8e6dc;
  --tal-lake: #588ba6;
  isolation: isolate;
}

.tal-decor {
  position: absolute;
  z-index: 1;
  width: min(280px, calc(100% - 24px));
  height: 150px;
  overflow: clip;
  contain: layout paint;
  isolation: isolate;
  pointer-events: none;
  box-sizing: border-box;
  color: var(--tal-birch);
  background: rgba(11,36,32,.97);
  border: 1px solid rgba(182,216,91,.42);
  box-shadow: 0 13px 30px rgba(3,15,13,.24);
}

.tal-decor,
.tal-decor * {
  box-sizing: border-box;
  pointer-events: none;
}

[data-motion^="tal-"] > :not(.tal-decor) {
  position: relative;
  z-index: 2;
}

.tal-pinecone-bract-morph { right: 4vw; bottom: 22px; width: 270px; height: 144px; }
.tal-survey-tripod-seat { left: 4vw; bottom: 22px; width: 268px; height: 144px; }
.tal-ground-float { right: 4vw; bottom: 22px; width: 262px; height: 140px; }
.tal-frost-lace-recede { left: 4vw; bottom: 22px; width: 274px; height: 146px; }
.tal-leaf-venation { right: 4vw; bottom: 22px; width: 270px; height: 144px; }
.tal-deck-dendrometer { left: 4vw; bottom: 22px; width: 272px; height: 144px; }
.tal-cloud-shear { right: 4vw; bottom: 22px; width: 270px; height: 140px; }
.tal-rate-shadowcast { left: 4vw; bottom: 22px; width: 272px; height: 144px; }
.tal-field-tag-crimp { right: 4vw; bottom: 22px; width: 268px; height: 142px; }
.tal-faq-stomata { left: 4vw; bottom: 22px; width: 274px; height: 146px; }

.js [data-motion="tal-pinecone-bract-morph"] .tal-decor .decor-child,
.js [data-motion="tal-survey-tripod-seat"] .tal-decor .decor-child,
.js [data-motion="tal-ground-float"] .tal-decor .decor-child,
.js [data-motion="tal-frost-lace-recede"] .tal-decor .decor-child,
.js [data-motion="tal-leaf-venation"] .tal-decor .decor-child,
.js [data-motion="tal-deck-dendrometer"] .tal-decor .decor-child,
.js [data-motion="tal-cloud-shear"] .tal-decor .decor-child,
.js [data-motion="tal-rate-shadowcast"] .tal-decor .decor-child,
.js [data-motion="tal-field-tag-crimp"] .tal-decor .decor-child,
.js [data-motion="tal-faq-stomata"] .tal-decor .decor-child,
.js [data-motion^="tal-"] .tal-decor * {
  animation-play-state: paused;
}

.js [data-motion="tal-pinecone-bract-morph"].is-motion-active .tal-decor .decor-child,
.js [data-motion="tal-survey-tripod-seat"].is-motion-active .tal-decor .decor-child,
.js [data-motion="tal-ground-float"].is-motion-active .tal-decor .decor-child,
.js [data-motion="tal-frost-lace-recede"].is-motion-active .tal-decor .decor-child,
.js [data-motion="tal-leaf-venation"].is-motion-active .tal-decor .decor-child,
.js [data-motion="tal-deck-dendrometer"].is-motion-active .tal-decor .decor-child,
.js [data-motion="tal-cloud-shear"].is-motion-active .tal-decor .decor-child,
.js [data-motion="tal-rate-shadowcast"].is-motion-active .tal-decor .decor-child,
.js [data-motion="tal-field-tag-crimp"].is-motion-active .tal-decor .decor-child,
.js [data-motion="tal-faq-stomata"].is-motion-active .tal-decor .decor-child,
.js [data-motion^="tal-"].is-motion-active .tal-decor * {
  animation-play-state: running;
}

/* Scene 1: nine rigid bracts change only their local silhouettes. */
.tal-pinecone-bract-morph {
  background:
    radial-gradient(circle at 50% 49%, rgba(239,166,76,.14), transparent 37%),
    var(--tal-pine);
}
.tal-pinecone-bract-morph .tal-pinecone-core {
  position: absolute;
  z-index: 5;
  top: 24%;
  left: 39%;
  width: 22%;
  height: 55%;
  background: var(--tal-amber);
  border: 2px solid var(--tal-birch);
  border-radius: 46% 54% 42% 58% / 58% 44% 56% 42%;
}
.tal-pinecone-bract-morph .tal-pinecone-bract {
  position: absolute;
  z-index: 7;
  width: 25%;
  height: 25%;
  background: linear-gradient(145deg, var(--tal-lichen), #789b34);
  border: 1px solid var(--tal-birch);
  -webkit-mask-image: linear-gradient(#000,#000);
  mask-image: linear-gradient(#000,#000);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.tal-pinecone-bract-morph .bract-a { top: 10%; left: 38%; clip-path: polygon(50% 0,92% 30%,78% 100%,22% 100%,8% 30%); animation: tal-bract-a-crown-morph .72s steps(7,end) .08s both paused; }
.tal-pinecone-bract-morph .bract-b { top: 22%; left: 16%; clip-path: polygon(4% 35%,58% 0,100% 26%,81% 88%,24% 100%); animation: tal-bract-b-left-morph .78s steps(7,end) .16s both paused; }
.tal-pinecone-bract-morph .bract-c { top: 22%; right: 16%; clip-path: polygon(0 26%,42% 0,96% 35%,76% 100%,19% 88%); animation: tal-bract-c-right-morph .84s steps(8,end) .24s both paused; }
.tal-pinecone-bract-morph .bract-d { top: 39%; left: 8%; clip-path: polygon(0 42%,48% 3%,100% 20%,83% 77%,25% 100%); animation: tal-bract-d-flank-morph .9s steps(8,end) .32s both paused; }
.tal-pinecone-bract-morph .bract-e { top: 39%; right: 8%; clip-path: polygon(0 20%,52% 3%,100% 42%,75% 100%,17% 77%); animation: tal-bract-e-flank-morph .96s steps(9,end) .4s both paused; }
.tal-pinecone-bract-morph .bract-f { bottom: 19%; left: 17%; clip-path: polygon(7% 24%,57% 0,100% 43%,72% 100%,18% 81%); animation: tal-bract-f-lobe-morph .82s steps(7,end) .48s both paused; }
.tal-pinecone-bract-morph .bract-g { right: 17%; bottom: 19%; clip-path: polygon(0 43%,43% 0,93% 24%,82% 81%,28% 100%); animation: tal-bract-g-lobe-morph .88s steps(8,end) .56s both paused; }
.tal-pinecone-bract-morph .bract-h { bottom: 8%; left: 29%; clip-path: polygon(12% 17%,67% 0,100% 49%,65% 100%,6% 72%); animation: tal-bract-h-base-morph .94s steps(9,end) .64s both paused; }
.tal-pinecone-bract-morph .bract-i { right: 29%; bottom: 8%; clip-path: polygon(0 49%,33% 0,88% 17%,94% 72%,35% 100%); animation: tal-bract-i-base-morph 1s steps(10,end) .72s both paused; }

@keyframes tal-bract-a-crown-morph {
  0% { clip-path: polygon(50% 18%,63% 42%,58% 81%,42% 81%,37% 42%); mask-size: 48% 72%; mask-position: 50% 58%; }
  48% { clip-path: polygon(50% 5%,82% 36%,68% 94%,32% 94%,18% 36%); mask-size: 78% 91%; mask-position: 50% 50%; }
  100% { clip-path: polygon(50% 0,92% 30%,78% 100%,22% 100%,8% 30%); mask-size: 100% 100%; mask-position: 0 0; }
}
@keyframes tal-bract-b-left-morph {
  0% { clip-path: polygon(34% 44%,59% 29%,77% 41%,67% 69%,42% 75%); mask-size: 44% 68%; mask-position: 54% 54%; }
  55% { clip-path: polygon(12% 38%,58% 10%,91% 31%,76% 80%,29% 91%); mask-size: 83% 88%; mask-position: 43% 48%; }
  100% { clip-path: polygon(4% 35%,58% 0,100% 26%,81% 88%,24% 100%); mask-size: 100% 100%; mask-position: 0 0; }
}
@keyframes tal-bract-c-right-morph {
  0% { clip-path: polygon(23% 41%,41% 29%,66% 44%,58% 75%,33% 69%); mask-size: 46% 62%; mask-position: 47% 55%; }
  51% { clip-path: polygon(9% 31%,42% 10%,88% 38%,71% 91%,24% 80%); mask-size: 81% 91%; mask-position: 58% 47%; }
  100% { clip-path: polygon(0 26%,42% 0,96% 35%,76% 100%,19% 88%); mask-size: 100% 100%; mask-position: 0 0; }
}
@keyframes tal-bract-d-flank-morph {
  0% { clip-path: polygon(25% 48%,49% 30%,73% 39%,64% 67%,39% 77%); mask-size: 42% 59%; mask-position: 51% 57%; }
  46% { clip-path: polygon(8% 44%,48% 12%,91% 27%,76% 70%,31% 91%); mask-size: 86% 84%; mask-position: 39% 52%; }
  100% { clip-path: polygon(0 42%,48% 3%,100% 20%,83% 77%,25% 100%); mask-size: 100% 100%; mask-position: 0 0; }
}
@keyframes tal-bract-e-flank-morph {
  0% { clip-path: polygon(27% 39%,51% 30%,75% 48%,61% 77%,36% 67%); mask-size: 43% 61%; mask-position: 49% 56%; }
  58% { clip-path: polygon(9% 27%,52% 12%,92% 44%,69% 91%,24% 70%); mask-size: 82% 87%; mask-position: 61% 51%; }
  100% { clip-path: polygon(0 20%,52% 3%,100% 42%,75% 100%,17% 77%); mask-size: 100% 100%; mask-position: 0 0; }
}
@keyframes tal-bract-f-lobe-morph {
  0% { clip-path: polygon(29% 35%,55% 23%,76% 45%,62% 72%,38% 63%); mask-size: 47% 54%; mask-position: 52% 49%; }
  53% { clip-path: polygon(13% 28%,57% 8%,91% 46%,68% 89%,24% 73%); mask-size: 84% 82%; mask-position: 42% 58%; }
  100% { clip-path: polygon(7% 24%,57% 0,100% 43%,72% 100%,18% 81%); mask-size: 100% 100%; mask-position: 0 0; }
}
@keyframes tal-bract-g-lobe-morph {
  0% { clip-path: polygon(24% 45%,45% 23%,71% 35%,62% 63%,38% 72%); mask-size: 45% 57%; mask-position: 48% 51%; }
  49% { clip-path: polygon(9% 46%,43% 8%,87% 28%,76% 73%,32% 89%); mask-size: 85% 83%; mask-position: 58% 57%; }
  100% { clip-path: polygon(0 43%,43% 0,93% 24%,82% 81%,28% 100%); mask-size: 100% 100%; mask-position: 0 0; }
}
@keyframes tal-bract-h-base-morph {
  0% { clip-path: polygon(33% 34%,58% 26%,73% 49%,58% 72%,32% 60%); mask-size: 41% 53%; mask-position: 48% 53%; }
  57% { clip-path: polygon(18% 22%,65% 8%,91% 49%,61% 91%,15% 69%); mask-size: 81% 86%; mask-position: 43% 43%; }
  100% { clip-path: polygon(12% 17%,67% 0,100% 49%,65% 100%,6% 72%); mask-size: 100% 100%; mask-position: 0 0; }
}
@keyframes tal-bract-i-base-morph {
  0% { clip-path: polygon(27% 49%,42% 26%,67% 34%,68% 60%,42% 72%); mask-size: 42% 55%; mask-position: 52% 52%; }
  52% { clip-path: polygon(9% 49%,35% 8%,82% 22%,85% 69%,39% 91%); mask-size: 83% 85%; mask-position: 57% 44%; }
  100% { clip-path: polygon(0 49%,33% 0,88% 17%,94% 72%,35% 100%); mask-size: 100% 100%; mask-position: 0 0; }
}

/* Scene 2: three legs and seats resolve around a static plumb. */
.tal-survey-tripod-seat {
  --tal-leg-spread: 18px;
  --tal-seat-travel: 42px;
  background:
    linear-gradient(145deg, rgba(88,139,166,.22), transparent 58%),
    var(--tal-graphite);
}
.tal-survey-tripod-seat .tal-tripod-head {
  position: absolute;
  z-index: 10;
  top: 11%;
  left: 42%;
  width: 16%;
  height: 17%;
  background: var(--tal-amber);
  border: 2px solid var(--tal-birch);
  clip-path: polygon(16% 0,84% 0,100% 72%,68% 100%,32% 100%,0 72%);
}
.tal-survey-tripod-seat .tal-tripod-leg {
  position: absolute;
  z-index: 7;
  top: 25%;
  left: 47.5%;
  width: 5%;
  height: 54%;
  background: var(--tal-lake);
  border: 1px solid var(--tal-birch);
  transform-origin: center top;
}
.tal-survey-tripod-seat .leg-a { translate: calc(var(--tal-leg-spread) * -1) 0; rotate: 22deg; animation: tal-tripod-leg-a-spread .84s cubic-bezier(.2,.64,.27,1.08) .12s both paused; }
.tal-survey-tripod-seat .leg-b { rotate: 1deg; animation: tal-tripod-leg-b-drop .9s cubic-bezier(.2,.64,.27,1.08) .2s both paused; }
.tal-survey-tripod-seat .leg-c { translate: var(--tal-leg-spread) 0; rotate: -22deg; animation: tal-tripod-leg-c-spread .96s cubic-bezier(.2,.64,.27,1.08) .28s both paused; }
.tal-survey-tripod-seat .tal-tripod-seat {
  position: absolute;
  z-index: 9;
  bottom: 10%;
  width: 13%;
  height: 9%;
  background: var(--tal-lichen);
  border: 2px solid var(--tal-birch);
  clip-path: polygon(7% 0,93% 0,100% 75%,82% 100%,18% 100%,0 75%);
}
.tal-survey-tripod-seat .seat-a { left: 12%; animation: tal-tripod-seat-a-land .62s cubic-bezier(.2,.67,.28,1.14) .52s both paused; }
.tal-survey-tripod-seat .seat-b { left: 43.5%; animation: tal-tripod-seat-b-land .7s cubic-bezier(.2,.67,.28,1.14) .62s both paused; }
.tal-survey-tripod-seat .seat-c { right: 12%; animation: tal-tripod-seat-c-land .78s cubic-bezier(.2,.67,.28,1.14) .72s both paused; }
.tal-survey-tripod-seat .tal-tripod-thread {
  position: absolute;
  z-index: 11;
  top: 27%;
  left: 49.5%;
  width: 1%;
  height: 38%;
  background: var(--tal-birch);
}
.tal-survey-tripod-seat .tal-tripod-plumb {
  position: absolute;
  z-index: 12;
  top: 61%;
  left: 46%;
  width: 8%;
  height: 15%;
  background: var(--tal-amber);
  border: 1px solid var(--tal-birch);
  clip-path: polygon(50% 0,100% 58%,50% 100%,0 58%);
}

@keyframes tal-tripod-leg-a-spread {
  0% { translate: 0 -3px; rotate: 2deg; scale: .76 .82; opacity: .12; }
  68% { translate: calc(var(--tal-leg-spread) * -1.08) 1px; rotate: 25deg; scale: 1.04 1.05; opacity: 1; }
  100% { translate: calc(var(--tal-leg-spread) * -1) 0; rotate: 22deg; scale: 1; opacity: 1; }
}
@keyframes tal-tripod-leg-b-drop {
  0% { translate: 0 -11px; rotate: -3deg; scale: .48 .7; filter: brightness(.48); }
  72% { translate: 0 2px; rotate: 2deg; scale: 1.1 1.04; filter: brightness(1.16); }
  100% { translate: none; rotate: 1deg; scale: 1; filter: none; }
}
@keyframes tal-tripod-leg-c-spread {
  0% { translate: 0 -2px; rotate: -1deg; scale: .68 .86; opacity: .14; filter: saturate(.42); }
  71% { translate: calc(var(--tal-leg-spread) * 1.09) 1px; rotate: -26deg; scale: .95 1.06; opacity: 1; filter: saturate(1.16); }
  100% { translate: var(--tal-leg-spread) 0; rotate: -22deg; scale: 1; opacity: 1; filter: none; }
}
@keyframes tal-tripod-seat-a-land {
  0% { translate: var(--tal-seat-travel) -6px; scale: .46 1.14; opacity: .1; }
  72% { translate: -2px 1px; scale: 1.12 .9; opacity: 1; }
  100% { translate: none; scale: 1; opacity: 1; }
}
@keyframes tal-tripod-seat-b-land {
  0% { translate: 0 -13px; scale: 1.18 .38; filter: contrast(.46); }
  69% { translate: 0 2px; scale: .92 1.14; filter: contrast(1.18); }
  100% { translate: none; scale: 1; filter: none; }
}
@keyframes tal-tripod-seat-c-land {
  0% { translate: calc(var(--tal-seat-travel) * -1) -5px; scale: .58 .78; opacity: .12; filter: brightness(.5); }
  74% { translate: 2px 1px; scale: 1.1 1.08; opacity: 1; filter: brightness(1.18); }
  100% { translate: none; scale: 1; opacity: 1; filter: none; }
}

/* Scene 3: one oval marker settles between fixed ground levels. */
.tal-ground-float {
  --tal-ground-fall: 21px;
  background:
    linear-gradient(140deg, rgba(182,216,91,.14), transparent 60%),
    var(--tal-graphite);
}
.tal-ground-float .tal-ground-shell {
  position: absolute;
  z-index: 3;
  inset: 8%;
  background:
    linear-gradient(168deg, transparent 0 38%, rgba(88,139,166,.42) 39% 58%, rgba(239,166,76,.24) 59% 100%);
  border: 2px solid var(--tal-birch);
  clip-path: polygon(0 12%,100% 0,94% 88%,7% 100%);
}
.tal-ground-float .tal-ground-level {
  position: absolute;
  z-index: 6;
  left: 16%;
  width: 68%;
  height: 3%;
  background: var(--tal-lichen);
}
.tal-ground-float .level-a { top: 38%; clip-path: polygon(0 30%,100% 0,100% 70%,0 100%); }
.tal-ground-float .level-b { top: 66%; clip-path: polygon(0 0,100% 35%,100% 100%,0 65%); }
.tal-ground-float .tal-ground-marker {
  position: absolute;
  z-index: 10;
  top: 29%;
  left: 42%;
  width: 16%;
  height: 18%;
  background: var(--tal-amber);
  border: 2px solid var(--tal-birch);
  border-radius: 50%;
  translate: 0 var(--tal-ground-fall);
  animation: tal-ground-marker-settle 1.04s cubic-bezier(.2,.57,.24,1.04) .22s both paused;
}
.tal-ground-float .tal-ground-grit {
  position: absolute;
  z-index: 7;
  width: 8%;
  height: 7%;
  background: var(--tal-lake);
  border: 1px solid var(--tal-birch);
  clip-path: polygon(12% 20%,78% 0,100% 68%,35% 100%);
}
.tal-ground-float .grit-a { left: 20%; bottom: 18%; }
.tal-ground-float .grit-b { right: 22%; top: 24%; }
.tal-ground-float .grit-c { right: 18%; bottom: 16%; }

@keyframes tal-ground-marker-settle {
  0% { translate: 0 0; scale: .78 1.12; opacity: .14; }
  43% { translate: 0 calc(var(--tal-ground-fall) * .7); scale: 1.08 .9; opacity: 1; }
  73% { translate: 0 calc(var(--tal-ground-fall) * 1.08); scale: .94 1.05; }
  100% { translate: 0 var(--tal-ground-fall); scale: 1; opacity: 1; }
}

/* Scene 4: six frost branches recede toward fixed local nodes. */
.tal-frost-lace-recede {
  background:
    linear-gradient(135deg, rgba(88,139,166,.24), transparent 62%),
    var(--tal-pine);
}
.tal-frost-lace-recede .tal-frost-plate {
  position: absolute;
  z-index: 3;
  inset: 7%;
  background: #20333a;
  border: 2px solid var(--tal-birch);
  clip-path: polygon(0 5%,95% 0,100% 94%,6% 100%);
}
.tal-frost-lace-recede .tal-frost-node {
  position: absolute;
  z-index: 10;
  width: 7%;
  aspect-ratio: 1;
  background: var(--tal-lichen);
  border: 1px solid var(--tal-birch);
  clip-path: polygon(50% 0,87% 26%,100% 66%,62% 100%,18% 86%,0 44%);
}
.tal-frost-lace-recede .node-a { left: 13%; top: 19%; }
.tal-frost-lace-recede .node-b { left: 35%; top: 13%; }
.tal-frost-lace-recede .node-c { right: 27%; top: 22%; }
.tal-frost-lace-recede .node-d { left: 20%; bottom: 18%; }
.tal-frost-lace-recede .node-e { left: 49%; bottom: 12%; }
.tal-frost-lace-recede .node-f { right: 11%; bottom: 20%; }
.tal-frost-lace-recede .tal-frost-branch {
  position: absolute;
  z-index: 7;
  width: 31%;
  height: 6%;
  background: repeating-linear-gradient(90deg, var(--tal-birch) 0 3px, transparent 3px 6px);
  clip-path: polygon(0 38%,72% 38%,82% 0,88% 0,82% 38%,100% 38%,100% 62%,80% 62%,70% 100%,64% 100%,72% 62%,0 62%);
}
.tal-frost-lace-recede .branch-a { left: 14%; top: 22%; rotate: 15deg; transform-origin: left center; scale: .31 1; animation: tal-frost-branch-a-recede .72s cubic-bezier(.2,.64,.27,1.08) .18s both paused; }
.tal-frost-lace-recede .branch-b { left: 36%; top: 18%; rotate: -18deg; transform-origin: left center; scale: .27 1; animation: tal-frost-branch-b-recede .78s cubic-bezier(.2,.64,.27,1.08) .26s both paused; }
.tal-frost-lace-recede .branch-c { right: 29%; top: 26%; rotate: 24deg; transform-origin: right center; scale: .34 1; animation: tal-frost-branch-c-recede .84s cubic-bezier(.2,.64,.27,1.08) .34s both paused; }
.tal-frost-lace-recede .branch-d { left: 21%; bottom: 21%; rotate: -22deg; transform-origin: left center; scale: .29 1; animation: tal-frost-branch-d-recede .9s cubic-bezier(.2,.64,.27,1.08) .42s both paused; }
.tal-frost-lace-recede .branch-e { left: 50%; bottom: 15%; rotate: 17deg; transform-origin: left center; scale: .25 1; animation: tal-frost-branch-e-recede .96s cubic-bezier(.2,.64,.27,1.08) .5s both paused; }
.tal-frost-lace-recede .branch-f { right: 12%; bottom: 23%; rotate: -27deg; transform-origin: right center; scale: .32 1; animation: tal-frost-branch-f-recede 1.02s cubic-bezier(.2,.64,.27,1.08) .58s both paused; }

@keyframes tal-frost-branch-a-recede {
  0% { scale: 1 1.18; clip-path: inset(0); filter: brightness(1.3); }
  100% { scale: .31 1; clip-path: polygon(0 38%,72% 38%,82% 0,88% 0,82% 38%,100% 38%,100% 62%,80% 62%,70% 100%,64% 100%,72% 62%,0 62%); filter: none; }
}
@keyframes tal-frost-branch-b-recede {
  0% { scale: .94 .76; clip-path: polygon(0 0,100% 38%,100% 62%,0 100%); filter: contrast(1.28); }
  100% { scale: .27 1; clip-path: polygon(0 38%,72% 38%,82% 0,88% 0,82% 38%,100% 38%,100% 62%,80% 62%,70% 100%,64% 100%,72% 62%,0 62%); filter: none; }
}
@keyframes tal-frost-branch-c-recede {
  0% { scale: 1.08 .84; clip-path: inset(8% 0); opacity: .92; }
  100% { scale: .34 1; clip-path: polygon(0 38%,72% 38%,82% 0,88% 0,82% 38%,100% 38%,100% 62%,80% 62%,70% 100%,64% 100%,72% 62%,0 62%); opacity: 1; }
}
@keyframes tal-frost-branch-d-recede {
  0% { scale: .88 1.22; clip-path: polygon(0 27%,100% 42%,100% 58%,0 73%); filter: saturate(.45); }
  100% { scale: .29 1; clip-path: polygon(0 38%,72% 38%,82% 0,88% 0,82% 38%,100% 38%,100% 62%,80% 62%,70% 100%,64% 100%,72% 62%,0 62%); filter: none; }
}
@keyframes tal-frost-branch-e-recede {
  0% { scale: 1.12 .7; clip-path: inset(0 3%); opacity: .88; filter: brightness(1.24); }
  100% { scale: .25 1; clip-path: polygon(0 38%,72% 38%,82% 0,88% 0,82% 38%,100% 38%,100% 62%,80% 62%,70% 100%,64% 100%,72% 62%,0 62%); opacity: 1; filter: none; }
}
@keyframes tal-frost-branch-f-recede {
  0% { scale: .97 1.16; clip-path: polygon(0 44%,64% 44%,76% 9%,83% 9%,77% 44%,100% 44%,100% 58%,75% 58%,64% 91%,57% 91%,66% 58%,0 58%); filter: contrast(1.22); }
  100% { scale: .32 1; clip-path: polygon(0 38%,72% 38%,82% 0,88% 0,82% 38%,100% 38%,100% 62%,80% 62%,70% 100%,64% 100%,72% 62%,0 62%); filter: none; }
}

/* Scene 5: four isolated vein fields grow inside static leaf silhouettes. */
.tal-leaf-venation {
  background:
    linear-gradient(145deg, rgba(182,216,91,.16), transparent 61%),
    var(--tal-birch);
}
.tal-leaf-venation .tal-leaf-silhouette,
.tal-leaf-venation .tal-leaf-veins {
  position: absolute;
  width: 29%;
  height: 34%;
}
.tal-leaf-venation .tal-leaf-silhouette {
  z-index: 4;
  background: #345b46;
  border: 2px solid var(--tal-pine);
}
.tal-leaf-venation .leaf-a { top: 10%; left: 10%; clip-path: polygon(0 58%,18% 14%,58% 0,100% 20%,82% 73%,38% 100%); }
.tal-leaf-venation .leaf-b { top: 11%; right: 10%; clip-path: polygon(4% 23%,45% 0,94% 17%,100% 61%,62% 100%,17% 80%); }
.tal-leaf-venation .leaf-c { bottom: 10%; left: 11%; clip-path: polygon(0 37%,31% 0,80% 7%,100% 46%,72% 100%,20% 86%); }
.tal-leaf-venation .leaf-d { right: 11%; bottom: 9%; clip-path: polygon(6% 18%,53% 0,100% 34%,88% 80%,43% 100%,0 67%); }
.tal-leaf-venation .tal-leaf-axis {
  position: absolute;
  z-index: 7;
  width: 3%;
  height: 28%;
  background: var(--tal-amber);
  border: 1px solid var(--tal-pine);
  clip-path: polygon(35% 0,65% 0,100% 100%,0 100%);
}
.tal-leaf-venation .axis-a { top: 13%; left: 24%; transform: skewX(-17deg); }
.tal-leaf-venation .axis-b { top: 14%; right: 24%; transform: skewX(14deg); }
.tal-leaf-venation .axis-c { bottom: 13%; left: 25%; transform: skewX(19deg); }
.tal-leaf-venation .axis-d { right: 25%; bottom: 12%; transform: skewX(-12deg); }
.tal-leaf-venation .tal-leaf-veins {
  z-index: 8;
  background:
    repeating-linear-gradient(24deg, transparent 0 6px, rgba(232,230,220,.92) 6px 8px, transparent 8px 13px),
    repeating-linear-gradient(156deg, transparent 0 7px, rgba(182,216,91,.94) 7px 9px, transparent 9px 14px);
  -webkit-mask-image: linear-gradient(#000,#000);
  mask-image: linear-gradient(#000,#000);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.tal-leaf-venation .veins-a { top: 10%; left: 10%; clip-path: polygon(0 58%,18% 14%,58% 0,100% 20%,82% 73%,38% 100%); animation: tal-leaf-veins-a-grow .86s steps(9,end) .18s both paused; }
.tal-leaf-venation .veins-b { top: 11%; right: 10%; clip-path: polygon(4% 23%,45% 0,94% 17%,100% 61%,62% 100%,17% 80%); animation: tal-leaf-veins-b-grow .94s steps(10,end) .3s both paused; }
.tal-leaf-venation .veins-c { bottom: 10%; left: 11%; clip-path: polygon(0 37%,31% 0,80% 7%,100% 46%,72% 100%,20% 86%); animation: tal-leaf-veins-c-grow 1.02s steps(11,end) .42s both paused; }
.tal-leaf-venation .veins-d { right: 11%; bottom: 9%; clip-path: polygon(6% 18%,53% 0,100% 34%,88% 80%,43% 100%,0 67%); animation: tal-leaf-veins-d-grow 1.1s steps(12,end) .54s both paused; }

@keyframes tal-leaf-veins-a-grow {
  0% { mask-size: 7% 12%; mask-position: 52% 54%; background-position: -17px 8px, 13px -6px; opacity: .16; }
  56% { mask-size: 62% 74%; mask-position: 48% 51%; background-position: 4px 1px, -3px 2px; opacity: .82; }
  100% { mask-size: 100% 100%; mask-position: 0 0; background-position: 0 0, 0 0; opacity: 1; }
}
@keyframes tal-leaf-veins-b-grow {
  0% { mask-size: 13% 8%; mask-position: 43% 47%; background-position: 19px -9px, -12px 7px; filter: contrast(.5); }
  48% { mask-size: 71% 59%; mask-position: 50% 43%; background-position: -5px 2px, 4px -1px; filter: contrast(.86); }
  100% { mask-size: 100% 100%; mask-position: 0 0; background-position: 0 0, 0 0; filter: none; }
}
@keyframes tal-leaf-veins-c-grow {
  0% { mask-size: 9% 17%; mask-position: 58% 61%; background-position: -11px -8px, 16px 9px; opacity: .12; filter: saturate(.45); }
  61% { mask-size: 66% 81%; mask-position: 46% 53%; background-position: 3px -2px, -4px 1px; opacity: .9; filter: saturate(.9); }
  100% { mask-size: 100% 100%; mask-position: 0 0; background-position: 0 0, 0 0; opacity: 1; filter: none; }
}
@keyframes tal-leaf-veins-d-grow {
  0% { mask-size: 18% 6%; mask-position: 47% 39%; background-position: 14px 11px, -18px -7px; filter: brightness(.48); opacity: .18; }
  53% { mask-size: 77% 64%; mask-position: 52% 49%; background-position: -2px 4px, 3px -2px; filter: brightness(.88); opacity: .86; }
  100% { mask-size: 100% 100%; mask-position: 0 0; background-position: 0 0, 0 0; filter: none; opacity: 1; }
}

/* Scene 6: four offset wood belts contract toward independent ticks. */
.tal-deck-dendrometer {
  background:
    linear-gradient(135deg, rgba(239,166,76,.16), transparent 62%),
    var(--tal-graphite);
}
.tal-deck-dendrometer .tal-dendro-base {
  position: absolute;
  z-index: 3;
  inset: 7%;
  background:
    repeating-linear-gradient(12deg, rgba(239,166,76,.09) 0 5px, transparent 5px 12px),
    #24372f;
  border: 2px solid var(--tal-birch);
  clip-path: polygon(0 8%,94% 0,100% 91%,8% 100%);
}
.tal-deck-dendrometer .tal-dendro-belt {
  position: absolute;
  z-index: 6;
  border: 3px solid var(--tal-amber);
  transform-origin: center;
}
.tal-deck-dendrometer .belt-a { top: 16%; left: 11%; width: 73%; height: 65%; clip-path: polygon(0 14%,77% 0,100% 24%,89% 100%,18% 91%); scale: .88 .84; animation: tal-dendro-belt-a-contract .82s cubic-bezier(.2,.64,.27,1.08) .16s both paused; }
.tal-deck-dendrometer .belt-b { top: 23%; left: 20%; width: 63%; height: 55%; clip-path: polygon(7% 0,100% 11%,88% 92%,31% 100%,0 69%); scale: .81 .87; animation: tal-dendro-belt-b-contract .9s cubic-bezier(.2,.64,.27,1.08) .28s both paused; }
.tal-deck-dendrometer .belt-c { top: 30%; left: 29%; width: 49%; height: 43%; clip-path: polygon(0 22%,69% 0,100% 39%,76% 100%,11% 82%); scale: .74 .79; animation: tal-dendro-belt-c-contract .98s cubic-bezier(.2,.64,.27,1.08) .4s both paused; }
.tal-deck-dendrometer .belt-d { top: 38%; left: 38%; width: 34%; height: 30%; clip-path: polygon(13% 0,100% 19%,82% 100%,0 74%); scale: .67 .73; animation: tal-dendro-belt-d-contract 1.06s cubic-bezier(.2,.64,.27,1.08) .52s both paused; }
.tal-deck-dendrometer .tal-dendro-tick {
  position: absolute;
  z-index: 10;
  width: 3%;
  height: 17%;
  background: var(--tal-lichen);
  border: 1px solid var(--tal-birch);
}
.tal-deck-dendrometer .tick-a { top: 13%; right: 17%; transform: skewX(-12deg); }
.tal-deck-dendrometer .tick-b { top: 35%; right: 12%; transform: skewX(17deg); }
.tal-deck-dendrometer .tick-c { left: 23%; bottom: 12%; transform: skewX(-19deg); }
.tal-deck-dendrometer .tick-d { right: 34%; bottom: 9%; transform: skewX(9deg); }

@keyframes tal-dendro-belt-a-contract {
  0% { scale: 1.08 1.04; clip-path: polygon(0 8%,84% 0,100% 31%,92% 100%,12% 93%); filter: brightness(1.2); }
  100% { scale: .88 .84; clip-path: polygon(0 14%,77% 0,100% 24%,89% 100%,18% 91%); filter: none; }
}
@keyframes tal-dendro-belt-b-contract {
  0% { scale: 1.14 .96; clip-path: polygon(2% 0,100% 6%,94% 100%,24% 94%,0 62%); opacity: .82; }
  100% { scale: .81 .87; clip-path: polygon(7% 0,100% 11%,88% 92%,31% 100%,0 69%); opacity: 1; }
}
@keyframes tal-dendro-belt-c-contract {
  0% { scale: .98 1.17; clip-path: polygon(0 15%,75% 0,100% 47%,68% 100%,8% 75%); filter: contrast(1.18); }
  100% { scale: .74 .79; clip-path: polygon(0 22%,69% 0,100% 39%,76% 100%,11% 82%); filter: none; }
}
@keyframes tal-dendro-belt-d-contract {
  0% { scale: 1.2 1.08; clip-path: polygon(4% 0,100% 11%,91% 100%,0 82%); opacity: .78; filter: saturate(1.22); }
  100% { scale: .67 .73; clip-path: polygon(13% 0,100% 19%,82% 100%,0 74%); opacity: 1; filter: none; }
}

/* Scene 7: three cloud bodies shear only inside fixed sky regions. */
.tal-cloud-shear {
  background:
    linear-gradient(155deg, rgba(232,230,220,.16), transparent 58%),
    #355d70;
}
.tal-cloud-shear .tal-cloud-sky-frame {
  position: absolute;
  z-index: 3;
  inset: 7%;
  border: 2px solid var(--tal-birch);
  background: linear-gradient(180deg, rgba(88,139,166,.2), rgba(11,36,32,.28));
  clip-path: polygon(0 0,100% 7%,94% 100%,6% 93%);
}
.tal-cloud-shear .tal-cloud-body {
  position: absolute;
  z-index: 7;
  height: 24%;
  background: var(--tal-birch);
  border: 1px solid #fff;
  transform-origin: center;
}
.tal-cloud-shear .cloud-a { top: 16%; left: 9%; width: 35%; clip-path: polygon(0 69%,9% 32%,31% 34%,43% 0,67% 19%,79% 3%,100% 46%,93% 100%,13% 94%); transform: skewX(-9deg); scale: .84 1; animation: tal-cloud-a-shear .88s cubic-bezier(.2,.64,.27,1.08) .18s both paused; }
.tal-cloud-shear .cloud-b { top: 39%; left: 33%; width: 39%; clip-path: polygon(0 51%,16% 13%,36% 27%,53% 0,71% 30%,89% 19%,100% 69%,80% 100%,13% 91%); transform: skewX(12deg); scale: .72 1; animation: tal-cloud-b-shear .98s cubic-bezier(.2,.64,.27,1.08) .32s both paused; }
.tal-cloud-shear .cloud-c { right: 8%; bottom: 12%; width: 31%; clip-path: polygon(0 62%,18% 20%,39% 31%,57% 0,76% 28%,100% 39%,91% 100%,11% 91%); transform: skewX(-15deg); scale: .91 1; animation: tal-cloud-c-shear 1.08s cubic-bezier(.2,.64,.27,1.08) .46s both paused; }
.tal-cloud-shear .tal-cloud-datum {
  position: absolute;
  z-index: 10;
  bottom: 8%;
  width: 24%;
  height: 10%;
  background: var(--tal-amber);
  border: 1px solid var(--tal-birch);
  clip-path: polygon(0 0,100% 0,91% 100%,9% 100%);
}
.tal-cloud-shear .datum-a { left: 8%; }
.tal-cloud-shear .datum-b { right: 8%; }

@keyframes tal-cloud-a-shear {
  0% { transform: skewX(16deg); scale: .43 1; clip-path: polygon(0 72%,20% 42%,37% 48%,52% 19%,72% 31%,88% 20%,100% 58%,89% 91%,15% 88%); filter: brightness(.68); }
  72% { transform: skewX(-12deg); scale: .9 1; clip-path: polygon(0 69%,9% 32%,31% 34%,43% 0,67% 19%,79% 3%,100% 46%,93% 100%,13% 94%); filter: brightness(1.08); }
  100% { transform: skewX(-9deg); scale: .84 1; clip-path: polygon(0 69%,9% 32%,31% 34%,43% 0,67% 19%,79% 3%,100% 46%,93% 100%,13% 94%); filter: none; }
}
@keyframes tal-cloud-b-shear {
  0% { transform: skewX(-18deg); scale: 1.12 1; clip-path: polygon(0 58%,18% 24%,39% 36%,52% 12%,67% 41%,85% 29%,100% 72%,76% 93%,16% 87%); opacity: .45; }
  68% { transform: skewX(15deg); scale: .67 1; clip-path: polygon(0 51%,16% 13%,36% 27%,53% 0,71% 30%,89% 19%,100% 69%,80% 100%,13% 91%); opacity: 1; }
  100% { transform: skewX(12deg); scale: .72 1; clip-path: polygon(0 51%,16% 13%,36% 27%,53% 0,71% 30%,89% 19%,100% 69%,80% 100%,13% 91%); opacity: 1; }
}
@keyframes tal-cloud-c-shear {
  0% { transform: skewX(9deg); scale: .56 1; clip-path: polygon(0 65%,21% 32%,42% 43%,58% 17%,79% 39%,100% 49%,87% 92%,13% 86%); filter: saturate(.52); }
  74% { transform: skewX(-18deg); scale: .96 1; clip-path: polygon(0 62%,18% 20%,39% 31%,57% 0,76% 28%,100% 39%,91% 100%,11% 91%); filter: saturate(1.08); }
  100% { transform: skewX(-15deg); scale: .91 1; clip-path: polygon(0 62%,18% 20%,39% 31%,57% 0,76% 28%,100% 39%,91% 100%,11% 91%); filter: none; }
}

/* Scene 8: only five cast shadows change beside fixed stakes. */
.tal-rate-shadowcast {
  background:
    linear-gradient(150deg, rgba(239,166,76,.2), transparent 62%),
    #553f24;
}
.tal-rate-shadowcast .tal-shadow-stake {
  position: absolute;
  z-index: 9;
  bottom: 19%;
  width: 4%;
  background: var(--tal-birch);
  border: 1px solid var(--tal-pine);
  clip-path: polygon(18% 0,82% 0,100% 82%,50% 100%,0 82%);
}
.tal-rate-shadowcast .stake-a { left: 11%; height: 35%; }
.tal-rate-shadowcast .stake-b { left: 29%; height: 47%; }
.tal-rate-shadowcast .stake-c { left: 48%; height: 31%; }
.tal-rate-shadowcast .stake-d { left: 66%; height: 43%; }
.tal-rate-shadowcast .stake-e { right: 10%; height: 37%; }
.tal-rate-shadowcast .tal-cast-shadow {
  position: absolute;
  z-index: 6;
  bottom: 18%;
  height: 6%;
  background: rgba(11,36,32,.72);
  clip-path: polygon(0 24%,100% 0,91% 100%,0 76%);
}
.tal-rate-shadowcast .shadow-a { left: 13%; width: 25%; transform-origin: left center; rotate: 13deg; scale: .72 1; animation: tal-shadow-a-cast .78s cubic-bezier(.2,.64,.27,1.08) .2s both paused; }
.tal-rate-shadowcast .shadow-b { left: 31%; width: 29%; transform-origin: left center; rotate: -9deg; scale: .58 1; animation: tal-shadow-b-cast .86s cubic-bezier(.2,.64,.27,1.08) .3s both paused; }
.tal-rate-shadowcast .shadow-c { left: 50%; width: 22%; transform-origin: left center; rotate: 18deg; scale: .83 1; animation: tal-shadow-c-cast .94s cubic-bezier(.2,.64,.27,1.08) .4s both paused; }
.tal-rate-shadowcast .shadow-d { right: 31%; width: 27%; transform-origin: right center; rotate: -15deg; scale: .64 1; animation: tal-shadow-d-cast 1.02s cubic-bezier(.2,.64,.27,1.08) .5s both paused; }
.tal-rate-shadowcast .shadow-e { right: 12%; width: 24%; transform-origin: right center; rotate: 8deg; scale: .76 1; animation: tal-shadow-e-cast 1.1s cubic-bezier(.2,.64,.27,1.08) .6s both paused; }
.tal-rate-shadowcast .tal-tariff-plate {
  position: absolute;
  z-index: 11;
  top: 8%;
  left: 27%;
  width: 46%;
  height: 13%;
  background: var(--tal-lichen);
  border: 2px solid var(--tal-birch);
  clip-path: polygon(4% 0,100% 0,96% 100%,0 100%);
}

@keyframes tal-shadow-a-cast {
  0% { rotate: -6deg; scale: .18 1.28; opacity: .14; filter: blur(1px); }
  68% { rotate: 16deg; scale: .78 .9; opacity: .82; filter: none; }
  100% { rotate: 13deg; scale: .72 1; opacity: 1; filter: none; }
}
@keyframes tal-shadow-b-cast {
  0% { rotate: 21deg; scale: 1.04 .62; opacity: .22; }
  72% { rotate: -12deg; scale: .52 1.08; opacity: .86; }
  100% { rotate: -9deg; scale: .58 1; opacity: 1; }
}
@keyframes tal-shadow-c-cast {
  0% { rotate: -19deg; scale: .31 1.22; filter: contrast(.48); }
  69% { rotate: 21deg; scale: .89 .92; filter: contrast(1.14); }
  100% { rotate: 18deg; scale: .83 1; filter: none; }
}
@keyframes tal-shadow-d-cast {
  0% { rotate: 12deg; scale: .95 .54; opacity: .2; filter: blur(.7px); }
  74% { rotate: -18deg; scale: .59 1.11; opacity: .88; filter: none; }
  100% { rotate: -15deg; scale: .64 1; opacity: 1; filter: none; }
}
@keyframes tal-shadow-e-cast {
  0% { rotate: -14deg; scale: .27 1.16; opacity: .16; filter: saturate(.42); }
  71% { rotate: 11deg; scale: .82 .94; opacity: .9; filter: saturate(.9); }
  100% { rotate: 8deg; scale: .76 1; opacity: 1; filter: none; }
}

/* Scene 9: four sleeve faces crimp between two fixed field tags. */
.tal-field-tag-crimp {
  background:
    linear-gradient(140deg, rgba(88,139,166,.2), transparent 61%),
    var(--tal-graphite);
}
.tal-field-tag-crimp .tal-tag-rail {
  position: absolute;
  z-index: 3;
  top: 46%;
  left: 7%;
  width: 86%;
  height: 10%;
  background: var(--tal-lake);
  border: 2px solid var(--tal-birch);
  clip-path: polygon(0 16%,100% 0,100% 84%,0 100%);
}
.tal-field-tag-crimp .tal-field-tag {
  position: absolute;
  z-index: 6;
  top: 27%;
  width: 24%;
  height: 47%;
  background: #c8c6bb;
  border: 2px solid var(--tal-birch);
}
.tal-field-tag-crimp .tag-a { left: 7%; clip-path: polygon(0 0,82% 0,100% 50%,82% 100%,0 100%); }
.tal-field-tag-crimp .tag-b { right: 7%; clip-path: polygon(18% 0,100% 0,100% 100%,18% 100%,0 50%); }
.tal-field-tag-crimp .tal-crimp-sleeve {
  position: absolute;
  z-index: 8;
  top: 23%;
  left: 38%;
  width: 24%;
  height: 55%;
  background: var(--tal-lake);
  border: 2px solid var(--tal-birch);
  clip-path: polygon(17% 0,83% 0,100% 21%,100% 79%,83% 100%,17% 100%,0 79%,0 21%);
  scale: .86 1;
  animation: tal-crimp-sleeve-seat .86s cubic-bezier(.2,.64,.27,1.08) .18s both paused;
}
.tal-field-tag-crimp .tal-crimp-face {
  position: absolute;
  z-index: 10;
  background: var(--tal-amber);
  border: 1px solid var(--tal-birch);
  transform-origin: center;
}
.tal-field-tag-crimp .face-a { top: 27%; left: 41%; width: 18%; height: 12%; clip-path: polygon(0 0,100% 0,82% 100%,18% 100%); animation: tal-crimp-face-a-fold .62s cubic-bezier(.2,.67,.28,1.14) .4s both paused; }
.tal-field-tag-crimp .face-b { top: 40%; right: 38%; width: 8%; height: 24%; clip-path: polygon(0 13%,100% 0,100% 100%,0 87%); animation: tal-crimp-face-b-fold .68s cubic-bezier(.2,.67,.28,1.14) .5s both paused; }
.tal-field-tag-crimp .face-c { bottom: 26%; left: 41%; width: 18%; height: 12%; clip-path: polygon(18% 0,82% 0,100% 100%,0 100%); animation: tal-crimp-face-c-fold .74s cubic-bezier(.2,.67,.28,1.14) .6s both paused; }
.tal-field-tag-crimp .face-d { top: 40%; left: 38%; width: 8%; height: 24%; clip-path: polygon(0 0,100% 13%,100% 87%,0 100%); animation: tal-crimp-face-d-fold .8s cubic-bezier(.2,.67,.28,1.14) .7s both paused; }
.tal-field-tag-crimp .tal-crimp-notch {
  position: absolute;
  z-index: 12;
  top: 45%;
  width: 8%;
  height: 12%;
  background: var(--tal-lichen);
  border: 1px solid var(--tal-birch);
}
.tal-field-tag-crimp .notch-a { left: 29%; clip-path: polygon(0 0,100% 50%,0 100%); animation: tal-crimp-notch-a-open .5s steps(5,end) .86s both paused; }
.tal-field-tag-crimp .notch-b { right: 29%; clip-path: polygon(100% 0,0 50%,100% 100%); animation: tal-crimp-notch-b-open .58s steps(6,end) .94s both paused; }

@keyframes tal-crimp-sleeve-seat {
  0% { scale: 1.18 .84; clip-path: polygon(6% 0,94% 0,100% 8%,100% 92%,94% 100%,6% 100%,0 92%,0 8%); filter: brightness(.56); }
  67% { scale: .81 1.05; clip-path: polygon(19% 0,81% 0,100% 23%,100% 77%,81% 100%,19% 100%,0 77%,0 23%); filter: brightness(1.12); }
  100% { scale: .86 1; clip-path: polygon(17% 0,83% 0,100% 21%,100% 79%,83% 100%,17% 100%,0 79%,0 21%); filter: none; }
}
@keyframes tal-crimp-face-a-fold {
  0% { scale: 1.24 .18; clip-path: inset(0 0 82%); opacity: .12; }
  100% { scale: 1; clip-path: polygon(0 0,100% 0,82% 100%,18% 100%); opacity: 1; }
}
@keyframes tal-crimp-face-b-fold {
  0% { scale: .21 1.18; clip-path: inset(0 79% 0 0); filter: contrast(.48); }
  100% { scale: 1; clip-path: polygon(0 13%,100% 0,100% 100%,0 87%); filter: none; }
}
@keyframes tal-crimp-face-c-fold {
  0% { scale: .68 .24; clip-path: inset(81% 0 0); opacity: .14; filter: saturate(.42); }
  100% { scale: 1; clip-path: polygon(18% 0,82% 0,100% 100%,0 100%); opacity: 1; filter: none; }
}
@keyframes tal-crimp-face-d-fold {
  0% { scale: .27 .72; clip-path: inset(0 0 0 78%); opacity: .1; }
  100% { scale: 1; clip-path: polygon(0 0,100% 13%,100% 87%,0 100%); opacity: 1; }
}
@keyframes tal-crimp-notch-a-open {
  0% { clip-path: polygon(0 50%,0 50%,0 50%); background-position: -9px 0; opacity: .12; }
  100% { clip-path: polygon(0 0,100% 50%,0 100%); background-position: 0 0; opacity: 1; }
}
@keyframes tal-crimp-notch-b-open {
  0% { clip-path: polygon(100% 50%,100% 50%,100% 50%); background-position: 11px -2px; filter: brightness(.46); }
  100% { clip-path: polygon(100% 0,0 50%,100% 100%); background-position: 0 0; filter: none; }
}

/* Scene 10: six static bases retain six differently shaped pores. */
.tal-faq-stomata {
  background:
    linear-gradient(145deg, rgba(182,216,91,.16), transparent 61%),
    var(--tal-pine);
}
.tal-faq-stomata .tal-stoma-base {
  position: absolute;
  z-index: 3;
  width: 34%;
  height: 22%;
  background: rgba(88,139,166,.3);
  border: 2px solid var(--tal-birch);
  border-radius: 44% 56% 47% 53% / 58% 43% 57% 42%;
}
.tal-faq-stomata .stoma-a { top: 9%; left: 8%; }
.tal-faq-stomata .stoma-b { top: 9%; right: 8%; }
.tal-faq-stomata .stoma-c { top: 39%; left: 8%; }
.tal-faq-stomata .stoma-d { top: 39%; right: 8%; }
.tal-faq-stomata .stoma-e { bottom: 9%; left: 8%; }
.tal-faq-stomata .stoma-f { right: 8%; bottom: 9%; }
.tal-faq-stomata .tal-stoma-guard {
  position: absolute;
  z-index: 7;
  width: 15%;
  height: 17%;
  background: var(--tal-lichen);
  border: 1px solid var(--tal-birch);
  transform-origin: center;
}
.tal-faq-stomata .guard-left.guard-a { top: 11.5%; left: 10%; clip-path: polygon(0 16%,75% 0,100% 28%,79% 50%,100% 72%,75% 100%,0 84%); animation: tal-stoma-a-left-open .58s steps(6,end) .18s both paused; }
.tal-faq-stomata .guard-right.guard-a { top: 11.5%; left: 25%; clip-path: polygon(25% 0,100% 16%,100% 84%,25% 100%,0 72%,21% 50%,0 28%); animation: tal-stoma-a-right-open .62s steps(6,end) .22s both paused; }
.tal-faq-stomata .guard-left.guard-b { top: 11.5%; right: 25%; clip-path: polygon(0 9%,69% 0,100% 34%,73% 51%,100% 67%,69% 100%,0 91%); animation: tal-stoma-b-left-open .66s steps(7,end) .3s both paused; }
.tal-faq-stomata .guard-right.guard-b { top: 11.5%; right: 10%; clip-path: polygon(31% 0,100% 9%,100% 91%,31% 100%,0 67%,27% 51%,0 34%); animation: tal-stoma-b-right-open .7s steps(7,end) .34s both paused; }
.tal-faq-stomata .guard-left.guard-c { top: 41.5%; left: 10%; clip-path: polygon(0 20%,81% 0,100% 37%,76% 50%,100% 63%,81% 100%,0 80%); animation: tal-stoma-c-left-open .74s steps(8,end) .42s both paused; }
.tal-faq-stomata .guard-right.guard-c { top: 41.5%; left: 25%; clip-path: polygon(19% 0,100% 20%,100% 80%,19% 100%,0 63%,24% 50%,0 37%); animation: tal-stoma-c-right-open .78s steps(8,end) .46s both paused; }
.tal-faq-stomata .guard-left.guard-d { top: 41.5%; right: 25%; clip-path: polygon(0 13%,72% 0,100% 23%,70% 49%,100% 77%,72% 100%,0 87%); animation: tal-stoma-d-left-open .82s steps(9,end) .54s both paused; }
.tal-faq-stomata .guard-right.guard-d { top: 41.5%; right: 10%; clip-path: polygon(28% 0,100% 13%,100% 87%,28% 100%,0 77%,30% 49%,0 23%); animation: tal-stoma-d-right-open .86s steps(9,end) .58s both paused; }
.tal-faq-stomata .guard-left.guard-e { bottom: 11.5%; left: 10%; clip-path: polygon(0 6%,84% 0,100% 31%,71% 52%,100% 69%,84% 100%,0 94%); animation: tal-stoma-e-left-open .9s steps(10,end) .66s both paused; }
.tal-faq-stomata .guard-right.guard-e { bottom: 11.5%; left: 25%; clip-path: polygon(16% 0,100% 6%,100% 94%,16% 100%,0 69%,29% 52%,0 31%); animation: tal-stoma-e-right-open .94s steps(10,end) .7s both paused; }
.tal-faq-stomata .guard-left.guard-f { right: 25%; bottom: 11.5%; clip-path: polygon(0 18%,77% 0,100% 40%,68% 50%,100% 60%,77% 100%,0 82%); animation: tal-stoma-f-left-open .98s steps(11,end) .78s both paused; }
.tal-faq-stomata .guard-right.guard-f { right: 10%; bottom: 11.5%; clip-path: polygon(23% 0,100% 18%,100% 82%,23% 100%,0 60%,32% 50%,0 40%); animation: tal-stoma-f-right-open 1.02s steps(11,end) .82s both paused; }

@keyframes tal-stoma-a-left-open {
  0% { clip-path: polygon(0 8%,100% 0,100% 41%,96% 50%,100% 59%,100% 100%,0 92%); scale: 1.08 .8; }
  100% { clip-path: polygon(0 16%,75% 0,100% 28%,79% 50%,100% 72%,75% 100%,0 84%); scale: 1; }
}
@keyframes tal-stoma-a-right-open {
  0% { clip-path: polygon(0 0,100% 8%,100% 92%,0 100%,0 59%,4% 50%,0 41%); scale: .92 1.16; }
  100% { clip-path: polygon(25% 0,100% 16%,100% 84%,25% 100%,0 72%,21% 50%,0 28%); scale: 1; }
}
@keyframes tal-stoma-b-left-open {
  0% { clip-path: polygon(0 0,100% 7%,100% 43%,94% 51%,100% 57%,100% 93%,0 100%); filter: brightness(.48); }
  100% { clip-path: polygon(0 9%,69% 0,100% 34%,73% 51%,100% 67%,69% 100%,0 91%); filter: none; }
}
@keyframes tal-stoma-b-right-open {
  0% { clip-path: polygon(0 7%,100% 0,100% 100%,0 93%,0 57%,6% 51%,0 43%); scale: 1.14 .72; }
  100% { clip-path: polygon(31% 0,100% 9%,100% 91%,31% 100%,0 67%,27% 51%,0 34%); scale: 1; }
}
@keyframes tal-stoma-c-left-open {
  0% { clip-path: inset(4% 0); scale: .83 1.09; opacity: .62; }
  100% { clip-path: polygon(0 20%,81% 0,100% 37%,76% 50%,100% 63%,81% 100%,0 80%); scale: 1; opacity: 1; }
}
@keyframes tal-stoma-c-right-open {
  0% { clip-path: polygon(0 0,100% 12%,100% 88%,0 100%,0 61%,8% 50%,0 39%); scale: 1.17 .86; filter: saturate(.44); }
  100% { clip-path: polygon(19% 0,100% 20%,100% 80%,19% 100%,0 63%,24% 50%,0 37%); scale: 1; filter: none; }
}
@keyframes tal-stoma-d-left-open {
  0% { clip-path: polygon(0 13%,100% 0,100% 44%,92% 49%,100% 56%,100% 87%,0 100%); scale: .74 .94; }
  100% { clip-path: polygon(0 13%,72% 0,100% 23%,70% 49%,100% 77%,72% 100%,0 87%); scale: 1; }
}
@keyframes tal-stoma-d-right-open {
  0% { clip-path: polygon(0 0,100% 13%,100% 100%,0 87%,0 56%,8% 49%,0 44%); filter: contrast(.52); opacity: .68; }
  100% { clip-path: polygon(28% 0,100% 13%,100% 87%,28% 100%,0 77%,30% 49%,0 23%); filter: none; opacity: 1; }
}
@keyframes tal-stoma-e-left-open {
  0% { clip-path: inset(0 0 0 12%); scale: 1.13 .68; filter: brightness(.54); }
  100% { clip-path: polygon(0 6%,84% 0,100% 31%,71% 52%,100% 69%,84% 100%,0 94%); scale: 1; filter: none; }
}
@keyframes tal-stoma-e-right-open {
  0% { clip-path: polygon(0 3%,100% 0,100% 97%,0 100%,0 63%,5% 52%,0 37%); scale: .86 1.15; opacity: .58; }
  100% { clip-path: polygon(16% 0,100% 6%,100% 94%,16% 100%,0 69%,29% 52%,0 31%); scale: 1; opacity: 1; }
}
@keyframes tal-stoma-f-left-open {
  0% { clip-path: polygon(0 0,100% 11%,100% 45%,90% 50%,100% 55%,100% 89%,0 100%); scale: .69 1.12; filter: saturate(.46); }
  100% { clip-path: polygon(0 18%,77% 0,100% 40%,68% 50%,100% 60%,77% 100%,0 82%); scale: 1; filter: none; }
}
@keyframes tal-stoma-f-right-open {
  0% { clip-path: polygon(0 11%,100% 0,100% 100%,0 89%,0 55%,10% 50%,0 45%); scale: 1.16 .79; filter: contrast(.55); }
  100% { clip-path: polygon(23% 0,100% 18%,100% 82%,23% 100%,0 60%,32% 50%,0 40%); scale: 1; filter: none; }
}

html:not(.js) [data-motion^="tal-"] .tal-decor .decor-child {
  animation-delay: -100s !important;
  animation-play-state: paused;
}

@media (max-width: 1080px) {
  .tal-page [data-motion^="tal-"] > .tal-decor {
    width: 238px;
    height: 128px;
    bottom: 20px;
  }
  .tal-page .tal-pinecone-bract-morph,
  .tal-page .tal-ground-float,
  .tal-page .tal-leaf-venation,
  .tal-page .tal-cloud-shear,
  .tal-page .tal-field-tag-crimp { right: 24px; }
  .tal-page .tal-survey-tripod-seat { --tal-leg-spread: 16px; --tal-seat-travel: 35px; left: 24px; }
  .tal-page .tal-ground-float { --tal-ground-fall: 18px; }
  .tal-page .tal-frost-lace-recede,
  .tal-page .tal-deck-dendrometer,
  .tal-page .tal-rate-shadowcast,
  .tal-page .tal-faq-stomata { left: 24px; }
}

@media (max-width: 840px) {
  .tal-page [data-motion^="tal-"] > .tal-decor {
    width: 218px;
    height: 118px;
    bottom: 18px;
  }
  .tal-page .tal-pinecone-bract-morph,
  .tal-page .tal-ground-float,
  .tal-page .tal-leaf-venation,
  .tal-page .tal-cloud-shear,
  .tal-page .tal-field-tag-crimp { right: 20px; }
  .tal-page .tal-survey-tripod-seat { --tal-leg-spread: 14px; --tal-seat-travel: 30px; left: 20px; }
  .tal-page .tal-ground-float { --tal-ground-fall: 17px; }
  .tal-page .tal-frost-lace-recede,
  .tal-page .tal-deck-dendrometer,
  .tal-page .tal-rate-shadowcast,
  .tal-page .tal-faq-stomata { left: 20px; }
}

@media (max-width: 560px) {
  .tal-page [data-motion^="tal-"] > .tal-decor {
    right: auto;
    bottom: 15px;
    left: calc(50% - 96px);
    width: 192px;
    height: 106px;
    box-shadow: 0 7px 16px rgba(3,15,13,.18);
  }
  .tal-page .tal-survey-tripod-seat { --tal-leg-spread: 12px; --tal-seat-travel: 25px; }
  .tal-page .tal-ground-float { --tal-ground-fall: 15px; }
}

@media (max-width: 380px) {
  .tal-page [data-motion^="tal-"] > .tal-decor {
    right: auto;
    bottom: 12px;
    left: calc(50% - 82px);
    width: 164px;
    height: 92px;
    border-width: 1px;
    box-shadow: 0 3px 7px rgba(3,15,13,.16);
  }
  .tal-page .tal-survey-tripod-seat { --tal-leg-spread: 10px; --tal-seat-travel: 20px; }
  .tal-page .tal-ground-float { --tal-ground-fall: 13px; }
  .tal-page .tal-decor .decor-child { border-width: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .tal-page [data-motion^="tal-"] .tal-decor,
  .tal-page [data-motion^="tal-"] .tal-decor *,
  .tal-page [data-motion^="tal-"] .tal-decor::before,
  .tal-page [data-motion^="tal-"] .tal-decor::after,
  .tal-page [data-motion^="tal-"] .tal-decor *::before,
  .tal-page [data-motion^="tal-"] .tal-decor *::after {
    animation: none !important;
    transition: none !important;
  }
  .tal-page [data-motion^="tal-"] .tal-decor::before,
  .tal-page [data-motion^="tal-"] .tal-decor::after,
  .tal-page [data-motion^="tal-"] .tal-decor *::before,
  .tal-page [data-motion^="tal-"] .tal-decor *::after {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .tal-page [data-motion^="tal-"] .tal-decor .decor-child {
    opacity: 1;
    filter: none;
  }
  .tal-page .tal-pinecone-bract {
    mask-size: 100% 100%;
    mask-position: 0 0;
  }
  .tal-page .tal-survey-tripod-seat .leg-a { translate: calc(var(--tal-leg-spread) * -1) 0; rotate: 22deg; scale: 1; }
  .tal-page .tal-survey-tripod-seat .leg-b { translate: none; rotate: 1deg; scale: 1; }
  .tal-page .tal-survey-tripod-seat .leg-c { translate: var(--tal-leg-spread) 0; rotate: -22deg; scale: 1; }
  .tal-page .tal-tripod-seat { translate: none; rotate: none; scale: 1; }
  .tal-page .tal-ground-marker { translate: 0 var(--tal-ground-fall); scale: 1; }
  .tal-page .tal-frost-lace-recede .branch-a { scale: .31 1; }
  .tal-page .tal-frost-lace-recede .branch-b { scale: .27 1; }
  .tal-page .tal-frost-lace-recede .branch-c { scale: .34 1; }
  .tal-page .tal-frost-lace-recede .branch-d { scale: .29 1; }
  .tal-page .tal-frost-lace-recede .branch-e { scale: .25 1; }
  .tal-page .tal-frost-lace-recede .branch-f { scale: .32 1; }
  .tal-page .tal-leaf-veins {
    mask-size: 100% 100%;
    mask-position: 0 0;
    background-position: 0 0, 0 0;
  }
  .tal-page .tal-deck-dendrometer .belt-a { scale: .88 .84; }
  .tal-page .tal-deck-dendrometer .belt-b { scale: .81 .87; }
  .tal-page .tal-deck-dendrometer .belt-c { scale: .74 .79; }
  .tal-page .tal-deck-dendrometer .belt-d { scale: .67 .73; }
  .tal-page .tal-cloud-shear .cloud-a { transform: skewX(-9deg); scale: .84 1; }
  .tal-page .tal-cloud-shear .cloud-b { transform: skewX(12deg); scale: .72 1; }
  .tal-page .tal-cloud-shear .cloud-c { transform: skewX(-15deg); scale: .91 1; }
  .tal-page .tal-rate-shadowcast .shadow-a { rotate: 13deg; scale: .72 1; }
  .tal-page .tal-rate-shadowcast .shadow-b { rotate: -9deg; scale: .58 1; }
  .tal-page .tal-rate-shadowcast .shadow-c { rotate: 18deg; scale: .83 1; }
  .tal-page .tal-rate-shadowcast .shadow-d { rotate: -15deg; scale: .64 1; }
  .tal-page .tal-rate-shadowcast .shadow-e { rotate: 8deg; scale: .76 1; }
  .tal-page .tal-crimp-sleeve { scale: .86 1; }
  .tal-page .tal-crimp-face,
  .tal-page .tal-crimp-notch,
  .tal-page .tal-stoma-guard {
    translate: none;
    rotate: none;
    scale: 1;
  }
}
