/* Luwy "alive" layer styles. Brand colours only: cocoa #613627, caramel #E19E4E, sprinkle #FCD8A2, cream #F5EADD.
 * Variables are used where the page defines them, with the brand value as the fallback. */

:root {
  --a-ease: cubic-bezier(.22, 1, .36, 1);
  --a-spring: cubic-bezier(.34, 1.56, .64, 1);
  --a-mug: var(--mug, #E19E4E); --a-sprinkle: var(--sprinkle, #FCD8A2); --a-cocoa: var(--cocoa, #613627); --a-cream: var(--white, #F5EADD);
}

/* ------------------------------------------------------------ effects host (also defined in lwy-delight.css; identical) */
.lwy-fx { position: fixed; inset: 0; z-index: 9000; pointer-events: none; overflow: hidden; }
.lwy-spark, .lwy-conf { position: fixed; opacity: 0; will-change: transform, opacity; }
.lwy-spark { border-radius: 50%; }

/* ------------------------------------------------------------ 3D cards and the light that follows you */
.lwy-tiltable { isolation: isolate; transform-style: preserve-3d; transition: transform .6s var(--a-spring), box-shadow .35s var(--a-ease), background-color .2s, border-color .2s; }
.lwy-3d { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px) !important; transition: transform .12s ease-out, box-shadow .35s var(--a-ease), background-color .2s, border-color .2s; box-shadow: 0 14px 26px -16px rgba(61, 33, 24, .4), 0 4px 10px -6px rgba(61, 33, 24, .22); will-change: transform; z-index: 2; }
.lwy-tiltable.lwy-hot:not(.lwy-3d) { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(61, 33, 24, .35); }
.lwy-press { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(.985) !important; transition: transform .08s ease-out; box-shadow: 0 4px 10px -6px rgba(61, 33, 24, .4); }
/* The light sits behind the content (negative z-index inside the card's own stacking context), so text is never veiled. */
.lwy-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s var(--a-ease); z-index: -1;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 214, 160, .34), rgba(255, 214, 160, 0) 64%); }
.lwy-hot > .lwy-glare { opacity: 0; }   /* the cursor-following light was too much: it stays off */
html[data-theme="dark"] .lwy-glare { background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(225, 158, 78, .26), rgba(225, 158, 78, 0) 64%); }


/* ------------------------------------------------------------ chunky, magnetic buttons (the Duolingo press) */
.lwy-magnetic { translate: var(--mgx, 0px) var(--mgy, 0px); transition: transform .14s var(--a-spring), translate .3s var(--a-spring), background-color .18s, box-shadow .3s, opacity .18s; }
.lwy-alive .btn.primary, .lwy-alive .lt-btn-primary { box-shadow: 0 4px 0 rgba(0, 0, 0, .3), 0 14px 24px -12px rgba(61, 33, 24, .5); }
.lwy-alive .btn.primary:active:not(:disabled), .lwy-alive .lt-btn-primary:active:not(:disabled) { transform: translateY(3px) !important; box-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.lwy-alive .btn:not(.primary):not(.quiet):not(.sm), .lwy-alive .lt-btn-soft { box-shadow: 0 3px 0 color-mix(in srgb, var(--line, #B78C6E) 55%, transparent); }
.lwy-alive .btn:not(.primary):not(.quiet):not(.sm):active:not(:disabled), .lwy-alive .lt-btn-soft:active:not(:disabled) { transform: translateY(2px) !important; box-shadow: 0 1px 0 color-mix(in srgb, var(--line, #B78C6E) 55%, transparent); }
.lwy-clip { overflow: hidden; }
.lwy-ripple { position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0); opacity: .9; background: radial-gradient(circle, rgba(255, 238, 210, .6), rgba(255, 238, 210, 0) 65%); animation: lwy-rip .62s var(--a-ease) forwards; }
@keyframes lwy-rip { to { transform: scale(1); opacity: 0; } }

/* ------------------------------------------------------------ charts that light up */
svg[data-vals] { touch-action: pan-y; cursor: crosshair; overflow: visible; }
.lwy-scrub { opacity: 0; transition: opacity .15s; }
.lwy-scrub.on { opacity: 1; }
.lwy-sc-line { stroke: var(--a-mug); stroke-width: 1.5; stroke-dasharray: 3 4; }
.lwy-sc-halo { fill: var(--a-mug); opacity: .28; animation: lwy-halo 1.3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.lwy-sc-core { fill: var(--a-cocoa); stroke: var(--a-sprinkle); stroke-width: 2.5; }
html[data-theme="dark"] .lwy-sc-core { fill: var(--a-mug); stroke: #2B1A12; }
@keyframes lwy-halo { 0%, 100% { transform: scale(.85); opacity: .35; } 50% { transform: scale(1.25); opacity: .15; } }
.lwy-scrubbing path:not(.area):not(.grid) { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--a-mug) 70%, transparent)); }
.lwy-scrubbing circle.dot { opacity: .35; }
.lwy-tip { position: fixed; z-index: 9100; pointer-events: none; transform: translate(-50%, -100%) scale(.9); opacity: 0; transition: opacity .12s, transform .18s var(--a-spring); display: flex; align-items: baseline; gap: 8px; padding: 7px 12px; border-radius: 12px; background: #3d2118; color: #F5EADD; font: 500 12px/1.2 var(--sans, system-ui, sans-serif); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55); white-space: nowrap; }
.lwy-tip.on { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.lwy-tip b { font: 700 16px/1 var(--sans, system-ui, sans-serif); color: #FCD8A2; }
.lwy-tip em { font: 600 10px/1 var(--sans, system-ui, sans-serif); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #E19E4E; }

/* bars and meters wake up under the pointer */
.meter .bar > i, .lt-bar-fill { transition: width .9s var(--a-ease), filter .25s, box-shadow .3s; }
@media (hover: hover) and (pointer: fine) {
  .meters:hover .meter:not(:hover) { opacity: .55; }
  .meter { transition: opacity .25s; }
  .meter:hover .bar > i { filter: brightness(1.12); box-shadow: 0 0 14px color-mix(in srgb, var(--a-mug) 75%, transparent); }
  .lt-bar-top:hover + .lt-bar-track .lt-bar-fill, .lt-bar-track:hover .lt-bar-fill { filter: brightness(1.15); box-shadow: 0 0 14px color-mix(in srgb, var(--a-mug) 75%, transparent); }
}

/* ------------------------------------------------------------ the Luwy mark, alive */
.lwy-m { position: relative; display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 15px; background: #3d2118; color: #F5EADD; font: 600 27px/1 var(--serif, Georgia, serif); box-shadow: 0 6px 14px -6px rgba(61, 33, 24, .6); }
.lwy-m b { font-weight: 600; transform: translateX(-3px); }
.lwy-m i { position: absolute; width: 6.5px; height: 6.5px; border-radius: 50%; background: #E19E4E; right: 11px; bottom: 11px; }
.lwy-m-cheer { animation: lwy-m-jump .95s var(--a-spring) 2; }
.lwy-m-cheer i { animation: lwy-m-dot .95s ease-in-out 2; }
.lwy-m-calm { animation: lwy-m-breathe 3.6s ease-in-out infinite; }
@keyframes lwy-m-jump { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-9px) rotate(-7deg); } 55% { transform: translateY(0) rotate(4deg) scale(1.06, .94); } 75% { transform: translateY(-3px) rotate(0); } }
@keyframes lwy-m-dot { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.9); box-shadow: 0 0 0 5px rgba(225, 158, 78, .3); } }
@keyframes lwy-m-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.lwy-cele-ico.is-mark { background: none; width: auto; height: auto; }
.lwy-cheer { display: flex; align-items: center; gap: 12px; margin: 0 auto 18px; max-width: 520px; padding: 12px 16px; border-radius: 18px; text-align: left; background: color-mix(in srgb, var(--a-sprinkle) 45%, var(--a-cream)); color: var(--ink, #613627); animation: lwy-cheer-in .7s var(--a-spring) backwards; }
.lwy-cheer span { font-size: 15px; line-height: 1.4; }
@keyframes lwy-cheer-in { from { opacity: 0; transform: translateY(-14px) scale(.94); } }

/* ------------------------------------------------------------ the demo conversation plays itself */
.lwy-wait { opacity: 0; transform: translateY(10px) scale(.97); }
.lwy-in { animation: lwy-demo-in .55s var(--a-spring) backwards; }
.lwy-wait, .lwy-in, .lwy-typing-bubble { transition: opacity .3s, transform .4s var(--a-spring); }
.lwy-typing-bubble { opacity: 1 !important; transform: none !important; color: transparent !important; }
.lwy-typing-bubble > * { visibility: hidden; }
@keyframes lwy-demo-in { from { opacity: 0; transform: translateY(10px) scale(.94); } }
.lwy-dots { position: absolute; left: 16px; top: 50%; margin-top: -4px; display: none; gap: 5px; }
.lwy-typing-bubble .lwy-dots { display: inline-flex; }
.lwy-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--a-cocoa); opacity: .5; animation: lwy-dot 1s ease-in-out infinite; }
.lwy-dots i:nth-child(2) { animation-delay: .15s; } .lwy-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes lwy-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }
.lwy-replay { display: block; margin: 10px auto 0; border: 0; background: transparent; color: var(--muted, #7a5a4a); font: 600 13px/1 var(--sans, system-ui, sans-serif); padding: 8px 14px; border-radius: 99px; cursor: pointer; }
.lwy-replay:hover { background: color-mix(in srgb, var(--line, #B78C6E) 20%, transparent); color: var(--ink, #613627); }

/* ------------------------------------------------------------ ambient depth and the scroll thread (marketing, sign up, test) */
.lwy-blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.lwy-blobs i { position: absolute; width: min(56vw, 560px); height: min(56vw, 560px); border-radius: 50%; filter: blur(70px); opacity: .42;
  translate: calc((var(--bx, .5) - .5) * var(--k) * 1px) calc((var(--by, .5) - .5) * var(--k) * 1px - var(--bs, 0) * var(--sk) * 1px); animation: lwy-drift 22s ease-in-out infinite alternate; }
.lwy-blobs i:nth-child(1) { --k: 70; --sk: .05; left: -12%; top: -8%; background: radial-gradient(circle, var(--a-sprinkle), transparent 70%); }
.lwy-blobs i:nth-child(2) { --k: -50; --sk: .09; right: -14%; top: 28%; background: radial-gradient(circle, var(--a-mug), transparent 70%); opacity: .26; animation-duration: 28s; }
.lwy-blobs i:nth-child(3) { --k: 40; --sk: .03; left: 22%; bottom: -22%; background: radial-gradient(circle, color-mix(in srgb, var(--a-cocoa) 40%, var(--a-sprinkle)), transparent 70%); opacity: .2; animation-duration: 34s; }
@keyframes lwy-drift { to { transform: translate3d(30px, 22px, 0) scale(1.08); } }
html[data-theme="dark"] .lwy-blobs i { opacity: .2; }
.lwy-scrollbar { position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 9500; pointer-events: none; background: var(--a-mug); transform-origin: left; transform: scaleX(var(--sp, 0)); box-shadow: 0 0 10px rgba(225, 158, 78, .6); }

/* ------------------------------------------------------------ forms that answer back */
.lwy-alive input.field { transition: border-color .2s, box-shadow .25s var(--a-ease), background-color .2s; }
.lwy-alive input.field[data-ok="1"] { border-color: var(--a-mug); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a-mug) 24%, transparent); padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E19E4E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 20px; }
.lwy-alive input.field.lwy-nope { animation: lwy-nope .42s var(--a-ease); border-color: var(--danger, #B5473A); }
@keyframes lwy-nope { 0%, 100% { translate: 0; } 20% { translate: -7px; } 45% { translate: 6px; } 70% { translate: -4px; } 88% { translate: 2px; } }
.lwy-pw { display: flex; align-items: center; gap: 10px; margin-top: 8px; min-height: 18px; }
.lwy-pw span { display: flex; gap: 4px; flex: 1; max-width: 180px; }
.lwy-pw i { flex: 1; height: 5px; border-radius: 4px; background: color-mix(in srgb, var(--line, #B78C6E) 35%, transparent); transition: background-color .3s, transform .3s var(--a-spring); }
.lwy-pw em { font: 600 12px/1 var(--sans, system-ui, sans-serif); font-style: normal; color: var(--muted, #7a5a4a); }
.lwy-pw[data-s="1"] i:nth-child(1) { background: var(--danger, #B5473A); }
.lwy-pw[data-s="2"] i:nth-child(-n+2) { background: #D9A05B; }
.lwy-pw[data-s="3"] i:nth-child(-n+3), .lwy-pw[data-s="4"] i { background: var(--a-mug); }
.lwy-pw[data-s="4"] i { transform: scaleY(1.5); }
.lwy-pulse { animation: lwy-pulse .5s var(--a-spring); }
@keyframes lwy-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.025); } 100% { transform: scale(1); } }

/* ------------------------------------------------------------ Simulator: health that reacts */
#hp.lwy-hp-up { animation: lwy-hp-up .9s var(--a-ease); }
#hp.lwy-hp-up .hp-bar { box-shadow: 0 0 0 3px color-mix(in srgb, var(--a-mug) 35%, transparent), 0 0 18px color-mix(in srgb, var(--a-mug) 55%, transparent); transition: box-shadow .9s; }
#hp.lwy-hp-down { animation: lwy-hp-down .5s var(--a-ease); }
@keyframes lwy-hp-up { 0% { transform: scale(1); } 30% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes lwy-hp-down { 0%, 100% { translate: 0; } 25% { translate: -4px; } 60% { translate: 3px; } }

/* ------------------------------------------------------------ the free 60-second test */
.lwy-alive .lt-mic-core { animation: lwy-mic 3.2s ease-in-out infinite; }
.lwy-alive .lt-mic::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 2px solid var(--a-mug); opacity: 0; animation: lwy-mic-ring 3.2s ease-out infinite; pointer-events: none; }
@keyframes lwy-mic { 0%, 100% { box-shadow: 0 10px 26px rgba(97, 54, 39, .35); } 50% { box-shadow: 0 14px 34px rgba(97, 54, 39, .5), 0 0 0 10px rgba(225, 158, 78, .16); } }
@keyframes lwy-mic-ring { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } }

/* ------------------------------------------------------------ reduce motion: everything stands down */
@media (prefers-reduced-motion: reduce) {
  .lwy-3d, .lwy-press { transform: none !important; }
  .lwy-magnetic { translate: none; }
  .lwy-ripple, .lwy-m-cheer, .lwy-m-cheer i, .lwy-m-calm, .lwy-sc-halo, .lwy-in, .lwy-dots i, .lwy-cheer, .lwy-blobs i, .lwy-pulse, #hp.lwy-hp-up, #hp.lwy-hp-down, .lwy-alive .lt-mic-core, .lwy-alive .lt-mic::before, .lwy-alive input.field.lwy-nope { animation: none !important; }
  .lwy-wait { opacity: 1; transform: none; }
  .lwy-scrollbar { transition: none; }
}

/* Entering a scene: three dots that rise, so the short wait feels like a beat and not a stall. */
.lwy-enter{display:flex;gap:8px;justify-content:center;margin:28px 0}
.lwy-enter i{width:9px;height:9px;border-radius:50%;background:var(--mug,#E19E4E);animation:lwy-enter 1s ease-in-out infinite}
.lwy-enter i:nth-child(2){animation-delay:.15s}.lwy-enter i:nth-child(3){animation-delay:.3s}
@keyframes lwy-enter{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-8px);opacity:1}}
@media (prefers-reduced-motion:reduce){.lwy-enter i{animation:none;opacity:.8}}