/* ============================================================
   DYUTAM INTEL — Ambient background & card hover effects

   The ambient layer is a single fixed element built by effects.js.
   Which sub-layer shows is driven by html[data-ambient], set from
   the Customizer (off · aurora · spotlight · constellation ·
   suits · cards · felt · wheel). Card hover style is
   html[data-hover] (lift · glow · tilt).
   ============================================================ */

#fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#fx>div,#fx>canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s ease}

html[data-ambient="aurora"] #fx-aurora{opacity:1}
html[data-ambient="spotlight"] #fx-spot{opacity:1}
html[data-ambient="constellation"] #fx-cnv{opacity:1}
html[data-ambient="suits"] #fx-suits{opacity:1}
html[data-ambient="cards"] #fx-cards{opacity:1}
@media(max-width:1620px){html[data-ambient="cards"] #fx-cards{opacity:0}}
html[data-ambient="felt"] #fx-felt{opacity:1}
html[data-ambient="wheel"] #fx-wheel{opacity:1}

#fx-aurora{
  background:
    radial-gradient(38% 44% at 18% 16%, color-mix(in srgb,var(--accent-bright) 18%, transparent), transparent 70%),
    radial-gradient(34% 40% at 82% 10%, color-mix(in srgb,var(--accent) 14%, transparent), transparent 72%),
    radial-gradient(48% 52% at 64% 52%, color-mix(in srgb,var(--accent-bright) 10%, transparent), transparent 72%);
  filter:blur(22px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 24%,transparent 66%);
  mask-image:linear-gradient(to bottom,#000 0,#000 24%,transparent 66%);
  animation:auroraDrift 26s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  0%{transform:translate3d(-2%,-1%,0) scale(1.02)}
  50%{transform:translate3d(3%,2%,0) scale(1.14)}
  100%{transform:translate3d(-3%,1%,0) scale(1.06)}
}

#fx-spot{background:radial-gradient(460px circle at var(--mx,50%) var(--my,28%),
  color-mix(in srgb,var(--accent-bright) 18%, transparent), transparent 60%)}

/* Suits: tiled card pips masked out of the content column so the
   pattern only lives in the page gutters. */
#fx-suits{
  -webkit-mask-image:linear-gradient(90deg,
    #000 0,#000 calc(50% - var(--maxw)/2 - 170px),
    transparent calc(50% - var(--maxw)/2 - 30px),
    transparent calc(50% + var(--maxw)/2 + 30px),
    #000 calc(50% + var(--maxw)/2 + 170px),#000 100%);
  mask-image:linear-gradient(90deg,
    #000 0,#000 calc(50% - var(--maxw)/2 - 170px),
    transparent calc(50% - var(--maxw)/2 - 30px),
    transparent calc(50% + var(--maxw)/2 + 30px),
    #000 calc(50% + var(--maxw)/2 + 170px),#000 100%)}
#fx-suits::before,#fx-suits::after{content:"";position:absolute;inset:-30% -22%;
  background:var(--text);opacity:.042;
  -webkit-mask-image:url("../images/fx-suits.svg");mask-image:url("../images/fx-suits.svg");
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  -webkit-mask-size:380px;mask-size:380px;
  animation:fx-drift 180s linear infinite alternate}
#fx-suits::after{background:var(--accent-bright);opacity:.05;
  -webkit-mask-image:url("../images/fx-diamonds.svg");mask-image:url("../images/fx-diamonds.svg");
  -webkit-mask-size:560px;mask-size:560px;
  animation-duration:260s;animation-direction:alternate-reverse}
[data-theme="dark"] #fx-suits::before{opacity:.06}
[data-theme="dark"] #fx-suits::after{opacity:.07}
#fx-suits .fxs-glow{position:absolute;inset:-30% -22%;opacity:0;transition:opacity .6s ease;
  background-image:url("../images/fx-suits-color.svg");
  background-size:380px;background-repeat:repeat;
  -webkit-mask-image:radial-gradient(230px circle at var(--gx,-9999px) var(--gy,-9999px),#000 18%,transparent 72%);
  mask-image:radial-gradient(230px circle at var(--gx,-9999px) var(--gy,-9999px),#000 18%,transparent 72%);
  animation:fx-drift 180s linear infinite alternate}
[data-theme="dark"] #fx-suits .fxs-glow{background-image:url("../images/fx-suits-color-dark.svg")}
html[data-ambient="suits"] #fx-suits .fxs-glow{opacity:.5}
@keyframes fx-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(3.5%,2.2%,0)}}

#fx-cards .fxc{position:absolute;width:96px;height:134px;border-radius:11px;
  background:color-mix(in srgb,var(--surface) 90%,transparent);
  border:1px solid var(--border-strong);
  box-shadow:0 18px 44px rgba(16,17,22,.12);
  display:grid;place-items:center;opacity:var(--o,.5);
  animation:fxc-float var(--dur,24s) ease-in-out var(--del,0s) infinite alternate;
  will-change:transform}
[data-theme="dark"] #fx-cards .fxc{box-shadow:0 18px 44px rgba(0,0,0,.5)}
#fx-cards .fxc .corner{position:absolute;top:7px;left:9px;
  font-family:var(--font-serif);font-weight:600;font-size:15px;line-height:1.05;text-align:center}
#fx-cards .fxc .corner b{display:block;font-weight:400;font-size:12px}
#fx-cards .fxc .corner.flip{top:auto;left:auto;bottom:7px;right:9px;transform:rotate(180deg)}
#fx-cards .fxc .big{font-size:46px;line-height:1;font-family:var(--font-serif)}
#fx-cards .fxc.red{color:color-mix(in srgb,var(--accent) 62%,transparent)}
#fx-cards .fxc.blk{color:color-mix(in srgb,var(--text) 38%,transparent)}
#fx-cards .fxc.back{background:
  repeating-linear-gradient(45deg,var(--accent-soft) 0 7px,transparent 7px 14px);
  border-color:var(--accent-line)}
@keyframes fxc-float{
  from{transform:translateY(-14px) rotate(var(--r0,-8deg)) scale(var(--sc,1))}
  to{transform:translateY(14px) rotate(var(--r1,6deg)) scale(var(--sc,1))}}

#fx-felt{background:
  radial-gradient(90% 70% at 50% -12%, color-mix(in srgb,var(--accent-bright) 14%,transparent), transparent 62%),
  radial-gradient(140% 110% at 50% 42%, transparent 55%, color-mix(in srgb,var(--text) 8%,transparent) 100%)}
#fx-felt::before{content:"";position:absolute;inset:0;opacity:.05;
  background-image:radial-gradient(color-mix(in srgb,var(--text) 60%,transparent) .8px,transparent .9px);
  background-size:20px 20px}
#fx-felt::after{content:"";position:absolute;left:50%;top:-82vh;width:175vw;height:142vh;
  transform:translateX(-50%);border-radius:50%;
  border:1.5px dashed color-mix(in srgb,var(--accent-bright) 30%,transparent)}

#fx-wheel svg{position:absolute;color:var(--text);opacity:.065;
  animation:fx-rot 300s linear infinite}
#fx-wheel svg.w1{top:-330px;right:-330px;width:880px;height:880px}
#fx-wheel svg.w2{bottom:-270px;left:-270px;width:620px;height:620px;
  color:var(--accent-bright);opacity:.085;
  animation-direction:reverse;animation-duration:380s}
[data-theme="dark"] #fx-wheel svg.w1{opacity:.085}
@keyframes fx-rot{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){
  #fx-aurora,#fx-suits::before,#fx-suits::after,#fx-suits .fxs-glow,#fx-cards .fxc,#fx-wheel svg{animation:none}
}

/* content sits above the ambient layer */
.ticker,.newsroom,.section,.f1,.page-head,.site-main{position:relative;z-index:1}

/* ---- hover: glow (image cards only) ---- */
html[data-hover="glow"] [data-fxhover]{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease,border-color .25s}
html[data-hover="glow"] [data-fxhover]:hover{
  border-color:var(--accent-line)!important;
  box-shadow:0 0 0 1px var(--accent-line),0 22px 56px -14px var(--accent-soft),0 6px 18px rgba(0,0,0,.07)!important;
}
html[data-hover="tilt"] [data-fxhover]{transition:transform .16s ease,box-shadow .25s;transform-style:preserve-3d;will-change:transform}
html[data-hover="tilt"] [data-fxhover]:hover{box-shadow:var(--shadow-lg)}