/* Imagine Monkey Framework 0.7.3 — opt-in Visual Effects & Motion Library.
 * Components inherit active brand tokens. Nothing affects existing pages unless
 * an imv-* class is deliberately selected in supported native Gutenberg markup.
 * All decorative motion is removable; information never depends upon effects. */
:is(.imf-site,.editor-styles-wrapper) .imv-stage {
  --imv-primary: var(--im-brand-primary,#235b78);
  --imv-accent: var(--im-brand-accent,#e47b48);
  --imv-ink: var(--im-brand-ink,#152b37);
  --imv-surface: var(--im-brand-surface,#f5f6f5);
  --imv-text: var(--im-brand-text,#263742);
  --imv-radius: clamp(5px,var(--im-design-radius,14px),28px);
  --imv-line: color-mix(in srgb,var(--imv-ink) 21%,transparent);
  --imv-scroll-progress: 1;
  --imv-scroll-shift: 0px;
  position: relative;
  isolation: isolate;
  min-width: 0;
}
:is(.imf-site,.editor-styles-wrapper) .imv-stage :is(.imv-glass,.imv-panel,.imv-art,.imv-interact--tilt) {min-width:0}
/* VISUAL MATERIALS: materially different depth options, not a fixed theme look. */
:is(.imf-site,.editor-styles-wrapper) .imv-depth--prism {
  background: radial-gradient(ellipse at 12% 3%,color-mix(in srgb,var(--imv-accent) 53%,transparent) 0%,transparent 47%),
    radial-gradient(ellipse at 89% 77%,color-mix(in srgb,var(--imv-primary) 48%,transparent) 0%,transparent 55%),
    linear-gradient(122deg,var(--imv-ink),color-mix(in srgb,var(--imv-primary) 38%,var(--imv-ink)) 65%,var(--imv-ink));
  color: #fff;
}
:is(.imf-site,.editor-styles-wrapper) .imv-depth--spotlight {
  background:radial-gradient(circle 360px at var(--imv-pointer-x,65%) var(--imv-pointer-y,35%),color-mix(in srgb,var(--imv-accent) 22%,transparent),transparent 90%),
    linear-gradient(145deg,var(--imv-ink),color-mix(in srgb,var(--imv-primary) 42%,var(--imv-ink)));
  color:#fff;
}
:is(.imf-site,.editor-styles-wrapper) .imv-depth--blueprint {
  background-color:var(--imv-ink);
  background-image:linear-gradient(color-mix(in srgb,var(--imv-primary) 20%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--imv-primary) 20%,transparent) 1px,transparent 1px),
    radial-gradient(ellipse at 90% 5%,color-mix(in srgb,var(--imv-accent) 24%,transparent),transparent 58%);
  background-size:34px 34px,34px 34px,auto;
  color:#fff;
}
:is(.imf-site,.editor-styles-wrapper) .imv-depth--luminous {
  background:radial-gradient(circle at 20% 10%,color-mix(in srgb,var(--imv-accent) 26%,transparent),transparent 48%),
    radial-gradient(circle at 90% 85%,color-mix(in srgb,var(--imv-primary) 18%,transparent),transparent 54%),
    linear-gradient(130deg,#fff,var(--imv-surface) 72%);
  color:var(--imv-text);
}
:is(.imf-site,.editor-styles-wrapper) .imv-depth--metal {
  background:linear-gradient(128deg,color-mix(in srgb,var(--imv-ink) 95%,white) 0%,
    color-mix(in srgb,var(--imv-ink) 72%,white) 22%,
    color-mix(in srgb,var(--imv-ink) 96%,white) 52%,
    color-mix(in srgb,var(--imv-primary) 32%,var(--imv-ink)) 76%,
    var(--imv-ink) 100%);
  color:#fff;
}
:is(.imf-site,.editor-styles-wrapper) .imv-depth--grain {position:relative}
:is(.imf-site,.editor-styles-wrapper) .imv-depth--grain::after {
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background: url('../images/imv-grain.webp') repeat;
  background-size:128px 128px;mix-blend-mode:multiply;opacity:.115;
}
:is(.imf-site,.editor-styles-wrapper) .imv-depth--grain>*{position:relative;z-index:1}
/* Glass is never required for legibility; give an opaque fallback. */
:is(.imf-site,.editor-styles-wrapper) .imv-glass {
  border:1px solid color-mix(in srgb,#fff 55%,var(--imv-line));
  background:color-mix(in srgb,#fff 92%,var(--imv-surface));
  color:var(--imv-ink);
  border-radius:var(--imv-radius);
  box-shadow:0 28px 64px -36px color-mix(in srgb,var(--imv-ink) 65%,transparent),
    inset 0 1px 0 color-mix(in srgb,#fff 92%,transparent);
}
:is(.imf-site,.editor-styles-wrapper) .imv-glass--dark {
  background:color-mix(in srgb,var(--imv-ink) 93%,white);color:#fff;
  border-color:color-mix(in srgb,#fff 26%,transparent);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 :is(.imf-site,.editor-styles-wrapper) .imv-glass{backdrop-filter:blur(15px) saturate(135%);-webkit-backdrop-filter:blur(15px) saturate(135%);background:color-mix(in srgb,#fff 76%,transparent)}
 :is(.imf-site,.editor-styles-wrapper) .imv-glass--dark{background:color-mix(in srgb,var(--imv-ink) 76%,transparent)}
}
:is(.imf-site,.editor-styles-wrapper) .imv-panel--lifted {
  box-shadow:0 14px 18px -16px color-mix(in srgb,var(--imv-ink) 25%,transparent),
    0 38px 68px -45px color-mix(in srgb,var(--imv-ink) 55%,transparent);
  border:1px solid var(--imv-line);border-radius:var(--imv-radius);
}
:is(.imf-site,.editor-styles-wrapper) .imv-panel--rim {
  border:1px solid color-mix(in srgb,var(--imv-accent) 55%,var(--imv-line));
  box-shadow:0 0 0 5px color-mix(in srgb,var(--imv-accent) 11%,transparent),
    inset 0 1px 0 color-mix(in srgb,#fff 64%,transparent);
  border-radius:var(--imv-radius);
}
/* Graphic detail: sectional diagonals, rivets, outlined mechanical forms. */
:is(.imf-site,.editor-styles-wrapper) .imv-decoration--stripe {
  position:relative;overflow:hidden;isolation:isolate;
}
:is(.imf-site,.editor-styles-wrapper) .imv-decoration--stripe::before {
  content:"";position:absolute;inset:0 0 auto 0;height:9px;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(115deg,var(--imv-accent) 0 15px,var(--imv-ink) 15px 28px);
  background-size:180px 100%;
}
:is(.imf-site,.editor-styles-wrapper) .imv-decoration--corner {position:relative}
:is(.imf-site,.editor-styles-wrapper) .imv-decoration--corner::after {
  content:"";position:absolute;right:14px;top:14px;width:42px;height:42px;z-index:2;
  border-top:2px solid var(--imv-accent);border-right:2px solid var(--imv-accent);pointer-events:none;
}
:is(.imf-site,.editor-styles-wrapper) .imv-decoration--rail {position:relative}
:is(.imf-site,.editor-styles-wrapper) .imv-decoration--rail::after {
  content:"";position:absolute;left:8%;right:8%;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--imv-accent),var(--imv-primary),transparent);pointer-events:none;
}
:is(.imf-site,.editor-styles-wrapper) .imv-art--orbit {width:min(240px,100%);aspect-ratio:1;position:relative;border-radius:50%;border:2px solid color-mix(in srgb,var(--imv-accent) 70%,transparent);margin-inline:auto!important}
:is(.imf-site,.editor-styles-wrapper) .imv-art--orbit::before,
:is(.imf-site,.editor-styles-wrapper) .imv-art--orbit::after {
  content:"";position:absolute;inset:11%;border-radius:50%;border:1px dashed color-mix(in srgb,var(--imv-accent) 70%,transparent);pointer-events:none;
}
:is(.imf-site,.editor-styles-wrapper) .imv-art--orbit::after {inset:33%;border:2px solid var(--imv-accent);box-shadow:0 0 0 14px color-mix(in srgb,var(--imv-accent) 11%,transparent)}
:is(.imf-site,.editor-styles-wrapper) .imv-scroll--parallax{--imv-scroll-shift:0px;position:relative}
:is(.imf-site,.editor-styles-wrapper) .imv-scroll--parallax::before {
  content:"";position:absolute;inset:-13% -5%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 65% 40%,color-mix(in srgb,var(--imv-accent) 31%,transparent),transparent 60%);
  transform:translate3d(0,var(--imv-scroll-shift),0);will-change:transform;
}
:is(.imf-site,.editor-styles-wrapper) .imv-scroll--progress{position:relative}
:is(.imf-site,.editor-styles-wrapper) .imv-scroll--progress::after {
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,var(--imv-primary),var(--imv-accent));
  transform-origin:left;transform:scaleX(var(--imv-scroll-progress,1));
}
:is(.imf-site,.editor-styles-wrapper) .imv-interact--glint{position:relative;overflow:hidden}
:is(.imf-site,.editor-styles-wrapper) .imv-interact--glint::after {
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,color-mix(in srgb,#fff 22%,transparent) 51%,transparent 62%);
  transform:translateX(-130%);
}
:is(.imf-site,.editor-styles-wrapper) .imv-interact--tilt{transform:perspective(850px) rotateX(var(--imv-tilt-x,0deg)) rotateY(var(--imv-tilt-y,0deg));transform-style:preserve-3d}
:is(.imf-site,.editor-styles-wrapper) .imv-interact--lift {transition:transform .22s ease,box-shadow .22s ease}
:is(.imf-site,.editor-styles-wrapper) .imv-scroll--enter {opacity:1;transform:none}
/* Animation is purely supplemental. Reveal never hides content before JS. */
@media (prefers-reduced-motion:no-preference) {
  :is(.imf-site,.editor-styles-wrapper) .imv-motion--spin.imv-art--orbit::before {animation:imv-spin 24s linear infinite}
  :is(.imf-site,.editor-styles-wrapper) .imv-motion--float {animation:imv-float 5s ease-in-out infinite}
  :is(.imf-site,.editor-styles-wrapper) .imv-motion--breathe {animation:imv-breathe 7.5s ease-in-out infinite}
  :is(.imf-site,.editor-styles-wrapper) .imv-decoration--stripe.imv-motion--drift::before {animation:imv-stripe-drift 12s linear infinite}
  .imf-site .imv-scroll--enter.imv-seen{animation:imv-enter .65s both cubic-bezier(.25,.8,.2,1)}
  .imf-site .imv-scroll--stagger.imv-seen>.wp-block-group:nth-child(1){animation:imv-enter .65s both}
  .imf-site .imv-scroll--stagger.imv-seen>.wp-block-group:nth-child(2){animation:imv-enter .65s .12s both}
  .imf-site .imv-scroll--stagger.imv-seen>.wp-block-group:nth-child(3){animation:imv-enter .65s .24s both}
  .imf-site .imv-scroll--stagger.imv-seen>.wp-block-group:nth-child(4){animation:imv-enter .65s .36s both}
}
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine) {
  .imf-site .imv-interact--glint:is(:hover,:focus-within)::after{animation:imv-glint .75s ease both}
  .imf-site .imv-interact--lift:is(:hover,:focus-within){transform:translateY(-5px);box-shadow:0 25px 45px -28px color-mix(in srgb,var(--imv-ink) 65%,transparent)}
  .imf-site .imv-interact--tilt{transition:transform .18s ease-out}
}
@keyframes imv-spin{to{transform:rotate(360deg)}}
@keyframes imv-float{50%{transform:translate3d(0,-11px,0)}}
@keyframes imv-breathe{50%{box-shadow:0 0 44px 6px color-mix(in srgb,var(--imv-accent) 32%,transparent)}}
@keyframes imv-stripe-drift{to{background-position:180px 0}}
@keyframes imv-enter{from{opacity:.35;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes imv-glint{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
@media (prefers-reduced-motion:reduce) {
 .imf-site :is(.imv-motion--spin,.imv-motion--float,.imv-motion--breathe,.imv-motion--drift,.imv-scroll--enter,.imv-scroll--stagger,.imv-interact--lift,.imv-interact--tilt),
 .imf-site :is(.imv-art--orbit::before,.imv-decoration--stripe::before,.imv-interact--glint::after) {animation:none!important;transition:none!important;transform:none!important}
 .imf-site .imv-scroll--parallax::before{transform:none!important;will-change:auto}
 .imf-site .imv-scroll--progress::after{transform:scaleX(1)!important}
}
@media (forced-colors:active) {
 .imf-site :is(.imv-glass,.imv-panel--lifted,.imv-panel--rim){background:Canvas!important;color:CanvasText!important;border:1px solid CanvasText!important;box-shadow:none!important}
 .imf-site .imv-decoration--stripe::before{background:Highlight}
 .imf-site .imv-depth--grain::after{display:none}
}
@media print {
 .imf-site :is(.imv-motion--float,.imv-motion--breathe,.imv-scroll--enter,.imv-scroll--stagger){animation:none!important;opacity:1!important;transform:none!important}
 .imf-site .imv-glass{background:#fff!important;color:#000!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}
