/* ============================================================
   LIKHIT PENS — ANIMATION LIBRARY
   Source: docs/animations.md — exact specs, do not deviate
   ============================================================ */

/* ============================================================
   ANIMATION #1 — INK DROP HERO REVEAL
   ============================================================ */
@keyframes inkDropFall {
  0%   { transform: translateX(-50%) translateY(-40px); opacity: 1; }
  100% { transform: translateX(-50%) translateY(calc(60vh)); opacity: 1; }
}

@keyframes inkDropMorph {
  0%   { rx: 8; ry: 14; }
  100% { rx: 30; ry: 6; }
}

@keyframes splashParticle {
  0%   { transform: scale(0) translate(0, 0); opacity: 1; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes splashRipple {
  0%   { width: 0; height: 0; opacity: 0.8; }
  100% { width: 240px; height: 240px; opacity: 0; }
}

@keyframes logoSlideLeft {
  from { transform: translateX(-60px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

@keyframes logoSlideRight {
  from { transform: translateX(60px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes logoFlash {
  0%   { box-shadow: 0 0 0 rgba(201,168,76,0); }
  40%  { box-shadow: 0 0 60px rgba(201,168,76,0.8); }
  100% { box-shadow: 0 0 0 rgba(201,168,76,0); }
}

@keyframes letterFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   ANIMATION #2 — CURSOR NIB TRAIL (CSS part)
   ============================================================ */
.cursor-nib {
  position: fixed;
  pointer-events: none;
  z-index: var(--z-cursor);
  width: 20px;
  height: 20px;
  opacity: 0;
  transition: opacity 0.3s;
}

.cursor-dot {
  position: fixed;
  pointer-events: none;
  z-index: var(--z-cursor);
  width: 6px;
  height: 6px;
  background: var(--color-antique-gold);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.1s;
}

/* ============================================================
   ANIMATION #5 — INK BLOB (filter section)
   ============================================================ */
.filter-blob {
  position: absolute;
  width: 200px;
  height: 80px;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: blobMorph 8s ease-in-out infinite;
  filter: blur(30px);
  opacity: 0.15;
  transition: background-color 0.3s, transform 0.3s;
  pointer-events: none;
}

@keyframes blobMorph {
  0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50%  { border-radius: 40% 60% 60% 30% / 30% 40% 60% 40%; }
  75%  { border-radius: 70% 30% 40% 60% / 40% 50% 60% 30%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

/* ============================================================
   ANIMATION #9 — PEN FLIES TO CART (CSS only parts)
   ============================================================ */
@keyframes cartPulse {
  0%   { transform: scale(1); filter: none; }
  40%  { transform: scale(1.4); filter: drop-shadow(0 0 8px rgba(201,168,76,0.8)); }
  100% { transform: scale(1); filter: none; }
}

.cart-icon-pulse {
  animation: cartPulse 0.4s ease-out;
}

@keyframes badgeBounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* ============================================================
   ANIMATION #11 — NAV PEN-STROKE UNDERLINE
   ============================================================ */
.nav-link {
  position: relative;
  text-decoration: none;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 1.5px;
  background: linear-gradient(90deg, var(--color-antique-gold), var(--color-light-gold));
  transition: width 0.3s var(--ease-pen-draw);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-link.active::after {
  transition: none;
}

/* ============================================================
   ANIMATION #12 — BUTTON LIQUID FILL
   ============================================================ */
.btn-primary {
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: color 0.2s 0.2s;
}

.btn-primary::before {
  content: '';
  position: absolute;
  bottom: -100%;
  left: -10%;
  width: 120%;
  height: 120%;
  background: var(--color-ink-black);
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  transition: bottom 0.4s var(--ease-smooth);
  z-index: -1;
}

.btn-primary:hover::before {
  bottom: -5%;
}

.btn-primary:hover {
  color: var(--color-antique-gold) !important;
}

/* ============================================================
   ANIMATION #15 — INPUT INK-DRAW FOCUS
   POLISH #6 — High-end form inputs: fully transparent, bottom border only,
               no browser outline ever, animated gold line, floating label
   ============================================================ */
.form-group {
  position: relative;
  margin-bottom: var(--space-6);
}

/* POLISH #6: completely transparent field, bottom border only */
.form-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(59, 31, 10, 0.25);
  padding: var(--input-padding-y) 0;
  width: 100%;
  outline: none !important;        /* kill browser focus ring */
  box-shadow: none !important;     /* kill browser glow (Safari) */
  -webkit-appearance: none;
  font-family: var(--font-body);
  font-size: var(--input-font-size);
  color: var(--color-deep-brown);
  transition: border-color 0.3s;
}

.form-input.dark-bg {
  color: rgba(250, 246, 238, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

/* Animated gold line draws left-to-right on focus */
.form-input-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 1.5px;
  background: linear-gradient(90deg, var(--color-antique-gold), var(--color-light-gold));
  transition: width 0.4s var(--ease-pen-draw);
  pointer-events: none;
}

.form-input:focus ~ .form-input-line {
  width: 100%;
}

/* Floating label: starts inside the field, lifts above on focus/filled */
.form-label {
  position: absolute;
  top: 12px;
  left: 0;
  transition: transform 0.28s var(--ease-smooth), font-size 0.28s var(--ease-smooth), color 0.28s var(--ease-smooth), letter-spacing 0.28s var(--ease-smooth);
  pointer-events: none;
  color: var(--input-label-color);
  font-size: var(--text-base);
  font-family: var(--font-body);
  font-weight: var(--weight-light);
}

.form-input:focus ~ .form-label,
.form-input:not(:placeholder-shown) ~ .form-label,
.form-input.filled ~ .form-label {
  transform: translateY(-22px);
  font-size: 10px;
  color: var(--color-antique-gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
}

/* Dark background variants */
.form-input.dark-bg ~ .form-label {
  color: rgba(250, 246, 238, 0.4);
}

.form-input.dark-bg:focus ~ .form-label,
.form-input.dark-bg:not(:placeholder-shown) ~ .form-label {
  color: var(--color-antique-gold);
}

.form-select {
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--input-border-color);
  padding: var(--input-padding-y) 0;
  width: 100%;
  outline: none;
  font-family: var(--font-body);
  font-size: var(--input-font-size);
  color: var(--color-deep-brown);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.form-textarea {
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--input-border-color);
  padding: var(--input-padding-y) 0;
  width: 100%;
  outline: none;
  font-family: var(--font-body);
  font-size: var(--input-font-size);
  color: var(--color-deep-brown);
  resize: vertical;
  min-height: 100px;
  transition: border-color 0.3s;
}

.form-error {
  font-size: var(--text-xs);
  color: var(--color-error);
  margin-top: var(--space-1);
  display: none;
}

.form-group.has-error .form-error { display: block; }
.form-group.has-error .form-input { border-bottom-color: var(--color-error); }

/* ============================================================
   ANIMATION #16 — SECTION STAGGER FADE-IN
   ============================================================ */
[data-animate] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s var(--ease-enter), transform 0.6s var(--ease-enter);
}

[data-animate].animate-in {
  opacity: 1;
  transform: translateY(0);
}

[data-animate-left] {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s var(--ease-enter), transform 0.6s var(--ease-enter);
}

[data-animate-left].animate-in {
  opacity: 1;
  transform: translateX(0);
}

[data-animate-right] {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s var(--ease-enter), transform 0.6s var(--ease-enter);
}

[data-animate-right].animate-in {
  opacity: 1;
  transform: translateX(0);
}

[data-animate-scale] {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s var(--ease-enter), transform 0.6s var(--ease-enter);
}

[data-animate-scale].animate-in {
  opacity: 1;
  transform: scale(1);
}

/* ============================================================
   ANIMATION #17 — CART BADGE BOUNCE
   ============================================================ */
@keyframes badgeCount {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  70%  { transform: scale(0.85); }
  100% { transform: scale(1); }
}

.cart-badge-animate {
  animation: badgeCount 0.4s var(--ease-elastic);
}

/* ============================================================
   ANIMATION #18 — WAX SEAL SPIN
   ============================================================ */
.wax-seal:hover {
  animation: waxSpin 0.6s ease-in-out;
}

@keyframes waxSpin {
  from { transform: rotate(15deg); }
  to   { transform: rotate(375deg); }
}

/* ============================================================
   ANIMATION #19 — TAGLINE SVG WRITE (CSS part)
   ============================================================ */
.tagline-svg path {
  stroke-dashoffset: var(--path-length, 1000);
  stroke-dasharray: var(--path-length, 1000);
  transition: stroke-dashoffset 0.8s var(--ease-pen-draw);
}

.tagline-svg.reveal path {
  stroke-dashoffset: 0;
}

/* ============================================================
   ANIMATION #20 — SCROLL INDICATOR BOUNCE
   ============================================================ */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%       { transform: translateY(10px); opacity: 0.6; }
}

.scroll-indicator {
  animation: scrollBounce 1.5s ease-in-out infinite;
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
@keyframes toastSlideIn {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes toastSlideOut {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(120%); opacity: 0; }
}

.toast-enter { animation: toastSlideIn 0.35s var(--ease-enter) forwards; }
.toast-exit  { animation: toastSlideOut 0.3s var(--ease-exit) forwards; }

/* ============================================================
   GOLD DUST PARTICLES (Limited Edition page)
   ============================================================ */
@keyframes floatParticle {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.3; }
  90%  { opacity: 0.2; }
  100% { transform: translateY(-100px) translateX(20px); opacity: 0; }
}

.gold-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--color-antique-gold);
  border-radius: 50%;
  animation: floatParticle linear infinite;
  opacity: 0;
}

/* ============================================================
   GRID TRANSITION (Animation #5 — filter morphing)
   ============================================================ */
.product-card.grid-exiting {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.15s, transform 0.15s;
}

.product-card.grid-entering {
  animation: cardFlipIn 0.3s var(--ease-enter) both;
}

@keyframes cardFlipIn {
  from { opacity: 0; transform: rotateY(90deg) translateY(10px); }
  to   { opacity: 1; transform: rotateY(0) translateY(0); }
}

/* ============================================================
   CONFIRMATION CONFETTI
   ============================================================ */
@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.confetti-piece {
  position: fixed;
  width: 8px;
  height: 8px;
  animation: confettiFall 3s ease-in forwards;
  pointer-events: none;
  z-index: var(--z-overlay);
}

/* ============================================================
   LOADING SPINNER
   ============================================================ */
@keyframes spinRing {
  to { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(201, 168, 76, 0.3);
  border-top-color: var(--color-antique-gold);
  border-radius: 50%;
  animation: spinRing 0.7s linear infinite;
  vertical-align: middle;
}

/* ============================================================
   ACTIVE PULSE (tracking timeline current step)
   ============================================================ */
@keyframes stepPulse {
  0%   { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(201, 168, 76, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0); }
}

.tracking-step.active .step-node {
  animation: stepPulse 2s ease-out infinite;
}