/* Pacheco Roofing "pop" layer: tickers, stats, stickers, saturated sections, glow form, bursts, roof slam. */
:root{--gold:#f5c542;--gold-2:#ffe08a;--gold-deep:#b8860b;--neon:0 0 18px rgba(158,240,26,.65),0 0 48px rgba(158,240,26,.35)}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ---------- Hero: roof slams onto the house ---------- */
.hero-mark{width:118px;height:88px;overflow:visible}
.hero-mark .d1{display:none}
.roof-slab{fill:url(#roofMetal);stroke:#0f1400;stroke-width:1.2;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(158,240,26,.9))}
.js .roof-slab{opacity:0;transform:translateY(-160px) rotate(-8deg);transform-box:view-box;animation:roofSlam .55s cubic-bezier(.55,0,1,.45) 1.05s forwards}
@keyframes roofSlam{0%{opacity:0;transform:translateY(-160px) rotate(-8deg)}15%{opacity:1}82%{transform:translateY(2px) rotate(0)}90%{transform:translateY(-5px)}100%{opacity:1;transform:none}}
.hero.shake .hero-inner{animation:heroShake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes heroShake{10%,90%{translate:-1px 1px}20%,80%{translate:3px -2px}30%,50%,70%{translate:-5px 3px}40%,60%{translate:5px -1px}}
.hero-flash.boom{animation:boom .5s ease-out}
@keyframes boom{0%{opacity:.55}100%{opacity:0}}
.dust{position:absolute;pointer-events:none;width:8px;height:8px;border-radius:50%;background:rgba(220,255,170,.9);box-shadow:0 0 10px rgba(158,240,26,.8);z-index:5;animation:dust .9s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes dust{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.hero h1.slam{font-size:clamp(2.6rem,7.4vw,5.6rem);line-height:.92;letter-spacing:-.005em}
.hero h1.slam .l2{filter:drop-shadow(0 0 22px rgba(158,240,26,.45))}
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(60% 50% at 12% 30%,rgba(158,240,26,.22),transparent 70%),
  radial-gradient(40% 40% at 88% 18%,rgba(245,197,66,.18),transparent 70%),
  linear-gradient(90deg,rgba(10,12,14,.82),rgba(10,12,14,.2) 70%)}
.hero-inner,.years-badge,.hero-shingles{z-index:3}

/* sticker-style hero badges */
.hero-badges{gap:12px}
.hero-badges li{background:#f4f6f0;color:#111;border:3px solid #fff;border-radius:999px;padding:7px 14px 7px 10px;font-weight:800;text-transform:uppercase;font-size:.78rem;letter-spacing:.04em;box-shadow:0 6px 0 rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.4);rotate:var(--r,-3deg)}
.hero-badges li:nth-child(1){--r:-4deg;background:var(--lime);border-color:#e6ffc2}
.hero-badges li:nth-child(2){--r:3deg;background:linear-gradient(135deg,var(--gold-2),var(--gold) 45%,#e0a91f);border-color:#fff3c8}
.hero-badges li:nth-child(3){--r:-2deg}
.hero-badges li svg{color:#111}
@media (prefers-reduced-motion:no-preference){
  .hero-badges li{animation:wobble 3.6s ease-in-out infinite;animation-delay:calc(var(--i,0) * .5s + 2.4s)}
  .hero-badges li:nth-child(2){--i:1}.hero-badges li:nth-child(3){--i:2}
  .hero-badges li:hover{animation:wobbleFast .5s ease-in-out infinite}
}
@keyframes wobble{0%,70%,100%{transform:none}76%{transform:rotate(-6deg) scale(1.06)}82%{transform:rotate(5deg) scale(1.06)}88%{transform:rotate(-3deg)}94%{transform:rotate(2deg)}}
@keyframes wobbleFast{0%,100%{transform:rotate(-5deg) scale(1.08)}50%{transform:rotate(5deg) scale(1.08)}}

/* ---------- Crossing tape tickers ---------- */
.tape-zone{position:relative;z-index:4;margin:-34px 0 -10px;padding:26px 0 30px;overflow:hidden;pointer-events:none}
.tape-thin{margin:0;padding:34px 0 30px;background:linear-gradient(180deg,var(--bg),#0d0f10)}
.ticker{position:relative;width:110%;margin-left:-5%;overflow:hidden;border-block:3px solid #0f1400;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.tk-lime{background:linear-gradient(90deg,#8fe000,#b8ff3d 50%,#8fe000);color:#0f1400;rotate:-2.2deg;box-shadow:0 0 34px rgba(158,240,26,.45),0 10px 30px rgba(0,0,0,.45)}
.tk-gold{background:linear-gradient(90deg,#1a1d20,#23272b);color:var(--gold-2);rotate:1.8deg;margin-top:-14px;border-color:var(--gold)}
.tape-thin .tk-lime{rotate:-1.2deg}
.tk-track{display:flex;width:max-content}
.tk-list{display:flex;list-style:none;margin:0;padding:0}
.tk-list li{display:flex;align-items:center;gap:22px;padding:12px 0 12px 22px;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.15rem,2.6vw,1.7rem);letter-spacing:.04em;white-space:nowrap;line-height:1}
.tk-list svg{width:20px;height:20px;fill:currentColor}
.tk-gold .tk-list svg{fill:var(--lime);filter:drop-shadow(0 0 6px rgba(158,240,26,.8))}
.tk-gold .tk-list li span{background:linear-gradient(180deg,#fff6cf,var(--gold) 55%,#d39b16);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (prefers-reduced-motion:no-preference){
  .tk-track{animation:marq 38s linear infinite}
  .tk-rev .tk-track{animation-direction:reverse;animation-duration:44s}
}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Stats band ---------- */
.stats{position:relative;padding:34px 0 46px;background:
  radial-gradient(50% 120% at 50% 0%,rgba(158,240,26,.16),transparent 70%),var(--bg)}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (min-width:900px){.stats-grid{grid-template-columns:repeat(4,1fr);gap:20px}}
.stat{position:relative;text-align:center;padding:20px 10px 18px;border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.01));border:1px solid rgba(158,240,26,.22);overflow:hidden}
.stat::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:80%;background:radial-gradient(closest-side,rgba(158,240,26,.25),transparent);pointer-events:none}
.stat-n{display:block;font-family:var(--display);font-weight:800;font-size:clamp(3.2rem,9vw,5.2rem);line-height:.9;color:transparent;-webkit-text-stroke:2px var(--lime);text-shadow:0 0 26px rgba(158,240,26,.35)}
.stat:nth-child(2) .stat-n,.stat:nth-child(4) .stat-n{-webkit-text-stroke-color:var(--gold);text-shadow:0 0 26px rgba(245,197,66,.3)}
.stat.done .stat-n{animation:statPop .5s cubic-bezier(.2,1.6,.4,1)}
.stat:hover .stat-n{color:rgba(158,240,26,.18)}
@keyframes statPop{40%{transform:scale(1.18)}100%{transform:none}}
.stat-l{display:block;margin-top:8px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;color:#e9eef1}

/* ---------- Headings: metallic two-tone, roof squiggle ---------- */
.section h2{font-size:clamp(2.3rem,6.4vw,4rem);line-height:.95;background:linear-gradient(100deg,#d5dbe0 0%,#fff 22%,#9aa4ab 40%,#fff 52%,#b9c2c8 70%,#f2f4f6 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:22px;position:relative;filter:drop-shadow(0 2px 0 rgba(0,0,0,.4))}
.section h2::after{content:"";position:absolute;left:0;bottom:0;width:min(260px,70%);height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 16'%3E%3Cpath d='M2 14 L28 3 L54 14 L80 3 L106 14 L132 3 L158 14 L184 3 L210 14 L236 3 L258 12' fill='none' stroke='%239ef01a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left/260px 16px no-repeat;filter:drop-shadow(0 0 6px rgba(158,240,26,.8));clip-path:inset(0 0 0 0)}
.area h2::after,.section.area-photo h2::after{left:0}
@media (prefers-reduced-motion:no-preference){
  .js .section h2::after{clip-path:inset(0 100% 0 0);transition:clip-path 1s cubic-bezier(.65,0,.35,1) .2s}
  .js .section h2.h-in::after{clip-path:inset(0 0 0 0)}
  .js .section h2.h-in{animation:hShine 2.2s ease-in-out .1s 1}
}
@keyframes hShine{0%{background-position:100% 0}100%{background-position:0 0}}
.kicker{font-size:.86rem;color:var(--lime);text-shadow:0 0 12px rgba(158,240,26,.6)}

/* ---------- Saturated section backgrounds ---------- */
.why{background:
  radial-gradient(70% 60% at 100% 0%,rgba(245,197,66,.13),transparent 60%),
  radial-gradient(60% 70% at 0% 100%,rgba(158,240,26,.16),transparent 60%),
  repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 2px,transparent 2px 22px),#121416}
.why-card{background:linear-gradient(165deg,#22282c,#16191c);border:1px solid rgba(158,240,26,.18);box-shadow:0 18px 40px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.2,1.4,.4,1),box-shadow .35s,border-color .35s}
.why-card:hover{transform:translateY(-8px) rotate(-1deg);border-color:var(--lime);box-shadow:0 0 0 1px var(--lime),0 0 34px rgba(158,240,26,.35),0 24px 50px rgba(0,0,0,.5)}
.why-card:nth-child(even):hover{transform:translateY(-8px) rotate(1deg)}
.why-num{font-size:4.4rem;background:linear-gradient(180deg,#fff6cf,var(--gold) 55%,#c48a10);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(245,197,66,.4))}
.why-ico{filter:drop-shadow(0 0 8px rgba(158,240,26,.7))}
.services{background:
  radial-gradient(80% 60% at 50% 0%,rgba(158,240,26,.2),transparent 65%),
  linear-gradient(180deg,#0f1a07 0%,#12160f 40%,#121416 100%)!important}
.how{background:
  radial-gradient(60% 80% at 100% 50%,rgba(158,240,26,.14),transparent 60%),
  linear-gradient(180deg,#121416,#171a12)!important}
.step-n{background:linear-gradient(135deg,var(--lime-2),var(--lime) 50%,#6fbf00)!important;color:#0f1400!important;box-shadow:0 0 0 4px rgba(158,240,26,.18),0 0 28px rgba(158,240,26,.55)!important;font-size:1.5rem!important}
.estimate{background:
  radial-gradient(60% 70% at 0% 20%,rgba(245,197,66,.12),transparent 60%),
  radial-gradient(70% 70% at 100% 100%,rgba(158,240,26,.16),transparent 60%),#111315!important}
#work{background:
  radial-gradient(60% 50% at 0% 0%,rgba(158,240,26,.12),transparent 60%),
  radial-gradient(50% 50% at 100% 100%,rgba(245,197,66,.1),transparent 60%),#101214}

/* Service area over the wraparound porch photo */
.area-photo{padding:clamp(80px,11vw,150px) 0;background:#0c0f0a;border:0;clip-path:polygon(0 5%,100% 0,100% 95%,0 100%);margin:-10px 0}
.area-bg{position:absolute;inset:-12% 0;z-index:0;background:image-set(url(../images/work/metal-wraparound-porch-xl.webp) type("image/webp"),url(../images/work/metal-wraparound-porch-xl.jpg) type("image/jpeg")) center 45%/cover no-repeat}
@media (max-width:899px){.area-bg{background-image:image-set(url(../images/work/metal-wraparound-porch-sm.webp) type("image/webp"),url(../images/work/metal-wraparound-porch-sm.jpg) type("image/jpeg"))}}
.area-photo::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(100deg,rgba(10,14,6,.94) 0%,rgba(14,24,4,.82) 45%,rgba(60,110,0,.35) 100%),
  radial-gradient(50% 80% at 85% 50%,rgba(158,240,26,.28),transparent 70%)}
.area-photo .area-inner{position:relative;z-index:2}
.area-photo .area-ico{color:var(--lime);filter:drop-shadow(0 0 12px rgba(158,240,26,.9))}
@media (prefers-reduced-motion:no-preference){.area-photo .area-ico{animation:pinBob 2.4s ease-in-out infinite}}
@keyframes pinBob{50%{transform:translateY(-8px)}}
.area-photo + .peak-divider{margin-top:-6px}

/* Bolder roof-peak dividers */
.peak-divider{height:64px}
.pd-line{stroke-width:3.5}
@media (prefers-reduced-motion:no-preference){.peak-divider.in .pd-line{animation:pdGlow 3s ease-in-out 1.6s infinite}}
@keyframes pdGlow{50%{filter:drop-shadow(0 0 12px rgba(158,240,26,1)) drop-shadow(0 0 24px rgba(158,240,26,.6))}}

/* ---------- Estimate: spinning sticker + glowing form border ---------- */
.estimate-copy{position:relative}
.spin-sticker{width:132px;height:132px;margin:30px 0 0 8px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
@media (min-width:900px){.spin-sticker{width:170px;height:170px;margin:46px 0 0 20px}}
.spin-sticker svg{width:100%;height:100%;overflow:visible}
.ss-bg{fill:var(--lime);stroke:#e6ffc2;stroke-width:4}
.ss-core{fill:#121416}
.ss-spin text{font:800 21px/1 var(--display,sans-serif);fill:#0f1400}
.ss-spin{transform-origin:100px 100px}
.ss-house{fill:none;stroke:var(--lime);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.ss-win{fill:var(--gold)}
@media (prefers-reduced-motion:no-preference){
  .ss-spin{animation:spin 16s linear infinite}
  .spin-sticker{animation:stickBob 4s ease-in-out infinite}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes stickBob{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(6deg) translateY(-6px)}}

.glow-border{position:relative;isolation:isolate;border:0!important;background:#191c1f!important}
.glow-border::before{content:"";position:absolute;inset:-3px;z-index:-2;border-radius:inherit;padding:3px;background:conic-gradient(from var(--ang),var(--lime),var(--gold) 25%,#16191b 40%,#16191b 60%,var(--lime-2) 80%,var(--lime));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glow-border{box-shadow:0 0 34px rgba(158,240,26,.35),0 30px 60px rgba(0,0,0,.45)!important}
@media (prefers-reduced-motion:no-preference){.glow-border::before{animation:angSpin 5s linear infinite}.glow-border{animation:glowPulse 5s ease-in-out infinite}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 30px rgba(158,240,26,.35),0 30px 60px rgba(0,0,0,.45)}50%{box-shadow:0 0 56px rgba(245,197,66,.4),0 0 90px rgba(158,240,26,.2),0 30px 60px rgba(0,0,0,.45)}}
@keyframes angSpin{to{--ang:360deg}}

/* ---------- Button bursts ---------- */
.btn{position:relative}
.btn-lime{box-shadow:0 0 0 0 rgba(158,240,26,.5),0 8px 30px rgba(158,240,26,.4)}
.btn-lime:hover{box-shadow:0 0 0 6px rgba(158,240,26,.18),0 0 40px rgba(158,240,26,.65);transform:translateY(-2px) scale(1.03)}
.btn-ghost:hover{box-shadow:0 0 24px rgba(158,240,26,.35);transform:translateY(-2px)}
.burst{position:fixed;z-index:9999;pointer-events:none;width:9px;height:5px;border-radius:1px;background:var(--c,#9ef01a);box-shadow:0 0 8px var(--c,#9ef01a);animation:burst .75s cubic-bezier(.15,.8,.3,1) forwards}
@keyframes burst{0%{transform:translate(-50%,-50%) rotate(var(--rot)) scale(1);opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(calc(var(--rot) + 220deg)) scale(.3);opacity:0}}

/* Gallery tiles: tilt + neon edge */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .work-grid li .work-btn{transition:transform .35s cubic-bezier(.2,1.4,.4,1),box-shadow .35s}
  .work-grid li:nth-child(odd) .work-btn:hover{transform:rotate(-1.2deg) scale(1.02)}
  .work-grid li:nth-child(even) .work-btn:hover{transform:rotate(1.2deg) scale(1.02)}
  .work-grid li .work-btn:hover{box-shadow:0 0 0 3px var(--lime),0 0 34px rgba(158,240,26,.5)}
}

@media (prefers-reduced-motion:reduce){
  .js .roof-slab{opacity:1;transform:none;animation:none}
  .tk-track,.ss-spin,.spin-sticker,.hero-badges li{animation:none!important}
  .burst,.dust{display:none}
}
@media (max-width:760px){
  .hero-mark{width:84px;height:63px}
  .tape-zone{margin-top:-26px;padding:20px 0 24px}
  .tk-list li{padding:10px 0 10px 16px;gap:16px}
  .area-photo{clip-path:polygon(0 3%,100% 0,100% 97%,0 100%)}
}