/* spareday homepage hero: the pen and its words (released 2026-09-30, Reece's round 101 + 102 picks).
   Computer: round 101 card 1 (phrases on the pen's line from under "love.", ivory). Phone: round 102 option 1 (one
   phrase at a time on the line above the headline) + the side-by-side buttons (round 99). Plus the polish he took.
   Source and proof: spareday-website mockups/hero-final3-2026-09-30 and mockups/hero-phone-2026-09-30. */
/* Shared effect layer: the height of the first screen, full width, never catches taps, never adds sideways scroll. */
.fx{position:absolute;top:0;left:0;right:0;height:100svh;pointer-events:none;overflow:hidden;}
.fx canvas,.fx svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
.fx-over{z-index:4;}   /* light that falls ON the page (over the words too, like real light) */
.fx-under{z-index:1;}  /* things that sit BEHIND the words */
.fx{opacity:0;animation:fxin 1.6s ease .2s forwards;}
@keyframes fxin{to{opacity:1}}
@media (prefers-reduced-motion: reduce){.fx{animation:none;opacity:1;}}

/* Words on a line (cards 4-8), round 97's first version: faint pen line, serif italic words, the lit phrase darkens */
.fx-words .pen{fill:none;stroke:#141412;stroke-opacity:.28;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;}
.fx-words text{font-family:var(--serif);font-style:italic;fill:#141412;fill-opacity:.40;letter-spacing:.01em;opacity:0;transition:opacity 1.4s ease;}
.fx-words.hand text{font-family:'Nothing You Could Do',cursive;font-style:normal;letter-spacing:0;fill-opacity:.46;}
.fx-words.on text{opacity:1;}
.fx-words tspan{transition:fill-opacity .6s ease;}
.fx-words tspan.now{fill-opacity:.95;}
.fx-words .ch{fill-opacity:0;transition:fill-opacity .5s ease;}
.fx-words .ch.in{fill-opacity:.82;}
.fx-words .ch.gone{fill-opacity:0;transition-delay:0s !important;transition-duration:.6s;}
@media (max-width:700px){.fx-words text{fill-opacity:.36;}.fx-words .pen{stroke-opacity:.18;}.fx-words tspan.now{fill-opacity:.8;}}

/* FINAL ROUND: smoother words (Reece on card 4: "the animation isnt smooth enough"). Sub-pixel glyph placement so
   letters glide instead of stepping a pixel at a time; the loop itself also runs at 60 frames a second now. */
.fx-words svg text{text-rendering:geometricPrecision;}
.fx-words svg{will-change:transform;}

/* round 100: the line under "love." on a phone, same pen as the ribbon, a touch firmer because it sits on a word */
@media (max-width:700px){.fx-words .pen.under{stroke-opacity:.3;stroke-width:1.5;}}

/* round 101: the same line reversed (for phrases on stretches that head leftwards) is never drawn */
.fx-words .ghost{fill:none;stroke:none;}

/* PHONE POLISH (round 99, every card). Reece on round 98: "on mobile, the contact us and free quote CTA
   placement is terrible ... it just looks a bit clunky and doesnt look polished".
   Cause, measured on the live page: the round-58 "buttons step up" sizes (.hero-cta 1.15rem 2.6rem,
   .hero-ghost 1.1rem 2.2rem) sit AFTER the 430px phone sizes in the stylesheet, so phones get computer-sized
   pills. They no longer fit one row, wrap into two uneven pills of different widths and heights with a big gap.
   Fix: one tidy pair on phones, the quote button a little wider, both the same height and type size, and the
   reviews line kept on one row beside the faces instead of stacking into three. Mockups only: going live
   needs Reece's own OK, as its own change. */
@media (max-width:560px){
  .hero .hero-ctas{display:grid;grid-template-columns:1.3fr 1fr;gap:.55rem;margin-top:1.35rem;width:100%;max-width:26rem;}
  .hero .hero-ctas .hero-cta,.hero .hero-ctas .hero-ghost{display:flex;align-items:center;justify-content:center;
    box-sizing:border-box;min-height:3.3rem;padding:.85rem .6rem;font-size:.95rem;line-height:1.1;white-space:nowrap;text-align:center;}
  .hero .hero-ctas .hero-ghost{border-color:rgba(20,20,18,.55);}
  .hero .hero-ctas .aside{display:none;}
  .hero .hero-proof{flex-wrap:nowrap;gap:.7rem;margin-top:1.15rem;}
  .hero .hero-proof .txt{min-width:0;}
  .hero .hero-proof .who{font-size:.78rem;line-height:1.35;}
}
@media (max-width:374px){
  .hero .hero-ctas .hero-cta,.hero .hero-ctas .hero-ghost{font-size:.9rem;padding:.8rem .45rem;}
}

/* ROUND 102 phone treatment (see phone.js). Same pen as the computer: the stroke a touch firmer than round 101's
   phone line (it now sits in open space, not behind the headline), the words in the serif italic, a comfortable grey. */
.fx-phone .pen{stroke-opacity:.24;stroke-width:1.3;}
.fx-phone .pen.under{stroke-opacity:.3;stroke-width:1.5;}
.fx-phone .ch.in:not(.gone){fill-opacity:.62;}   /* not(.gone): or it overrides the fade-out */
/* Newcastle: "love," never splits from its comma (live, at 360 wide the comma sat alone on its own line) */
.hero h1 .nw{white-space:nowrap;}

/* phone: the pen's line takes the place of the rule over the headline (round 102 option 1) */
@media (max-width:700px){.hero .eb-rule{visibility:hidden;}}
.sd-pen-phone .hero .eb-rule{visibility:hidden;}   /* a phone turned sideways gets the phone version too */


.fx-phone .ch.in:not(.gone){fill-opacity:.8;}

.fx-words:not(.fx-phone) text{fill-opacity:.72;transition:opacity 1s cubic-bezier(.22,1,.36,1);} .fx-words:not(.fx-phone) tspan.now{fill-opacity:.95;}