/* =========================================================================
   D.P. Media & AI Consulting — Noir Deco Motion Kit
   v1.11.5 — additive polish only; no layout/content rebuild.
   ========================================================================= */

:root {
  --motion-gold-deep: #7c5f22;
  --motion-gold: #c9a44c;
  --motion-gold-light: #f2df9c;
  --motion-ivory: #ece5d3;
  --motion-ease: cubic-bezier(.2,.7,.2,1);
  --motion-ease-spring: cubic-bezier(.2,.7,.3,1.2);
}

/* 01 — Line-draw Deco frame --------------------------------------------- */
.motion-frame-host {
  position: relative;
  isolation: isolate;
}
.motion-frame-svg {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: 4;
  overflow: visible;
  pointer-events: none;
}
.motion-frame-svg .motion-draw-path {
  fill: none;
  stroke: var(--motion-gold);
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
  opacity: .78;
  transition: stroke-dashoffset 1.2s var(--motion-ease), opacity .55s ease;
}
.motion-frame-svg.is-motion-drawn .motion-draw-path { stroke-dashoffset: 0 !important; }
.motion-frame-host:hover > .motion-frame-svg .motion-draw-path { opacity: 1; }

/* WordPress images/quotes become frame hosts without changing their layout. */
.entry-content figure.wp-block-image.motion-frame-host,
.entry-content blockquote.motion-frame-host,
.philosophy blockquote.motion-frame-host,
.article-featured.motion-frame-host {
  position: relative;
}

/* 02 — Slow gold shimmer: JS assigns exactly one headline per page. */
.motion-shimmer {
  background: linear-gradient(
    100deg,
    var(--motion-gold-deep) 18%,
    var(--motion-gold-light) 38%,
    var(--motion-ivory) 50%,
    var(--motion-gold-light) 62%,
    var(--motion-gold-deep) 82%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: dp-noir-shimmer 6.5s linear infinite;
}
.motion-shimmer * {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
/*
 * Headlines are split into individual word spans by motion.js. A clipped
 * background on the parent does not paint those child glyphs in every
 * browser, which could leave the complete headline transparent. Give each
 * generated word the same brass gradient so the title always remains
 * visible while preserving the shimmer effect.
 */
.motion-shimmer .motion-word {
  background: linear-gradient(
    100deg,
    var(--motion-gold-deep) 18%,
    var(--motion-gold-light) 38%,
    var(--motion-ivory) 50%,
    var(--motion-gold-light) 62%,
    var(--motion-gold-deep) 82%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: dp-noir-shimmer 6.5s linear infinite;
}
/*
 * Same fix as above, but for headlines built with the two-line
 * .split-statement markup (primary/secondary spans) instead of
 * per-word .motion-word spans. Without this, .motion-shimmer's own
 * background-clip never reaches these nested spans and the whole
 * headline renders fully transparent (invisible).
 */
.motion-shimmer .split-statement__primary,
.motion-shimmer .split-statement__secondary {
  background: linear-gradient(
    100deg,
    var(--motion-gold-deep) 18%,
    var(--motion-gold-light) 38%,
    var(--motion-ivory) 50%,
    var(--motion-gold-light) 62%,
    var(--motion-gold-deep) 82%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: dp-noir-shimmer 6.5s linear infinite;
}
@keyframes dp-noir-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -40% 0; }
}

/* 03 — Sunburst hover for the six topic cards --------------------------- */
.motion-sunburst {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.motion-sunburst::before {
  content: "";
  position: absolute;
  width: 280px;
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(242,223,156,.34) 0deg 1.4deg,
    transparent 1.4deg 30deg
  );
  transform: translate(-50%,-50%) scale(.32) rotate(-10deg);
  transition: opacity .4s ease, transform .68s var(--motion-ease-spring);
}
.motion-sunburst:hover::before,
.motion-sunburst:focus-within::before {
  opacity: .42;
  transform: translate(-50%,-50%) scale(1) rotate(0deg);
}
.motion-sunburst > * { position: relative; z-index: 1; }

/* 04 — Staggered reveal -------------------------------------------------- */
.motion-stagger > .motion-stagger-item {
  opacity: 0;
  transform: translate3d(0,16px,0);
  transition:
    opacity .62s ease,
    transform .68s var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, transform;
}
.motion-stagger.is-motion-stagger-visible > .motion-stagger-item {
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* 05 — Animated chevron divider ----------------------------------------- */
.motion-chevron-divider {
  display: block;
  position: relative;
  z-index: 5;
  width: min(820px, calc(100% - 36px));
  height: 24px;
  margin: -1px auto 0;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 0 7px rgba(201,164,76,.16));
}
.motion-chevron-divider .motion-draw-path {
  fill: none;
  stroke: var(--motion-gold);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  opacity: .78;
  transition: stroke-dashoffset 1.4s var(--motion-ease), opacity .4s ease;
}
.motion-chevron-divider.is-motion-drawn .motion-draw-path { stroke-dashoffset: 0 !important; }

/* 06 — Deco button: reference-style brass fill + detached corner marks ---- */
.motion-enabled .btn {
  position: relative;
  isolation: isolate;
  overflow: visible;
  background-repeat: no-repeat;
  transition:
    color .35s ease,
    border-color .35s ease,
    background-color .35s ease,
    background-size .42s var(--motion-ease),
    box-shadow .35s ease,
    letter-spacing .35s ease,
    transform .38s var(--motion-ease);
}

/*
 * The reference effect is deliberately visible BEFORE hover:
 * four small brass corner marks sit outside the button and move farther
 * away while the gold fill travels from left to right.
 */
.motion-enabled .btn::after {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: 3;
  pointer-events: none;
  opacity: .82;
  background:
    linear-gradient(var(--motion-gold-light),var(--motion-gold-light)) left top / 12px 1px no-repeat,
    linear-gradient(var(--motion-gold-light),var(--motion-gold-light)) left top / 1px 12px no-repeat,
    linear-gradient(var(--motion-gold-light),var(--motion-gold-light)) right top / 12px 1px no-repeat,
    linear-gradient(var(--motion-gold-light),var(--motion-gold-light)) right top / 1px 12px no-repeat,
    linear-gradient(var(--motion-gold-light),var(--motion-gold-light)) left bottom / 12px 1px no-repeat,
    linear-gradient(var(--motion-gold-light),var(--motion-gold-light)) left bottom / 1px 12px no-repeat,
    linear-gradient(var(--motion-gold-light),var(--motion-gold-light)) right bottom / 12px 1px no-repeat,
    linear-gradient(var(--motion-gold-light),var(--motion-gold-light)) right bottom / 1px 12px no-repeat;
  transform: scale(.985);
  filter: drop-shadow(0 0 4px rgba(201,164,76,.18));
  transition: inset .42s var(--motion-ease-spring), opacity .28s ease, transform .42s var(--motion-ease-spring);
}
.motion-enabled .btn:hover::after,
.motion-enabled .btn:focus-visible::after {
  inset: -11px;
  opacity: 1;
  transform: scale(1.015);
}

/*
 * Primary CTAs now use the exact visual logic from the supplied motion demo:
 * dark at rest, brass outline/text, then a solid gold wipe from left to right.
 */
.motion-enabled .btn.primary {
  color: var(--motion-gold-light);
  border-color: rgba(201,164,76,.72);
  background-color: rgba(11,11,13,.34);
  background-image: linear-gradient(90deg, var(--motion-gold) 0%, var(--motion-gold-light) 100%);
  background-position: left center;
  background-size: 0 100%;
  box-shadow: inset 0 0 0 1px rgba(242,223,156,.025);
}
.motion-enabled .btn.primary:hover,
.motion-enabled .btn.primary:focus-visible {
  color: var(--ink);
  border-color: var(--motion-gold-light);
  background-color: rgba(11,11,13,.34);
  background-size: 100% 100%;
  letter-spacing: .20em;
  box-shadow: 0 0 24px rgba(201,164,76,.24), inset 0 0 0 1px rgba(242,223,156,.18);
}

/* Secondary/ghost CTAs keep their hierarchy, but share the same brass wipe. */
.motion-enabled .btn.ghost {
  color: var(--ivory);
  border-color: var(--bronze);
  background-color: transparent;
  background-image: linear-gradient(90deg, var(--motion-gold) 0%, var(--motion-gold-light) 100%);
  background-position: left center;
  background-size: 0 100%;
}
.motion-enabled .btn.ghost:hover,
.motion-enabled .btn.ghost:focus-visible {
  color: var(--ink);
  border-color: var(--motion-gold-light);
  background-color: transparent;
  background-size: 100% 100%;
  letter-spacing: .20em;
  box-shadow: 0 0 22px rgba(201,164,76,.20);
}

.motion-enabled .btn:hover,
.motion-enabled .btn:focus-visible {
  transform: translate3d(var(--magnetic-x,0), calc(var(--magnetic-y,0) - 1px), 0);
}

/* Keyboard focus remains explicit, not decorative. */
.motion-enabled .btn:focus-visible,
.motion-enabled .motion-sunburst:focus-within {
  outline: 1px solid var(--motion-gold-light);
  outline-offset: 5px;
}

/* Keep the whole kit inert for users who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .motion-shimmer,
  .motion-shimmer * {
    animation: none !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
  }
  .motion-frame-svg,
  .motion-chevron-divider { display: none !important; }
  .motion-stagger > .motion-stagger-item { opacity: 1 !important; transform: none !important; transition: none !important; }
  .motion-sunburst::before,
  .motion-enabled .btn::after { display: none !important; }
  .motion-enabled .btn { transition: none !important; transform: none !important; }
  .motion-enabled .btn.ghost,
  .motion-enabled .btn.primary { background-image: none !important; }
}

@media (hover: none), (pointer: coarse) {
  .motion-sunburst::before,
  .motion-enabled .btn::after { display: none; }
  .motion-enabled .btn:hover { letter-spacing: .14em; }
}