/* ════════════════════════════════════════════════════════════
   GLASS + MORPH — Premium Visual Upgrade (v18)
   Real glassmorphism (translucent + blurred surfaces that let
   ambient color show through) and organic morphing blob shapes,
   layered on top of the existing dark/gold luxury system.
   Pure additive CSS — does not remove or fight any existing
   hover/tilt/magnetic/shimmer behaviour already on the site.
   ════════════════════════════════════════════════════════════ */

/* ── Theme-aware glass tokens ── */
[data-theme="dark"]{
  --glass: rgba(24,15,4,.40);
  --glass-edge: rgba(255,210,120,.22);
  --glass-hi: rgba(255,255,255,.13);
}
[data-theme="white"]{
  --glass: rgba(255,255,255,.38);
  --glass-edge: rgba(160,105,0,.26);
  --glass-hi: rgba(255,255,255,.75);
}
[data-theme="gray"]{
  --glass: rgba(34,37,48,.42);
  --glass-edge: rgba(180,200,225,.24);
  --glass-hi: rgba(255,255,255,.14);
}

/* ── Organic blob morph (the "watermorphing" wobble) ──
   Animates border-radius through irregular blob silhouettes.
   Combined with existing translate/scale animations via a
   second comma-separated `animation` entry — never replaces
   motion that's already on an element. */
@keyframes blobMorph{
  0%,100%{ border-radius:42% 58% 65% 35% / 45% 40% 60% 55%; }
  25%     { border-radius:65% 35% 40% 60% / 60% 55% 45% 40%; }
  50%     { border-radius:35% 65% 55% 45% / 40% 60% 35% 65%; }
  75%     { border-radius:55% 45% 35% 65% / 65% 40% 55% 35%; }
}

/* Ambient blob wrapper — drop into any `position:relative` section.
   Self-contained: overflow:hidden lives on the wrapper, never on
   the section, so card hover transforms/shadows are never clipped. */
.amb-blob-wrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;border-radius:inherit}
.amb-blob{position:absolute;filter:blur(64px);will-change:transform,border-radius}
.amb-blob.b1{width:420px;height:420px;top:-12%;left:-10%;background:radial-gradient(circle,var(--gold-glow),transparent 72%);opacity:.85;animation:auFloat 17s ease-in-out infinite alternate,blobMorph 13s ease-in-out infinite}
.amb-blob.b2{width:380px;height:380px;bottom:-14%;right:-8%;background:radial-gradient(circle,var(--gold-glow),transparent 72%);opacity:.7;animation:auFloat 22s ease-in-out infinite alternate-reverse,blobMorph 16.5s ease-in-out infinite reverse}
.amb-blob.b3{width:300px;height:300px;top:38%;left:52%;background:radial-gradient(circle,rgba(170,90,255,.30),transparent 72%);opacity:.6;animation:auFloat 26s ease-in-out infinite,blobMorph 20s ease-in-out infinite}
.amb-blob.b4{width:320px;height:320px;top:10%;right:18%;background:radial-gradient(circle,rgba(60,190,255,.26),transparent 72%);opacity:.55;animation:auFloat 19s ease-in-out infinite alternate,blobMorph 15s ease-in-out infinite reverse}

html[data-anim="none"] .amb-blob-wrap{display:none}
@media(prefers-reduced-motion:reduce){.amb-blob{animation:none!important}}

/* ── Section anchors for ambient blobs (scoped, narrow) ── */
#about,#skills,#services,#contact{position:relative}

/* ── Glassmorphism: real translucency + blur on the main surfaces ──
   Each rule only touches background/border-color/backdrop-filter so
   every pre-existing hover transform, shimmer, glow and shadow rule
   keeps working untouched. */
.demo-card,
.skill-card,
.svc-card,
.hfc,
.contact-row,
.chat-card,
.float-panel,
.studio-card,
.cta-card,
.auth-card,
.rs-settings-panel,
.rsp-account-card,
.rsp-about-card{
  background:
    linear-gradient(165deg, var(--glass-hi), transparent 42%),
    var(--glass) !important;
  backdrop-filter: blur(20px) saturate(1.7);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  border-color: var(--glass-edge);
}

/* Demo card visual mock-browser bar reads better fully opaque
   (it's a screenshot mock, not the glass shell) */
.demo-visual{backdrop-filter:none;-webkit-backdrop-filter:none}

/* Studio + CTA cards are hero-weight elements — slightly richer tint
   so copy stays legible over the brighter ambient blobs behind them */
.studio-card,.cta-card{
  background:
    linear-gradient(165deg, var(--glass-hi), transparent 50%),
    radial-gradient(ellipse 140% 100% at 50% -10%, var(--gold-dim), transparent 60%),
    var(--glass) !important;
  backdrop-filter: blur(26px) saturate(1.4);
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
}

/* Settings / auth panels stay a touch denser for long-form reading */
.rs-settings-panel,.auth-card{
  backdrop-filter: blur(28px) saturate(1.25);
  -webkit-backdrop-filter: blur(28px) saturate(1.25);
}

@media(max-width:680px){
  .demo-card,.skill-card,.svc-card,.hfc,.contact-row,.chat-card,
  .float-panel,.studio-card,.cta-card,.auth-card,.rs-settings-panel,
  .rsp-account-card,.rsp-about-card{
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
  }
}

/* ── Grain / film texture — adds tactile, non-flat premium finish ── */
.grain-overlay{
  position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
html[data-anim="none"] .grain-overlay{display:none}
[data-theme="white"] .grain-overlay{opacity:.025}

/* ── Spotlight glow on hover — extend the existing --gx/--gy cursor
   tracking (already set by the site's tilt script) to the cards that
   didn't have it yet, matching the technique already used on .hfc */
.demo-card::before,
.skill-card::after,
.contact-row::after,
.chat-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),var(--gold-dim),transparent 65%);
  opacity:0;transition:opacity .35s;z-index:0;
}
.demo-card:hover::before,
.skill-card:hover::after,
.contact-row:hover::after,
.chat-card:hover::before{opacity:1}

/* Keep existing accent-bar / shimmer pseudo-elements above the new glow layer */
.skill-card::before,.contact-row::before,.demo-card::after{z-index:1}
.skill-card .sk-icon,.skill-card .sk-name,.skill-card .sk-text,
.contact-row .ci,.contact-row .cp,.contact-row .ch,.contact-row .co,
.demo-card .demo-visual,.demo-card .demo-body{position:relative;z-index:2}