/* =====================================================================
   Breedo Market — motion layer
   keyframes · scroll reveal · preloader · page transitions · cursor
   ===================================================================== */

/* ------------------------------ Keyframes ------------------------------- */
@keyframes fadeUp     { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn     { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop        { 0% { opacity: 0; transform: scale(.7); } 60% { transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes navSlide   { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes shimmer    { 100% { transform: translateX(100%); } }
@keyframes floaty     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@keyframes floatySlow { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-18px) rotate(2deg); } }
@keyframes spinSlow   { to { transform: rotate(360deg); } }
@keyframes ripple     { to { transform: scale(2.6); opacity: 0; } }
@keyframes burst      { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2); opacity: 0; } }
@keyframes likePop    { 0% { transform: scale(1); } 45% { transform: scale(1.45) rotate(-8deg); } 100% { transform: scale(1); } }
@keyframes bubbleIn   { from { opacity: 0; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes toastIn    { from { opacity: 0; transform: translateX(60px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes toastOut   { to { opacity: 0; transform: translateX(60px) scale(.92); } }
@keyframes typing     { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes shakeX     { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes drawerIn   { to { opacity: 1; transform: none; } }
@keyframes marquee    { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes meshMove   { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(6%, -5%) scale(1.12); } 66% { transform: translate(-5%, 4%) scale(.94); } 100% { transform: translate(0, 0) scale(1); } }
@keyframes gradientPan{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes pulseRing  { 0% { transform: scale(.85); opacity: .7; } 70% { transform: scale(1.6); opacity: 0; } 100% { opacity: 0; } }
@keyframes barGrow    { from { transform: scaleY(.15); } to { transform: scaleY(1); } }
@keyframes revealMask { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes curtainIn  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes curtainOut { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes logoDraw   { 0% { stroke-dashoffset: 160; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes countUpFade{ from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes zoomBg     { from { transform: scale(1.16); } to { transform: scale(1); } }
@keyframes morph      { 0%,100% { border-radius: 48% 52% 60% 40% / 45% 40% 60% 55%; transform: translate(0,0) scale(1); }
                        33% { border-radius: 60% 40% 42% 58% / 58% 52% 48% 42%; transform: translate(-4%, 5%) scale(1.08); }
                        66% { border-radius: 40% 60% 55% 45% / 40% 58% 42% 60%; transform: translate(5%, -4%) scale(.95); } }
@keyframes nudgeDown  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* ---------------------------- Scroll reveal ----------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .85s var(--e-out), transform .85s var(--e-out), filter .85s var(--e-out);
  filter: blur(6px);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }
[data-reveal="zoom"]  { transform: scale(.92); }
[data-reveal="mask"]  { opacity: 1; filter: none; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--e-out); }
[data-reveal].in { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); }

/* stagger children */
[data-stagger] > * { opacity: 0; transform: translateY(24px); filter: blur(4px); }
[data-stagger].in > * { animation: fadeUp .78s var(--e-out) both; filter: none; }
[data-stagger].in > *:nth-child(1) { animation-delay: .00s; }
[data-stagger].in > *:nth-child(2) { animation-delay: .07s; }
[data-stagger].in > *:nth-child(3) { animation-delay: .14s; }
[data-stagger].in > *:nth-child(4) { animation-delay: .21s; }
[data-stagger].in > *:nth-child(5) { animation-delay: .28s; }
[data-stagger].in > *:nth-child(6) { animation-delay: .35s; }
[data-stagger].in > *:nth-child(7) { animation-delay: .42s; }
[data-stagger].in > *:nth-child(8) { animation-delay: .49s; }
[data-stagger].in > *:nth-child(n+9) { animation-delay: .55s; }

/* split text animation */
.split-line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.12em; }
.split-line > span { display: inline-block; transform: translateY(110%); transition: transform 1s var(--e-out); }
.split.in .split-line > span { transform: none; }
.split.in .split-line:nth-child(2) > span { transition-delay: .1s; }
.split.in .split-line:nth-child(3) > span { transition-delay: .2s; }

/* ------------------------------ Preloader ------------------------------- */
.preloader {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: var(--canvas);
  transition: opacity .6s var(--e-out), visibility .6s;
}
.preloader.done { opacity: 0; visibility: hidden; }
.pre-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.pre-logo { width: 100px; height: 100px; border-radius: 28px; display: grid; place-items: center; background: #fff; position: relative; box-shadow: 0 8px 40px -10px rgba(41,121,255,.35); overflow: hidden; }
.pre-logo::after { content: ''; position: absolute; inset: -3px; border-radius: 32px; border: 2px solid transparent; background: var(--grad) border-box; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: pulseRing 1.8s var(--e-out) infinite; }
.pre-logo img { width: 80px; height: 80px; object-fit: contain; background: transparent; }
.pre-logo svg { width: 36px; height: 36px; stroke: currentColor; }
.pre-logo svg path { stroke-dasharray: 160; animation: logoDraw 1.6s var(--e-out) infinite; }
.pre-name { font-family: 'Outfit', sans-serif; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; font-size: .78rem; color: var(--muted); }
.pre-track { width: 190px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pre-fill { height: 100%; width: 0; background: var(--grad); border-radius: 3px; transition: width .3s var(--e-out); }

/* --------------------------- Page transition ---------------------------- */
.curtain {
  position: fixed; inset: 0; z-index: 950; pointer-events: none;
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.curtain span { background: var(--brand); transform: scaleY(0); transform-origin: bottom; }
.curtain.in span { animation: curtainIn .5s var(--e-in-out) forwards; }
.curtain.out span { transform-origin: top; animation: curtainOut .5s var(--e-in-out) forwards; }
.curtain span:nth-child(1) { animation-delay: 0s; background: #1A2B5F; }
.curtain span:nth-child(2) { animation-delay: .05s; background: #2979FF; }
.curtain span:nth-child(3) { animation-delay: .1s; background: #5C35CC; }
.curtain span:nth-child(4) { animation-delay: .15s; background: #7B2FF7; }
.curtain span:nth-child(5) { animation-delay: .2s; background: #E91E8C; }

/* page entrance — sirf content sections, fixed UI (cursor/curtain/toasts) nahi */
.page-in > section, .page-in > .ticker, .page-in > .wrap, .page-in > .group-cover-wrap {
  animation: fadeIn .6s var(--e-out) both;
}

/* ---------------------------- Custom cursor ----------------------------- */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 990; pointer-events: none;
  border-radius: 50%;
}
.cursor-dot { width: 7px; height: 7px; background: var(--ink); transform: translate(-50%, -50%); }
.cursor-dot, .cursor-ring { opacity: 0; transition: opacity .35s var(--e-out); }
.cursor-ready.cursor-dot, .cursor-ready.cursor-ring { opacity: 1; }
.cursor-ring {
  width: 38px; height: 38px; border: 1.5px solid var(--line-2);
  transform: translate(-50%, -50%);
  transition: width .3s var(--e-out), height .3s var(--e-out), border-color .3s, opacity .3s, background .3s;
}
.cursor-ring.hover { width: 62px; height: 62px; background: var(--glass-2); border-color: transparent; }
.cursor-ring.down { width: 26px; height: 26px; }
@media (hover: none), (max-width: 900px) { .cursor-dot, .cursor-ring { display: none; } }

/* ------------------------------- Marquee -------------------------------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track > * { flex-shrink: 0; }

/* --------------------------- Magnetic buttons --------------------------- */
.magnetic { transition: transform .35s var(--e-out); }

/* ---------------------------- Tilt on hover ----------------------------- */
.tilt { transition: transform .4s var(--e-out); transform-style: preserve-3d; }

/* ------------------------------ Count up -------------------------------- */
.count { font-variant-numeric: tabular-nums; }

/* -------------------------- Image zoom / lightbox ----------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 800; display: grid; place-items: center; padding: 30px;
  background: rgba(14, 13, 11, .88); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--e-out), visibility .35s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(1100px, 92vw); max-height: 86vh; border-radius: var(--r-md); object-fit: contain; transform: scale(.9); transition: transform .5s var(--e-spring); box-shadow: var(--shadow-2); }
.lightbox.open img { transform: none; }
.lightbox .lb-close { position: absolute; top: 24px; right: 24px; color: #fff; }

/* --------------------------- Reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .split-line > span { transform: none !important; }
  .cursor-dot, .cursor-ring, .curtain { display: none !important; }
}