/* Animations for ralphcassagnol.com. Delete this file and motion.js to turn them off. */

/* While the hero animation loads, keep it from flashing in its final state. */
.motion-pending .banner,
.motion-pending .cursor,
.motion-pending .lede,
.motion-pending .hero-cta { opacity: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ch-wrap { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; will-change: transform; }

/* A: hero click */
.motion .cursor, .motion .banner { animation: none; }
.motion .banner { position: relative; overflow: hidden; transform-origin: 0 50%; }
.ripple { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 3px solid var(--on-accent); opacity: 0; pointer-events: none; }

/* B: sewn dividers */
.seamed { position: relative; border-top-color: transparent !important; }
.seam, .sys-list li.seam { position: absolute; display: block; left: 0; right: 0; top: -2px; height: 2px; pointer-events: none; list-style: none; padding: 0; margin: 0; border: 0; z-index: 1; }
.seam-thread { position: absolute; inset: 0; border-top: 2px dashed var(--ink); clip-path: inset(0 100% 0 0); }
.seam-needle { position: absolute; top: -5px; left: 0; width: 34px; height: 12px; color: var(--ink); }

/* C: ticket illustration */
.motion .tk-wip { opacity: 1; }
.motion .tk-ready { opacity: 0; }

/* D: tape measure */
.taped { position: relative; border-top-color: transparent !important; }
.tape { position: absolute; left: 0; right: 0; top: -16px; height: 30px; list-style: none; padding: 0; margin: 0; pointer-events: none; z-index: 1; }
.tape-strip { position: absolute; left: 14px; right: 0; top: 0; bottom: 0; background: #F2C744; border: 2px solid #16181D; border-radius: 4px; transform-origin: 0 50%; overflow: hidden; }
.tape-strip::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, #16181D 0 2px, transparent 2px 14px), repeating-linear-gradient(90deg, #16181D 0 2px, transparent 2px 70px); background-size: 100% 8px, 100% 16px; background-repeat: no-repeat; }
.tape-case { position: absolute; left: -4px; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 9px; background: #C22C16; border: 2px solid #16181D; z-index: 2; }
.taped .step { padding-top: 34px; }

/* E: cross out the old way */
.motion .old {
  background-image: linear-gradient(var(--accent-text), var(--accent-text));
  background-repeat: no-repeat;
  background-position: 0 58%;
  background-size: 0% 2px;
}

/* F: moving network behind the contact box */
.offer.net {
  --bg: #16181D; --surface: #1C1F26; --ink: #F5F2EF; --ink-2: #DDD9D5; --muted: #A9AEB9;
  --hair: #353A45; --accent-text: #FF7A63; --on-accent: #FFFFFF;
  color-scheme: dark;
  position: relative; overflow: hidden; isolation: isolate;
  background: #16181D; color: var(--ink); border-color: rgba(255, 255, 255, 0.85);
}
.net-bg, .net-shade { position: absolute; inset: 0; pointer-events: none; }
.net-bg { z-index: -2; }
.net-shade { z-index: -1; background: linear-gradient(90deg, rgba(22,24,29,.62), rgba(22,24,29,.35) 55%, rgba(22,24,29,.7)); }

/* Phones: skip the cross-out lines, they make the list hard to read on a small screen */
@media (max-width: 640px) {
  .motion .old { background-image: none; }
}

/* D on phones and tablets: tape runs down the left of the stacked steps */
.taped-v { position: relative; padding-left: 40px; border-top-color: transparent !important; grid-template-columns: minmax(0, 1fr) !important; }
.tape-v { position: absolute; left: 0; top: 0; bottom: 0; width: 24px; list-style: none; padding: 0; margin: 0; border: 0; pointer-events: none; z-index: 1; }
.tape-v .tape-case { position: absolute; left: 50%; top: -2px; width: 36px; height: 36px; margin: 0 0 0 -18px; border-radius: 9px; background: #C22C16; border: 2px solid #16181D; z-index: 2; }
.tape-v .tape-strip { position: absolute; left: 0; right: 0; top: 16px; bottom: 0; background: #F2C744; border: 2px solid #16181D; border-radius: 4px; transform-origin: 50% 0; overflow: hidden; }
.tape-v .tape-strip::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(180deg, #16181D 0 2px, transparent 2px 14px), repeating-linear-gradient(180deg, #16181D 0 2px, transparent 2px 70px); background-size: 8px 100%, 15px 100%; background-repeat: no-repeat; }