/* ─── TellyU Visual Polish Stylesheet ──────────────────────────────────────── */

/* ── 1. Custom cursor ─────────────────────────────────────────────────────── */
html.tlyu-custom-cursor,
html.tlyu-custom-cursor * { cursor: none !important; }

#tlyu-cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2563FF;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-200px, -200px);
  margin: -4px 0 0 -4px;
  transition: background 150ms;
  will-change: transform;
}

#tlyu-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(37, 99, 255, 0.55);
  pointer-events: none;
  z-index: 999998;
  transform: translate(-200px, -200px);
  margin: -17px 0 0 -17px;
  transition: border-color 200ms, transform 60ms linear, opacity 200ms;
  will-change: transform;
  mix-blend-mode: multiply;
}

#tlyu-cursor-ring.tlyu-ring-hover {
  border-color: rgba(0, 182, 214, 0.75);
  background: rgba(0, 182, 214, 0.06);
}

/* ── 2. Click ripple ──────────────────────────────────────────────────────── */
.tlyu-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  animation: tlyuRipple 520ms ease-out forwards;
  z-index: 0;
}

@keyframes tlyuRipple {
  from { opacity: 0.7; transform: scale(0); }
  to   { opacity: 0;   transform: scale(1); }
}

/* Dark buttons get a lighter ripple */
button[style*="background: rgb(37"],
button[style*="background:#2563FF"],
button[style*="background: #2563FF"] {
  overflow: hidden;
}

/* ── 3. Tab / section transition ─────────────────────────────────────────── */
.tlyu-tab-enter {
  opacity: 0;
  transform: translateY(10px);
}
.tlyu-tab-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 320ms ease, transform 320ms ease;
}

/* ── 4. Scroll reveal (opt-in via .reveal or data-reveal attribute) ───────── */
[data-reveal],
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 480ms ease, transform 480ms ease;
}

[data-reveal].tlyu-revealed,
.reveal.tlyu-revealed {
  opacity: 1;
  transform: none;
}

/* ── 5. Smooth hover lift for cards (progressive enhancement) ─────────────── */
[data-tilt],
.shop-card {
  transition: transform 80ms linear, box-shadow 200ms ease !important;
  will-change: transform;
}

/* ── 6. Smooth button transitions (catch-all) ─────────────────────────────── */
button, [role="button"], a[href] {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity;
  transition-duration: 150ms;
  transition-timing-function: ease;
}

/* ── 7. Page-level smooth scroll ─────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}