/* Deskrune dramatic effects layer
   Loaded after style.css; additive only. Respects prefers-reduced-motion.
   2026-05-07 — overhaul */

/* ─── ENTRANCE: SVG draw-in on the brand glyph wherever it appears ─── */
@keyframes deskrune-draw {
  0%   { stroke-dashoffset: var(--draw-len, 80); opacity: 0; }
  20%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes deskrune-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

.brand-glyph path,
.brand-glyph line,
.hero-badge .glyph svg path,
.hero-badge .glyph svg line,
.hero-badge svg path,
.hero-badge svg line {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  /* Theatrical draw-in: 1.2s sits in the 600-900ms+ band but the SVG-draw mechanic
     justifies it (the eye needs time to read the line being drawn). Curve is the
     standard material decel-emphasized — kept as-is, intentional. */
  animation: deskrune-draw 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.15s forwards;
}
.hero-badge .glyph svg line:nth-child(2),
.hero-badge svg line:nth-child(2) {
  animation-delay: 0.6s;
}
.hero-badge .glyph svg line:nth-child(3),
.hero-badge svg line:nth-child(3) {
  animation-delay: 0.8s;
}
.hero-badge .glyph,
.hero-badge svg {
  /* Symmetric breathing curve, not browser-default ease-in-out. */
  animation: deskrune-pulse 4.6s cubic-bezier(0.45, 0, 0.55, 1) 2.8s infinite;
  transform-origin: center;
}

/* ─── HERO: spotlight cursor + animated background ─── */
.hero {
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(201, 97, 63, 0.08),
    transparent 40%
  );
  opacity: 0;
  /* Cross-fade — sinusoidal to avoid the front-loaded feel of default `ease`. */
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.6, 1);
  z-index: 1;
}
.hero:hover::before {
  opacity: 1;
}
.hero .hero-inner,
.hero > * {
  position: relative;
  z-index: 2;
}

/* Removed 2026-05-08: .hero[data-bg-video=on]::after and .hero-bg-video
   — neither selector exists in any HTML/JS in the codebase. Cleanup audit. */

/* ─── HEADLINE: split-char entrance ─── */
.hero h1 .split-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: deskrune-char-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero h1 .split-space {
  display: inline-block;
  width: 0.28em;
}
@keyframes deskrune-char-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ─── SCROLL REVEAL ─── */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  /* Tightened 800ms → 620ms; still sits in the theatrical band but doesn't drag.
     Glide curve (ease-out-quint) — decisive arrival without bounce. */
  transition:
    opacity 0.62s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Removed 2026-05-08: .reveal-on-scroll.delay-1..5 — no HTML uses these
   stagger classes; cinematic.css has its own [data-reveal-stagger] system. */

/* ─── MAGNETIC CTA ─── */
/* Per-property timing: transform/border land fast (160ms micro-interaction band),
   shadow lingers slightly longer (280ms) so the card feels weighted as it lifts.
   No `ease`. Glide curve for the lift, fast-decel for the snap. */
.hero-action,
.buy.primary,
.buy.secondary,
.tool-card,
.live-product {
  /* Removed 2026-05-08: .asset (no HTML occurrences) */
  transition:
    transform 0.18s cubic-bezier(0.2, 0, 0, 1),
    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.18s cubic-bezier(0.2, 0, 0, 1);
  will-change: transform;
}
.hero-action.magnetic,
.buy.primary.magnetic,
.buy.secondary.magnetic {
  --tx: 0;
  --ty: 0;
  transform: translate(var(--tx), var(--ty));
}

/* ─── 3D CARD TILT ─── */
/* Removed 2026-05-08: .asset selector (no HTML occurrences) */
.live-product,
.tool-card,
.not-found-card {
  transform-style: preserve-3d;
  perspective: 1000px;
}
.live-product.tilt,
.tool-card.tilt,
.not-found-card.tilt {
  --rx: 0deg;
  --ry: 0deg;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
  box-shadow: 0 18px 40px rgba(20, 20, 19, 0.06), 0 4px 12px rgba(20, 20, 19, 0.04);
}
.live-product.tilt:hover,
.tool-card.tilt:hover {
  box-shadow: 0 28px 60px rgba(201, 97, 63, 0.12), 0 8px 18px rgba(20, 20, 19, 0.06);
}

/* ─── LIVE INDICATOR ─── */
.deskrune-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2da44e;
  margin-right: 8px;
  position: relative;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(45, 164, 78, 0.5);
  /* Pulse ring expands fast then decays. ease-out-quart — explicit, not bare ease-out. */
  animation: deskrune-live-pulse 2.4s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
@keyframes deskrune-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(45, 164, 78, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(45, 164, 78, 0); }
  100% { box-shadow: 0 0 0 0 rgba(45, 164, 78, 0); }
}

/* Removed 2026-05-08: .deskrune-marquee + .deskrune-marquee-track block
   — no HTML/JS references; visual-pass.css already has `display: none !important`
   on .uses-vp-hero .deskrune-marquee, but the marker class doesn't exist either. */

/* ─── TYPOGRAPHIC FLOURISH on hover ─── */
/* 600ms is theatrical-band — variable-axis interpolation needs the time to feel
   like weight settling, not a snap. Curve is now an explicit ease-out-quint. */
.hero h1,
.section h2,
.signup h2 {
  font-variation-settings: "opsz" 36, "wght" 500;
  transition: font-variation-settings 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero h1:hover {
  font-variation-settings: "opsz" 144, "wght" 520;
}

/* ─── SCROLL PROGRESS LINE ─── */
.deskrune-scroll-line {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #c9613f, #b8542c);
  width: var(--scroll-progress, 0%);
  z-index: 9999;
  pointer-events: none;
  transition: width 0.05s linear;
}

/* ─── SMOOTHED FOCUS RING ─── */
*:focus-visible {
  outline: 2px solid #c9613f;
  outline-offset: 3px;
  border-radius: 2px;
}

/* ─── REDUCED MOTION ─── */
/* Theatrical motion is killed; functional state changes (focus rings, hover
   color shifts on links/CTAs) survive because they communicate state, not delight. */
@media (prefers-reduced-motion: reduce) {
  .brand-glyph path,
  .brand-glyph line,
  .hero-badge .glyph svg path,
  .hero-badge .glyph svg line,
  .hero-badge svg path,
  .hero-badge svg line,
  .hero-badge .glyph,
  .hero-badge svg {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
  .hero h1 .split-char { opacity: 1 !important; transform: none !important; animation: none !important; }
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .deskrune-live-dot { animation: none !important; }
  /* Spotlight cursor effect is pure delight — disable the fade entirely. */
  .hero::before { transition: none !important; opacity: 0 !important; }
  /* Typographic flourish on heading hover is delight, not state — disable. */
  .hero h1, .section h2, .signup h2 { transition: none !important; }
  /* Keep CTA hover effective (state) but with no transform/lift. */
  .hero-action, .buy.primary, .buy.secondary, .tool-card, .live-product {
    transition: background-color 0.001s, color 0.001s, border-color 0.001s !important;
  }
  .live-product.tilt, .tool-card.tilt, .not-found-card.tilt {
    transform: none !important;
  }
  /* Scroll progress line — keep visible but stop the smoothing transition. */
  .deskrune-scroll-line { transition: none !important; }
}