/* =========================================================================
   V5 ORNAMENTS — two reusable atmospheric components
     1. Copper bloom (.cz-bloom)  — soft radial sun, gently breathing
     2. Grain hemisphere (.cz-grain) — dusty SVG-turbulence half-globe
   Both can be placed statically OR activated on hover via a parent class.
   Loads AFTER v5-featured.css.
   ========================================================================= */

/* -------------------------------------------------------------------------
   COPPER BLOOM — diffused warm sun
   ------------------------------------------------------------------------- */
.cz-bloom{
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  width:240px; height:240px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(216,106,72,0.92) 0%,
      rgba(216,106,72,0.78) 6%,
      rgba(185,88,60,0.55) 16%,
      rgba(185,88,60,0.28) 32%,
      rgba(185,88,60,0.12) 52%,
      rgba(185,88,60,0.04) 72%,
      rgba(185,88,60,0)    100%);
  filter:blur(8px);
  mix-blend-mode:multiply;
  opacity:.85;
  z-index:0;
  animation:cz-bloom-breath 9s ease-in-out infinite;
}
@keyframes cz-bloom-breath{
  0%, 100%{ transform:scale(1);   opacity:.85; }
  50%    { transform:scale(1.06); opacity:.95; }
}

/* Size variants */
.cz-bloom-sm{ width:120px; height:120px; filter:blur(6px); opacity:.7; }
.cz-bloom-md{ width:200px; height:200px; }
.cz-bloom-lg{ width:360px; height:360px; filter:blur(12px); }

/* Tone variant — quieter, more diffuse */
.cz-bloom-soft{
  background:radial-gradient(circle at 50% 50%,
    rgba(216,106,72,0.55) 0%,
    rgba(185,88,60,0.20) 40%,
    rgba(185,88,60,0)    100%);
  filter:blur(14px);
  opacity:.6;
}

/* -------------------------------------------------------------------------
   GRAIN HEMISPHERE — dusty turbulence-textured half-globe
   ------------------------------------------------------------------------- */
.cz-grain{
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  width:420px; height:420px;
  background-color:#D6CFBE;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.11  0 0 0 0 0.08  0 0 0 1.6 -0.2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>"),
    radial-gradient(circle at 50% 50%,
      rgba(20,18,12,0.18) 0%,
      rgba(20,18,12,0.12) 35%,
      rgba(20,18,12,0.06) 60%,
      rgba(20,18,12,0)    100%);
  background-size:cover, cover;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 50%, transparent 85%);
          mask-image:radial-gradient(circle at 50% 50%, #000 50%, transparent 85%);
  mix-blend-mode:multiply;
  opacity:.45;
  z-index:0;
}
.cz-grain-sm{ width:200px; height:200px; opacity:.4; }
.cz-grain-md{ width:320px; height:320px; }
.cz-grain-lg{ width:600px; height:600px; }
.cz-grain-warm{ background-color:#E0D6C0; filter:hue-rotate(-2deg); }

/* -------------------------------------------------------------------------
   HOVER-ACTIVATED — wrap any element with .cz-host and drop a .cz-bloom
   or .cz-grain inside; ornament fades in when the host is hovered.
   The host needs position:relative + isolation:isolate (or overflow:visible)
   so the ornament can bleed past its bounds.
   ------------------------------------------------------------------------- */
.cz-host{
  position:relative;
  isolation:isolate;
}
.cz-host > .cz-bloom,
.cz-host > .cz-grain{
  opacity:0;
  transition:opacity .55s cubic-bezier(.22,.7,.2,1), transform .8s cubic-bezier(.22,.7,.2,1);
  transform:scale(0.84);
}
.cz-host:hover > .cz-bloom{
  opacity:.85;
  transform:scale(1);
}
.cz-host:hover > .cz-grain{
  opacity:.45;
  transform:scale(1);
}

/* Hover variant for elements with light/inverse fills — bumps blend so it
   reads against dark CTA pills. */
.cz-host-dark > .cz-bloom{ mix-blend-mode:screen; }
.cz-host-dark:hover > .cz-bloom{ opacity:.95; }

/* -------------------------------------------------------------------------
   STATIC PLACEMENTS — site-wide quiet textural anchors
   ------------------------------------------------------------------------- */

/* Featured section — soft copper bloom at top-right of the showcase, sitting
   behind the play poster. Subtle ambient warmth without an overlay. */
.v5-ft::after{
  content:"";
  position:absolute;
  top:6%; right:-220px;
  width:520px; height:520px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(216,106,72,0.20) 0%,
    rgba(185,88,60,0.10) 35%,
    rgba(185,88,60,0.04) 60%,
    rgba(185,88,60,0)    100%);
  filter:blur(10px);
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:0;
  animation:cz-bloom-breath 14s ease-in-out infinite;
}
.v5-ft-container,
.v5-ft-rail{ position:relative; z-index:1; }

/* -------------------------------------------------------------------------
   HOVER PLACEMENTS — drop bloom/grain inside specific CTAs and cards.
   We use ::before for these so we don't have to touch JSX.
   ------------------------------------------------------------------------- */

/* Nav CTA pill — copper bloom blooms behind on hover */
.v4-nav-cta{
  position:relative;
  isolation:isolate;
}
.v4-nav-cta::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:200px; height:200px;
  transform:translate(-50%, -50%) scale(0.7);
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(216,106,72,0.70) 0%,
    rgba(185,88,60,0.30) 35%,
    rgba(185,88,60,0)    72%);
  filter:blur(10px);
  opacity:0;
  pointer-events:none;
  z-index:-1;
  transition:opacity .5s ease, transform .8s cubic-bezier(.22,.7,.2,1);
}
.v4-nav-cta:hover::before{
  opacity:.9;
  transform:translate(-50%, -50%) scale(1);
  animation:cz-bloom-breath 6s ease-in-out infinite;
}

/* Featured "See the full case study" pill — same idea, larger reach */
.v5-ft-cta{
  position:relative;
  isolation:isolate;
}
.v5-ft-cta::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:360px; height:200px;
  transform:translate(-50%, -50%) scale(0.7);
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(216,106,72,0.55) 0%,
    rgba(185,88,60,0.20) 40%,
    rgba(185,88,60,0)    72%);
  filter:blur(14px);
  opacity:0;
  pointer-events:none;
  z-index:-1;
  transition:opacity .55s ease, transform .9s cubic-bezier(.22,.7,.2,1);
}
.v5-ft-cta:hover::before{
  opacity:.85;
  transform:translate(-50%, -50%) scale(1);
}

/* Engagements detail CTA — same warm bloom */
.v5-engagements-detail-cta{
  position:relative;
  isolation:isolate;
}
.v5-engagements-detail-cta::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:320px; height:180px;
  transform:translate(-50%, -50%) scale(0.7);
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(216,106,72,0.55) 0%,
    rgba(185,88,60,0.20) 40%,
    rgba(185,88,60,0)    72%);
  filter:blur(12px);
  opacity:0;
  pointer-events:none;
  z-index:-1;
  transition:opacity .55s ease, transform .9s cubic-bezier(.22,.7,.2,1);
}
.v5-engagements-detail-cta:hover::before{
  opacity:.85;
  transform:translate(-50%, -50%) scale(1);
}

/* Footer feature card — both bloom AND a corner grain texture on hover */
.v5-footer-feature{
  isolation:isolate;
  overflow:hidden;
}
.v5-footer-feature::before{
  content:"";
  position:absolute;
  left:-40px; top:-40px;
  width:200px; height:200px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(216,106,72,0.55) 0%,
    rgba(185,88,60,0.18) 40%,
    rgba(185,88,60,0)    72%);
  filter:blur(12px);
  opacity:0;
  pointer-events:none;
  z-index:-1;
  transition:opacity .55s ease, transform .9s cubic-bezier(.22,.7,.2,1);
}
.v5-footer-feature:hover::before{
  opacity:.9;
  transform:scale(1.1);
  animation:cz-bloom-breath 7s ease-in-out infinite;
}
/* -------------------------------------------------------------------------
   REDUCED MOTION — kill the breathing
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .cz-bloom,
  .v5-ft::after,
  .v4-nav-cta:hover::before,
  .v5-footer-feature:hover::before{ animation:none; }
}