/* Movement for the Daylight homepage. Everything here is switched off under prefers-reduced-motion (see the end). */

/* scroll reveal: only hides things once motion.js has confirmed it is running */
html.js .rv { opacity: 0; transform: translateY(26px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: var(--d, 0ms); }
html.js .rv.in { opacity: 1; transform: none; }

/* hero: the wash drifts and the quote request keeps arriving */
.mesh { background: #F6F7FD; overflow: hidden; }
.mesh::before { content: ""; position: absolute; inset: -18%; animation: drift 22s ease-in-out infinite alternate;
  background:
    radial-gradient(46% 60% at 80% 18%, var(--sky) 0%, transparent 62%),
    radial-gradient(40% 55% at 54% 10%, var(--lilac) 0%, transparent 62%),
    radial-gradient(44% 60% at 90% 62%, var(--pink) 0%, transparent 64%),
    radial-gradient(42% 56% at 60% 84%, var(--peach) 0%, transparent 62%); }
@keyframes drift { from { transform: translate3d(-3%, -2%, 0) rotate(-3deg) scale(1); } to { transform: translate3d(4%, 3%, 0) rotate(4deg) scale(1.08); } }
.collage .toast { animation: arrive 8s var(--ease) infinite; }
@keyframes arrive { 0%, 6% { opacity: 0; transform: translateY(16px) scale(0.94); } 12%, 78% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: translateY(-10px) scale(0.98); } }

/* panel 1: your listing climbs the results */
.map.live { position: relative; height: 172px; display: block; }
.map.live li { position: absolute; left: 0; right: 0; top: 0; height: 52px; opacity: 0.55; box-shadow: none; font-weight: 400; transform: translateY(calc(var(--row) * 60px)); transition: transform 800ms var(--ease), opacity 500ms var(--ease), box-shadow 500ms var(--ease); }
.map.live li i { background: #CBD2E2; transition: background 500ms var(--ease); }
.map.live li.you { opacity: 1; font-weight: 600; z-index: 1; }
.map.live li.you.top { box-shadow: 0 14px 30px -16px rgba(10, 22, 51, 0.4); }
.map.live li.you.top i { background: var(--violet); }
.map.live li.you span { opacity: 0; transition: opacity 500ms var(--ease); }
.map.live li.you.top span { opacity: 1; }

/* panel 2: live status */
.status b::before { animation: ping 2.4s ease-out infinite; }
.status li:nth-child(2) b::before { animation-delay: 0.6s; } .status li:nth-child(3) b::before { animation-delay: 1.2s; } .status li:nth-child(4) b::before { animation-delay: 1.8s; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(157, 240, 196, 0.7); } 70%, 100% { box-shadow: 0 0 0 9px rgba(157, 240, 196, 0); } }
.status [data-tick] { font-variant-numeric: tabular-nums; }

/* panel 3: the wash moves */
.tile.glow { background: linear-gradient(120deg, #FFE6D6, #FFD9E8, #E6DCFF, #D9E9FF, #FFD9E8, #FFE6D6); background-size: 300% 300%; animation: sheen 14s ease-in-out infinite; }
@keyframes sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* panel 4: the build runs from day 1 to live */
.track::before { inset: 0; transform-origin: 0 50%; animation: build 7s var(--ease) infinite; }
.track::after { content: ""; position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--pink), 0 6px 14px rgba(10, 22, 51, 0.3); animation: knob 7s var(--ease) infinite; }
@keyframes build { 0%, 8% { transform: scaleX(0); opacity: 1; } 70%, 92% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes knob { 0%, 8% { left: 0; opacity: 1; } 70%, 92% { left: 100%; opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* ---------- the three showpiece cards ---------- */
.alive { padding-top: clamp(72px, 9vw, 130px); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 56px); }
@media (max-width: 960px) { .cards { grid-template-columns: 1fr; } }
.acard { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 560px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px rgba(10, 22, 51, 0.09); transition: box-shadow 300ms var(--ease), transform 300ms var(--ease); }
.acard:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(91, 75, 245, 0.35), 0 30px 60px -34px rgba(10, 22, 51, 0.4); }
.acard h3 { position: relative; z-index: 2; padding: 28px 28px 0; max-width: 16ch; font-weight: 600; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.12; letter-spacing: -0.035em; }
.acard .viz { position: relative; flex: 1; display: grid; place-items: center; padding: 24px; }
@media (max-width: 960px) { .acard { min-height: 500px; } }

/* card 1: a visitor fills in the form, the request lands */
.halo { position: absolute; inset: 8% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 156, 194, 0.28), rgba(191, 164, 255, 0.16) 55%, transparent 75%); animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(0.94); opacity: 0.8; } 50% { transform: scale(1.05); opacity: 1; } }
.lead { position: relative; width: min(100%, 290px); }
.lead-form { padding: 18px; border-radius: 18px; background: #fff; box-shadow: 0 24px 50px -24px rgba(10, 22, 51, 0.35), 0 0 0 1px rgba(10, 22, 51, 0.06); font-size: 14px; }
.lead-form small { display: block; color: var(--ink-3); font-size: 12px; }
.lead-form .f { margin-top: 4px; margin-bottom: 12px; padding: 9px 12px; height: 38px; border-radius: 10px; background: var(--mist); overflow: hidden; white-space: nowrap; }
.lead-form .f.tall { height: 58px; white-space: normal; }
.lead-form .f span { display: inline-block; overflow: hidden; vertical-align: top; max-width: 0; white-space: nowrap; border-right: 2px solid transparent; }
.lead.s1 .f:nth-of-type(1) span, .lead.s2 .f:nth-of-type(2) span, .lead.s3 .f:nth-of-type(3) span { border-right-color: var(--violet); }
.lead.s1 .f:nth-of-type(1) span, .lead.s2 .f:nth-of-type(1) span, .lead.s3 .f:nth-of-type(1) span, .lead.s4 .f:nth-of-type(1) span, .lead.s5 .f:nth-of-type(1) span { max-width: 14ch; transition: max-width 900ms steps(12); }
.lead.s2 .f:nth-of-type(2) span, .lead.s3 .f:nth-of-type(2) span, .lead.s4 .f:nth-of-type(2) span, .lead.s5 .f:nth-of-type(2) span { max-width: 18ch; transition: max-width 1000ms steps(14); }
.lead.s3 .f:nth-of-type(3) span, .lead.s4 .f:nth-of-type(3) span, .lead.s5 .f:nth-of-type(3) span { max-width: 30ch; transition: max-width 1300ms steps(24); }
.lead-form .send { display: block; padding: 11px; border-radius: 999px; background: var(--ink); color: #fff; text-align: center; font-weight: 600; transition: background 300ms var(--ease), transform 200ms var(--ease); }
.lead.s4 .send { transform: scale(0.96); background: var(--violet); }
.lead.s5 .send { background: #1F9D6B; }
.lead .send::after { content: "Send request"; } .lead.s5 .send::after { content: "Sent ✓"; }
.lead-toast { position: absolute; right: -18px; top: -26px; display: flex; align-items: center; gap: 10px; padding: 11px 16px 11px 11px; border-radius: 14px; background: #fff; box-shadow: 0 24px 50px -18px rgba(10, 22, 51, 0.45); font-size: 13.5px; opacity: 0; transform: translateY(14px) scale(0.92); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.lead-toast i { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--peach), var(--pink) 55%, var(--lilac)); }
.lead-toast b { display: block; } .lead-toast span { color: var(--ink-3); font-size: 12.5px; }
.lead.s5 .lead-toast { opacity: 1; transform: none; }

/* card 2: an email in the brand's own colors (sender line, subject, branded banner, button), turning in the light */
.acard .stage3d { perspective: 900px; }
.brandcard { position: relative; display: flex; flex-direction: column; width: min(78%, 264px); aspect-ratio: 5 / 7; border-radius: 20px; overflow: hidden; background: #fff; transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, -16deg)) rotateZ(-4deg); transition: transform 500ms var(--ease); animation: hover3d 9s ease-in-out infinite; box-shadow: 0 50px 70px -30px rgba(91, 75, 245, 0.45), 0 0 0 1px rgba(10, 22, 51, 0.06); }
@keyframes hover3d { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.brandcard .mail-top { display: flex; align-items: center; gap: 9px; padding: 14px 14px 0; }
.brandcard .av { flex: none; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #FF9A6B, #F0609E 50%, #8E6BFF); }
.brandcard .mail-top b { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.brandcard .mail-top span { display: block; font-size: 11px; color: var(--ink-3); line-height: 1.2; }
.brandcard .mail-subj { padding: 10px 14px 12px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.brandcard .mail-hero { position: relative; overflow: hidden; flex: 1; margin: 12px 12px 0; border-radius: 12px; min-height: 0;
  background: linear-gradient(115deg, #FF9A6B, #F0609E 22%, #BFA4FF 42%, #96C6FF 58%, #F0609E 76%, #FF9A6B); background-size: 280% 280%; animation: flow 10s linear infinite; }
@keyframes flow { from { background-position: 0% 30%; } to { background-position: 280% 70%; } }
.brandcard .mail-hero::before { content: ""; position: absolute; inset: -40%; background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58%); animation: glint 5.5s ease-in-out infinite; }
@keyframes glint { 0%, 30% { transform: translateX(-60%); } 70%, 100% { transform: translateX(60%); } }
.brandcard .sheet { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 16px; }
.brandcard .sheet i { display: block; height: 6px; border-radius: 6px; background: #DDE2EF; } .brandcard .sheet i:nth-child(2) { width: 84%; } .brandcard .sheet i:nth-child(3) { width: 58%; }
.brandcard .sheet b { align-self: flex-start; margin-top: 8px; padding: 7px 13px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 600; }
.brandcard .name { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 7px; color: #fff; font-weight: 700; font-size: 13.5px; letter-spacing: -0.01em; text-shadow: 0 1px 8px rgba(10, 22, 51, 0.25); }
.brandcard .name svg { width: 20px; height: auto; }
.swatches { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; gap: 8px; padding: 8px 10px; border-radius: 999px; background: #fff; box-shadow: 0 16px 30px -14px rgba(10, 22, 51, 0.4); }
.swatches i { width: 18px; height: 18px; border-radius: 50%; animation: pick 6s ease-in-out infinite; }
.swatches i:nth-child(1) { background: #FF9A6B; } .swatches i:nth-child(2) { background: #F0609E; animation-delay: 1.5s; } .swatches i:nth-child(3) { background: #8E6BFF; animation-delay: 3s; } .swatches i:nth-child(4) { background: #4FA3FF; animation-delay: 4.5s; }
@keyframes pick { 0%, 20%, 100% { transform: scale(1); box-shadow: none; } 8% { transform: scale(1.28); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); } }

/* card 3: the towns, drawn in dots */
.acard .viz.map-viz { padding: 0; place-items: stretch; }
.acard canvas { display: block; width: 100%; height: 100%; min-height: 380px; }
.reach { position: absolute; left: 20px; bottom: 18px; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: 0 14px 30px -14px rgba(10, 22, 51, 0.4); font-size: 13.5px; font-weight: 600; }
.reach i { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); animation: ping2 2s ease-out infinite; }
@keyframes ping2 { 0% { box-shadow: 0 0 0 0 rgba(240, 96, 158, 0.6); } 80%, 100% { box-shadow: 0 0 0 9px rgba(240, 96, 158, 0); } }

/* work covers */
.stagger .shot > a > img { transition: transform 500ms var(--ease), box-shadow 500ms var(--ease); }
.stagger .shot:hover > a > img { transform: translateY(-6px) scale(1.012); box-shadow: 0 44px 70px -34px rgba(10, 22, 51, 0.55); }

/* the price card nudges */
.peek { animation: nudge 6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.peek-bar i { animation: start 4.5s var(--ease) infinite; }
@keyframes start { 0%, 15% { width: 0; } 55%, 100% { width: 14%; } }

/* ---------- the tools banner: one row of names that drifts left forever ---------- */
.stack { padding-top: clamp(56px, 7vw, 100px); }
.stack small { display: block; margin-bottom: 20px; font-weight: 500; font-size: 14px; color: var(--ink-2); }
.marquee { --gap: clamp(36px, 4.6vw, 64px); display: flex; gap: var(--gap); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
/* two identical lists side by side, each sliding left by its own width plus one gap, so the second lands exactly where the first began */
.marquee-track { flex: none; display: flex; align-items: center; gap: var(--gap); min-width: 100%; justify-content: space-around; animation: marquee 46s linear infinite; }
.marquee-track li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: clamp(17px, 1.5vw, 20px); letter-spacing: -0.02em; white-space: nowrap; color: var(--ink-3); }
.marquee-track svg { flex: none; width: 22px; height: 22px; fill: currentColor; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-100% - var(--gap))); } }

/* motion.js adds .anim-off to a section while it is off screen, so loops only run where someone can see them */
.anim-off, .anim-off *, .anim-off *::before, .anim-off *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  html.js .rv { opacity: 1; transform: none; }
  .mesh::before, .collage .toast, .status b::before, .tile.glow, .track::before, .track::after, .halo, .brandcard, .brandcard .mail-hero, .brandcard .mail-hero::before,
  .swatches i, .reach i, .peek, .peek-bar i { animation: none !important; }
  .track::before { transform: scaleX(0.7); } .track::after { display: none; }
  .lead-form .f span { max-width: none !important; } .lead-toast { opacity: 1; transform: none; }
  /* the tools banner stands still: one list, wrapped onto as many lines as it needs */
  .marquee { -webkit-mask-image: none; mask-image: none; padding-inline: var(--gutter); }
  .marquee-track { animation: none; flex: 1; min-width: 0; flex-wrap: wrap; justify-content: flex-start; row-gap: 14px; }
  .marquee-track[aria-hidden] { display: none; }
}

/* ---------- phones: fewer stacked boxes. Panels become a swipe row that runs off the right edge, and the pictures
   break out of their column and off alternate sides of the screen (body clips them, see overflow-x in site.css) ---------- */
@media (max-width: 860px) {
  /* "One studio" panels and the trade-page tiles: a sideways row, the next one cut off by the screen edge */
  .bento, .demos { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px; }
  .bento::-webkit-scrollbar, .demos::-webkit-scrollbar { display: none; }
  .bento .tile { flex: 0 0 80%; min-height: 420px; scroll-snap-align: start; }
  .demos > div { flex: 0 0 72%; scroll-snap-align: start; }

  /* "A site that keeps working": no card boxes; each picture leaves the column on its own side */
  .cards { gap: 56px; }
  .acard, .acard:hover { min-height: 0; overflow: visible; border-radius: 0; background: none; box-shadow: none; transform: none; }
  .acard h3 { padding: 0; }
  .acard .viz { min-height: 380px; padding: 24px 0 0; }
  .acard:nth-child(1) .viz { place-items: center end; margin-right: calc(-1 * var(--gutter)); }
  .acard:nth-child(1) .lead { width: 300px; margin-right: -96px; }
  .acard:nth-child(1) .lead-toast { right: auto; left: -18px; }
  .acard:nth-child(2) .viz { place-items: center start; margin-left: calc(-1 * var(--gutter)); }
  .acard:nth-child(2) .brandcard { width: 250px; margin-left: -64px; }
  .acard:nth-child(2) .swatches { left: auto; right: 8px; transform: none; }
  .acard .viz.map-viz { margin-inline: calc(-1 * var(--gutter)); }
  .acard .reach { left: var(--gutter); }
  /* the navy price band: its drawn form repeats the real one near the top, so phones get the button alone */
  .getprice .peek { display: none; }
}
@media (max-width: 700px) {
  /* client sites: each screenshot runs off one edge, its phone sits on the other */
  .stagger { gap: 52px; }
  .stagger figure:nth-child(odd) .shot { margin-right: calc(-1 * var(--gutter)); }
  .stagger figure:nth-child(even) .shot { margin-left: calc(-1 * var(--gutter)); }
  .stagger figure:nth-child(odd) .shot > a > img { border-radius: 16px 0 0 16px; }
  .stagger figure:nth-child(even) .shot > a > img { border-radius: 0 16px 16px 0; }
  .stagger figure:nth-child(odd) .shot .phone { left: -2%; right: auto; }
  .stagger figure:nth-child(even) .shot .phone { right: -2%; left: auto; }
  .stagger figure:nth-child(even) figcaption { text-align: right; }
}
@media (max-width: 560px) {
  /* client logos: one row, each scaled down to fit */
  .logos { flex-wrap: nowrap; justify-content: space-between; gap: 14px; }
  .logos li { flex: 0 1 auto; min-width: 0; }
  .logos img { width: auto; height: auto; max-width: 100%; max-height: calc(var(--h, 40px) * 0.62); }
}