/* BOSS WORK - title.css : the title screen. The logo (one-time drop-in, loop moves pinned to the clock by js/title.js),
 * the menu (slides in once, calm afterwards; springy hover, a clear focus ring, a soft nudge on the likely choice)
 * and the no-WebGL fallback: a flat little theatre whose curtains run on the same clock. Loaded after css/a11y.css. */

/* ---------- the logo ---------- */
.tt-title .tt-logo { margin: 0; position: relative; font-size: 0; line-height: 1; color: inherit; text-shadow: none; text-transform: none; transform-origin: 38% 100%; will-change: transform; }
.tt-title .tt-logo .tt-boss, .tt-title .tt-logo .tt-work { display: block; white-space: nowrap; }
.tt-title .tt-logo .tt-l { display: inline-block; transform-origin: 50% 100%; }
.tt-title .tt-logo .tt-j { display: inline-block; transform-origin: 50% 90%; }
.tt-logo .tt-boss { font: 900 74px/1 var(--font-cute); letter-spacing: .02em; margin-left: 10px; color: #fff7f0;
  -webkit-text-stroke: 10px var(--ink-a); paint-order: stroke fill; text-shadow: 0 7px 0 var(--ink-a); }
.tt-logo .tt-work { font: 400 128px/.95 var(--font-display); margin-top: 4px; transform: skewX(-10deg); letter-spacing: .01em;
  filter: drop-shadow(4px 0 0 #fff6ea) drop-shadow(-4px 0 0 #fff6ea) drop-shadow(0 4px 0 #fff6ea) drop-shadow(0 -4px 0 #fff6ea) drop-shadow(0 9px 0 var(--ink-a)); }
.tt-logo .tt-work .tt-j { color: transparent; -webkit-text-stroke: 9px var(--ink-a); paint-order: stroke fill;
  background: linear-gradient(105deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 58%) no-repeat, linear-gradient(180deg, #fff8d6 0%, #ffe07a 34%, #f3b443 66%, #c27f2c 100%);
  background-size: 320% 100%, 100% 100%; background-position: 160% 0, 0 0; -webkit-background-clip: text; background-clip: text;
  animation: tt-glint 6.5s ease-in-out infinite; animation-delay: calc(var(--i) * 90ms + 2.4s); }
@keyframes tt-glint { 0%, 74% { background-position: 160% 0, 0 0; } 90%, 100% { background-position: -60% 0, 0 0; } }
/* two drawn sparkles (no glyphs) twinkling at the corners */
.tt-title::before, .tt-title::after { content: ''; position: absolute; width: 26px; height: 26px; background: #fff3c4; pointer-events: none; opacity: 0;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); filter: drop-shadow(0 0 6px #ffd76a); }
.tt-title::before { right: -14px; top: 74px; }
.tt-title::after { left: -18px; top: 148px; width: 18px; height: 18px; }
.tt-in .tt-title::before { animation: tt-twinkle 3.1s 1.6s ease-in-out infinite; }
.tt-in .tt-title::after { animation: tt-twinkle 3.7s 2.4s ease-in-out infinite; }
@keyframes tt-twinkle { 0%, 60%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 75% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* breathing room in the stack (the display fonts run tall): BOSS, WORK!!, the tagline pill and the menu never touch */
.tt-title { top: 62px; }
.tt-title .tt-logo .tt-work { margin-top: 12px; }
.tt-title .tt-sub { margin-top: 26px; }
.tt-menu.md-dense { top: 372px; }
html.portrait .tt-title { top: 136px; }
html.portrait .tt-title .tt-sub { margin-top: 32px; }

/* entrance: the letters drop and bounce once, then the tag pops */
#screen-title:not(.tt-in) .tt-title, #screen-title:not(.tt-in) .tt-menu { opacity: 0; }
.tt-in .tt-logo .tt-l { animation: tt-drop .9s cubic-bezier(.25,.8,.3,1) backwards; animation-delay: calc(var(--i) * 75ms + 120ms); }
@keyframes tt-drop {
  0% { transform: translateY(-190px) rotate(-14deg) scale(.9, 1.12); opacity: 0; }
  38% { transform: translateY(0) rotate(0) scale(1.18, .8); opacity: 1; }
  55% { transform: translateY(-26px) rotate(3deg) scale(.94, 1.07); }
  72% { transform: translateY(0) scale(1.07, .93); }
  86% { transform: translateY(-6px) scale(.99, 1.02); }
  100% { transform: none; }
}
.tt-in .tt-sub { animation: tt-tag .55s cubic-bezier(.3,1.6,.5,1) .95s backwards; }
@keyframes tt-tag { from { transform: rotate(4deg) scale(.4); opacity: 0; } to { transform: rotate(4deg) scale(1); opacity: 1; } }

/* ---------- the menu: slides in once, then stays put and readable ---------- */
.tt-in .tt-menu > * { animation: tt-slide .6s cubic-bezier(.2,1.25,.4,1) backwards; }
.tt-in .tt-menu > :nth-child(1) { animation-delay: .55s; } .tt-in .tt-menu > :nth-child(2) { animation-delay: .62s; }
.tt-in .tt-menu > :nth-child(3) { animation-delay: .69s; } .tt-in .tt-menu > :nth-child(4) { animation-delay: .76s; }
.tt-in .tt-menu > :nth-child(5) { animation-delay: .83s; } .tt-in .tt-menu > :nth-child(6) { animation-delay: .9s; }
.tt-in .tt-menu > :nth-child(7) { animation-delay: .97s; }
@keyframes tt-slide { from { transform: translateX(-120px); opacity: 0; } to { transform: none; opacity: 1; } }
html[dir=rtl] .tt-in .tt-menu > * { animation-name: tt-slide-rtl; }
@keyframes tt-slide-rtl { from { transform: translateX(120px); opacity: 0; } to { transform: none; opacity: 1; } }
.tt-menu button, .tt-menu .md-row button { transition: transform .22s cubic-bezier(.3,1.7,.5,1), background-color .12s, box-shadow .12s; }
.tt-menu button:active:not([disabled]) { transform: translateX(6px) translateY(3px) !important; box-shadow: 0 2px 0 var(--ink-a) !important; }
.tt-menu button:focus-visible { outline: 3px solid #ffd76a; outline-offset: 3px; }
.tt-intro:focus-visible { outline: 3px solid #ffd76a; outline-offset: 3px; }
html[dir=rtl] .tt-menu button:hover, html[dir=rtl] .tt-menu button:focus-visible { transform: translateX(-10px) rotate(1.5deg); }
/* the likely choice glows softly now and then (never moves) */
.tt-in .tt-menu > .tt-attract { animation: tt-slide .6s cubic-bezier(.2,1.25,.4,1) backwards, tt-attract 4s 3s ease-in-out infinite; }
@keyframes tt-attract { 0%, 70%, 100% { box-shadow: 0 5px 0 var(--ink-a), 0 0 0 0 rgba(255,215,106,0); } 82% { box-shadow: 0 5px 0 var(--ink-a), 0 0 0 7px rgba(255,215,106,.55); } }
.tt-menu > .tt-attract:hover, .tt-menu > .tt-attract:focus-visible { animation-play-state: paused; }

/* the tagline and the hint sit on the theatre wall: keep them legible */
.tt-foot { text-shadow: 0 2px 0 var(--ink-a), 0 0 10px rgba(30,4,14,.85); }

@media (prefers-reduced-motion: reduce) {
  .tt-in .tt-logo .tt-l { animation: tt-fade .5s backwards; animation-delay: calc(var(--i) * 40ms); }
  .tt-in .tt-menu > *, .tt-in .tt-menu > .tt-attract { animation: tt-fade .4s .3s backwards; }
  .tt-in .tt-title::before, .tt-in .tt-title::after, .tt-logo .tt-work .tt-j { animation: none; }
}
@keyframes tt-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- no WebGL: a flat little theatre on the same clock ---------- */
.no-w3d #screen-title { background: radial-gradient(ellipse at 62% 40%, #5a1730, #2a0814 72%) !important; }
.tt-theater { position: absolute; left: 420px; right: 40px; top: 46px; bottom: 70px; pointer-events: none; }
.tt-th-arch { position: absolute; left: 0; right: 0; top: 0; bottom: 44px; border: 16px solid #e3b24c; border-bottom: 0; border-radius: 26px 26px 0 0; overflow: hidden;
  box-shadow: 0 0 0 5px #3a2433, inset 0 0 0 4px #b8792a, 0 18px 40px rgba(0,0,0,.45); background: #1d0a12; }
.tt-th-set { position: absolute; inset: 0; background: linear-gradient(#ffe5d6, #ffd3df 74%, #f3b9cc 74%); }
.tt-th-win { position: absolute; left: 30%; top: 12%; width: 40%; height: 46%; border: 7px solid #3a2433; border-radius: 12px; overflow: hidden; background: linear-gradient(#a9d8ff, #fff1d8); }
.tt-th-win .voss-sil { position: absolute; left: 50%; bottom: -6%; width: 62%; transform: translateX(-50%); filter: invert(.15) sepia(.4) hue-rotate(290deg); }
.tt-th-desk { position: absolute; left: 34%; right: 34%; bottom: 8%; height: 22%; background: #c9e4f0; border: 5px solid #3a2433; border-radius: 8px 8px 0 0; }
.tt-th-storm { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at 50% 20%, rgba(90,60,150,.85), rgba(25,14,48,.94) 70%); }
.tt-th-flash { position: absolute; inset: 0; opacity: 0; background: #f4f0ff; }
.tt-th-cur { position: absolute; top: 0; bottom: 0; width: 51%; transform-origin: 0 50%;
  background: linear-gradient(transparent 92%, #e9b84e 92%, #b8792a 97%, #f2c867 97%), repeating-linear-gradient(90deg, #8e0b28 0 10px, #b0142f 10px 26px, #9e0f2c 26px 38px);
  box-shadow: inset -6px 0 0 #e3b24c; }
.tt-th-cur.l { left: 0; transform-origin: 0 50%; }
.tt-th-cur.r { right: 0; transform-origin: 100% 50%; box-shadow: inset 6px 0 0 #e3b24c; }
.tt-th-val { position: absolute; left: 0; right: 0; top: 0; height: 15%; background: radial-gradient(ellipse 13% 100% at 12.5% 0, #a5112d 98%, transparent 100%) 0 0 / 25% 100% repeat-x;
  filter: drop-shadow(0 4px 0 #e3b24c); }
.tt-th-apron { position: absolute; left: -2%; right: -2%; bottom: 0; height: 44px; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: linear-gradient(#c98d5b, #7a4428);
  box-shadow: inset 0 3px 0 #e3b24c; }
.tt-th-apron::before { content: ''; position: absolute; left: 8%; right: 8%; top: 8px; height: 10px; background: radial-gradient(circle, #fff3c4 0 4px, transparent 5px) 0 0 / 7% 100% repeat-x; filter: drop-shadow(0 0 6px #ffd76a); }
html.portrait .tt-theater { left: 20px; right: 20px; top: 360px; bottom: auto; height: 400px; }

/* RTL: labels sit on the right like the ENDLESS row, the hover heart moves to the right edge */
html[dir=rtl] .tt-menu > button, html[dir=rtl] .tt-menu > .pg-galbtn { text-align: right; }
html[dir=rtl] .tt-menu button:hover::before, html[dir=rtl] .tt-menu button:focus-visible::before { left: auto !important; right: -40px; }