/* ============================================================
   polish.css — Prospering Clarity "handcrafted sanctuary" layer
   Add-on only. Does NOT touch colors, fonts, layout, or imagery.
   Include AFTER style.css and shop.css on every page.
   ============================================================ */

:root {
  --pc-ease: cubic-bezier(.22,.61,.36,1);
  --pc-dur-fast: 450ms;
  --pc-dur: 650ms;
  --pc-dur-slow: 900ms;
  --pc-gold: #c9a96e;
  --pc-gold-bright: #f0e6c8;
}

/* Respect users who don't want motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ------------------------------------------------------------
   1. GLOBAL TRANSITIONS — nothing snaps into place
   ------------------------------------------------------------ */
a, button, .btn, .welcome-cta, .story-link, .featured-item,
.tarot-card-wrap, .value-icon, input, textarea, select {
  transition: transform var(--pc-dur) var(--pc-ease),
              box-shadow var(--pc-dur) var(--pc-ease),
              background var(--pc-dur-fast) var(--pc-ease),
              color var(--pc-dur-fast) var(--pc-ease),
              border-color var(--pc-dur-fast) var(--pc-ease),
              opacity var(--pc-dur) var(--pc-ease),
              filter var(--pc-dur) var(--pc-ease);
}

/* ------------------------------------------------------------
   2. HERO VIDEO — slow zoom, vignette, soft entrance
   ------------------------------------------------------------ */
.home-video { position: relative; overflow: hidden; }
.home-video-player {
  animation: pc-hero-zoom 24s ease-in-out infinite alternate;
  will-change: transform;
  opacity: 0;
  animation: pc-hero-fade-in 1.4s var(--pc-ease) forwards,
             pc-hero-zoom 26s ease-in-out infinite alternate 1.4s;
}
.home-video::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 55%,
    rgba(5,15,6,0.55) 100%);
}
@keyframes pc-hero-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pc-hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.03); }
}
@media (max-width: 768px) {
  .home-video-player { animation-duration: 30s; }
}

/* ------------------------------------------------------------
   3. LOGO — imperceptible metallic shimmer, every ~18s
   ------------------------------------------------------------ */
.logo-text {
  color: var(--pc-gold); /* fallback if background-clip:text unsupported */
  background-image: linear-gradient(
    100deg,
    var(--pc-gold) 40%,
    var(--pc-gold-bright) 50%,
    var(--pc-gold) 60%
  );
  background-size: 250% 100%;
  background-position: 200% 0;
  background-clip: text;
  -webkit-background-clip: text;
  animation: pc-logo-shimmer 18s ease-in-out infinite;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .logo-text {
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
@keyframes pc-logo-shimmer {
  0%, 92%, 100% { background-position: 200% 0; }
  96% { background-position: -50% 0; }
}

/* ------------------------------------------------------------
   4. DECORATIVE STARS (✦) — gentle breathing pulse
   ------------------------------------------------------------ */
.welcome-ornament, .email-ornament, .cards-header h2,
.story-ornament, .tarot-ornament {
  animation: pc-breathe 4.5s ease-in-out infinite;
}
@keyframes pc-breathe {
  0%, 100% { opacity: 1;   filter: drop-shadow(0 0 0 rgba(201,169,110,0)); }
  50%      { opacity: .78; filter: drop-shadow(0 0 6px rgba(201,169,110,.35)); }
}

/* ------------------------------------------------------------
   5. BUTTONS — premium hover + click feedback
   Applies to: .btn (admin/site buttons), .welcome-cta,
   .story-link, .subscribe-row button, header links
   ------------------------------------------------------------ */
.btn, .welcome-cta, .subscribe-row button {
  position: relative;
  transform: translateY(0);
}
.btn:hover, .welcome-cta:hover, .subscribe-row button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18), 0 0 0 1px rgba(201,169,110,.35);
}
.btn:active, .welcome-cta:active, .subscribe-row button:active,
.story-link:active {
  transform: translateY(0) scale(.97);
  transition-duration: 120ms;
}
.story-link { display: inline-block; }
.story-link:hover { letter-spacing: 0.18em; }

/* Gold-bordered CTAs get a slight glow instead of solid shadow */
.welcome-cta:hover, .subscribe-row button:hover {
  box-shadow: 0 0 0 1px var(--pc-gold), 0 8px 22px rgba(201,169,110,.25);
}

/* ------------------------------------------------------------
   6. TAROT CARDS — feel physical: tilt, lift, catch light
   ------------------------------------------------------------ */
.tarot-card-wrap { transform-style: preserve-3d; }
.tarot-card-wrap:hover .tarot-card:not(.flipped) {
  transform: rotateY(0deg) rotateX(2deg) rotateZ(-1.5deg) translateY(-6px) scale(1.015);
}
.tarot-card-wrap:hover .tarot-face {
  box-shadow: 0 18px 34px rgba(0,0,0,0.45);
}
/* gemstone / gold trim catching light on hover */
.tarot-card-wrap:hover .tarot-front::after,
.tarot-card-wrap:hover .tarot-back::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.10) 50%, transparent 60%);
  background-size: 250% 250%;
  animation: pc-card-shine 1.1s var(--pc-ease) both;
  pointer-events: none;
}
@keyframes pc-card-shine {
  from { background-position: 200% 200%; }
  to   { background-position: -50% -50%; }
}
/* mobile tap: slight scale before flip */
@media (max-width: 768px) {
  .tarot-card-wrap:active .tarot-card { transform: scale(.97); }
}

/* ------------------------------------------------------------
   7. PRODUCT / CATEGORY IMAGERY — cinematic overlay movement
   No image swap — pure overlay layered on existing photo.
   Add data-mood="bath|incense|soap|bracelets" to the wrapping
   element (e.g. .tarot-back or .featured-img-wrap) to activate.
   ------------------------------------------------------------ */
[data-mood] { position: relative; overflow: hidden; }
[data-mood]::before {
  content: "";
  position: absolute; inset: -10%;
  pointer-events: none; mix-blend-mode: overlay; opacity: .35;
}
[data-mood="bath"]::before {
  background: repeating-radial-gradient(circle at 50% 40%, rgba(255,255,255,.12) 0, transparent 3%, transparent 6%);
  animation: pc-ripple 6s linear infinite;
}
@keyframes pc-ripple {
  0%   { transform: scale(1);    opacity: .35; }
  50%  { transform: scale(1.08); opacity: .18; }
  100% { transform: scale(1.16); opacity: 0; }
}
[data-mood="incense"]::before {
  background: linear-gradient(200deg, transparent 30%, rgba(255,255,255,.16) 45%, transparent 60%);
  filter: blur(6px);
  animation: pc-smoke 9s ease-in-out infinite;
}
@keyframes pc-smoke {
  0%   { transform: translate(-4%, 6%) rotate(0deg);   opacity: .2; }
  50%  { transform: translate(3%, -6%) rotate(3deg);   opacity: .38; }
  100% { transform: translate(-4%, 6%) rotate(0deg);   opacity: .2; }
}
[data-mood="soap"]::before {
  background: radial-gradient(ellipse at 30% 20%, rgba(255,225,170,.28), transparent 60%);
  animation: pc-warm-light 8s ease-in-out infinite;
}
@keyframes pc-warm-light {
  0%, 100% { opacity: .25; transform: translate(0,0); }
  50%      { opacity: .45; transform: translate(3%, 2%); }
}
[data-mood="bracelets"]::before {
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.22) 40%, transparent 60%);
  background-size: 250% 250%;
  animation: pc-sunlight 10s ease-in-out infinite;
}
@keyframes pc-sunlight {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

/* ------------------------------------------------------------
   8. SCROLL REVEALS — varied entrances, not one repeated fade
   Add data-reveal="up | blur | scale | stagger" to a section
   or container. JS toggles .pc-in on intersection.
   ------------------------------------------------------------ */
[data-reveal] { opacity: 0; }
[data-reveal="up"]     { transform: translateY(28px); }
[data-reveal="blur"]   { filter: blur(10px); transform: translateY(10px); }
[data-reveal="scale"]  { transform: scale(.96); }

[data-reveal].pc-in {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity var(--pc-dur-slow) var(--pc-ease),
              transform var(--pc-dur-slow) var(--pc-ease),
              filter var(--pc-dur-slow) var(--pc-ease);
}

/* staggered children (e.g. product cards, category tiles) */
[data-reveal="stagger"] > * { opacity: 0; transform: translateY(22px); }
[data-reveal="stagger"].pc-in > * {
  opacity: 1; transform: none;
  transition: opacity var(--pc-dur) var(--pc-ease), transform var(--pc-dur) var(--pc-ease);
}
[data-reveal="stagger"].pc-in > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal="stagger"].pc-in > *:nth-child(2) { transition-delay: 90ms; }
[data-reveal="stagger"].pc-in > *:nth-child(3) { transition-delay: 180ms; }
[data-reveal="stagger"].pc-in > *:nth-child(4) { transition-delay: 270ms; }
[data-reveal="stagger"].pc-in > *:nth-child(5) { transition-delay: 360ms; }
[data-reveal="stagger"].pc-in > *:nth-child(6) { transition-delay: 450ms; }

/* ------------------------------------------------------------
   9. BREATHING ROOM — a little more silence between sections
   (Only additive margin, no structural change)
   ------------------------------------------------------------ */
.home-values, .home-story, .home-featured, .home-cards, .home-email {
  padding-top: calc(1em + 4vw);
  padding-bottom: calc(1em + 4vw);
}

/* ------------------------------------------------------------
   10. AMBIENT ATMOSPHERE — sparse drifting botanical haze
   A handful of soft dots, GPU-only transforms, very slow.
   Injected by polish.js as #pc-ambient inside <body>.
   ------------------------------------------------------------ */
#pc-ambient {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  overflow: hidden;
}
#pc-ambient span {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(201,169,110,.55);
  box-shadow: 0 0 6px 1px rgba(201,169,110,.35);
  opacity: 0;
  animation: pc-drift linear infinite;
}
@keyframes pc-drift {
  0%   { opacity: 0; transform: translate(0,0); }
  8%   { opacity: .6; }
  92%  { opacity: .5; }
  100% { opacity: 0; transform: translate(var(--pc-dx, 40px), -120vh); }
}
@media (max-width: 768px) {
  #pc-ambient span:nth-child(n+7) { display: none; } /* fewer particles on mobile */
}

/* ------------------------------------------------------------
   11. PAGE LOADER — a small tarot card gently flipping while
   the next page loads. Shows the instant a link is clicked,
   disappears naturally when the new page finishes loading
   (full navigation replaces the DOM entirely).
   ------------------------------------------------------------ */
#pc-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,26,11,0.92);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
  perspective: 600px;
}
#pc-loader.pc-loader-active { opacity: 1; pointer-events: all; }
.pc-loader-card {
  width: 68px; height: 108px; border-radius: 8px;
  border: 1px solid #c9a96e;
  background: linear-gradient(135deg, #0d2b12, #0a1a0b);
  display: flex; align-items: center; justify-content: center;
  color: #c9a96e; font-size: 26px;
  box-shadow: 0 0 26px rgba(201,169,110,0.28);
  transform-style: preserve-3d;
  animation: pc-loader-flip 1.6s ease-in-out infinite;
}
@keyframes pc-loader-flip {
  0%, 100% { transform: rotateY(0deg); }
  50%      { transform: rotateY(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pc-loader-card { animation: pc-loader-pulse 1.6s ease-in-out infinite; }
}
@keyframes pc-loader-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}