/* Jerel's Home Improvement demo: shapes, ruler details, motion */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
.font-cond { font-stretch: 72%; }
.font-wide { font-stretch: 112%; }

/* Hero angled bottom edge */
.hero-cut { clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); }

/* Ruler strip: tick marks along both edges */
.ruler {
  background-color: #ffc61a;
  background-image:
    repeating-linear-gradient(90deg, #0f1114 0 2px, transparent 2px 64px),
    repeating-linear-gradient(90deg, #0f1114 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, #0f1114 0 2px, transparent 2px 64px),
    repeating-linear-gradient(90deg, #0f1114 0 1px, transparent 1px 16px);
  background-size: 100% 16px, 100% 9px, 100% 16px, 100% 9px;
  background-position: 0 0, 0 0, 0 100%, 0 100%;
  background-repeat: repeat-x;
}

/* Marquee */
.marquee { display: flex; width: max-content; animation: marquee 38s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Blueprint grid */
.blueprint {
  background-color: #1d47c4;
  background-image:
    linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
}
.cut-both { clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }
.cut-top { clip-path: polygon(0 0, 100% 9%, 100% 100%, 0 100%); }

.outline-type { color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.22); }
.outline-type-dark { color: transparent; -webkit-text-stroke: 1.5px rgba(255,198,26,.35); }

/* Numbered rows */
.row-photo img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.list-row:hover .row-photo img { transform: scale(1.08); }
.list-row .row-title { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.list-row:hover .row-title { transform: translateX(10px); }

/* Form fields */
.field { width: 100%; background: transparent; border: 0; border-bottom: 2px solid #c9b997; padding: .7rem 0; font-size: 1.05rem; color: #0f1114; border-radius: 0; }
.field:focus { outline: none; border-bottom-color: #1d47c4; }
.field::placeholder { color: #8a7d64; }

/* Reveal on scroll (only when JS runs) */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-in { opacity: 1; transform: none; }
.hero-in { animation: heroIn .9s cubic-bezier(.2,.7,.2,1) both; }
.hero-in-2 { animation-delay: .12s; }
.hero-in-3 { animation-delay: .24s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(30px); } }

.img-zoom img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.img-zoom:hover img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee, .hero-in { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .row-photo img, .list-row .row-title, .img-zoom img { transition: none; }
  [data-parallax] { transform: none !important; }
}