/*
 * Local runtime styles for the static recreation.
 * site.css is the reference site's compiled stylesheet (unchanged apart from removing the Google Fonts @import).
 * This file adds what the original React/framer-motion runtime did in JavaScript: looping animations,
 * pre-reveal states, keyboard focus for the hover dropdown, and the local demo notices.
 */

@property --bx { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --by { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --br { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---------- elements waiting for their reveal (set by site.js) ---------- */
html.motion [data-m][data-from*="opacity: 0"]:not([data-m-ready]),
html.motion [data-m][data-from*="opacity:0"]:not([data-m-ready]) { opacity: 0; }

/* ---------- floating blurred orbs (framer: x/y/scale keyframes, easeInOut, infinite) ---------- */
@keyframes mirae-blob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(var(--blob-x), var(--blob-y)) scale(var(--blob-s)); }
}
html.motion [data-loop="blob"] { animation: mirae-blob var(--blob-d, 10s) ease-in-out infinite; }

/* ---------- Blossom component: in-view fade/scale + gentle drift ---------- */
@keyframes mirae-bx { 0%, 100% { --bx: 0px; } 50% { --bx: 6px; } }
@keyframes mirae-by { 0%, 100% { --by: 0px; } 50% { --by: -12px; } }
@keyframes mirae-br { 0%, 100% { --br: 0deg; } 50% { --br: 8deg; } }
[data-loop="blossom"] {
  opacity: 1;
  transform: translate(var(--bx), var(--by)) rotate(var(--br));
}
html.motion [data-loop="blossom"] {
  --dur: 8s; --delay: 0s;
  animation:
    mirae-by var(--dur) ease-in-out var(--delay) infinite,
    mirae-bx calc(var(--dur) + 1s) ease-in-out var(--delay) infinite,
    mirae-br calc(var(--dur) + 1.5s) ease-in-out var(--delay) infinite;
  transition: opacity .5s ease var(--delay), scale .5s ease var(--delay);
}
html.motion [data-loop="blossom"]:not(.is-in) { opacity: 0; scale: .9; }

/* ---------- falling petals (home hero: straight fall; about hero: drift + spin) ---------- */
@keyframes mirae-petal {
  0% { transform: translateY(-100px); opacity: 0; }
  33.333% { opacity: 1; }
  66.667% { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}
@keyframes mirae-petal-drift {
  0% { transform: translate(0, -100px) rotate(0deg); opacity: 0; }
  33.333% { opacity: 1; }
  66.667% { opacity: 1; }
  100% { transform: translate(var(--px, 0px), calc(100vh + 100px)) rotate(360deg); opacity: 0; }
}
[data-loop="petal"] { opacity: 0; top: 0; }
html.motion [data-loop="petal"] { animation: mirae-petal var(--dur, 15s) linear var(--delay, 0s) infinite both; }
html.motion [data-loop="petal"][data-drift] { animation-name: mirae-petal-drift; }

/* ---------- scroll indicator bounce ---------- */
@keyframes mirae-bounce-10 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes mirae-bounce-12 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } }
html.motion [data-loop="bounce"] { animation: mirae-bounce-10 2s ease-in-out infinite; }
html.motion [data-loop="bounce"] [data-loop="bounce"] { animation-name: mirae-bounce-12; }

/* ---------- hover dropdown also opens for keyboard users ---------- */
nav .group:focus-within > .invisible { visibility: visible; opacity: 1; }

/* ---------- visible focus for interactive elements without their own ring ---------- */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, select:focus-visible {
  outline: 2px solid #2f63cf;
  outline-offset: 3px;
  border-radius: 6px;
}
input:focus-visible, textarea:focus-visible { outline: 2px solid #2f63cf; outline-offset: 1px; }

/* ---------- height-auto disclosure panels (mobile menu, filter panels) ---------- */
[data-collapse] { overflow: hidden; transition: height .3s ease, opacity .3s ease; }

/* ---------- popup / lightbox fades ---------- */
[data-popup], [data-lightbox] { transition: opacity .25s ease; }
[data-popup] [role="dialog"], [data-lightbox] [data-lightbox-panel] { transition: opacity .25s ease, transform .25s ease; }
[data-popup].is-closed, [data-lightbox].is-closed { opacity: 0; }
[data-popup].is-closed [role="dialog"] { opacity: 0; transform: translateY(24px) scale(.96); }
[data-lightbox].is-closed [data-lightbox-panel] { opacity: 0; transform: translateY(20px) scale(.96); }

/* ---------- local demo toast (replaces the site's sonner toaster) ---------- */
.local-toast {
  position: fixed; right: 16px; bottom: 16px; z-index: 120; max-width: 360px;
  background: #fff; color: #0f172a; border: 1px solid #e2e8f0; border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1); padding: 16px; font: 500 13px/1.4 var(--font-sans);
  transition: opacity .3s ease, transform .3s ease;
}
.local-toast.is-hidden { opacity: 0; transform: translateY(8px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  [data-loop] { animation: none !important; }
  [data-loop="petal"] { display: none; }
}