/* ==========================================================
   PALMERS TV — Premium Layer
   A: Authorised-dealer logo wall
   C: Process timeline with custom SVG illustrations
   F: First-load reveal orchestration
   G: Word reveal on section headings
   D: Lenis smooth scroll (no CSS needed beyond html, body)
   ========================================================== */

/* ---------- D · LENIS SMOOTH SCROLL ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-scrolling iframe{pointer-events:none}

/* ==========================================================
   A · BRAND LOGO WALL
   ========================================================== */
.brand-wall{
  --brand-color: rgba(255,255,255,.78);
  --brand-color-hover: #fff;
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:0;
  border-top:1px solid rgba(255,255,255,.08);
  border-left:1px solid rgba(255,255,255,.08);
  margin-top:var(--space-8);
}
.brand-wall__item{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-8) var(--space-5);
  min-height:120px;
  border-right:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  position:relative;
  color:var(--brand-color);
  transition: color .4s ease, background .4s ease;
}
.brand-wall__item::before{
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(circle at center, rgba(232,90,21,.08) 0%, transparent 70%);
  opacity:0;
  transition: opacity .5s ease;
  pointer-events:none;
}
.brand-wall__item:hover{ color:var(--brand-color-hover); }
.brand-wall__item:hover::before{ opacity:1; }
.brand-wall__item svg{
  width:100%;
  max-width:130px;
  height:auto;
  max-height:36px;
  display:block;
  fill:currentColor;
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.brand-wall__item:hover svg{ transform: scale(1.06); }

/* "Authorised dealer" badge over the wall */
.brand-wall-intro{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.4rem .8rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
  margin-bottom:var(--space-4);
}
.brand-wall-intro::before{
  content:'';
  width:6px; height:6px; border-radius:50%;
  background:#e85a15;
  box-shadow:0 0 8px rgba(232,90,21,.7);
}

/* Cream-section variant (for use on lighter pages) */
.brand-wall--cream{
  --brand-color: rgba(61,43,31,.55);
  --brand-color-hover: #3d2b1f;
  border-top-color: rgba(61,43,31,.08);
  border-left-color: rgba(61,43,31,.08);
}
.brand-wall--cream .brand-wall__item{
  border-right-color: rgba(61,43,31,.08);
  border-bottom-color: rgba(61,43,31,.08);
}

@media (max-width: 1024px){
  .brand-wall{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .brand-wall{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .brand-wall__item{ min-height:96px; padding:var(--space-5); }
  .brand-wall__item svg{ max-width:96px; max-height:28px; }
}

/* ==========================================================
   C · PROCESS TIMELINE WITH CUSTOM SVG ILLUSTRATIONS
   ========================================================== */
.process-timeline{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--space-6);
  margin-top:var(--space-10);
}

/* The connecting rail that runs through the cards */
.process-timeline::before{
  content:'';
  position:absolute;
  top:64px;             /* aligned with illustration centerline */
  left:calc(12.5% + 8px);
  right:calc(12.5% + 8px);
  height:2px;
  background:linear-gradient(90deg,
    rgba(232,90,21,0) 0%,
    rgba(232,90,21,.35) 8%,
    rgba(232,90,21,.6) 50%,
    rgba(232,90,21,.35) 92%,
    rgba(232,90,21,0) 100%);
  z-index:0;
  border-radius:1px;
}

.process-step{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0 var(--space-2);
}

/* The circular illustration container */
.process-step__illo{
  position:relative;
  width:128px;
  height:128px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#faf5ee;
  border:2px solid rgba(61,43,31,.08);
  border-radius:50%;
  margin-bottom:var(--space-5);
  transition: border-color .5s cubic-bezier(.22,.61,.36,1),
              transform .5s cubic-bezier(.22,.61,.36,1),
              box-shadow .5s cubic-bezier(.22,.61,.36,1);
  z-index:1;
}
.process-step__illo::before{
  content:'';
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:1px dashed rgba(232,90,21,.25);
  opacity:0;
  transform: rotate(0deg);
  transition: opacity .5s ease;
}
.process-step:hover .process-step__illo{
  border-color: rgba(232,90,21,.4);
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -16px rgba(232,90,21,.35);
}
.process-step:hover .process-step__illo::before{
  opacity:1;
  animation: illoSpin 12s linear infinite;
}
@keyframes illoSpin{
  to{ transform: rotate(360deg); }
}

.process-step__illo svg{
  width:64px;
  height:64px;
  color:#e85a15;
  stroke:currentColor;
  fill:none;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
}

/* Step number chip */
.process-step__num{
  position:absolute;
  top:-6px;
  right:-6px;
  width:32px;
  height:32px;
  background:#e85a15;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.05em;
  box-shadow:0 4px 12px rgba(232,90,21,.4);
  z-index:2;
}

.process-step__title{
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:600;
  color:#3d2b1f;
  margin:0 0 var(--space-2);
  letter-spacing:-.01em;
}
.process-step__text{
  font-size:.92rem;
  line-height:1.55;
  color:#666;
  margin:0;
  max-width:240px;
}

/* Drawing animation for illustration strokes when in view */
.process-step__illo svg [data-draw]{
  stroke-dasharray: var(--len, 200);
  stroke-dashoffset: var(--len, 200);
  transition: stroke-dashoffset 1.2s cubic-bezier(.22,.61,.36,1) var(--delay, 0s);
}
.process-step.is-visible .process-step__illo svg [data-draw]{
  stroke-dashoffset: 0;
}

/* Animated dots/accents inside illustrations */
.process-step__illo svg [data-fade]{
  opacity:0;
  transition: opacity .8s ease var(--delay, .8s);
}
.process-step.is-visible .process-step__illo svg [data-fade]{
  opacity:1;
}

@media (max-width: 1024px){
  .process-timeline{ grid-template-columns:repeat(2, 1fr); gap:var(--space-8) var(--space-4); }
  .process-timeline::before{ display:none; }
}
@media (max-width: 540px){
  .process-timeline{ grid-template-columns:1fr; gap:var(--space-8); }
  .process-step__illo{ width:112px; height:112px; }
  .process-step__illo svg{ width:56px; height:56px; }
}

/* ==========================================================
   F · FIRST-LOAD REVEAL ORCHESTRATION
   ========================================================== */
.fl-veil{
  position:fixed;
  inset:0;
  background:#3d2b1f;
  z-index:9999;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: clip-path 1.1s cubic-bezier(.76,0,.24,1) .15s;
  clip-path: inset(0 0 0 0);
}
.fl-veil.fl-veil--done{
  clip-path: inset(0 0 100% 0);
}
.fl-veil__logo{
  display:flex;
  align-items:center;
  gap:.65rem;
  opacity:0;
  transform: translateY(8px);
  animation: flLogoIn .6s cubic-bezier(.22,.61,.36,1) .2s forwards;
}
.fl-veil__logo-mark{
  width:36px; height:36px;
  color:#e85a15;
}
.fl-veil__logo-text{
  font-family:var(--font-display);
  font-size:1.4rem;
  font-weight:600;
  color:#faf5ee;
  letter-spacing:-.01em;
}
.fl-veil__dot{
  position:absolute;
  bottom:32%;
  width:6px; height:6px; border-radius:50%;
  background:#e85a15;
  box-shadow:0 0 12px rgba(232,90,21,.8);
  opacity:0;
  animation: flDotPulse 1.1s ease-out .35s forwards;
}
@keyframes flLogoIn{
  to{ opacity:1; transform: translateY(0); }
}
@keyframes flDotPulse{
  0%{ opacity:0; transform: scale(.3); }
  40%{ opacity:1; transform: scale(1); }
  100%{ opacity:0; transform: scale(2.4); }
}

/* Hero elements staggered reveal AFTER veil lifts */
body.fl-start .hero__eyebrow,
body.fl-start .hero__title,
body.fl-start .hero__lede,
body.fl-start .hero__ctas,
body.fl-start .hero__trust,
body.fl-start .site-header{
  opacity:0;
  transform: translateY(14px);
}
body.fl-active .hero__eyebrow,
body.fl-active .hero__title,
body.fl-active .hero__lede,
body.fl-active .hero__ctas,
body.fl-active .hero__trust,
body.fl-active .site-header{
  opacity:1;
  transform: translateY(0);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1),
              transform .9s cubic-bezier(.22,.61,.36,1);
}
body.fl-active .site-header{ transition-delay:0s; }
body.fl-active .hero__eyebrow{ transition-delay:.05s; }
body.fl-active .hero__title{ transition-delay:.18s; }
body.fl-active .hero__lede{ transition-delay:.42s; }
body.fl-active .hero__ctas{ transition-delay:.58s; }
body.fl-active .hero__trust{ transition-delay:.72s; }

/* Reduced motion: skip the orchestration */
@media (prefers-reduced-motion: reduce){
  .fl-veil{ display:none; }
  body.fl-start .hero__eyebrow,
  body.fl-start .hero__title,
  body.fl-start .hero__lede,
  body.fl-start .hero__ctas,
  body.fl-start .hero__trust,
  body.fl-start .site-header{
    opacity:1; transform:none;
  }
}

/* ==========================================================
   G · WORD-BY-WORD REVEAL ON SCROLL
   ========================================================== */
.word-reveal{
  display:inline-block;
}
.word-reveal__line{
  display:block;
  overflow:hidden;
  padding-bottom:.08em;       /* prevent descender clipping */
  margin-bottom:-.08em;
}
.word-reveal__word{
  display:inline-block;
  transform: translateY(110%);
  opacity:0;
  transition:
    transform .9s cubic-bezier(.22,.61,.36,1) var(--word-delay, 0s),
    opacity .6s ease var(--word-delay, 0s);
  will-change: transform, opacity;
}
.word-reveal__space{
  display:inline-block;
  width:.28em;
}
.word-reveal.is-visible .word-reveal__word{
  transform: translateY(0);
  opacity:1;
}

@media (prefers-reduced-motion: reduce){
  .word-reveal__word{ transform:none; opacity:1; transition:none; }
}