/* ════════════════════════════════════════════════════════════
   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);
}
[data-theme="emerald"]{
  --glass: rgba(15,32,25,.42);
  --glass-edge: rgba(79,190,140,.26);
  --glass-hi: rgba(255,255,255,.12);
}
[data-theme="rosegold"]{
  --glass: rgba(36,22,25,.42);
  --glass-edge: rgba(217,154,140,.26);
  --glass-hi: rgba(255,255,255,.13);
}
[data-theme="purple"]{
  --glass: rgba(27,20,40,.42);
  --glass-edge: rgba(178,146,224,.26);
  --glass-hi: rgba(255,255,255,.12);
}
[data-theme="crimson"]{
  --glass: rgba(31,14,14,.42);
  --glass-edge: rgba(217,105,95,.26);
  --glass-hi: rgba(255,255,255,.12);
}
[data-theme="teal"]{
  --glass: rgba(12,32,36,.42);
  --glass-edge: rgba(87,194,203,.24);
  --glass-hi: rgba(255,255,255,.13);
}
[data-theme="copper"]{
  --glass: rgba(28,30,35,.42);
  --glass-edge: rgba(203,138,87,.24);
  --glass-hi: rgba(255,255,255,.12);
}
[data-theme="midnight"]{
  --glass: rgba(12,16,36,.42);
  --glass-edge: rgba(124,143,238,.26);
  --glass-hi: rgba(255,255,255,.12);
}
[data-theme="sepia"]{
  --glass: rgba(250,246,238,.42);
  --glass-edge: rgba(140,105,55,.24);
  --glass-hi: rgba(255,255,255,.7);
}
[data-theme="mono"]{
  --glass: rgba(26,26,26,.42);
  --glass-edge: rgba(210,210,210,.22);
  --glass-hi: rgba(255,255,255,.12);
}

/* ── 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(100deg, transparent 35%, var(--glass-hi) 48%, transparent 62%) -140% 0/60% 100% no-repeat,
    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);
  animation: waterSheen 9s linear infinite;
}

/* 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(100deg, transparent 35%, var(--glass-hi) 48%, transparent 62%) -140% 0/60% 100% no-repeat,
    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}

/* ── Liquid water sheen — a soft band of light drifting across the
   glass surface, like light moving over the surface of water.
   Added as an extra background layer (first in the stack) on top of
   the existing glass gradient, so nothing already painted is removed. */
@keyframes waterSheen{
  0%   { background-position:-140% 0, 0 0; }
  100% { background-position:240% 0, 0 0; }
}
@keyframes waterSheenWide{
  0%   { background-position:-140% 0, 0 0, 0 0; }
  100% { background-position:240% 0, 0 0, 0 0; }
}
.studio-card,.cta-card{ animation-name: waterSheenWide !important; }
@media(prefers-reduced-motion:reduce){
  .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{animation:none}
}
html[data-anim="none"] .demo-card,html[data-anim="none"] .skill-card,
html[data-anim="none"] .svc-card,html[data-anim="none"] .hfc,
html[data-anim="none"] .contact-row,html[data-anim="none"] .chat-card,
html[data-anim="none"] .float-panel,html[data-anim="none"] .studio-card,
html[data-anim="none"] .cta-card,html[data-anim="none"] .auth-card,
html[data-anim="none"] .rs-settings-panel,html[data-anim="none"] .rsp-account-card,
html[data-anim="none"] .rsp-about-card{animation:none}

/* ── Water sheen also runs on hover-focused interaction, unchanged
   from its always-on ambient state; card silhouette morphing is left
   to the ambient background blobs (see blobMorph above) so a card's
   own border-radius set elsewhere on the site is never fought. */