:root {
  --ground:      #FBF6F2;
  --surface-2:   #F5E9E0;
  --line:        #E8D8CB;
}

.tstage { position: relative; border-radius: 14px; overflow: hidden; background: #cfc9c3;
  aspect-ratio: 16 / 9; box-shadow: 0 20px 60px -32px rgba(40,26,16,.55); }
.tstage picture, .tstage img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }

.tstage .t-before img { filter: grayscale(1) contrast(.52) brightness(1.22) blur(1.2px); }
.tstage .t-before::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #b9b2aa 0%, #a8a19a 100%); mix-blend-mode: multiply;
  opacity: .55; }

.tstage .t-after { clip-path: inset(0 100% 0 0); animation: t-wipe 9s cubic-bezier(.6,0,.25,1) infinite; }
@keyframes t-wipe {
  0%, 8%    { clip-path: inset(0 100% 0 0); }
  46%, 88%  { clip-path: inset(0 0 0 0); }
  100%      { clip-path: inset(0 100% 0 0); }
}

.tstage .t-edge { position: absolute; top: 0; bottom: 0; width: 3px; z-index: 4;
  background: linear-gradient(180deg, #F16925, #FCCD38); box-shadow: 0 0 22px 5px rgba(241,105,37,.5);
  animation: t-edge 9s cubic-bezier(.6,0,.25,1) infinite; }
@keyframes t-edge {
  0%, 8%   { left: 0; opacity: 0; }
  9%       { opacity: 1; }
  46%      { left: 100%; opacity: 1; }
  50%,100% { left: 100%; opacity: 0; }
}

.t-detail { position: absolute; z-index: 5; width: 27%; max-width: 190px; aspect-ratio: 1;
  border-radius: 50%; overflow: hidden; border: 3px solid #FBF6F2;
  box-shadow: 0 14px 34px -12px rgba(40,26,16,.6); opacity: 0; }
.t-detail img { position: absolute; width: 320%; height: 320%; max-width: none; object-fit: cover; }
.t-detail.d1 { left: 5%;  bottom: 7%; animation: t-pop 9s ease-in-out infinite; }
.t-detail.d2 { right: 5%; bottom: 20%; width: 21%; animation: t-pop 9s ease-in-out infinite .7s; }
.t-detail.d1 img { top: -110%; left: -95%; }
.t-detail.d2 img { top: -60%;  left: -170%; }
@keyframes t-pop {
  0%, 48%   { opacity: 0; transform: scale(.82) translateY(14px); }
  58%, 86%  { opacity: 1; transform: scale(1) translateY(0); }
  94%, 100% { opacity: 0; transform: scale(.9) translateY(8px); }
}
.t-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 1.6rem 1.2rem .9rem;
  background: linear-gradient(180deg, transparent, rgba(26,18,12,.82));
  color: #fff; font-family: var(--font-ui); font-size: .82rem; letter-spacing: .02em; }
.t-cap b { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .tstage .t-after { clip-path: inset(0 0 0 0); animation: none; }
  .tstage .t-edge  { display: none; }
  .t-detail { opacity: 1; animation: none; transform: none; }
}

.ct { display: grid; gap: 2.2rem; align-items: center; }
@media (min-width: 54rem) { .ct { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.ct-stage { position: relative; width: 100%; aspect-ratio: 1; perspective: 1000px; }
.ct-card { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: 18px; box-shadow: 0 10px 30px rgba(40,26,16,.28);
  transition: transform .8s cubic-bezier(.4,2,.3,1), opacity .8s cubic-bezier(.4,2,.3,1);
  opacity: 0; z-index: 1; pointer-events: none; }
.ct-card[data-pos="active"] { opacity: 1; z-index: 3; pointer-events: auto;
  transform: translateX(0) translateY(0) scale(1) rotateY(0deg); }
.ct-card[data-pos="left"]   { opacity: 1; z-index: 2; pointer-events: auto;
  transform: translateX(-22%) translateY(-9%) scale(.85) rotateY(15deg); }
.ct-card[data-pos="right"]  { opacity: 1; z-index: 2; pointer-events: auto;
  transform: translateX(22%) translateY(-9%) scale(.85) rotateY(-15deg); }

.ct-body { display: flex; flex-direction: column; justify-content: space-between; min-height: 15rem; }
.ct-who { font-family: var(--font-ui); font-weight: 800; font-size: 1.5rem; line-height: 1.15;
  letter-spacing: -.015em; margin: 0; }
.ct-role { font-family: var(--font-ui); font-size: .9rem; color: var(--ink-soft); margin: .2rem 0 1.4rem; }
.ct-quote { font-size: 1.12rem; line-height: 1.62; margin: 0; }
.ct-quote span { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(5px);
  animation: ct-word .22s ease-in-out forwards; }
@keyframes ct-word { to { opacity: 1; filter: blur(0); transform: none; } }

.ct-arrows { display: flex; gap: 1.1rem; padding-top: 2rem; }
.ct-arrows button { width: 2.7rem; height: 2.7rem; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; background: var(--accent);
  color: #fff; transition: background-color .3s, transform .15s; }
.ct-arrows button:hover { background: #F16925; }
.ct-arrows button:active { transform: scale(.94); }
.ct-arrows button:focus-visible { outline: 3px solid #F16925; outline-offset: 3px; }
.ct-arrows svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  .ct-card { transition: none; }
  .ct-quote span { animation: none; opacity: 1; filter: none; transform: none; }
}