/* product page styles, shared by every product page */

.lappy-hero{
  position:relative;
  z-index:1;

  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;

  padding:160px 8% 80px;

  /* clip so the slide-in can't scroll sideways */
  overflow-x:clip;
}

.lappy-hero-copy{
  max-width:none;
  text-align:center;
}

.lappy-hero-title{
  font-family:"SuperMalibu","obliqua",sans-serif;
  font-weight:400;
  font-size:clamp(2.4rem,5.5vw,6.2rem);
  line-height:1.05;
  color:var(--line);
  white-space:nowrap;
}

.lappy-hero-title span{color:var(--accent);}

.lappy-hero-laptop{
  flex:0 0 auto;
  width:min(46vw,560px);
}

.lappy-hero-laptop img{
  display:block;
  max-width:100%;
  max-height:70vh;
  width:auto;
  height:auto;
  margin:0 auto;

  user-select:none;
  pointer-events:none;

  animation:lappy-float 4.5s ease-in-out infinite;
}

@keyframes lappy-float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}

@media (prefers-reduced-motion: reduce){
  .lappy-hero-laptop img{animation:none;}
}

/* hero entrance, plays after the splash */
#splash:not(.loaded) ~ .lappy-hero .lappy-hero-title,
#splash:not(.loaded) ~ .lappy-hero .lappy-hero-laptop{opacity:0;}

#splash.loaded ~ .lappy-hero .lappy-hero-title{animation:lappy-hero-rise 1s cubic-bezier(.22,1,.36,1) both;}
#splash.loaded ~ .lappy-hero .hero-title-atom{animation:lappy-hero-pop .9s cubic-bezier(.22,1,.36,1) .25s both;}
#splash.loaded ~ .lappy-hero .lappy-hero-laptop{animation:lappy-hero-slide 1.2s cubic-bezier(.22,1,.36,1) .35s both;}

/* rise + pop keyframes live in Style.css */
@keyframes lappy-hero-slide{
  from{opacity:0; transform:translateX(140px) rotate(4deg);}
  to{opacity:1; transform:none;}
}

@media (prefers-reduced-motion: reduce){
  #splash.loaded ~ .lappy-hero .lappy-hero-title,
  #splash.loaded ~ .lappy-hero .hero-title-atom,
  #splash.loaded ~ .lappy-hero .lappy-hero-laptop{animation:none;}
}

.lappy-marquee{
  position:relative;
  z-index:1;
  margin-bottom:48px;
}

@media (max-width:650px){
  .lappy-hero{
    flex-direction:column-reverse;
    text-align:center;
    padding:120px 24px 60px;
    gap:40px;
  }

  .lappy-hero-copy{align-self:center; margin-top:0; max-width:none;}
  .lappy-hero-laptop{width:min(80vw,380px);}

  .lappy-hero-title{
    white-space:normal;
    font-size:clamp(2rem,9vw,3rem);
  }
}

/* lappy feature showcase */
.lappy-showcase{
  position:relative;
  z-index:1;
  height:500vh;
}

.lappy-showcase-sticky{
  position:relative;
  height:100vh;
  overflow:hidden;

  display:flex;
  align-items:center;
}

.lappy-showcase-track{
  display:flex;
  height:100%;
  will-change:transform;
}

.lappy-panel{
  --panel-accent:var(--accent);

  position:relative;
  flex:0 0 100vw;
  height:100%;

  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(24px,5vw,64px);
  padding:0 clamp(28px,7vw,160px);
  overflow:hidden;
}

/* alternate accents per panel */
.lappy-panel:nth-of-type(even){--panel-accent:var(--accent-2);}

/* orange accents go white on orange */
html[data-zone="orange"] .lappy-panel:nth-of-type(odd){--panel-accent:var(--whiteline);}

.lappy-panel-media{
  position:relative;
  z-index:1;
  flex:0 0 clamp(180px,22vw,300px);

  aspect-ratio:9/16;
  border-radius:24px;
  overflow:hidden;

  background:color-mix(in srgb, var(--line) 6%, transparent);
}

.lappy-panel-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  user-select:none;
  pointer-events:none;
}

.lappy-panel-index{
  position:absolute;
  z-index:0;
  top:8%;
  right:6%;

  font-family:"SuperMalibu","obliqua",sans-serif;
  font-size:clamp(6rem,18vw,14rem);
  line-height:1;
  color:var(--panel-accent);
  opacity:.3;

  pointer-events:none;
  user-select:none;

  transition:color .35s ease;
}

/* frosted text card */
.lappy-panel-body{
  position:relative;
  z-index:1;
  flex:1 1 0%;
  min-width:0;
  max-width:1100px;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:24px;
  padding:52px 60px;
  border-radius:28px;

  background:rgba(0,0,0,.035);
  border:1px solid rgba(0,0,0,.08);
  backdrop-filter:blur(25px) saturate(160%);
  -webkit-backdrop-filter:blur(25px) saturate(160%);
}

@media (prefers-color-scheme:dark){
  .lappy-panel-body{background:rgba(255,255,255,.015); border-color:rgba(255,255,255,.08);}
}

/* the rule that actually applies */
html[data-zone] .lappy-panel-body{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14);}

/* smoked glass on orange */
html[data-zone="orange"] .lappy-panel:not(.lappy-panel--cta) .lappy-panel-body{
  background:rgba(0,0,0,.14);
  backdrop-filter:blur(25px);
  -webkit-backdrop-filter:blur(25px);
}

.lappy-panel-body{transition:background .35s ease, backdrop-filter .35s ease, -webkit-backdrop-filter .35s ease;}

.lappy-panel-title{
  font-family:"SuperMalibu","obliqua",sans-serif;
  font-weight:400;
  font-size:clamp(1.9rem,3.4vw,3.2rem);
  line-height:1.15;
  color:var(--line);
}

.lappy-panel-text{
  max-width:58ch;
  font-family:"obliqua",sans-serif;
  font-size:1rem;
  line-height:1.6;
  color:var(--line);
  opacity:.8;
}

.lappy-panel-stat{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:4px;

  font-family:"SuperMalibu","obliqua",sans-serif;
  font-size:clamp(1.6rem,2.6vw,2.2rem);
  line-height:1;
  color:var(--accent-3);

  transition:color .35s ease;
}

/* white stat on orange */
html[data-zone="orange"] .lappy-panel-stat{color:var(--whiteline);}

.lappy-panel-stat small{
  font-family:"obliqua",sans-serif;
  font-size:.75rem;
  font-weight:400;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--line);
  opacity:.65;
}

.lappy-panel--cta{
  justify-content:center;
  text-align:center;
}

.lappy-panel--cta .lappy-panel-body{
  align-items:center;
  max-width:none;

  padding:0;
  background:none;
  border:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* beat the zone rule's specificity */
html[data-zone] .lappy-panel--cta .lappy-panel-body{background:none; border-color:transparent;}

.lappy-panel--cta .lappy-panel-title{font-size:clamp(2.6rem,6.5vw,5.6rem);}

/* DIY vs pre-built cards */
.lappy-options{
  position:relative;
  z-index:1;
  padding:120px 8%;

  /* land below the buy pill */
  scroll-margin-top:40px;
}

.lappy-options-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,48px);
  max-width:1200px;
  margin:0 auto;
}

.lappy-option{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.lappy-option-media{
  aspect-ratio:16/9;
  border-radius:24px;
  overflow:hidden;
  background:color-mix(in srgb, var(--line) 6%, transparent);

  opacity:0;
  transform:translateY(48px);
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1),
    transform .9s cubic-bezier(.22,1,.36,1),
    box-shadow .4s ease;
}

.lappy-option.in-view .lappy-option-media{opacity:1;transform:translateY(0);}

.lappy-option.in-view .lappy-option-media:hover{
  transform:translateY(-12px);
  box-shadow:0 24px 48px rgba(0,0,0,.2);
  transition-duration:.4s;
}

.lappy-option-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  user-select:none;
  pointer-events:none;

  transition:transform .6s cubic-bezier(.22,1,.36,1);
}

.lappy-option-media:hover img{transform:scale(1.1);}

.lappy-option-title,
.lappy-option-text{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .7s cubic-bezier(.22,1,.36,1),
    transform .7s cubic-bezier(.22,1,.36,1);
}

.lappy-option.in-view .lappy-option-title{opacity:1;transform:translateY(0);transition-delay:.15s;}
.lappy-option.in-view .lappy-option-text{opacity:.8;transform:translateY(0);transition-delay:.28s;}

/* fade only, so .btn hover still works */
.lappy-option-btn{
  align-self:center;
  opacity:0;
  transition:opacity .7s cubic-bezier(.22,1,.36,1);
}

.lappy-option.in-view .lappy-option-btn{opacity:1;transition-delay:.4s;}

.lappy-option-title{
  font-family:"SuperMalibu","obliqua",sans-serif;
  font-weight:400;
  font-size:clamp(1.9rem,3.4vw,3.2rem);
  line-height:1.15;
  color:var(--line);
}

.lappy-option-text{
  max-width:58ch;
  font-family:"obliqua",sans-serif;
  font-size:1rem;
  line-height:1.6;
  color:var(--line);
}

/* stagger the second card */
.lappy-option:nth-child(2) .lappy-option-media{transition-delay:.12s;}
.lappy-option:nth-child(2).in-view .lappy-option-title{transition-delay:.27s;}
.lappy-option:nth-child(2).in-view .lappy-option-text{transition-delay:.4s;}
.lappy-option:nth-child(2).in-view .lappy-option-btn{transition-delay:.52s;}

@media (prefers-reduced-motion:reduce){
  .lappy-option-media,
  .lappy-option-media img,
  .lappy-option-title,
  .lappy-option-text,
  .lappy-option-btn{transition:none;}

  .lappy-option-media,
  .lappy-option-title,
  .lappy-option-btn{opacity:1;transform:none;}

  .lappy-option-text{opacity:.8;transform:none;}
}

@media (max-width:650px){
  .lappy-options{padding:70px 24px;}
  .lappy-options-grid{grid-template-columns:1fr; gap:48px;}
}

/* spec configurator */
.lappy-configurator{
  position:relative;
  z-index:1;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(32px,6vw,80px);

  padding:100px 8%;

  /* clip the reveal */
  overflow-x:clip;
}

.lappy-configurator-media{
  flex:0 0 auto;
  width:min(42vw,520px);
}

.lappy-configurator-media img{
  display:block;
  max-width:100%;
  height:auto;
  margin:0 auto;

  user-select:none;
  pointer-events:none;

  transition:opacity .25s ease;
}

.lappy-spec-list{
  position:relative;
  flex:0 1 380px;
  max-width:420px;
  margin-left:clamp(16px,4vw,56px);

  display:flex;
  flex-direction:column;
  gap:8px;
}

.lappy-spec-indicator{
  position:absolute;
  z-index:0;
  left:0;
  right:0;
  top:0;
  height:0;

  border-radius:28px;
  background:var(--accent);
}

.lappy-spec-btn{
  position:relative;
  z-index:1;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;

  width:100%;
  padding:12px 22px;
  border-radius:100px;
  background:rgba(0,0,0,.035);
  border:1px solid rgba(0,0,0,.08);

  text-align:left;
  cursor:pointer;

  transition:transform .25s ease, background .35s ease, border-color .35s ease, border-radius .45s ease;
}

html[data-zone] .lappy-spec-btn{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14);}

.lappy-spec-btn:hover{transform:scale(1.02);}

.lappy-spec-btn.is-active{
  background:transparent;
  border-color:transparent;
  border-radius:28px;
  transform:scale(1.03);
}

/* beat the zone rule's specificity */
html[data-zone] .lappy-spec-btn.is-active{background:transparent; border-color:transparent;}

.lappy-spec-label{
  display:block;
  width:100%;
  text-align:center;

  font-family:"SuperMalibu","obliqua",sans-serif;
  font-weight:400;
  font-size:clamp(1rem,1.6vw,1.3rem);
  line-height:1.2;
  color:var(--line);

  transition:color .35s ease;
}

.lappy-spec-btn.is-active .lappy-spec-label{color:#fff;}

.lappy-spec-desc-wrap{
  display:grid;
  grid-template-rows:0fr;
  width:100%;
  transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1);
}

.lappy-spec-btn.is-active .lappy-spec-desc-wrap{grid-template-rows:1fr;}

.lappy-spec-desc{
  display:block;
  overflow:hidden;
  min-height:0;

  max-width:52ch;
  font-family:"obliqua",sans-serif;
  font-size:.9rem;
  line-height:1.5;
  color:var(--line);
  opacity:0;

  transition:opacity .3s ease;
}

.lappy-spec-btn.is-active .lappy-spec-desc{opacity:.85; color:#fff;}

@media (prefers-reduced-motion:reduce){
  .lappy-configurator-media img,
  .lappy-spec-indicator,
  .lappy-spec-btn,
  .lappy-spec-label,
  .lappy-spec-desc-wrap,
  .lappy-spec-desc{transition:none;}
}

/* configurator reveal */
.lappy-configurator-media,
.lappy-spec-btn,
.lappy-spec-indicator{opacity:0;}

.lappy-configurator.in-view .lappy-configurator-media{animation:lappy-config-from-left 1s cubic-bezier(.22,1,.36,1) both;}

.lappy-configurator.in-view .lappy-spec-btn,
.lappy-configurator.in-view .lappy-spec-indicator{animation:lappy-config-from-right .8s cubic-bezier(.22,1,.36,1) .15s both;}

.lappy-configurator.in-view .lappy-spec-btn:nth-of-type(2){animation-delay:.22s;}
.lappy-configurator.in-view .lappy-spec-btn:nth-of-type(3){animation-delay:.29s;}
.lappy-configurator.in-view .lappy-spec-btn:nth-of-type(4){animation-delay:.36s;}
.lappy-configurator.in-view .lappy-spec-btn:nth-of-type(5){animation-delay:.43s;}
.lappy-configurator.in-view .lappy-spec-btn:nth-of-type(6){animation-delay:.5s;}

@keyframes lappy-config-from-left{
  from{opacity:0; transform:translateX(-140px) rotate(-4deg);}
  to{opacity:1; transform:none;}
}

@keyframes lappy-config-from-right{
  from{opacity:0; translate:80px 0;}
  to{opacity:1; translate:0 0;}
}

@media (prefers-reduced-motion:reduce){
  .lappy-configurator-media,
  .lappy-spec-btn,
  .lappy-spec-indicator{opacity:1;}

  .lappy-configurator.in-view .lappy-configurator-media,
  .lappy-configurator.in-view .lappy-spec-btn,
  .lappy-configurator.in-view .lappy-spec-indicator{animation:none;}
}

@media (max-width:900px){
  .lappy-configurator{flex-direction:column;}
  .lappy-configurator-media{width:min(70vw,380px);}
  .lappy-spec-list{max-width:none; width:100%; margin-left:0;}
}

@media (max-width:650px){
  .lappy-configurator{padding:70px 24px;}
  .lappy-spec-btn{padding:10px 18px;}
}

@media (max-width:650px){
  .lappy-showcase{height:auto;}

  .lappy-showcase-sticky{
    position:static;
    height:auto;
    display:block;
  }

  .lappy-showcase-track{
    flex-direction:column;
    height:auto;
  }

  .lappy-panel{
    flex-direction:column;
    flex:none;
    width:100%;
    height:auto;
    gap:28px;
    padding:70px 24px;
  }

  .lappy-panel-media{width:min(70vw,320px);}
  .lappy-panel-index{font-size:5rem; top:4%;}

  .lappy-panel-body{
    max-width:none;
    width:100%;
    padding:28px 24px;
  }

  .lappy-panel--cta .lappy-panel-body{padding:0;}
}

/* closing buy now banner */
.lappy-buy-banner{margin-top:40px;}

.lappy-buy-banner-copy{
  position:absolute;
  z-index:1;
  inset:0 48px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:24px;
  padding:48px;
  text-align:center;
}

/* dark fade layer, zooms with the image */
.lappy-buy-banner-copy::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  border-radius:28px;

  background:linear-gradient(to top, rgba(0,0,0,.55), transparent 60%);
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}

.lappy-buy-banner:hover .lappy-buy-banner-copy::before{transform:scale(1.1);}

@media (prefers-reduced-motion:reduce){
  .lappy-buy-banner-copy::before{transition:none;}
}

.lappy-buy-banner-title{
  font-family:"SuperMalibu","obliqua",sans-serif;
  font-weight:400;
  font-size:clamp(2rem,5vw,4.4rem);
  line-height:1.05;
  color:#fff;

  /* keeps it readable over light photos */
  text-shadow:0 2px 18px rgba(0,0,0,.5);
}

@media (max-width:650px){
  .lappy-buy-banner-copy{inset:0 24px; padding:28px; gap:16px;}
}