/* Home page v2 — "the high street wakes up" */

/* Hero */
.hs { position: relative; background: linear-gradient(180deg, #0a221c 0%, #123d31 70%, #1d4d3f 100%); color: #fff; overflow: hidden; border-bottom: 6px solid var(--gilt); }
.hs-copy { position: relative; z-index: 2; padding-block: 3.25rem 0; }
.hs h1 { font-family: var(--serif); font-weight: 400; color: var(--gilt); font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: 1.05; margin: 0 0 1.25rem; max-width: 14ch; text-shadow: 0 2px 12px rgba(0,0,0,0.45); }
.hs p { max-width: 50ch; font-size: 1.15rem; color: #e9efe9; margin: 0 0 1.75rem; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.hs .street-wrap { position: relative; height: clamp(16rem, 29vw, 25rem); margin-top: 1.25rem; }
.street { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.street .fascia { font-family: var(--serif); font-size: 26px; fill: var(--gilt); letter-spacing: 2px; }
.street .sgn-t { font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: 1px; }
.street .closed-t { fill: #b8332a; }
.street .open-t { fill: #fff; }

/* the orchestrated moment: lamps, then each shop lights up and flips its sign */
.lamp-glow { opacity: 0; animation: on .9s ease-out .3s forwards; }
.lamp-bulb { opacity: .35; animation: bulb .6s ease-out .3s forwards; }
.lit { opacity: 0; animation: on .7s ease-out forwards; }
.lit-up { animation-duration: 1.2s; }
.sgn-closed, .sgn-open { transform-box: fill-box; transform-origin: center; }
.sgn-closed { animation: hideX .28s ease-in forwards; }
.sgn-open { transform: scaleX(0); animation: showX .32s cubic-bezier(.3,1.6,.5,1) forwards; }
.lit.s1 { animation-delay: .9s; }   .sgn-closed.s1 { animation-delay: 1.1s; }  .sgn-open.s1 { animation-delay: 1.38s; }
.lit.s2 { animation-delay: 1.25s; } .sgn-closed.s2 { animation-delay: 1.45s; } .sgn-open.s2 { animation-delay: 1.73s; }
.lit.s3 { animation-delay: 1.6s; }  .sgn-closed.s3 { animation-delay: 1.8s; }  .sgn-open.s3 { animation-delay: 2.08s; }
.lit.s4 { animation-delay: 1.95s; } .sgn-closed.s4 { animation-delay: 2.15s; } .sgn-open.s4 { animation-delay: 2.43s; }
.lit.s5 { animation-delay: 2.3s; }  .sgn-closed.s5 { animation-delay: 2.5s; }  .sgn-open.s5 { animation-delay: 2.78s; }
.lit-up.s1, .lit-up.s2, .lit-up.s3, .lit-up.s4, .lit-up.s5 { opacity: 0; }
@keyframes on { to { opacity: .9; } }
@keyframes bulb { to { opacity: 1; } }
@keyframes hideX { to { transform: scaleX(0); } }
@keyframes showX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .lamp-glow, .lit { animation: none; opacity: .9; }
  .lamp-bulb { animation: none; opacity: 1; }
  .sgn-closed { animation: none; transform: scaleX(0); }
  .sgn-open { animation: none; transform: none; }
}

/* Demo previews in phones */
.demos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; align-items: start; }
.demo figcaption { margin-top: 1rem; }
.demo figcaption strong { display: block; }
.demo figcaption span { color: var(--muted); font-size: 0.95rem; }
.phone { width: 100%; max-width: 17rem; aspect-ratio: 9 / 18.5; margin-inline: auto; border-radius: 2.2rem; background: #111; padding: 0.7rem; box-shadow: 0 18px 40px rgba(18,63,51,0.25); }
.screen { height: 100%; border-radius: 1.6rem; overflow: hidden; display: flex; flex-direction: column; font-size: 0.72rem; line-height: 1.35; }
.screen .bar { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 0.9rem; font-weight: 700; }
.screen .bar i { font-style: normal; font-weight: 400; opacity: .8; }
.screen .cta { display: inline-block; margin-top: 0.8rem; padding: 0.55rem 0.9rem; border-radius: 3px; font-weight: 700; }
.screen ul { list-style: none; margin: 0; padding: 0; }

/* Demo 1: barber — black, soft white, flame orange; cropped wordmark */
.d-barber { background: #0d0d0d; color: #f2f0eb; }
.d-barber .mark { font-family: var(--serif); font-size: 4.6rem; line-height: .82; letter-spacing: -0.02em; margin: 0.6rem -0.4rem 0; color: #f2f0eb; overflow: hidden; white-space: nowrap; }
.d-barber .hero-b { padding: 0 0.9rem 0.9rem; }
.d-barber .hero-b p { margin: 0.6rem 0 0; color: #c9c5bc; }
.d-barber .cta { background: #ff5a1f; color: #0d0d0d; }
.d-barber ul { margin: auto 0.9rem 0.9rem; border-top: 1px solid #333; }
.d-barber li { display: flex; justify-content: space-between; padding: 0.45rem 0; border-bottom: 1px solid #333; }

/* Demo 2: café — paper, ink, cornflower; editorial */
.d-cafe { background: #fbfaf6; color: #1c1c1c; }
.d-cafe .bar { border-bottom: 1px solid #ddd; font-family: var(--serif); font-weight: 400; font-size: 0.95rem; }
.d-cafe .art { height: 7.5rem; margin: 0.8rem; border-radius: 0.6rem; background: radial-gradient(circle at 30% 60%, #f3d9b1 0 18%, transparent 19%), radial-gradient(circle at 68% 45%, #e8c79a 0 14%, transparent 15%), linear-gradient(160deg, #6c8fd8, #4a6fc2); }
.d-cafe h3 { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; line-height: 1.15; margin: 0.2rem 0.9rem 0.4rem; }
.d-cafe p { margin: 0 0.9rem; color: #555; }
.d-cafe .cta { margin-left: 0.9rem; background: #4a6fc2; color: #fff; }
.d-cafe .hours { margin: auto 0.9rem 0.9rem; padding: 0.6rem; background: #eef2fb; border-radius: 0.4rem; }

/* Demo 3: plumber — navy, white, lime; big booking button */
.d-plumb { background: #f4f7fb; color: #0f2340; }
.d-plumb .bar { background: #0f2340; color: #fff; }
.d-plumb .top { background: #0f2340; color: #fff; padding: 0.4rem 0.9rem 1.1rem; }
.d-plumb .top h3 { font-size: 1.2rem; line-height: 1.15; margin: 0 0 0.4rem; }
.d-plumb .top p { margin: 0; color: #c8d3e6; }
.d-plumb .cta { background: #c6f432; color: #0f2340; display: block; text-align: center; }
.d-plumb ul { margin: 0.9rem; }
.d-plumb li { padding: 0.5rem 0.6rem; background: #fff; border-radius: 0.35rem; margin-bottom: 0.4rem; border-left: 3px solid #c6f432; }
.d-plumb .trust { margin: auto 0.9rem 0.9rem; color: #4a5b78; }

/* Services explained */
.svc { display: grid; grid-template-columns: 15rem 1fr; gap: 2.5rem; padding-block: 2.25rem; border-top: 1px solid var(--line); }
.svc:first-of-type { border-top: 0; padding-top: 0; }
.svc h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--green-deep); margin: 0; }
.svc .price { display: block; margin-top: 0.4rem; color: var(--muted); }
.svc dl { margin: 0; display: grid; grid-template-columns: 9rem 1fr; gap: 0.6rem 1.5rem; max-width: 50rem; }
.svc dt { font-weight: 700; color: var(--green); }
.svc dd { margin: 0; }

@media (max-width: 60rem) {
  .demos { grid-template-columns: 1fr; gap: 3rem; }
  .svc { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 38rem) {
  .hs-copy { padding-top: 3rem; }
  .hs .street-wrap { margin-top: 0; height: 16rem; }
  .svc dl { grid-template-columns: 1fr; gap: 0.2rem; }
  .svc dd { margin-bottom: 0.8rem; }
}

/* ---------- v3: life ---------- */
/* stars twinkle, softly */
.star { opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .star.t0 { animation: tw 3.2s ease-in-out infinite; }
  .star.t1 { animation: tw 4.1s ease-in-out .8s infinite; }
  .star.t2 { animation: tw 5.3s ease-in-out 1.6s infinite; }
}
@keyframes tw { 50% { opacity: .15; } }

/* a warm lamp light that follows the pointer across the street */
.hs::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(28rem 20rem at var(--mx, 70%) var(--my, 75%), rgba(255, 220, 150, 0.16), transparent 70%); }

/* scrolling down: the street steps towards you as the headline lifts away */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .street-wrap .street { animation: approach linear both; animation-timeline: scroll(root); animation-range: 0 70vh; transform-origin: 50% 100%; }
    .hs-copy { animation: lift linear both; animation-timeline: scroll(root); animation-range: 0 60vh; }
    .roofline { animation: drift linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
  }
}
@keyframes approach { to { transform: scale(1.12); } }
@keyframes lift { to { transform: translateY(-3rem); opacity: .35; } }
@keyframes drift { to { transform: translateY(18px); } }

/* demo phones fanned out in 3D */
.demos { perspective: 1400px; }
.demo .phone { transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; transform-style: preserve-3d; }
@media (min-width: 60.01rem) {
  .demo:nth-child(1) .phone { transform: rotateY(18deg) rotateZ(-2deg) translateZ(-20px); }
  .demo:nth-child(2) .phone { transform: translateY(-1.5rem) translateZ(30px); box-shadow: 0 30px 60px rgba(18,63,51,0.35); }
  .demo:nth-child(3) .phone { transform: rotateY(-18deg) rotateZ(2deg) translateZ(-20px); }
  .demo:hover .phone, .demo:focus-within .phone { transform: translateY(-1rem) translateZ(60px); box-shadow: 0 36px 70px rgba(18,63,51,0.4); }
}
@media (prefers-reduced-motion: reduce) { .demo .phone { transition: none; } }

/* before / after slider */
.ba { max-width: 62rem; }
.ba-frame { border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px rgba(18,63,51,0.25); border: 1px solid var(--line); background: #fff; }
.ba-bar { display: flex; align-items: center; gap: .4rem; padding: .6rem .9rem; background: #e9ece7; }
.ba-bar span { width: .7rem; height: .7rem; border-radius: 50%; background: #c9cfc8; }
.ba-bar em { font-style: normal; margin-left: .8rem; font-size: .85rem; color: var(--muted); background: #fff; padding: .15rem .8rem; border-radius: 99px; }
.ba-stage { position: relative; height: clamp(20rem, 42vw, 26rem); }
.ba-after, .ba-before { position: absolute; inset: 0; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; margin-left: -1.5px; background: var(--gilt); pointer-events: none; }
.ba-handle span { position: absolute; top: 50%; left: 50%; width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; border-radius: 50%; background: var(--gilt); box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.ba-handle span::before { content: "‹ ›"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--green-deep); font-weight: 700; letter-spacing: .1em; }
.ba-label { display: block; margin-top: 1rem; font-weight: 700; }
.ba-range { width: 100%; max-width: 62rem; margin-top: .4rem; accent-color: var(--green); }

/* "after": the café */
.ba-after { background: #fbfaf6; color: #1c1c1c; display: flex; flex-direction: column; }
.ba-nav { display: flex; align-items: center; gap: 1.4rem; padding: 1rem 1.6rem; border-bottom: 1px solid #e3e1da; font-size: .95rem; }
.ba-nav strong { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; margin-right: auto; }
.ba-btn { display: inline-block; background: #4a6fc2; color: #fff; padding: .55rem 1rem; border-radius: 4px; font-weight: 700; font-size: .9rem; }
.ba-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.6rem; padding: 1.6rem; flex: 1; }
.ba-hero h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.1; margin: 0 0 .7rem; }
.ba-hero p { color: #555; margin: 0 0 1rem; }
.ba-pic { border-radius: 10px; background: radial-gradient(circle at 30% 60%, #f3d9b1 0 16%, transparent 17%), radial-gradient(circle at 70% 40%, #e8c79a 0 12%, transparent 13%), linear-gradient(160deg, #6c8fd8, #3f63b6); }
.ba-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 0 1.6rem 1.4rem; }
.ba-row div { background: #eef2fb; border-radius: 8px; padding: .7rem .9rem; display: flex; justify-content: space-between; font-size: .9rem; }

/* "before": the placeholder nobody finished */
.ba-before { background: #000080 repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 10px, transparent 10px 20px); color: #ffff66; display: grid; align-items: center; justify-items: start; padding-left: clamp(1.2rem, 5vw, 3rem); text-align: left; font-family: "Comic Sans MS", "Comic Neue", cursive, sans-serif; }
.ba-old h3 { font-size: clamp(1.8rem, 5vw, 3rem); margin: .4rem 0; color: #ff3b3b; text-shadow: 2px 2px 0 #fff; }
.ba-old p { margin: .3rem 0; color: #fff; }
.ba-old .ba-blink { color: #00ff66; font-weight: 700; }
.ba-cone { font-size: 2.6rem; margin: .4rem 0; }
.ba-old .ba-tiny { font-size: .75rem; color: #9fb0ff; margin-top: 1.2rem; }

@media (max-width: 38rem) {
  .ba-hero { grid-template-columns: 1fr; }
  .ba-pic { display: none; }
  .ba-row { grid-template-columns: 1fr; gap: .4rem; }
  .ba-nav span:not(.ba-btn) { display: none; }
}