/* ============================================================
   Wigan Wetbelts · UI v3 polish layer
   Loaded after styles.css. Purely presentational: motion, depth,
   hover states, typography refinement, smooth scrolling. No layout
   or behaviour changes to the quote / booking flow.
   ============================================================ */

:root{
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-io:  cubic-bezier(.65,0,.35,1);
  --glow:     0 0 0 1px rgba(158,208,255,.10), 0 24px 60px -24px rgba(158,208,255,.35);
  --lift:     0 30px 60px -30px rgba(0,0,0,.65), 0 12px 24px -16px rgba(0,0,0,.5);
  --radius:   20px;
  --radius-s: 12px;
}
html[data-theme="light"]{
  --glow: 0 0 0 1px rgba(15,107,197,.10), 0 24px 60px -28px rgba(15,107,197,.30);
  --lift: 0 30px 60px -34px rgba(12,22,34,.35), 0 10px 20px -16px rgba(12,22,34,.25);
}

/* ---------- global feel ---------- */
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
::selection{ background:rgba(158,208,255,.28); color:#fff; }
html[data-theme="light"] ::selection{ background:rgba(15,107,197,.22); color:#0c1622; }
*{ -webkit-tap-highlight-color:transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:999px; border:3px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.22); background-clip:padding-box; border:3px solid transparent; }
html[data-theme="light"] ::-webkit-scrollbar-thumb{ background:rgba(12,22,34,.18); background-clip:padding-box; border:3px solid transparent; }

/* page fade in */
body{ animation:v3-page .7s var(--ease-out) both; }
@keyframes v3-page{ from{ opacity:0; } to{ opacity:1; } }

/* scroll progress hairline */
#v3Progress{ position:fixed; left:0; top:0; height:2px; width:100%; z-index:120; pointer-events:none; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, var(--accent), var(--accent-2)); opacity:.9; }

/* ---------- typography ---------- */
h1, h2, h3{ letter-spacing:-.025em; text-wrap:balance; }
h2{ font-size:clamp(2rem,4vw,3rem); line-height:1.05; }
h2 em, h1 em{ font-style:normal; background:linear-gradient(92deg, var(--accent) 0%, var(--accent-2) 60%, var(--accent) 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% 100%; animation:v3-shimmer 9s linear infinite; }
html[data-theme="light"] h2 em, html[data-theme="light"] h1 em{ background:linear-gradient(92deg, #0f6bc5, #0a3f77 60%, #0f6bc5); -webkit-background-clip:text; background-clip:text; }
@keyframes v3-shimmer{ to{ background-position:200% 0; } }
.section-head p{ font-size:1.08rem; line-height:1.65; color:var(--text-2); max-width:62ch; }
.kicker{ position:relative; padding-left:34px; }
.kicker::before{ content:""; position:absolute; left:0; top:50%; width:22px; height:2px; background:var(--accent); border-radius:2px; transform:translateY(-50%); }

/* ---------- surfaces ---------- */
.card, .hero-card, .q-panel, .qc, .map-card, .contact-list, .faq, .motion-tile, .video-card, .transit-media{
  border-radius:var(--radius);
  background-image:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 20px 40px -30px rgba(0,0,0,.6);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s ease, background-color .3s ease;
  will-change:transform;
}
html[data-theme="light"] .card, html[data-theme="light"] .hero-card, html[data-theme="light"] .q-panel, html[data-theme="light"] .qc, html[data-theme="light"] .map-card, html[data-theme="light"] .contact-list, html[data-theme="light"] .faq, html[data-theme="light"] .video-card{
  background-image:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.6));
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 20px 40px -32px rgba(12,22,34,.3);
}
.card:hover, .video-card:hover, .g-item:hover, .motion-tile:hover, .map-card:hover, .how-step:hover{
  transform:translateY(-6px); box-shadow:var(--lift), var(--glow); border-color:var(--accent-line);
}
/* glow border that follows the cursor */
.card, .video-card, .hero-card{ position:relative; overflow:hidden; }
.card::after, .video-card::after, .hero-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:0; transition:opacity .4s ease;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(158,208,255,.14), transparent 60%);
}
html[data-theme="light"] .card::after, html[data-theme="light"] .video-card::after, html[data-theme="light"] .hero-card::after{ background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(15,107,197,.10), transparent 60%); }
.card:hover::after, .video-card:hover::after, .hero-card:hover::after{ opacity:1; }
.card .ic{ transition:transform .4s var(--ease-out), box-shadow .4s ease; }
.card:hover .ic{ transform:translateY(-2px) scale(1.06); box-shadow:0 10px 24px -12px rgba(158,208,255,.5); }

/* media tiles: subtle zoom */
.g-item, .motion-tile, .vc-thumb, .transit-media{ overflow:hidden; }
.g-item img, .motion-tile video, .vc-thumb img, .vc-thumb video, .transit-media video{ transition:transform .9s var(--ease-out); }
.g-item:hover img, .motion-tile:hover video, .video-card:hover .vc-thumb img, .video-card:hover .vc-thumb video{ transform:scale(1.05); }

/* ---------- buttons ---------- */
.btn{ position:relative; overflow:hidden; transition:transform .25s var(--ease-out), box-shadow .3s ease, background .25s ease, border-color .25s ease, color .25s ease; }
.btn::before{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); opacity:0; transition:opacity .2s; }
.btn:hover::before{ opacity:1; animation:v3-shine .9s var(--ease-out) forwards; }
@keyframes v3-shine{ to{ left:130%; } }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.985); transition-duration:.08s; }
.btn-primary:hover{ box-shadow:0 14px 34px -10px rgba(158,208,255,.55); }
html[data-theme="light"] .btn-primary:hover{ box-shadow:0 14px 34px -10px rgba(15,107,197,.5); }
.btn-ghost:hover{ border-color:var(--accent-line); background:var(--accent-dim); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:inherit; }

/* ---------- nav ---------- */
.nav-links a{ position:relative; transition:color .25s ease; }
.nav-links a::after{ content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px; border-radius:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left center; transition:transform .35s var(--ease-out); }
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); }
#nav{ transition:background .35s ease, box-shadow .35s ease, border-color .35s ease, transform .35s var(--ease-out); }
#nav.v3-hide{ transform:translateY(-100%); }
#nav.scrolled{ box-shadow:0 10px 30px -20px rgba(0,0,0,.7); }

/* ---------- hero ---------- */
#home{ isolation:isolate; }
#home::before{ content:""; position:absolute; inset:-20% -10%; z-index:0; pointer-events:none; filter:blur(70px); opacity:.55;
  background:
    radial-gradient(38% 42% at 18% 30%, rgba(158,208,255,.22), transparent 70%),
    radial-gradient(32% 36% at 80% 70%, rgba(94,160,255,.16), transparent 70%),
    radial-gradient(28% 30% at 60% 15%, rgba(230,243,255,.10), transparent 70%);
  animation:v3-aurora 18s ease-in-out infinite alternate; }
@keyframes v3-aurora{ 0%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(3%,-2%,0) scale(1.06); } 100%{ transform:translate3d(-2%,3%,0) scale(1.02); } }
#home::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.9'/></svg>"); }
.hero-grid{ position:relative; z-index:1; }
.hero-pill{ backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.hero-pill .dot{ box-shadow:0 0 0 0 rgba(74,222,128,.6); animation:v3-pulse 2.2s ease-out infinite; }
@keyframes v3-pulse{ 0%{ box-shadow:0 0 0 0 rgba(74,222,128,.55); } 100%{ box-shadow:0 0 0 10px rgba(74,222,128,0); } }
.hero-stats .stat{ position:relative; transition:transform .4s var(--ease-out); }
.hero-stats .stat:hover{ transform:translateY(-3px); }
.hero-card{ backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.hero-card:hover{ transform:translateY(-4px); box-shadow:var(--lift), var(--glow); }
.hero-card .btn-primary{ margin-top:4px; }

/* hero entrance choreography */
.hero-pill, #home h1, .hero-lede, .hero-ctas, .hero-stats, .hero-card{ animation:v3-up .9s var(--ease-out) both; }
#home h1{ animation-delay:.08s; } .hero-lede{ animation-delay:.18s; } .hero-ctas{ animation-delay:.26s; } .hero-stats{ animation-delay:.34s; } .hero-card{ animation-delay:.3s; }
@keyframes v3-up{ from{ opacity:0; transform:translateY(22px); filter:blur(6px); } to{ opacity:1; transform:none; filter:blur(0); } }

/* ---------- sections ---------- */
section{ scroll-margin-top:90px; }
.tint{ border-top:0; border-bottom:0;
  background:linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%); position:relative; }
.tint::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line-2), transparent); }
.section-head{ margin-bottom:38px; }

/* reveal: softer, staggered, blur in */
.reveal{ opacity:0; transform:translateY(26px); filter:blur(5px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); transition-delay:var(--d,0ms); }
.reveal.in, .reveal.v3-in{ opacity:1; transform:none; filter:blur(0); }
.v3-no-io .reveal{ opacity:1; transform:none; filter:none; }

/* how steps */
.how-step{ transition:transform .45s var(--ease-out), border-color .3s ease, box-shadow .45s var(--ease-out); border-radius:var(--radius); }
.how-n{ transition:transform .4s var(--ease-out), box-shadow .4s ease; }
.how-step:hover .how-n{ transform:scale(1.08) rotate(-4deg); box-shadow:0 10px 24px -10px rgba(158,208,255,.6); }

/* quote panel */
.q-panel input, .q-panel select, .q-panel textarea{ transition:border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.q-panel input:focus, .q-panel select:focus, .q-panel textarea:focus{ border-color:var(--accent-line); box-shadow:0 0 0 4px var(--accent-dim); }
.q-panel:hover, .qc:hover{ transform:none; }
.pc-grid button, .pc-grid .pc-day{ transition:transform .2s var(--ease-out), background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.pc-grid button:hover:not([disabled]), .pc-grid .pc-day:hover{ transform:translateY(-2px); box-shadow:0 8px 18px -10px rgba(158,208,255,.5); }
#qTotalBar{ backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:transform .45s var(--ease-out), opacity .3s ease; }

/* faq: smooth open */
.faq summary{ cursor:pointer; list-style:none; position:relative; padding-right:40px; transition:color .25s ease; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:6px; top:50%; width:10px; height:10px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg); transition:transform .35s var(--ease-out); }
.faq[open] summary::after{ transform:translateY(-30%) rotate(225deg); }
.faq[open] summary{ color:var(--accent); }
.faq p{ animation:v3-fade .5s var(--ease-out) both; }
@keyframes v3-fade{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* contact rows */
.contact-row{ transition:transform .35s var(--ease-out), background .25s ease; border-radius:var(--radius-s); }
.contact-row:hover{ transform:translateX(4px); background:var(--accent-dim); }

/* footer */
footer{ position:relative; }
footer::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, var(--accent-line), transparent); }
footer a{ transition:color .2s ease, opacity .2s ease; }
footer a:hover{ color:var(--accent); }

/* mobile bar */
.mbar{ backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; filter:none; }
}
@media (max-width:760px){
  .card:hover, .video-card:hover, .g-item:hover, .motion-tile:hover, .map-card:hover, .how-step:hover{ transform:none; }
  #home::before{ filter:blur(50px); opacity:.45; }
}