/* The people of the exercises at one table, on /oefenen (taaltaal-cast.js). The room holds its height from the start, by its
   ratio; what they say comes in a balloon over it, so clicking someone moves nothing */
taaltaal-cast { display: block; max-width: none; margin: 0 0 34px; }
taaltaal-cast:not(.tts-exercise) { box-sizing: content-box; aspect-ratio: 760 / 262; padding-bottom: 2px; }
taaltaal-cast .tca-frame { border-radius: 14px; border: 1px solid #d9cfbd; background: #fff; box-shadow: 0 4px 16px rgba(60, 45, 20, .26); }
taaltaal-cast .tca-room { border-radius: 13px; }
/* the logo lies over the room, its lights each on a layer of their own: they only fade and drift, slowly and out of step */
taaltaal-cast .tca-stage { position: relative; }
taaltaal-cast .tca-sign { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
taaltaal-cast .tca-light { will-change: opacity, transform; }
taaltaal-cast .tca-wide { animation: tca-drift 11s ease-in-out infinite alternate; }
taaltaal-cast .tca-near { animation: tca-breathe 6s ease-in-out infinite alternate; }
@keyframes tca-drift { from { opacity: .65; transform: translateX(-1%); } to { opacity: 1; transform: translateX(1%); } }
@keyframes tca-breathe { from { opacity: .72; } to { opacity: 1; } }

/* they come up from behind the table once they are all there; hovered or speaking they come up a little more */
taaltaal-cast .tca-rise { visibility: hidden; }
taaltaal-cast.tca-ready .tca-rise { visibility: visible; animation: tca-up .5s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes tca-up { from { transform: translateY(80px); } to { transform: none; } }
taaltaal-cast .tca-lift { transition: transform .2s cubic-bezier(.3, 1.4, .5, 1); }
taaltaal-cast .tca-who.hover .tca-lift { transform: translateY(-5px); }
taaltaal-cast .tca-who.talking .tca-lift { transform: translateY(-9px); }
taaltaal-cast .tca-glow { opacity: 0; transition: opacity .2s ease; }
taaltaal-cast .tca-who.talking .tca-glow { opacity: 1; }
taaltaal-cast .tca-who.talking .tca-nod { animation: tca-nod .9s ease-in-out infinite alternate; }
@keyframes tca-nod { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
/* the mouths: shut until the sound opens them (taaltaal-scene.js) */
taaltaal-cast .mouth-open { display: inline !important; opacity: 0; transform-box: fill-box; transform-origin: 50% 25%; }

/* the name cards, pink for who was clicked last */
taaltaal-cast .tca-card path { fill: #fffdf8; stroke: #d6c8ae; stroke-width: 1; transition: fill .15s ease; }
taaltaal-cast .tca-card text { font: bold 18px Arial, Verdana, sans-serif; fill: #2b3f93; transition: fill .15s ease; }
taaltaal-cast .tca-card.hover path { fill: #fde4f0; }
taaltaal-cast .tca-card.on path { fill: #c70765; stroke: #a00552; }
taaltaal-cast .tca-card.on text { fill: #fff; }
taaltaal-cast .tca-hit { fill: transparent; cursor: pointer; outline: none; }
taaltaal-cast .tca-hit:focus-visible { stroke: #2b3f93; stroke-width: 2.5; stroke-dasharray: 5 4; }

/* until someone is clicked: a little sign on the wall */
taaltaal-cast .tca-hint { position: absolute; top: 6px; left: 50%; margin: 0; padding: 3px 11px 4px; border: 1px solid #d6c8ae; border-radius: 7px; background: #fffdf8; color: #5b4a30;
        font-size: 13.5px; line-height: 1.3; white-space: nowrap; transform: translateX(-50%); box-shadow: 0 1px 3px rgba(60, 45, 20, .3); pointer-events: none; }
taaltaal-cast .tca-stage.clicked .tca-hint { display: none; }

/* what is said: a balloon over the head of who says it, as big as what they say. It lies over everything, so it moves
   nothing, and it may lie over the text above the room for as long as it is there. Bottom and point meet at --y, the
   point at --at; its ground runs from top to bottom, so the point has the color of the bottom wherever it stands. The way
   to the exercise is small, beside the first line: the balloon is for what they say */
taaltaal-cast .tca-say { --w: min(460px, 100% - 16px); position: absolute; z-index: 5; width: var(--w); box-sizing: border-box; bottom: calc(100% - var(--y, 15%) + 8px);
        left: clamp(8px, calc(var(--at, 50%) - var(--w) / 2), calc(100% - var(--w) - 8px)); padding: 9px 14px 11px; border: 1.5px solid #8fa3cf; border-radius: 16px; visibility: hidden;
        background: linear-gradient(#ffffff, #f4f7fd); box-shadow: 0 4px 14px rgba(40, 40, 70, .28); }
taaltaal-cast .tca-tail { position: absolute; z-index: 6; left: var(--at, 50%); bottom: calc(100% - var(--y, 15%)); width: 16px; height: 16px; margin-left: -8px; box-sizing: border-box; visibility: hidden;
        background: #f4f7fd; border: solid #8fa3cf; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; }
taaltaal-cast .tca-stage.said .tca-say, taaltaal-cast .tca-stage.said .tca-tail { visibility: visible; }
taaltaal-cast .tca-line { display: none; }
taaltaal-cast .tca-line.on { display: flow-root; }
taaltaal-cast .tca-line p { margin: 0; font-size: 15.5px; line-height: 1.4; color: #222; }
taaltaal-cast .tca-line small { display: block; margin-top: 2px; font-size: 13px; color: #6a6f85; }
taaltaal-cast .tca-go { float: right; margin: 0 0 -3px 12px; padding: 1px 10px 2px; border-radius: 11px; background: #e9edf8; border: 1px solid #cdd6ec;
        font-size: 13px; line-height: 1.3; color: #2b3f93; text-decoration: none; white-space: nowrap; }
taaltaal-cast .tca-go:hover { background: #e3e8f6; color: #c70765; }
@media (max-width: 600px) {
    taaltaal-cast .tca-say { padding: 8px 12px 10px; }
    taaltaal-cast .tca-card text { font-size: 20px; }
    taaltaal-cast .tca-hint { top: 3px; padding: 1px 8px 2px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    taaltaal-cast.tca-ready .tca-rise, taaltaal-cast .tca-who.talking .tca-nod, taaltaal-cast .tca-light { animation: none; }
    taaltaal-cast .tca-lift, taaltaal-cast .tca-glow { transition: none; }
}

/* a click on the logo: two of them call out the name, each with a small balloon above the head */
taaltaal-cast .tca-logo-hit { fill: transparent; cursor: pointer; outline: none; }
taaltaal-cast .tca-logo-hit:focus-visible { stroke: #2b3f93; stroke-width: 2; }
taaltaal-cast .tca-shout { position: absolute; z-index: 5; left: var(--at); bottom: calc(100% - var(--y) + 4px); padding: 3px 11px 4px; border: 1.5px solid #8fa3cf; border-radius: 12px; background: #fff;
                           box-shadow: 0 3px 10px rgba(43, 63, 147, .25); color: #c70765; font: bold 15px/18px Arial, Verdana, sans-serif; white-space: nowrap; pointer-events: none;
                           transform: translateX(-50%) rotate(-3deg); animation: tca-shout .22s ease-out; }
@keyframes tca-shout { from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.8) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { taaltaal-cast .tca-shout { animation: none; } }