/* Teloriva feedback: the celebration dialog, the spotlight, particles and the travelling mote.
   Behaviour and sequencing: core/js/telo-feedback.js. Markup: notifications/partials/celebrate.html.
   Colours come from the toybox tokens (sidebar_toybox.css), so light and dark both hold. */

:root{
  --telo-gold: #FFC83D;
  --telo-gold-deep: oklch(62% 0.15 75);
  --telo-violet: #6D4AFF;
  --telo-violet-2: #8B5CF6;
  --telo-ease: cubic-bezier(.23, 1, .32, 1);
  --telo-display: "Bricolage Grotesque", Vazirmatn, system-ui, sans-serif;
}

/* --- The page behind a celebration stays put ------------------------------ */
/* A class, not :has(dialog[open]): toggling it restyles only <html>, not the whole document. */
html.telo-locked{overflow:hidden;padding-inline-end:var(--telo-sbw, 0px)}

/* --- Celebration dialog --------------------------------------------------- */
.telo-cel{
  /* The dialog is the whole viewport: it centres the card and, only if the card cannot fit
     (a short window, heavy zoom), scrolls as one piece so the actions are always reachable. */
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;
  padding:clamp(12px, 3vh, 32px) 16px;border:0;background:transparent;color:var(--tb-ink);
  overflow:auto;overscroll-behavior:contain;
}
.telo-cel[open]{display:grid;place-items:center}
.telo-cel::backdrop{
  background:radial-gradient(circle at 50% 42%, rgb(139 92 246 / .34), rgb(20 14 60 / .72) 72%);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:telo-fade .26s var(--telo-ease) both;
}
.telo-cel.is-closing::backdrop{animation:telo-fade-out .18s ease-out both}
.telo-cel:focus{outline:none}

.telo-cel__card{
  position:relative;width:min(30rem, 100%);background:var(--tb-card);border-radius:28px;overflow:clip;
  box-shadow:0 0 0 1px rgb(255 200 61 / .4), 0 0 70px -18px rgb(255 200 61 / .5), 0 40px 90px -30px rgb(30 14 90 / .75);
}

.telo-cel__stage{position:relative;aspect-ratio:12 / 5;overflow:hidden;background:#E9E4FF}
.telo-cel__stage-img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* Light behind the medallion; the sequence swells it, then it rests. */
.telo-cel__glow{
  position:absolute;left:50%;top:44%;width:58%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle, rgb(255 226 140 / .75), rgb(255 200 61 / .25) 38%, transparent 66%);
  opacity:.55;pointer-events:none;
}

.telo-cel__content{display:grid;justify-items:center;gap:.55rem;padding:0 1.75rem 1.5rem;text-align:center}
.telo-cel__card:not(:has(.telo-cel__stage)) .telo-cel__content{padding-top:2.25rem}

/* The reward itself: the one number the card is about. */
.telo-cel__amount{
  position:relative;z-index:1;margin:-1.75rem 0 .15rem;display:inline-flex;align-items:baseline;gap:.35rem;
  padding:.35rem 1.15rem .45rem;border-radius:999px;background:var(--tb-card);
  box-shadow:0 0 0 1.5px rgb(255 200 61 / .75), 0 12px 30px -12px rgb(224 161 0 / .7);
  font-family:var(--telo-display);font-variant-numeric:tabular-nums;line-height:1;
}
.telo-cel__card:not(:has(.telo-cel__stage)) .telo-cel__amount{margin-top:0}
.telo-cel__num{font-size:2.6rem;font-weight:800;letter-spacing:-.03em;color:var(--tb-violet-deep, var(--telo-violet))}
.telo-cel__unit{font-size:1.1rem;font-weight:800;color:var(--telo-gold-deep)}

.telo-cel__title{
  margin:.2rem 0 0;font-family:var(--telo-display);font-size:clamp(1.4rem, 1.15rem + 1.1vw, 1.75rem);
  line-height:1.15;font-weight:800;letter-spacing:-.02em;text-wrap:balance;
}
.telo-cel__body{margin:0;max-width:34ch;color:var(--tb-soft);font-size:1rem;line-height:1.5;text-wrap:pretty}

/* Where the reward went: live level progress, a link to Achievements. */
.telo-cel__progress{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.35rem .8rem;width:100%;margin-top:.4rem;
  padding:.75rem .95rem;border-radius:16px;background:var(--tb-hover);color:inherit;text-decoration:none;text-align:start;
  transition:background-color var(--tb-dur, .15s) ease;
}
.telo-cel__progress:hover{background:color-mix(in oklch, var(--tb-hover), var(--tb-violet) 8%)}
.telo-cel__progress:focus-visible{outline:none;box-shadow:var(--tb-ring-strong)}
.telo-cel__level{font-weight:800;font-size:.95rem}
.telo-cel__track{position:relative;height:10px;border-radius:999px;background:rgb(109 74 255 / .16);overflow:hidden}
.telo-cel__track i{
  position:absolute;inset:0;border-radius:inherit;transform-origin:left center;transform:scaleX(calc(var(--p) / 100));
  background:linear-gradient(90deg, var(--telo-violet-2), var(--telo-gold));
}
[dir="rtl"] .telo-cel__track i{transform-origin:right center}
.telo-cel__xp{grid-column:1 / -1;font-size:.85rem;font-weight:600;color:var(--tb-soft);font-variant-numeric:tabular-nums}

/* Also earned from the same action (a level, a badge). */
.telo-cel__also{display:grid;gap:.45rem;width:100%;margin:.25rem 0 0;padding:0;list-style:none}
.telo-cel__also[hidden]{display:none}
.telo-cel__row{
  display:grid;grid-template-columns:44px 1fr;align-items:center;gap:.75rem;padding:.4rem .75rem .4rem .45rem;
  border-radius:14px;box-shadow:inset 0 0 0 1px var(--tb-border);text-align:start;font-weight:700;font-size:.95rem;
}
.telo-cel__row-art img{display:block;width:44px;height:44px;object-fit:contain}
.telo-cel__row-text b{color:var(--telo-gold-deep);font-variant-numeric:tabular-nums}

.telo-cel__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;width:100%;margin-top:.6rem}
.telo-cel__cta{
  flex:1 1 12rem;display:inline-flex;align-items:center;justify-content:center;gap:.4em;padding:.9em 1.4em;border-radius:999px;
  background:linear-gradient(135deg, var(--telo-violet-2), var(--telo-violet));color:#fff;font-weight:800;font-size:1rem;text-decoration:none;
  box-shadow:0 10px 24px -10px rgb(109 74 255 / .8), inset 0 1px 0 rgb(255 255 255 / .25);
  transition:transform .16s var(--telo-ease), box-shadow .16s var(--telo-ease);
}
.telo-cel__cta:active{transform:scale(.97)}
.telo-cel__cta:focus-visible{outline:none;box-shadow:0 0 0 3px var(--tb-card), 0 0 0 6px var(--telo-gold)}
.telo-cel__cta .material-symbols-outlined{font-size:1.2em}
[dir="rtl"] .telo-cel__cta .material-symbols-outlined{transform:scaleX(-1)}
.telo-cel__later{
  flex:0 1 auto;border:0;background:none;cursor:pointer;padding:.9em 1.1em;border-radius:999px;
  color:var(--tb-soft);font:inherit;font-weight:700;font-size:.95rem;
}
.telo-cel__later:hover{color:var(--tb-ink);background:var(--tb-hover)}
.telo-cel__later:focus-visible{outline:none;box-shadow:var(--tb-ring-strong)}
.telo-cel__x{
  position:absolute;top:.75rem;inset-inline-end:.75rem;z-index:2;display:grid;place-items:center;width:2.25rem;height:2.25rem;
  border:0;border-radius:50%;cursor:pointer;background:rgb(255 255 255 / .82);color:#2a1f5c;
  box-shadow:0 2px 8px rgb(40 20 80 / .2);backdrop-filter:blur(4px);
}
.telo-cel__x:hover{background:#fff}
.telo-cel__x:focus-visible{outline:none;box-shadow:0 0 0 3px var(--telo-gold)}
.telo-cel__x .material-symbols-outlined{font-size:1.2rem}

@media (hover:hover){
  .telo-cel__cta:hover{box-shadow:0 14px 30px -10px rgb(109 74 255 / .9), inset 0 1px 0 rgb(255 255 255 / .25)}
}

/* Narrow and short windows (phones, browser zoom): shrink the art first, then drop it. */
@media (max-width:480px){
  .telo-cel__content{padding:0 1.15rem 1.2rem}
  .telo-cel__num{font-size:2.2rem}
  .telo-cel__cta{flex-basis:100%}
  .telo-cel__later{flex-basis:100%;padding:.6em}
}
@media (max-height:760px){
  /* "Also earned" rows need the room: the stage gives it up first. */
  .telo-cel__card:has(.telo-cel__row) .telo-cel__stage{aspect-ratio:auto;height:120px}
}
@media (max-height:600px){
  .telo-cel__stage{aspect-ratio:auto;height:120px}
  .telo-cel__content{gap:.4rem}
  .telo-cel__actions{margin-top:.3rem}
}
@media (max-height:440px){
  .telo-cel__stage{display:none}
  .telo-cel__content{padding-top:1.5rem}
  .telo-cel__amount{margin-top:0}
}

/* --- Spotlight: a level or a badge, without a milestone ------------------- */
.telo-spot{
  position:fixed;z-index:95;inset-inline:0;bottom:max(1.25rem, env(safe-area-inset-bottom));margin-inline:auto;
  width:min(26rem, calc(100vw - 2rem));display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:.9rem;
  padding:.8rem .7rem .8rem .8rem;border-radius:22px;background:var(--tb-card);color:var(--tb-ink);
  box-shadow:0 0 0 1px rgb(255 200 61 / .45), 0 24px 50px -18px rgb(30 14 90 / .55);
}
.telo-spot[hidden]{display:none}
.telo-spot__art img{display:block;width:72px;height:72px;object-fit:contain}
.telo-spot__text{display:grid;gap:.15rem;min-width:0}
.telo-spot__title{margin:0;font-family:var(--telo-display);font-weight:800;font-size:1.08rem;line-height:1.2;text-wrap:balance}
.telo-spot__body{margin:0;color:var(--tb-soft);font-size:.88rem;line-height:1.4}
.telo-spot__also{margin-top:.35rem}
.telo-spot__also .telo-cel__row{grid-template-columns:32px 1fr;font-size:.85rem;padding:.25rem .5rem .25rem .3rem}
.telo-spot__also .telo-cel__row-art img{width:32px;height:32px}
.telo-spot__link{justify-self:start;margin-top:.25rem;color:var(--tb-violet-deep, var(--telo-violet));font-weight:800;font-size:.88rem;text-decoration:none}
.telo-spot__link:hover{text-decoration:underline}
.telo-spot__link:focus-visible{outline:none;border-radius:6px;box-shadow:var(--tb-ring-strong)}
.telo-spot__x{
  align-self:start;display:grid;place-items:center;width:2rem;height:2rem;border:0;border-radius:50%;cursor:pointer;
  background:transparent;color:var(--tb-soft);
}
.telo-spot__x:hover{background:var(--tb-hover);color:var(--tb-ink)}
.telo-spot__x:focus-visible{outline:none;box-shadow:var(--tb-ring-strong)}
@media (max-width:1023.98px){
  /* Clear the phone dock (core/css/mobile_shell.css). */
  .telo-spot{bottom:calc(env(safe-area-inset-bottom) + 5.5rem)}
}

/* --- Particles and the travelling mote ------------------------------------ */
canvas.telo-burst{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:2147483000}
.telo-mote{
  position:fixed;left:0;top:0;z-index:2147483001;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, #fff 0 18%, #FFE08A 34%, rgb(255 200 61 / .55) 58%, transparent 72%);
  box-shadow:0 0 18px 6px rgb(255 200 61 / .45);
}

/* A confirmation mark that lands once (homework submitted): rises with a little give, then rests. */
.telo-pop{animation:telo-pop .6s cubic-bezier(.34, 1.56, .64, 1) .08s both}
@keyframes telo-pop{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}

@keyframes telo-fade{from{opacity:0}to{opacity:1}}
@keyframes telo-fade-out{from{opacity:1}to{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .telo-cel::backdrop{animation-duration:.01s}
  .telo-cel__progress{transition:none}
  .telo-pop{animation:telo-fade .2s ease both}
}