/* ============================================================================
   LUXE LAYER  ·  decorative motifs + simulated light  ·  Warm Studio
   Additive: loads AFTER redesign.css. Pure presentation. Every animation is
   gated behind prefers-reduced-motion, and the GPU-heavier touches (aurora
   drift, cursor spotlight, sheen) are desktop / fine-pointer only so phones
   stay fast. No external assets; the grain is an inline data-uri (CSP-safe).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1 · AMBIENT AURORA  (fixed, behind all content)
   A slow wash of warm light so the page feels lit from within. The blobs sit
   under the app content; opaque surfaces (cards, nav) keep text contrast.
   --------------------------------------------------------------------------- */
.luxe-aurora {
  position: fixed; inset: -25vmax; z-index: -2; pointer-events: none;
  overflow: hidden; contain: strict;
}
.luxe-aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(56px); opacity: .42; will-change: transform;
  mix-blend-mode: multiply;
}
.luxe-aurora i:nth-child(1) { width: 48vmax; height: 48vmax; left: -8vmax; top: -6vmax;
  background: radial-gradient(circle at 50% 50%, var(--brand-soft), transparent 68%); }
.luxe-aurora i:nth-child(2) { width: 42vmax; height: 42vmax; right: -10vmax; top: 8vmax;
  background: radial-gradient(circle at 50% 50%, var(--accent-soft), transparent 66%); opacity: .36; }
.luxe-aurora i:nth-child(3) { width: 38vmax; height: 38vmax; left: 28vmax; bottom: -14vmax;
  background: radial-gradient(circle at 50% 50%, var(--highlight-soft), transparent 70%); opacity: .3; }

@media (min-width: 760px) and (prefers-reduced-motion: no-preference) {
  .luxe-aurora i:nth-child(1) { animation: luxe-drift-a 30s ease-in-out infinite alternate; }
  .luxe-aurora i:nth-child(2) { animation: luxe-drift-b 38s ease-in-out infinite alternate; }
  .luxe-aurora i:nth-child(3) { animation: luxe-drift-c 34s ease-in-out infinite alternate; }
}
@keyframes luxe-drift-a { to { transform: translate3d(6vmax, 4vmax, 0) scale(1.12); } }
@keyframes luxe-drift-b { to { transform: translate3d(-7vmax, 5vmax, 0) scale(1.08); } }
@keyframes luxe-drift-c { to { transform: translate3d(4vmax, -6vmax, 0) scale(1.14); } }

html[data-theme="dark"] .luxe-aurora i { mix-blend-mode: screen; opacity: .26; filter: blur(64px); }

/* ---------------------------------------------------------------------------
   2 · CURSOR SPOTLIGHT  (fine pointer only; driven by luxe.js via --mx/--my)
   --------------------------------------------------------------------------- */
.luxe-spot {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  transition: opacity .5s var(--ease); mix-blend-mode: multiply;
  background:
    radial-gradient(520px circle at var(--mx, 50%) var(--my, 12%),
      rgba(255, 138, 74, .15), rgba(255, 178, 130, .06) 40%, transparent 66%),
    radial-gradient(260px circle at var(--mx, 50%) var(--my, 12%),
      rgba(232, 184, 75, .08), transparent 60%);
}
@media (hover: hover) and (pointer: fine) { .luxe-spot.on { opacity: 1; } }
html[data-theme="dark"] .luxe-spot { mix-blend-mode: screen;
  background:
    radial-gradient(620px circle at var(--mx, 50%) var(--my, 12%),
      rgba(255, 178, 118, .32), rgba(255, 178, 118, .12) 42%, transparent 70%),
    radial-gradient(320px circle at var(--mx, 50%) var(--my, 12%),
      rgba(245, 206, 120, .20), transparent 60%); }

/* ---------------------------------------------------------------------------
   3 · FILM GRAIN  (fixed, on top, ultra subtle - the "printed" tactility)
   --------------------------------------------------------------------------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply; background-size: 150px 150px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="dark"] body::after { mix-blend-mode: screen; opacity: .05; }

/* ---------------------------------------------------------------------------
   4 · SPECULAR SHEEN  (a slow light sweep across primary actions on hover)
   --------------------------------------------------------------------------- */
.btn-primary, .btn.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
  content: ""; position: absolute; top: -10%; left: -75%; width: 45%; height: 120%;
  transform: skewX(-18deg); pointer-events: none; opacity: 0; z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn-primary:hover::after { animation: luxe-sheen .85s var(--ease-out); }
}
@keyframes luxe-sheen { 0% { left: -75%; opacity: 0; } 12% { opacity: 1; } 100% { left: 135%; opacity: 0; } }

/* ---------------------------------------------------------------------------
   5 · GILDED HAIRLINES  (a whisper of reflected light along card edges)
   Kept inside the coral/highlight family - light, not a gold colour scheme.
   --------------------------------------------------------------------------- */
.pet-card, .panel, .result-top1, .tool-result, .guide-card, .report {
  position: relative;
}
.pet-card::before, .panel::before, .result-top1::before,
.tool-result::before, .guide-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  pointer-events: none; z-index: 2; opacity: .0; transition: opacity .4s var(--ease);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--highlight) 60%, white) 0%,
    transparent 28%, transparent 72%,
    color-mix(in srgb, var(--brand) 42%, white) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.pet-card:hover::before, .panel:hover::before, .result-top1::before,
.tool-result:hover::before, .guide-card:hover::before { opacity: .85; }

/* a fixed top hairline of light on key surfaces, always on but faint */
.pet-card, .panel, .guide-card {
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, .55);
}
html[data-theme="dark"] .pet-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .guide-card { box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, .06); }

/* ---------------------------------------------------------------------------
   6 · LOGO SHIMMER  (a slow travelling glint on the mark)
   --------------------------------------------------------------------------- */
.app-logo .logo-mark:not(img), .logo-mark:not(img) { position: relative; overflow: hidden; isolation: isolate; }
.logo-mark:not(img)::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  transform: translateX(-120%);
}
@media (prefers-reduced-motion: no-preference) {
  .logo-mark:not(img)::after { animation: luxe-glint 6.5s ease-in-out 2s infinite; }
}
@keyframes luxe-glint { 0%, 72% { transform: translateX(-120%); } 86%, 100% { transform: translateX(120%); } }

/* ---------------------------------------------------------------------------
   7 · DECORATIVE TITLE FLOURISH  (a hairline drawn by luxe.js via DrawSVG)
   --------------------------------------------------------------------------- */
.luxe-flourish { display: block; width: 84px; height: 10px; margin-top: 12px; overflow: visible; }
.luxe-flourish path { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; }
.luxe-flourish circle { fill: var(--accent); }

/* ---------------------------------------------------------------------------
   8 · SPLITTEXT HERO  (mask-reveal of the headline lines)
   --------------------------------------------------------------------------- */
.home-title { perspective: 720px; }
.luxe-mask { overflow: hidden; display: block; }
.home-title .brand {
  background: linear-gradient(112deg, var(--brand) 18%, var(--brand-deep) 72%, var(--accent) 128%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------------------------------------------------------------------------
   9 · POLISH  (slightly more optical refinement, kept legible)
   --------------------------------------------------------------------------- */
.home-title, .section-title, .result-label, .tool-title, .verdict { text-wrap: balance; }
.btn-primary { letter-spacing: -.01em; }

/* ---------------------------------------------------------------------------
   REDUCED MOTION  ·  hard stop on all luxe animation
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .luxe-aurora i, .logo-mark::after, .btn-primary::after { animation: none !important; }
  .luxe-spot { display: none !important; }
}

/* ###########################################################################
   ##  UPGRADE · enriched ambient aurora for the app shell (both themes).
   ##  Richer jewel blooms so the canvas reads like layered art glass, not a
   ##  flat fill. Still fixed + pointer-events:none; drift stays desktop /
   ##  no-reduced-motion only (mobiles + reduced-motion get a calm static wash).
   ########################################################################### */
.luxe-aurora i{ filter:blur(64px); opacity:.50; }
.luxe-aurora i:nth-child(1){
  background:radial-gradient(circle at 50% 50%,
    rgba(255,150,96,.55), rgba(255,122,60,.20) 46%, transparent 70%); }
.luxe-aurora i:nth-child(2){
  background:radial-gradient(circle at 50% 50%,
    rgba(60,160,135,.40), rgba(31,122,102,.16) 48%, transparent 68%); opacity:.42; }
.luxe-aurora i:nth-child(3){
  background:radial-gradient(circle at 50% 50%,
    rgba(232,184,75,.42), rgba(200,148,30,.16) 50%, transparent 72%); opacity:.40; }
/* a faint gilded sweep layered behind the blooms for depth */
.luxe-aurora::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(40vmax 30vmax at 78% 86%, rgba(255,196,148,.10), transparent 64%),
    conic-gradient(from 210deg at 30% 20%, transparent, rgba(232,184,75,.06), transparent 38%);
}
html[data-theme="dark"] .luxe-aurora i{ mix-blend-mode:screen; opacity:.34; filter:blur(72px); }
html[data-theme="dark"] .luxe-aurora i:nth-child(1){
  background:radial-gradient(circle at 50% 50%, rgba(255,138,84,.60), rgba(255,122,60,.18) 48%, transparent 72%); }
html[data-theme="dark"] .luxe-aurora i:nth-child(2){
  background:radial-gradient(circle at 50% 50%, rgba(72,184,156,.46), transparent 66%); opacity:.30; }
html[data-theme="dark"] .luxe-aurora i:nth-child(3){
  background:radial-gradient(circle at 50% 50%, rgba(236,194,94,.44), transparent 70%); opacity:.28; }
html[data-theme="dark"] .luxe-aurora::after{ mix-blend-mode:screen; opacity:.5; }