/* <taaltaal-flag> (taaltaal-flag.js): Bo and Mia with the flag of the language, on the paper itself: no frame and no
   background, only the blue pen of the "A+" at the top of the clipboard behind them. Its height is there before the element
   is, so the cards under it do not jump */
taaltaal-flag { position: relative; display: block; margin: 4px 0 10px; }
taaltaal-flag .tfl-stage, taaltaal-flag:not(:has(.tfl-stage)) { aspect-ratio: 760 / 162; }
taaltaal-flag .tfl-stage { position: relative; overflow: hidden; }
taaltaal-flag .tfl-canvas { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 760 / 162; transform: translateX(-50%); }

/* the drawing */
taaltaal-flag .tfl-pen { position: absolute; inset: 0; width: 100%; height: 100%; }
taaltaal-flag .tfl-pen g, taaltaal-flag .tfl-sails g { stroke: #7fa6cc; stroke-width: 1.5; }
taaltaal-flag .tfl-sails { position: absolute; will-change: transform; animation: tfl-mill 26s linear infinite; }
@keyframes tfl-mill { to { transform: rotate(360deg); } }
taaltaal-flag .tfl-hint { position: absolute; left: 0; right: 0; top: 8%; margin: 0; text-align: center; color: #5f8cb8;
                          font: italic 14px/1.2 "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; }

/* the cloth, one piece with its soft edge (clip-path, from taaltaal-flag.js): it sways a little from their hands, and
   folds of light move over it: a band two folds wide, as wide as the cloth, three times over, moved by exactly one band
   for an endless loop */
taaltaal-flag .tfl-flag { position: absolute; z-index: 1; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 1px 1.5px rgba(20, 30, 60, .45)); }
taaltaal-flag .tfl-cloth { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--flag); background-size: 100% 100%; transform-origin: 50% 0; will-change: transform;
                           animation: tfl-sway 3.2s ease-in-out infinite alternate; }
taaltaal-flag .tfl-cloth i { position: absolute; top: 0; bottom: 0; left: 0; width: 300%; will-change: transform; animation: tfl-folds 4.6s linear infinite;
                             background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(11, 28, 68, .17) 25%, rgba(255, 255, 255, .16) 50%, rgba(11, 28, 68, .17) 75%, rgba(255, 255, 255, .16)) 0 0 / 33.3333% 100% repeat-x; }
@keyframes tfl-sway { from { transform: skewX(-.7deg) scaleY(.985); } to { transform: skewX(.7deg) scaleY(1.015); } }
@keyframes tfl-folds { to { transform: translate3d(-33.3333%, 0, 0); } }
taaltaal-flag .tfl-flag:disabled, taaltaal-flag .tfl-who:disabled { cursor: default; }
taaltaal-flag .tfl-flag:focus-visible { outline: 2px solid #2b3f93; outline-offset: 3px; }

/* Bo and Mia, in front of the cloth so their hands hold it. Only the drawing can be clicked, not the air around it. Bo's arm
   lower than when he waves: his hand as high as hers */
taaltaal-flag .tfl-who { position: absolute; z-index: 2; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; pointer-events: none; }
taaltaal-flag .tfl-who svg { display: block; width: 100%; height: 100%; overflow: visible; }
taaltaal-flag .tfl-who svg > :not(defs, style) { pointer-events: auto; }
taaltaal-flag .bo-arm-wave { transform: rotate(25deg); }
taaltaal-flag .mouth-open { display: inline !important; opacity: 0; transform-box: fill-box; transform-origin: 50% 25%; }
taaltaal-flag .tfl-who.talking { animation: tfl-glad .45s ease-out; }
@keyframes tfl-glad { 30% { transform: translateY(-3%); } }
taaltaal-flag .tfl-who:focus-visible { outline: 2px solid #2b3f93; outline-offset: -6px; border-radius: 20px; }

/* what they say, above their heads; for a moment over what is above the drawing, as at the table on /oefenen */
taaltaal-flag .tfl-say { position: absolute; z-index: 5; box-sizing: border-box; width: max-content; max-width: min(360px, 100% - 8px); padding: 7px 13px 8px; border: 1.5px solid #8fa3cf;
                         border-radius: 14px; background: linear-gradient(#ffffff, #f4f7fd); box-shadow: 0 4px 14px rgba(43, 63, 147, .22); color: #2b3f93; line-height: 1.35; }
taaltaal-flag .tfl-say p { margin: 0; }
taaltaal-flag .tfl-say small { display: block; color: #6b7aa3; font-size: .85em; }
taaltaal-flag .tfl-tail { position: absolute; z-index: 6; width: 13px; height: 13px; margin: 0 0 -5px -6.5px; box-sizing: border-box; background: #f6f8fd;
                          border-right: 1.5px solid #8fa3cf; border-bottom: 1.5px solid #8fa3cf; transform: rotate(45deg); }

/* a phone: the middle of the drawing, Bo, Mia and the flag as large */
@media (max-width: 600px) {
    taaltaal-flag .tfl-stage, taaltaal-flag:not(:has(.tfl-stage)) { aspect-ratio: 480 / 162; }
    taaltaal-flag .tfl-hint { font-size: 12px; top: 5%; }
}
@media (prefers-reduced-motion: reduce) {
    taaltaal-flag .tfl-cloth, taaltaal-flag .tfl-cloth i, taaltaal-flag .tfl-sails, taaltaal-flag .tfl-who.talking { animation: none; }
}