/**
 * Tech Oasis logo animation — plain CSS, no framework dependency.
 * Pair with LogoMark.tsx (React) or the markup in demo.html (plain HTML).
 *
 * Structure the animation expects, on an <svg class="lm-anim">:
 *   .lm-outline  — one <polygon> per band, unfilled, for the "drawn" outline
 *   .lm-piece    — one <polygon> per band (the filled band itself), each
 *                  with --dx / --dy / --i custom properties set inline
 *   .lm-cube     — a <g> wrapping the cube's 3 polygons
 *   .lm-glow     — (optional) a <circle> behind the cube
 *   .lm-sheen    — (optional) a <rect>, clipped to the bands, for the sweep
 */

.lm-anim .lm-outline {
  fill: none;
  stroke: #C4A649;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: lm-draw 1.3s ease-out forwards, lm-fade-out 0.6s ease-in 1.5s forwards;
}
.lm-anim .lm-piece {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: lm-piece-in 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.7s + var(--i, 0) * 0.16s);
}
.lm-anim .lm-cube {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: lm-cube-drop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s forwards,
    lm-float 4s ease-in-out 2.6s infinite;
}
.lm-anim .lm-glow {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: lm-glow 3.2s ease-in-out 2s infinite;
}
.lm-anim .lm-sheen {
  animation: lm-sheen 6s ease-in-out 3s infinite;
}

@keyframes lm-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes lm-fade-out {
  to { opacity: 0; }
}
@keyframes lm-piece-in {
  from { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes lm-cube-drop {
  0% { opacity: 0; transform: translateY(-140px) scale(0.5) rotate(-12deg); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes lm-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes lm-glow {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 0.85; transform: scale(1.15); }
}
@keyframes lm-sheen {
  0% { transform: translateX(-320px); }
  40%, 100% { transform: translateX(760px); }
}

/* ------------------------------------------------------------------
   Optional decorative surroundings, used behind the mark on a full-bleed
   dark panel (e.g. a login screen's brand side). Independent of the mark
   itself — drop these classes on any container/elements you like.
   ------------------------------------------------------------------ */
.brand-hex {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zM28 100L0 84V66M28 100l28-16V66' fill='none' stroke='%23ffffff' stroke-opacity='.07'/%3E%3C/svg%3E");
  animation: brand-hex-drift 24s linear infinite;
}
@keyframes brand-hex-drift {
  to { background-position: 56px 100px; }
}
.brand-ring {
  animation: brand-ring 5s ease-out infinite;
}
@keyframes brand-ring {
  0% { transform: scale(0.6); opacity: 0.35; }
  100% { transform: scale(1.5); opacity: 0; }
}
.brand-reveal {
  opacity: 0;
  animation: brand-reveal 0.9s ease-out forwards;
  animation-delay: var(--d, 0s);
}
@keyframes brand-reveal {
  from { opacity: 0; transform: translateY(12px); letter-spacing: 0.3em; }
  to { opacity: 1; transform: none; }
}
.splash-fade {
  animation: splash-fade 0.4s ease-out both;
}
@keyframes splash-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lm-anim .lm-outline { display: none; }
  .lm-anim .lm-piece,
  .lm-anim .lm-cube,
  .lm-anim .lm-glow,
  .lm-anim .lm-sheen,
  .brand-hex,
  .brand-ring,
  .brand-reveal {
    animation: none !important;
  }
  .lm-anim .lm-piece,
  .lm-anim .lm-cube,
  .brand-reveal { opacity: 1; }
  .lm-anim .lm-glow, .lm-anim .lm-sheen { opacity: 0; }
}