/* ═══════════════════════════════════════════════════════════════
   CONCLAVE FX — Original branded interactive component library
   TheConclave Dominion. Not derived from any third-party source.
   Themed entirely off shared.css tokens (--gold/--electric/--plasma…).
   Light-DOM custom elements → global tokens cascade in.
   Batch 1: glass · reveal · flip · tilt
   ═══════════════════════════════════════════════════════════════ */

/* Local fallbacks so the library also works on pages without shared.css */
:where(conclave-glass,conclave-reveal,conclave-flip,conclave-tilt){
  --cfx-gold:var(--gold,#FFB800);
  --cfx-el:var(--electric,#00D4FF);
  --cfx-pl:var(--plasma,#7B2FFF);
  --cfx-pink:var(--pink,#FF4CD2);
  --cfx-void:var(--void,#050508);
  --cfx-ease:var(--eox,cubic-bezier(.16,1,.3,1));
  --cfx-fontd:var(--font-d,'Cinzel Decorative',serif);
  --cfx-fontm:var(--font-m,'Share Tech Mono',monospace);
}

/* ─────────────────────────  LIQUID GLASS  ───────────────────────── */
conclave-glass{
  --g-tint:255,255,255;
  --g-blur:18px;
  --g-radius:var(--rl,20px);
  position:relative;display:block;
  border-radius:var(--g-radius);
  padding:clamp(1.2rem,2.5vw,2rem);
  isolation:isolate;
  background:
    linear-gradient(135deg,rgba(var(--g-tint),.10),rgba(var(--g-tint),.03) 46%,rgba(var(--g-tint),.07));
  backdrop-filter:blur(var(--g-blur)) saturate(175%);
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(175%);
  border:1px solid rgba(var(--g-tint),.14);
  box-shadow:
    0 10px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(var(--g-tint),.28),
    inset 0 0 0 1px rgba(var(--g-tint),.04);
  overflow:hidden;
  transition:transform .5s var(--cfx-ease),box-shadow .5s var(--cfx-ease);
}
/* refraction edge highlight */
conclave-glass::before{
  content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;
  padding:1px;
  background:linear-gradient(135deg,
    rgba(var(--g-tint),.5),transparent 30%,transparent 70%,rgba(var(--g-tint),.22));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.8;pointer-events:none;
}
/* specular sweep follows pointer (x/y set by JS) */
conclave-glass::after{
  content:'';position:absolute;inset:-40%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,0%),
    rgba(var(--g-tint),.22),transparent 42%);
  opacity:var(--g-spec,0);transition:opacity .4s var(--cfx-ease);
  mix-blend-mode:screen;
}
conclave-glass[data-hover="1"]{transform:translateY(-3px);box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 0 1px rgba(var(--g-tint),.10),inset 0 1px 0 rgba(var(--g-tint),.32);}
conclave-glass.cfx-tint-gold{--g-tint:255,184,0;}
conclave-glass.cfx-tint-el{--g-tint:0,212,255;}
conclave-glass.cfx-tint-pl{--g-tint:123,47,255;}
conclave-glass.cfx-tint-pink{--g-tint:255,76,210;}

/* PRO: real refraction — JS injects an SVG turbulence/displacement filter and
   sets --g-refract to its url(). backdrop layers it under the blur so light
   actually bends through the "glass". */
conclave-glass[data-refract]{
  backdrop-filter:blur(var(--g-blur)) saturate(175%) var(--g-refract,);
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(175%) var(--g-refract,);
}
/* chromatic aberration on the refraction edge */
conclave-glass[data-refract]::before{
  background:linear-gradient(135deg,
    rgba(255,60,180,.42) 0%, rgba(var(--g-tint),.5) 10%,
    transparent 32%, transparent 68%,
    rgba(var(--g-tint),.24) 88%, rgba(0,200,255,.34) 100%);
  filter:blur(.3px);
}

/* ─────────────────────────  WEBGL AURORA SURFACE  ───────────────────────── */
conclave-aurora{
  display:block;position:relative;width:100%;min-height:220px;
  border-radius:var(--rl,20px);overflow:hidden;isolation:isolate;
  background:var(--void,#050508);
}
conclave-aurora canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
conclave-aurora .cfx-aur-content{position:relative;z-index:2;}
conclave-aurora .cfx-aur-fallback{position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse 80% 60% at 30% 20%,rgba(123,47,255,.5),transparent 60%),
             radial-gradient(ellipse 70% 60% at 80% 80%,rgba(0,212,255,.4),transparent 60%),
             radial-gradient(ellipse 60% 50% at 60% 40%,rgba(255,76,210,.3),transparent 55%);
  animation:cfxAurDrift 14s ease-in-out infinite alternate;}
@keyframes cfxAurDrift{from{transform:scale(1) translate(0,0)}to{transform:scale(1.15) translate(-4%,3%)}}

@media (prefers-reduced-motion:reduce){
  conclave-aurora canvas{display:none;}
}

/* ─────────────────────────  TEXT REVEAL  ───────────────────────── */
conclave-reveal{display:block;}
conclave-reveal .cfx-line{display:block;overflow:hidden;}
conclave-reveal .cfx-word{
  display:inline-block;white-space:pre;
  transform:translateY(115%) rotate(4deg);
  opacity:0;filter:blur(6px);
  transition:transform .9s var(--cfx-ease),opacity .9s var(--cfx-ease),filter .9s var(--cfx-ease);
  transition-delay:var(--d,0ms);
}
conclave-reveal[data-in="1"] .cfx-word{transform:none;opacity:1;filter:blur(0);}
/* shimmer variant sweeps a spectral gradient across on reveal */
conclave-reveal[data-mode="shimmer"] .cfx-word{
  background:linear-gradient(90deg,currentColor 0%,currentColor 38%,
    var(--cfx-el) 50%,var(--cfx-pl) 60%,currentColor 74%);
  background-size:280% 100%;background-position:120% 0;
  -webkit-background-clip:text;background-clip:text;
  transition:transform .9s var(--cfx-ease),opacity .9s var(--cfx-ease),
    filter .9s var(--cfx-ease),background-position 1.6s var(--cfx-ease);
  transition-delay:var(--d,0ms);
}
conclave-reveal[data-mode="shimmer"][data-in="1"] .cfx-word{
  -webkit-text-fill-color:transparent;background-position:-40% 0;
}

/* ─────────────────────────  SPLIT-FLAP / FLIPBOARD  ───────────────────────── */
conclave-flip{
  display:inline-flex;gap:.14em;
  font-family:var(--cfx-fontm);font-weight:700;
  line-height:1;letter-spacing:.02em;
}
conclave-flip .cfx-cell{
  position:relative;display:inline-block;
  min-width:.62em;height:1.32em;
  padding:.06em .16em;
  border-radius:.14em;
  background:linear-gradient(180deg,#14141f,#0a0a12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 2px 8px rgba(0,0,0,.5);
  overflow:hidden;text-align:center;
  color:var(--cfx-gold);
  text-shadow:0 0 10px rgba(255,184,0,.45);
}
conclave-flip .cfx-cell::after{ /* center seam */
  content:'';position:absolute;left:0;right:0;top:50%;height:1px;
  background:rgba(0,0,0,.55);z-index:3;transform:translateY(-.5px);
}
conclave-flip .cfx-glyph{position:relative;z-index:1;display:block;}
conclave-flip .cfx-cell.cfx-flipping .cfx-glyph{animation:cfxFlip .28s var(--cfx-ease);}
@keyframes cfxFlip{
  0%{transform:rotateX(0) translateY(0);opacity:1}
  49%{transform:rotateX(-90deg) translateY(-14%);opacity:.15}
  50%{transform:rotateX(90deg) translateY(14%);opacity:.15}
  100%{transform:rotateX(0) translateY(0);opacity:1}
}
conclave-flip.cfx-el .cfx-cell{color:var(--cfx-el);text-shadow:0 0 10px rgba(0,212,255,.5);}
conclave-flip.cfx-pl .cfx-cell{color:#c9b3ff;text-shadow:0 0 10px rgba(123,47,255,.6);}

/* ─────────────────────────  DEPTH TILT CARD  ───────────────────────── */
conclave-tilt{
  display:block;position:relative;
  transform-style:preserve-3d;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .35s var(--cfx-ease);
  will-change:transform;border-radius:var(--rl,20px);
}
conclave-tilt.cfx-active{transition:transform .08s linear;}
conclave-tilt .cfx-glare{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),
    rgba(255,255,255,.28),transparent 45%);
  opacity:var(--go,0);transition:opacity .3s var(--cfx-ease);
  mix-blend-mode:screen;z-index:6;
}
conclave-tilt [data-depth]{transform:translateZ(calc(var(--tz,0px)));transition:transform .35s var(--cfx-ease);}

/* ─────────────────────────  A11Y  ───────────────────────── */
@media (prefers-reduced-motion:reduce){
  conclave-reveal .cfx-word{transform:none!important;opacity:1!important;filter:none!important;}
  conclave-flip .cfx-cell.cfx-flipping .cfx-glyph{animation:none!important;}
  conclave-glass,conclave-tilt{transition:none!important;}
  conclave-tilt{transform:none!important;}
}

/* ═══════════════════════════════════════════════════════════════
   CONCLAVE FX — BATCH 2
   carousel3d · spiral · trail · arcs · orbit · tiles · marquee
   ═══════════════════════════════════════════════════════════════ */
:where(conclave-carousel3d,conclave-spiral,conclave-trail,conclave-arcs,conclave-orbit,conclave-tiles,conclave-marquee){
  --cfx-gold:var(--gold,#FFB800);--cfx-el:var(--electric,#00D4FF);--cfx-pl:var(--plasma,#7B2FFF);
  --cfx-pink:var(--pink,#FF4CD2);--cfx-ease:var(--eox,cubic-bezier(.16,1,.3,1));
  --cfx-fontm:var(--font-m,'Share Tech Mono',monospace);--cfx-fonth:var(--font-h,'Cinzel',serif);
}

/* ───────── 3D COVERFLOW CAROUSEL ───────── */
conclave-carousel3d{display:block;position:relative;width:100%;height:var(--c3-h,360px);perspective:1600px;overflow:hidden;touch-action:pan-y;user-select:none;}
conclave-carousel3d .cfx-c3-stage{position:absolute;inset:0;transform-style:preserve-3d;}
conclave-carousel3d .cfx-c3-item{position:absolute;top:50%;left:50%;width:var(--c3-w,240px);height:var(--c3-ih,320px);margin:calc(var(--c3-ih,320px)/-2) 0 0 calc(var(--c3-w,240px)/-2);border-radius:18px;overflow:hidden;transform-style:preserve-3d;transition:transform .6s var(--cfx-ease),opacity .6s var(--cfx-ease),filter .6s var(--cfx-ease);box-shadow:0 24px 60px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08);background:linear-gradient(160deg,#160f26,#0a0713);cursor:pointer;}
conclave-carousel3d .cfx-c3-item img{width:100%;height:100%;object-fit:cover;display:block;}
conclave-carousel3d .cfx-c3-item::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(5,5,8,.75));opacity:.85;pointer-events:none;}
conclave-carousel3d .cfx-c3-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1rem;font-family:var(--cfx-fonth);color:#fff;font-size:1rem;letter-spacing:.02em;text-shadow:0 2px 12px rgba(0,0,0,.8);}
conclave-carousel3d .cfx-c3-item:not(.cfx-c3-active){filter:brightness(.5) saturate(.8);}
conclave-carousel3d .cfx-c3-item.cfx-c3-active{box-shadow:0 30px 80px rgba(123,47,255,.4),0 0 0 1px rgba(0,212,255,.35),inset 0 0 40px rgba(123,47,255,.15);}
conclave-carousel3d .cfx-c3-nav{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:.6rem;}
conclave-carousel3d .cfx-c3-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);border:none;cursor:pointer;padding:0;transition:all .3s;}
conclave-carousel3d .cfx-c3-dot.on{background:var(--cfx-el);box-shadow:0 0 10px var(--cfx-el);width:22px;border-radius:4px;}

/* ───────── SPIRAL GALLERY ───────── */
conclave-spiral{display:block;position:relative;width:100%;height:var(--sp-h,460px);perspective:1200px;overflow:hidden;touch-action:pan-y;}
conclave-spiral .cfx-sp-stage{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .1s linear;}
conclave-spiral .cfx-sp-item{position:absolute;top:50%;left:50%;width:var(--sp-w,120px);height:var(--sp-w,120px);margin:calc(var(--sp-w,120px)/-2) 0 0 calc(var(--sp-w,120px)/-2);border-radius:14px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.1);background:#0a0713;}
conclave-spiral .cfx-sp-item img{width:100%;height:100%;object-fit:cover;display:block;}
conclave-spiral .cfx-sp-hint{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-family:var(--cfx-fontm);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.35);z-index:5;}

/* ───────── IMAGE TRAIL ───────── */
conclave-trail{display:block;position:relative;overflow:hidden;}
conclave-trail .cfx-tr-img{position:absolute;width:var(--tr-w,140px);height:var(--tr-h,180px);margin-left:calc(var(--tr-w,140px)/-2);margin-top:calc(var(--tr-h,180px)/-2);border-radius:12px;object-fit:cover;pointer-events:none;opacity:0;transform:scale(.6);will-change:transform,opacity;box-shadow:0 14px 40px rgba(0,0,0,.5);z-index:3;}

/* ───────── WORLD MAP ARCS ───────── */
conclave-arcs{display:block;position:relative;}
conclave-arcs svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:visible;}
conclave-arcs .cfx-arc{fill:none;stroke:url(#cfx-arc-grad);stroke-width:1.6;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(0,212,255,.6));}
conclave-arcs .cfx-arc-node{fill:var(--cfx-gold);filter:drop-shadow(0 0 6px var(--cfx-gold));}
conclave-arcs .cfx-arc-pulse{fill:#fff;}

/* ───────── ORBIT MORPH ───────── */
conclave-orbit{display:grid;place-items:center;position:relative;width:var(--or-s,320px);height:var(--or-s,320px);margin:auto;}
conclave-orbit .cfx-or-core{position:absolute;width:38%;height:38%;background:linear-gradient(135deg,var(--cfx-pl),var(--cfx-el));filter:blur(.4px);box-shadow:0 0 60px rgba(123,47,255,.6),inset 0 0 30px rgba(255,255,255,.25);animation:cfxMorph 8s ease-in-out infinite;}
@keyframes cfxMorph{0%,100%{border-radius:42% 58% 63% 37%/45% 45% 55% 55%;transform:rotate(0deg)}33%{border-radius:66% 34% 40% 60%/58% 62% 38% 42%}66%{border-radius:36% 64% 55% 45%/60% 38% 62% 40%;transform:rotate(180deg)}}
conclave-orbit .cfx-or-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.09);}
conclave-orbit .cfx-or-sat{position:absolute;top:50%;left:50%;width:var(--or-sat,16px);height:var(--or-sat,16px);margin:calc(var(--or-sat,16px)/-2) 0 0 calc(var(--or-sat,16px)/-2);border-radius:50%;background:var(--cfx-gold);box-shadow:0 0 14px var(--cfx-gold);transform-origin:center;}

/* ───────── MOTION TILES ───────── */
conclave-tiles{display:grid;gap:var(--ti-gap,12px);grid-template-columns:repeat(var(--ti-cols,4),1fr);position:relative;}
conclave-tiles .cfx-ti{position:relative;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,#140e24,#0a0713);border:1px solid rgba(255,255,255,.07);aspect-ratio:1;transition:transform .35s var(--cfx-ease),box-shadow .35s var(--cfx-ease);transform:translateZ(0);display:grid;place-items:center;cursor:pointer;}
conclave-tiles .cfx-ti::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),rgba(0,212,255,.28),transparent 55%);opacity:0;transition:opacity .35s;}
conclave-tiles .cfx-ti:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 20px 50px rgba(123,47,255,.35),0 0 0 1px rgba(0,212,255,.3);z-index:2;}
conclave-tiles .cfx-ti:hover::before{opacity:1;}
conclave-tiles .cfx-ti img{width:100%;height:100%;object-fit:cover;}

/* ───────── MARQUEE / LOGO CYCLE ───────── */
conclave-marquee{display:flex;overflow:hidden;position:relative;width:100%;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);gap:0;}
conclave-marquee .cfx-mq-track{display:flex;align-items:center;gap:var(--mq-gap,3rem);flex-shrink:0;padding-right:var(--mq-gap,3rem);animation:cfxMarquee var(--mq-dur,28s) linear infinite;}
conclave-marquee:hover .cfx-mq-track{animation-play-state:paused;}
@keyframes cfxMarquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}

@media (prefers-reduced-motion:reduce){
  conclave-carousel3d .cfx-c3-item,conclave-spiral .cfx-sp-stage{transition:none!important;}
  conclave-orbit .cfx-or-core{animation:none!important;}
  conclave-marquee .cfx-mq-track{animation:none!important;}
}