/* Takoma "Firing Order": the liked red runs on with no seam, the page is a gasket, it finishes as the real pack on the card. */
.tko7-wrap { background: var(--ground, #E4E8EC); }
.tko7 {
  position: relative; display: block; width: 100%;
  height: var(--tko7-h, 200vh);
  background: #FF030D;
  overflow: clip; isolation: isolate;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant, 6.25vw)), 0 100%);
}
.tko7-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the print wall: shows through the fired holes and moves with the page until the red sheet starts to go */
.tko7-wall {
  position: absolute; left: 0; right: 0; top: 0; height: 100%; background-color: #FAFAF7; opacity: 0;
  background-image: url("../assets/v5/takoma7/card_tile.webp");
  background-size: var(--tile-w, 288px) var(--tile-h, 175px);
  background-position: var(--wall-x, 0px) var(--wall-y, 0px);
}
/* the card: a finished object with four edges and its own shadow on the red. JS moves it, registered with the gasket */
.tko7-card {
  position: absolute; left: var(--card-l, 5vw); top: 0; width: var(--cw, 90vw); height: var(--ch, 50vw);
  border-radius: var(--cr, 16px);
  background-color: #FAFAF7;
  background-image: url("../assets/v5/takoma7/card_tile.webp");
  background-size: var(--tile-w, 288px) var(--tile-h, 175px);
  background-position: var(--card-x, 0px) var(--card-y, 0px);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 0 0 1px rgba(120, 0, 6, .28), 0 16px 26px -10px rgba(96, 0, 4, .55), 0 42px 60px -26px rgba(84, 0, 4, .5);
  opacity: 0; will-change: translate;
}
.tko7.is-live .tko7-wall { opacity: 1; }
.tko7.is-card .tko7-wall { opacity: 0; }
.tko7.is-live.is-card .tko7-card, .tko7.is-still .tko7-card { opacity: 1; }

/* the render surface: sticky inside a box whose bottom is where the pack starts to scroll natively with the page */
.tko7-surface { position: absolute; left: 0; right: 0; top: -100vh; top: -100lvh; height: calc(var(--stick, 180vh) + 100vh); height: calc(var(--stick, 180vh) + 100lvh); pointer-events: none; z-index: 1; }   /* starts a window early: the layer is already held when the section appears, and the section's clip shows only its own part */
.tko7-fix { position: sticky; top: 0; width: 100%; height: 100vh; height: 100lvh; }   /* the card, film, label and gasket live in one window-held layer: they move as one, and the browser never scrolls the layer against the script's placement */
.tko7-cv { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; }
.tko7.is-still .tko7-surface { top: 0; height: 100%; }
.tko7.is-still .tko7-cv { display: none; }
.tko7.is-still .tko7-fix { position: static; height: auto; }

.tko7-gimg, .tko7-shadow-still { display: none; position: absolute; left: var(--g-l, 0); top: var(--g-t, 0); width: var(--pw, 80vw); height: var(--ph, 40vw); }
.tko7.is-still .tko7-gimg { display: block; z-index: 1; }
.tko7.is-still .tko7-shadow-still { display: block; z-index: 1; opacity: .8; transform: translate(.1vw, .3vw); }

/* the shrink film, framing the card exactly, with its own edge in the plate; both layers are screened */
.tko7-film { position: absolute; z-index: 2; left: var(--card-l, 5vw); top: 0; width: var(--cw, 90vw); height: var(--ch, 50vw); opacity: 0; mix-blend-mode: screen; border-radius: var(--cr, 16px); overflow: hidden; will-change: translate; pointer-events: none; }
.tko7-film picture, .tko7-film img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tko7-glint { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s linear; }
.tko7.has-glint .tko7-glint { opacity: .4; filter: contrast(1.9) brightness(.72); }

.tko7-filmedge { position: absolute; z-index: 2; left: var(--card-l, 5vw); top: 0; width: var(--cw, 90vw); height: var(--ch, 50vw); display: block; opacity: 0; will-change: translate; pointer-events: none; }
.tko7-filmedge img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tko7.is-film .tko7-filmedge, .tko7.is-still .tko7-filmedge { opacity: 1; }

/* one sweep of light as the film goes on. The clip stays still; only the inner layer travels */
.tko7-snapclip { position: absolute; z-index: 2; left: var(--card-l, 5vw); top: 0; width: var(--cw, 90vw); height: var(--ch, 50vw); overflow: hidden; border-radius: var(--cr, 16px); mix-blend-mode: screen; pointer-events: none; }
.tko7-snap { position: absolute; left: -30%; top: 0; width: 160%; height: 100%; opacity: 0;
  background: linear-gradient(112deg, rgba(255,255,255,0) 34%, rgba(255,255,255,.9) 49%, rgba(255,255,255,.9) 51%, rgba(255,255,255,0) 66%);
  transform: translateX(-40%);
}

/* the real label and the gold sticker press on. Paper has an edge: a lit top, a bevel, a contact shadow */
.tko7-label, .tko7-sticker { position: absolute; z-index: 3; left: var(--card-l, 5vw); top: 0; display: block; opacity: 0; will-change: translate; pointer-events: none; }
.tko7-label { width: var(--lab-w, 20vw); border-radius: 2px;
  box-shadow: 0 -.5px 0 rgba(255,255,255,.95), .5px .5px 0 #cdc9bf, 1.5px 1.5px 0 #b9b5aa, 2px 3px 5px rgba(30, 14, 8, .5), 3px 8px 14px -4px rgba(30, 14, 8, .42); }
.tko7-sticker { width: var(--stk-w, 10vw); filter: drop-shadow(.5px .8px .6px rgba(20, 12, 6, .7)) drop-shadow(1px 2px 2px rgba(20, 12, 6, .3)); }

.tko7-film, .tko7-filmedge, .tko7-label, .tko7-sticker { transition: opacity .12s linear; }
.tko7.is-film .tko7-film { opacity: var(--film-o, 1); }
.tko7.is-film .tko7-label, .tko7.is-film .tko7-sticker { opacity: 1; }
.tko7.is-film:not(.no-trans) .tko7-film { animation: tko7-film .46s cubic-bezier(.2, .9, .2, 1); }
.tko7.is-film:not(.no-trans) .tko7-snap { animation: tko7-snap .56s cubic-bezier(.3, .7, .2, 1); }
.tko7.is-film:not(.no-trans) .tko7-label { animation: tko7-press .32s cubic-bezier(.3, 1.4, .4, 1) .12s backwards; }
.tko7.is-film:not(.no-trans) .tko7-sticker { animation: tko7-press .3s cubic-bezier(.3, 1.4, .4, 1) .26s backwards; }
@keyframes tko7-film { 0% { opacity: 0; } 32% { opacity: 1; } 100% { opacity: var(--film-o, 1); } }
@keyframes tko7-snap { 0% { opacity: 0; transform: translateX(-40%); } 18% { opacity: 1; } 100% { opacity: 0; transform: translateX(40%); } }
/* keyframes run over the JS-set position: they animate only opacity and a scale on the individual elements through the `scale` property */
@keyframes tko7-press { 0% { opacity: 0; scale: 1.2; } 55% { opacity: 1; } 100% { opacity: 1; scale: 1; } }
.tko7.is-still .tko7-film { opacity: var(--film-o, 1); animation: none !important; }
.tko7.is-still .tko7-label, .tko7.is-still .tko7-sticker { opacity: 1; animation: none !important; }

/* the green-and-red rule on the shared slope, under the card */
.tko7-rule {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--slant, 6.25vw) + 20px); z-index: 3; pointer-events: none;
  --t: 11px; --k: 4px;
}
.tko7-rule::before { content: ""; position: absolute; inset: 0;
  background: #fff;
  clip-path: polygon(0 calc(100% - var(--t) - var(--k)), 100% 0, 100% var(--k), 0 100%);
}
.tko7-rule::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #00A008 0 60%, #FF030D 60% 100%);
  clip-path: polygon(0 calc(100% - var(--t)), 100% var(--k), 100% calc(var(--k) + var(--t)), 0 100%);
}
@media (max-width: 760px) {
  .tko7-rule { --t: 7px; --k: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .tko7-film, .tko7-snap, .tko7-label, .tko7-sticker { animation: none !important; transition: none !important; }
}