/* Home: "your local auto customization shop" (2026-10-06), between the 3D story and the reviews. The old site's
   section, rewritten: the shop's own words and address as real text (the home page had almost none), and two of the
   shop's own clips in place of four photos, set off-line on purpose -- one high, one low, drifting apart as you scroll. */
.home-local{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center;
  padding-top:clamp(90px,10vw,150px)!important;padding-bottom:clamp(90px,10vw,150px)!important;overflow:hidden}
.hl-copy .kicker{color:#ee9fc7;margin:0 0 22px}
.hl-copy h2{margin:0 0 28px}
.hl-copy h2 em{font-family:var(--brand-heading);font-style:normal}
.hl-copy .lead{margin:0 0 20px;max-width:44ch}
.hl-copy p:not(.lead):not(.kicker){margin:0 0 30px;max-width:60ch;color:#d8d1c8}
.hl-copy p a{color:var(--paper);text-decoration:none;border-bottom:1px solid #ffffff40;transition:border-color .2s,color .2s}
.hl-copy p a:hover{color:#fff;border-bottom-color:#f59154}
.hl-copy .hl-where{margin:0 0 18px}
.hl-services{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-wrap:wrap;gap:8px;max-width:620px}
.hl-services a{display:inline-flex;align-items:center;min-height:38px;padding:8px 15px;border:1px solid #ffffff38;border-radius:999px;
  background:#ffffff06;color:#efe7df;font-size:14px;line-height:1.2;text-decoration:none;transition:border-color .2s,background .2s,color .2s}
.hl-services a:hover{border-color:transparent;background:linear-gradient(100deg,#ea138f,#f59154);color:#fff}
.hl-services a:focus-visible{outline:2px solid #f59154;outline-offset:3px}
html:not(#tw-type) .after-story .home-local .hl-services li{font-size:14px;line-height:1.2}
.hl-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px 26px}
.hl-call{display:inline-flex;align-items:center;gap:10px;color:var(--paper);font-weight:700;text-decoration:none;
  border-bottom:1px solid #ffffff55;padding-bottom:5px;transition:border-color .2s}
.hl-call:hover{border-bottom-color:#f59154}
.hl-call svg{width:16px;height:16px}

.hl-reels{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px);align-items:start;
  padding:0 clamp(0px,2vw,30px)}
.hl-reel{position:relative;margin:0;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#100c09;
  border:1px solid var(--card-line,rgba(255,217,180,.18));box-shadow:0 30px 70px -30px #000,0 0 60px -30px #ea138f80;
  transform:translate3d(0,var(--hl-y,0px),0) rotate(var(--hl-r,0deg));will-change:transform}
.hl-reel--a{--hl-r:-2.2deg;margin-top:0}
.hl-reel--b{--hl-r:2.4deg;margin-top:22%}
.hl-reel video,.hl-reel img{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.hl-reel figcaption{position:absolute;left:12px;right:12px;bottom:12px;padding:10px 12px;border-radius:12px;
  background:rgba(14,10,9,.66);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #ffffff1c;
  font-size:12.5px;line-height:1.35;color:#efe7df}
.hl-reel figcaption b{display:block;font-family:var(--brand-heading);font-weight:400;font-size:18px;letter-spacing:.02em;color:#fff;margin-bottom:2px}

/* Phones (Jason 2026-10-06: "手机版 local 咋没有背景 而且太长了"): the copy reads tighter, the two clips sit side by side
   as 4:5 cards with a small offset instead of two tall 9:16 phones, and the backdrop is as bright as on the service
   pages (the desktop keeps the quieter one he asked for). Was 1113 px tall at 390 wide. */
@media (max-width:800px){
  .home-local{grid-template-columns:1fr;gap:22px;padding-top:48px!important;padding-bottom:48px!important}
  .hl-copy .kicker{margin-bottom:12px}
  .hl-copy h2{margin-bottom:14px}
  html:not(#tw-type) .after-story .home-local p.lead{max-width:none;margin:0 0 10px;font-size:17px;line-height:1.5}
  html:not(#tw-type) .after-story .home-local p.hl-where{margin:0 0 14px;font-size:13.5px;line-height:1.5}
  .hl-services{gap:6px;margin-bottom:18px}
  .hl-services a{min-height:32px;padding:6px 10px;font-size:12.5px}
  html:not(#tw-type) .after-story .home-local .hl-services li{font-size:12.5px}
  /* the quote button and the phone on one row */
  .hl-actions{flex-wrap:nowrap;gap:16px}
  .hl-actions .pill{min-width:0;padding:13px 16px;font-size:14px;white-space:nowrap}
  .hl-call{font-size:14px;white-space:nowrap}
  .hl-reels{padding:0;gap:10px}
  .hl-reel{aspect-ratio:4/5;border-radius:14px}
  .hl-reel--a{--hl-r:-1.4deg}
  .hl-reel--b{--hl-r:1.6deg;margin-top:6%}
  .hl-reel figcaption{left:8px;right:8px;bottom:8px;padding:7px 9px;font-size:11px}
  .hl-reel figcaption b{font-size:15px;margin:0}
  .hl-reel figcaption{font-size:0}
  .home-ambient video{opacity:.6}
  .home-ambient>div{background:linear-gradient(90deg,#08060bac,#10081175),linear-gradient(#06050a55,transparent 50%,#08060d66)}
}
@media (min-width:801px) and (max-width:1180px){.home-local{gap:40px}.hl-reels{padding:0}}
@media (prefers-reduced-motion:reduce){.hl-reel{transform:rotate(var(--hl-r,0deg))}}

/* Desktop, back from another page: the service cards wait for the studio (src/service-orbit.js adds tw-cards-in), then
   arrive as they do when the doors open (Jason 2026-10-07: "回到主页面之后那几个视频小卡会卡一下"). */
@media(min-width:901px){
  html.tw-skip-intro:not(.tw-cards-in) .svc-orbit{visibility:hidden}
  html.tw-skip-intro:not(.tw-cards-in) body.doors-open .svc-face,html.tw-skip-intro:not(.tw-cards-in) body.doors-open .svc-float{animation:none}
}
/* Phones: the opening's scroll cue (Jason 2026-10-07: "scroll to explore, make larger in the middle, or 'scroll for the
   transformation', arrows"). Same place, under Explore details; the words in the display face and three chevrons that
   light in turn, downward. Still under reduced motion (the middle one lit). */
@media(max-width:900px){
  html:not(#tw-type) .hero-copy .hero-hint{display:flex;flex-direction:column;align-items:center;gap:12px;top:calc(44lvh + 168px);
    font:400 18px/1 var(--brand-heading);letter-spacing:.14em;color:#f4efe8;text-transform:uppercase;text-shadow:0 2px 14px #000}
  .hero-hint .hero-cue{display:flex;flex-direction:column;align-items:center;height:42px;font-style:normal}
  .hero-hint .hero-cue b{display:block;width:16px;height:16px;margin:-4px 0 0;border-right:2px solid #f59154;border-bottom:2px solid #f59154;
    transform:rotate(45deg);opacity:.22;animation:hero-cue 1.5s cubic-bezier(.45,0,.55,1) infinite}
  .hero-hint .hero-cue b:nth-child(2){animation-delay:.16s}
  .hero-hint .hero-cue b:nth-child(3){animation-delay:.32s}
}
@keyframes hero-cue{0%,100%{opacity:.22}30%{opacity:1}}
@media(max-width:900px) and (prefers-reduced-motion:reduce){.hero-hint .hero-cue b{animation:none}.hero-hint .hero-cue b:nth-child(2){opacity:.9}}
@media(max-width:900px) and (max-height:700px){html:not(#tw-type) .hero-copy .hero-hint{top:calc(44lvh + 160px);gap:9px;font-size:16px}}

/* Phones: the story's progress line sits on the stage's own bottom edge. Placed 100lvh - 100dvh up, it rode up and
   down with Safari's toolbar as the page scrolled (Jason 2026-10-07: "这个橙色的线 scroll会跟着动"). */
@media(max-width:900px){html .stage .timeline-track{bottom:0}}

/* The neon backdrop the other pages carry (Jason 2026-10-06: "主页区没有背景 背景是灰色的"). The home page's top half is the
   3D studio, so the backdrop lives in the after-story only: one viewport-tall layer that sticks while the sections
   scroll over it -- the same clip, tint and veil as .ambient-backdrop on the service pages. */
.after-story{background:#09070b}
.home-ambient{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;z-index:0;overflow:hidden;pointer-events:none}
/* quieter than the service pages' .6 (Jason: "别太OVERWHEELING"): a glow behind the content, not a show */
.home-ambient video{display:block;width:100%;height:100%;object-fit:cover;opacity:.38;max-width:none;transform:translateZ(0)}
.home-ambient>div{position:absolute;inset:0;background:linear-gradient(90deg,#08060bc4,#100811a0),linear-gradient(#06050a80,transparent 50%,#08060d8c)}
.after-story>.section{position:relative;z-index:1}
.after-story .review-section,.after-story .home-projects{background:transparent!important}
/* the pause control is the service pages' own round button (.ambient-toggle, brand.css), shown only past the 3D story */
.home-ambient-toggle{cursor:pointer}
.home-ambient-toggle[hidden]{display:none}