/* Homepage intro — the director's cut (js/intro-director.js): four tiles around the cradle logo */
.intro__stage, .intro__count { display: none; }
html:not([data-intro]) .intro { background: #0b0b0b; }
html:not([data-intro]) .intro::after { opacity: 0.06; }
.intro__cradle { transform: scale(0.4); z-index: 5; }
.dc2 {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: grid; grid-template-columns: 1fr 0.35fr 1fr; grid-template-rows: 1fr minmax(110px, 21vh) 1fr;
  column-gap: 22px; row-gap: 0;
  padding: clamp(20px, 4vh, 56px) clamp(20px, 7vw, 140px);
}
/* editorial rhythm: wide tile top-left, and the bottom row mirrors it (wide tile bottom-right) */
.dc2-tile--a { grid-column: 1 / 3; grid-row: 1; }
.dc2-tile--b { grid-column: 3; grid-row: 1; }
.dc2-tile--make { grid-column: 1; grid-row: 3; }
.dc2-tile--final { grid-column: 2 / 4; grid-row: 3; }
.dc2-gap { grid-column: 1 / -1; grid-row: 2; position: relative; }
.dc2-tile {
  position: relative; margin: 0; overflow: hidden; border-radius: 6px; background: #161616;
  filter: none; transition: filter 1.4s ease;   /* all four frames full brightness (Shuvo, Oct 30); was brightness(0.62) saturate(0.85) */
}
.dc2-tile.is-focus { filter: none; }
.dc2-media, .dc2-media > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.dc2-media img, .dc2-media video { object-fit: cover; display: block; }
.dc2-media .is-drift { animation: dc2-drift 9s linear both; }
@keyframes dc2-drift { from { transform: scale(1.01); } to { transform: scale(1.07); } }
.dc2-tile figcaption {
  position: absolute; left: 14px; bottom: 12px;
  font-family: "DM Mono", ui-monospace, Menlo, monospace; font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85); background: rgba(10, 10, 10, 0.5); padding: 4px 8px; border-radius: 2px;
  opacity: 0; transition: opacity 0.8s ease;
}
.dc2-tile.is-focus figcaption { opacity: 1; }
.dc2-tile figcaption:empty { display: none; }
.dc2-count {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 12px; white-space: nowrap;
  font-family: "DM Mono", ui-monospace, Menlo, monospace; font-size: 0.6875rem; letter-spacing: 0.26em; text-transform: uppercase; color: #a9a9a5;
}
.dc2-n { color: var(--color-accent); }
@media (max-width: 760px) {
  .dc2 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 96px 1fr 1fr; column-gap: 0; row-gap: 12px; padding: 16px; }
  .dc2-tile--a { grid-row: 1; grid-column: 1; } .dc2-tile--b { grid-row: 2; grid-column: 1; }
  .dc2-gap { grid-row: 3; } .dc2-tile--make { grid-row: 4; grid-column: 1; } .dc2-tile--final { grid-row: 5; grid-column: 1; }
  .intro__cradle { transform: scale(0.66); }
}
/* the record animation fills its tile edge to edge */
.dc2-media img[src*="artcell"] { background: #b42e2d; transform: scale(1.02); }
.dc2-media img[src$=".svg"]:not([src*="artcell"]):not([src*="identity-motion"]) { object-fit: contain; background: #fff; }   /* white diagrams sit whole on white */
/* flipbooks (Kite Fight, Fanta Heroes): frames swap with a quick soft cut */
.dc2-flip, .dc2-flip img { position: absolute; inset: 0; width: 100%; height: 100%; }
.dc2-flip img { object-fit: cover; opacity: 0; transition: opacity 0.25s ease; }
.dc2-flip img.is-on { opacity: 1; }

/* Identity: the final logo animation (in a frame) and the nine moves, live */
.dc2-media .dc2-frame { border: 0; background: #F2F2F0; pointer-events: none; }
.dc2-moves { position: absolute; inset: 0; display: grid; place-items: center; background: #F2F2F0; color: #F15A23; }
.dc2-moves .brand__fx { display: grid; width: 62%; height: auto; overflow: visible; }   /* full logo, nothing clipped */
.dc2-moves .brand__word { width: 100%; height: auto; overflow: visible; }
.dc2-moves .brand__l, .dc2-moves .brand__p { fill: #F15A23; }
.dc2-moves.fx-coral .brand__p { fill: #1c1c1c; }
.dc2-moves .brand__swash { stroke: #F15A23; }
.dc2-moves .brand__fullname { color: #F15A23; }
.dc2-move-name { position: absolute; right: 14px; bottom: 12px; font: 400 0.625rem/1 "DM Mono", ui-monospace, monospace; letter-spacing: 0.2em; text-transform: uppercase; color: #1c1c1c; background: rgba(255,255,255,.7); padding: 4px 8px; }
/* "Full name" fades in place inside the tile (same as the Identity page) */
.dc2-moves .brand__fullname { justify-self: center; font-size: clamp(0.875rem, 0.5rem + 1.3vw, 1.6rem); letter-spacing: 0.24em; opacity: 0; transform: translateY(60%); transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.3s ease; }
.dc2-moves.fx-name .brand__fullname { opacity: 1; transform: none; }
.dc2-moves .brand__word--live { transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.3s ease; }
.dc2-moves.fx-name .brand__word--live { opacity: 0; transform: scale(0.96); }
.dc2-moves .brand__l { animation: none; }   /* only the nine moves here, no idle wave */
.dc2-tile:has(.dc2-moves), .dc2-tile:has(.dc2-frame) { filter: none; }   /* live animation tiles stay bright */