/* ============================================================================
   33-wotd.css — Word of the Day (home page)
   ----------------------------------------------------------------------------
   A full-width daily-word FEATURE panel, not a small card: two columns on
   desktop (left = word + definition + RU/UZ translation cards + synonyms,
   right = numbered examples with their translation + save action).

   Motion: rotating conic-gradient ring, drifting aurora orbs, cursor spotlight
   + 3D tilt, an entrance sheen sweep, letter-by-letter 3D word reveal with a
   travelling brightness wave, staggered blocks, floating sparkles.
   Base state is always fully visible — .is-in only PLAYS the one-shot entrance
   (per the entrance-animation rule) — and everything respects reduced motion.
   ============================================================================ */

#wotdSection{ margin:46px 0 10px; }

@property --wotdA { syntax:'<angle>'; initial-value:0deg; inherits:false; }

.wotd-card{
  --rx:0deg; --ry:0deg; --mx:50%; --my:34%;
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:30px; padding:2px;                       /* room for the gradient ring */
  background:
    linear-gradient(var(--card-bg-soft), var(--card-bg-soft)) padding-box,
    conic-gradient(from var(--wotdA, 0deg),
      rgba(198,242,78,.6), rgba(78,224,242,.6), rgba(139,109,255,.65),
      rgba(255,122,217,.5), rgba(198,242,78,.6)) border-box;
  border:1px solid transparent;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85), 0 0 90px -40px rgba(139,109,255,.4);
  transform:perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:box-shadow .35s;
  animation:wotdSpin 10s linear infinite;
}
.wotd-card:hover{ box-shadow:0 46px 110px -40px rgba(0,0,0,.9), 0 0 110px -34px rgba(78,224,242,.45); }
@keyframes wotdSpin{ to{ --wotdA:360deg; } }

.wotd-inner{
  position:relative; z-index:3; border-radius:28px; padding:34px 40px 32px;
  background:
    radial-gradient(80% 60% at 6% 0%, rgba(139,109,255,.12), transparent 60%),
    radial-gradient(70% 60% at 100% 100%, rgba(78,224,242,.09), transparent 55%);
}

/* drifting aurora orbs + cursor spotlight + entrance sheen */
.wotd-orb{ position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; z-index:1; opacity:.5; }
.wotd-orb.wo1{ width:340px; height:340px; left:-90px; top:-120px; background:radial-gradient(circle, rgba(139,109,255,.6), transparent 65%); animation:wotdDrift1 14s ease-in-out infinite; }
.wotd-orb.wo2{ width:300px; height:300px; right:-80px; bottom:-120px; background:radial-gradient(circle, rgba(78,224,242,.5), transparent 65%); animation:wotdDrift2 17s ease-in-out infinite; }
.wotd-orb.wo3{ width:240px; height:240px; left:44%; top:52%; background:radial-gradient(circle, rgba(198,242,78,.28), transparent 65%); animation:wotdDrift3 21s ease-in-out infinite; opacity:.35; }
@keyframes wotdDrift1{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(52px,30px) } }
@keyframes wotdDrift2{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(-44px,-34px) } }
@keyframes wotdDrift3{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(30px,-26px) scale(1.15) } }
.wotd-spot{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.07), transparent 60%);
}
.wotd-card:hover .wotd-spot{ opacity:1; }
.wotd-sheen{
  position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.10) 47%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.10) 53%, transparent 70%);
  background-size:280% 100%; background-position:120% 0;
}
.wotd-card.is-in .wotd-sheen{ animation:wotdSheen 1.5s cubic-bezier(.3,0,.2,1) .35s both; }
@keyframes wotdSheen{ 0%{ opacity:0; background-position:120% 0 } 25%{ opacity:1 } 100%{ opacity:0; background-position:-40% 0 } }

/* floating sparkles */
.wotd-spark{
  position:absolute; z-index:2; pointer-events:none; font-style:normal; color:var(--lime);
  text-shadow:0 0 12px rgba(198,242,78,.8); opacity:.7;
  animation:wotdTwinkle 4.2s ease-in-out infinite;
}
.wotd-spark.ws1{ top:22px; right:16%; font-size:13px; animation-delay:.4s; color:var(--cyan); text-shadow:0 0 12px rgba(78,224,242,.8); }
.wotd-spark.ws2{ bottom:22%; left:5%; font-size:10px; animation-delay:1.6s; }
.wotd-spark.ws3{ top:34%; right:4%; font-size:16px; animation-delay:2.7s; color:var(--violet); text-shadow:0 0 14px rgba(139,109,255,.8); }
.wotd-spark.ws4{ bottom:12%; right:38%; font-size:11px; animation-delay:3.4s; color:var(--pink, #ff7ad9); text-shadow:0 0 12px rgba(255,122,217,.7); }
@keyframes wotdTwinkle{
  0%,100%{ opacity:.22; transform:translateY(0) scale(.85) rotate(0deg); }
  50%{ opacity:.95; transform:translateY(-10px) scale(1.18) rotate(24deg); }
}

/* ---- head row ---- */
.wotd-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding-bottom:16px; margin-bottom:22px; border-bottom:1px solid var(--hairline);
}
.wotd-eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--lime);
}
.wotd-eyebrow i{ font-style:normal; animation:wotdTwinkle 3.4s ease-in-out infinite; }
.wotd-head-right{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.wotd-date{ font-size:13.5px; color:var(--muted); }
.wotd-next{
  display:inline-flex; align-items:center; font-size:12.5px; color:var(--muted);
  padding:5px 12px; border-radius:999px; background:var(--chip-bg); border:1px solid var(--card-border);
}
.wotd-next i{ font-style:normal; }
.wotd-next b{ color:var(--text); font-variant-numeric:tabular-nums; }

/* ---- two-column body ---- */
.wotd-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:34px; align-items:start; }
.wotd-main{ min-width:0; }
.wotd-side{ min-width:0; display:flex; flex-direction:column; }
.wotd-sec-lbl{
  display:inline-flex; align-items:center;
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.wotd-sec-lbl i{ font-style:normal; }

/* ---- the word ---- */
.wotd-word-row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.wotd-word{
  margin:0; font-size:clamp(40px, 5.4vw, 74px); font-weight:900; letter-spacing:-.03em; line-height:1.02;
  color:var(--lime);                                    /* fallback if letters lack --lc */
  overflow-wrap:anywhere;
}
.wotd-ch{
  display:inline-block; color:var(--lc, var(--lime));
  text-shadow:0 0 30px color-mix(in srgb, var(--lc, var(--lime)) 40%, transparent);
}
.wotd-card.is-in .wotd-ch{
  animation:
    wotdCh .72s cubic-bezier(.24,1.4,.4,1) both,
    wotdWave 5.4s ease-in-out infinite;
  animation-delay:calc(.15s + var(--i, 0) * 48ms), calc(1.8s + var(--i, 0) * 110ms);
}
@keyframes wotdCh{
  from{ opacity:0; transform:translateY(30px) rotateX(85deg) scale(.85); filter:blur(8px); }
  60%{ filter:blur(0); }
  to{ opacity:1; transform:translateY(0) rotateX(0) scale(1); }
}
/* a light wave rolls across the word every few seconds */
/* PERF: the glow is a drop-shadow INSIDE the filter, not a text-shadow.
   text-shadow cannot be composited, so animating it repainted every letter of
   the word every frame — ten elements doing that continuously. Rolling it into
   `filter`, which was already the other animated property here, leaves exactly
   one compositor-friendly property animating and looks the same. */
@keyframes wotdWave{
  0%, 16%, 100%{ filter:brightness(1) drop-shadow(0 0 0 transparent); }
  8%{ filter:brightness(1.55) drop-shadow(0 0 12px currentColor); }
}

.wotd-say{
  flex:0 0 auto; width:58px; height:58px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:var(--cyan);
  background:rgba(78,224,242,.10); border:1px solid rgba(78,224,242,.35);
  transition:transform .2s, background .2s, box-shadow .2s;
}
.wotd-say:hover{ transform:scale(1.1); background:rgba(78,224,242,.18); box-shadow:0 0 30px -6px rgba(78,224,242,.8); }
.wotd-say:active{ transform:scale(.94); }
.wotd-say.is-playing{ animation:wotdPulse 1s ease-in-out infinite; }
@keyframes wotdPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(78,224,242,.5); } 50%{ box-shadow:0 0 0 14px rgba(78,224,242,0); } }

/* ---- meta + definition ---- */
.wotd-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0 16px; }
.wotd-ipa{ font-size:17px; color:var(--cyan); font-family:Georgia, 'Times New Roman', serif; }
.wotd-pos{
  font-size:12.5px; font-weight:700; font-style:italic; color:var(--muted);
  padding:4px 12px; border-radius:999px; background:var(--chip-bg); border:1px solid var(--card-border);
}
.wotd-lv{
  font-size:11.5px; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px;
}
.wotd-lv.is-c1{ color:#f4c95d; background:rgba(244,201,93,.12); border:1px solid rgba(244,201,93,.4); }
.wotd-lv.is-c2{ color:#ff7ad9; background:rgba(255,122,217,.12); border:1px solid rgba(255,122,217,.4); }
.wotd-def{
  margin:0 0 22px; font-size:clamp(17px, 1.5vw, 20px); line-height:1.55; color:var(--text); font-weight:500;
}
.wotd-card.is-in .wotd-meta,
.wotd-card.is-in .wotd-def{ animation:wotdUp .6s ease both; animation-delay:.5s; }
.wotd-card.is-in .wotd-def{ animation-delay:.58s; }
@keyframes wotdUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

/* ---- RU / UZ translation cards ---- */
.wotd-trans{ margin-bottom:20px; }
.wotd-trcs{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:9px; }
.wotd-trc{
  position:relative; overflow:hidden;
  background:rgba(139,109,255,.07); border:1px solid rgba(139,109,255,.26);
  border-radius:16px; padding:13px 15px;
  transition:border-color .25s, background .25s, transform .25s;
}
.wotd-trc[data-lang="uz"]{ background:rgba(78,224,242,.06); border-color:rgba(78,224,242,.26); }
.wotd-trc:hover{ transform:translateY(-2px); border-color:rgba(139,109,255,.5); }
.wotd-trc[data-lang="uz"]:hover{ border-color:rgba(78,224,242,.5); }
.wotd-trc-top{ display:flex; align-items:center; gap:7px; margin-bottom:5px; }
.wotd-flag{ font-size:15px; line-height:1; }
.wotd-trc-lang{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.wotd-trc-word{ display:block; font-size:19px; font-weight:800; color:var(--violet); line-height:1.25; }
.wotd-trc[data-lang="uz"] .wotd-trc-word{ color:var(--cyan); }
.wotd-trc-def{ margin:5px 0 0; font-size:13.5px; line-height:1.5; color:var(--muted); }
.wotd-card.is-in .wotd-trc{ animation:wotdUp .6s ease both; animation-delay:calc(.72s + var(--i,0) * .1s); }

/* ---- synonyms ---- */
.wotd-syn .wotd-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:9px; }
.wotd-chip{
  font-size:13px; font-weight:700; color:var(--text);
  padding:6px 14px; border-radius:999px; background:var(--chip-bg); border:1px solid var(--card-border);
  transition:border-color .2s, transform .2s, background .2s;
}
.wotd-chip:hover{ border-color:var(--cyan); transform:translateY(-2px); background:rgba(78,224,242,.08); }
.wotd-card.is-in .wotd-syn{ animation:wotdUp .6s ease both; animation-delay:.95s; }

/* ---- examples (right column) ---- */
.wotd-side-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.wotd-langsw{ display:flex; gap:3px; background:var(--chip-bg); border:1px solid var(--card-border); border-radius:999px; padding:3px; }
.wotd-lang{
  border:0; background:transparent; color:var(--muted); font:inherit; font-size:12px; font-weight:800;
  padding:5px 11px; border-radius:999px; cursor:pointer; transition:background .2s, color .2s;
}
.wotd-lang:hover{ color:var(--text); }
.wotd-lang.is-on{
  background:color-mix(in srgb, var(--violet) 30%, transparent); color:var(--text);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--violet) 45%, transparent);
}
.wotd-exs{ list-style:none; margin:0 0 auto; padding:0; display:flex; flex-direction:column; gap:11px; }
.wotd-ex{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start;
  padding:15px 17px; border-radius:18px;
  background:var(--chip-bg); border:1px solid var(--hairline);
  transition:border-color .25s, background .25s;
}
.wotd-ex:hover{ border-color:var(--card-border-hi); background:var(--chip-bg-hover); }
.wotd-ex-n{
  width:26px; height:26px; border-radius:9px; flex:0 0 auto; margin-top:1px;
  display:grid; place-items:center; font-size:12.5px; font-weight:900;
  color:var(--violet); background:rgba(139,109,255,.14);
  box-shadow:inset 0 0 0 1px rgba(139,109,255,.3);
}
.wotd-ex-body{ min-width:0; }
.wotd-ex-en{ margin:0; font-size:15px; line-height:1.6; color:var(--text); }
.wotd-ex-tr{
  margin:8px 0 0; padding-top:8px; border-top:1px dashed var(--card-border);
  font-size:13.5px; line-height:1.55; color:var(--muted);
  transition:opacity .16s ease, transform .16s ease;
}
.wotd-ex-tr.is-swapping{ opacity:0; transform:translateY(-4px); }
.wotd-mark{
  background:rgba(198,242,78,.16); color:var(--lime); font-weight:800;
  padding:0 5px; border-radius:6px; box-shadow:inset 0 0 0 1px rgba(198,242,78,.25);
}
.wotd-card.is-in .wotd-ex{ animation:wotdUp .6s ease both; animation-delay:calc(.78s + var(--i, 0) * .12s); }

/* ---- footer actions ---- */
.wotd-foot{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:18px; }
.wotd-card.is-in .wotd-foot{ animation:wotdUp .6s ease both; animation-delay:1.05s; }
.wotd-save{ font-size:15px; padding:13px 22px; }
.wotd-save-ico{ font-weight:900; }
.wotd-save.is-done{
  background:rgba(198,242,78,.14) !important; color:var(--lime) !important;
  border:1px solid rgba(198,242,78,.45) !important; box-shadow:none !important; cursor:default;
}
.wotd-more{ font-size:13.5px; font-weight:700; color:var(--muted); text-decoration:none; }
.wotd-more:hover{ color:var(--cyan); }

/* ---- responsive ---- */
@media (max-width: 980px){
  .wotd-grid{ grid-template-columns:1fr; gap:26px; }
  .wotd-inner{ padding:28px 26px 26px; }
}
@media (max-width: 640px){
  #wotdSection{ margin:32px 0 8px; }
  .wotd-inner{ padding:22px 18px 20px; }
  .wotd-card{ border-radius:24px; }
  .wotd-say{ width:48px; height:48px; }
  .wotd-trcs{ grid-template-columns:1fr; }
  .wotd-head{ gap:8px; }
  .wotd-head-right{ width:100%; justify-content:space-between; }
  .wotd-foot{ flex-direction:column; align-items:stretch; text-align:center; }
  .wotd-save{ width:100%; justify-content:center; }
}

/* RU / UZ pills ship at 29px tall — too small to hit reliably with a thumb.
   Covers touch devices at any width (tablets included), plus phone-width
   viewports on any pointer type. */
@media (pointer:coarse), (max-width:900px){
  .wotd-lang{ padding:10px 14px; }
}

/* ---- light theme ---- */
:root[data-theme="light"] .wotd-card{
  background:
    linear-gradient(var(--card-bg-soft), var(--card-bg-soft)) padding-box,
    conic-gradient(from var(--wotdA, 0deg),
      rgba(124,158,10,.5), rgba(8,145,178,.5), rgba(109,74,255,.55),
      rgba(214,64,159,.4), rgba(124,158,10,.5)) border-box;
  box-shadow:0 30px 70px -34px rgba(30,30,60,.35);
}
:root[data-theme="light"] .wotd-word{ color:#5a7a00; }
:root[data-theme="light"] .wotd-ch{
  color:color-mix(in srgb, var(--lc, #5a7a00) 55%, #23263a);
  text-shadow:none;
}
/* the blurred orbs read as a muddy rainbow wash on a light surface — keep just
   a hint of colour and let the card stay clean white */
:root[data-theme="light"] .wotd-orb{ opacity:.10; filter:blur(80px); }
:root[data-theme="light"] .wotd-orb.wo3{ display:none; }
:root[data-theme="light"] .wotd-inner{
  background:
    radial-gradient(70% 50% at 4% 0%, rgba(109,74,255,.05), transparent 60%),
    radial-gradient(60% 50% at 100% 100%, rgba(8,145,178,.04), transparent 55%);
}
:root[data-theme="light"] .wotd-spot{ background:radial-gradient(420px circle at var(--mx) var(--my), rgba(109,74,255,.06), transparent 60%); }
:root[data-theme="light"] .wotd-sheen{ display:none; }
:root[data-theme="light"] .wotd-ipa{ color:#0891b2; }
:root[data-theme="light"] .wotd-mark{ background:rgba(124,158,10,.14); color:#5a7a00; box-shadow:inset 0 0 0 1px rgba(124,158,10,.3); }
:root[data-theme="light"] .wotd-eyebrow{ color:#5a7a00; }
:root[data-theme="light"] .wotd-spark{ opacity:.4; }
:root[data-theme="light"] .wotd-lv.is-c1{ color:#8a6508; background:rgba(184,134,11,.1); border-color:rgba(184,134,11,.35); }
:root[data-theme="light"] .wotd-lv.is-c2{ color:#c02c96; background:rgba(214,64,159,.08); border-color:rgba(214,64,159,.35); }
:root[data-theme="light"] .wotd-trc{ background:rgba(109,74,255,.05); border-color:rgba(109,74,255,.22); }
:root[data-theme="light"] .wotd-trc[data-lang="uz"]{ background:rgba(8,145,178,.05); border-color:rgba(8,145,178,.22); }
:root[data-theme="light"] .wotd-trc-word{ color:#6d4aff; }
:root[data-theme="light"] .wotd-trc[data-lang="uz"] .wotd-trc-word{ color:#0891b2; }
:root[data-theme="light"] .wotd-ex-n{ color:#6d4aff; background:rgba(109,74,255,.1); box-shadow:inset 0 0 0 1px rgba(109,74,255,.25); }

/* ---- reduced motion: static, fully visible ---- */
@media (prefers-reduced-motion: reduce){
  .wotd-card{ animation:none; transform:none; }
  .wotd-orb, .wotd-spark, .wotd-eyebrow i, .wotd-say.is-playing{ animation:none; }
  .wotd-card.is-in .wotd-ch,
  .wotd-card.is-in .wotd-meta, .wotd-card.is-in .wotd-def,
  .wotd-card.is-in .wotd-trc, .wotd-card.is-in .wotd-syn,
  .wotd-card.is-in .wotd-ex, .wotd-card.is-in .wotd-foot,
  .wotd-card.is-in .wotd-sheen{ animation:none; }
  .wotd-ex-tr{ transition:none; }
}