/* ============================================================
   CodebyCarter — reel.css
   Cinematic horizontal-scroll showcase: vertical scroll pans
   horizontally through full-viewport service-biz scenes.
   Plus the page-wide scroll-bound color-shifting orb.
   ============================================================ */

/* ============================================================
   HORIZONTAL-SCROLL REEL
   ============================================================ */
.reel{
  position:relative;
  height:500vh;
}
.reel-sticky{
  position:sticky;top:0;height:100vh;
  overflow:hidden;
  background:#0A0A0F;
  color:#F5F5F7;
}
.reel-track{
  display:flex;
  height:100%;
  width:max-content;
  transform:translate3d(var(--reel-x,0px),0,0);
  will-change:transform;
}
.reel-slide{
  width:100vw;height:100vh;
  flex-shrink:0;
  display:grid;place-items:center;
  position:relative;
  color:#F5F5F7;
  padding:80px 8vw;
}
.reel-slide::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.5;
}

/* Floating accent orbs per slide */
.reel-slide::after{
  content:"";position:absolute;
  width:600px;height:600px;border-radius:50%;
  filter:blur(80px);opacity:.35;
  background:var(--slide-orb,#A855F7);
  top:15%;right:-10%;
  pointer-events:none;
}

.reel-content{
  position:relative;z-index:2;
  text-align:center;
  max-width:90vw;
}

.reel-num{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(245,245,247,.45);font-weight:700;
  margin-bottom:24px;
  padding:6px 14px;border:1px solid rgba(245,245,247,.20);border-radius:99px;
}

.reel-h{
  font-size:clamp(56px,13vw,200px);
  line-height:.92;letter-spacing:-.045em;font-weight:600;
  margin-bottom:32px;
  color:#F5F5F7;
}
.reel-h .ital{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,var(--slide-ital-from,#A855F7),var(--slide-ital-to,#EC4899));
  background-size:200% 200%;animation:hue 6s linear infinite;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.reel-cap{
  font-size:clamp(15px,1.5vw,20px);
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.04em;
  color:rgba(245,245,247,.75);
  max-width:50ch;margin:0 auto;line-height:1.55;
}
.reel-cap b{color:#F5F5F7;font-weight:600}

/* Per-slide palettes */
.reel-slide--phone   {background:linear-gradient(165deg,#0F2A22 0%,#163F37 60%,#0A1F1B 100%);--slide-orb:#A3E635;--slide-ital-from:#A3E635;--slide-ital-to:#22D3EE}
.reel-slide--calendar{background:linear-gradient(165deg,#1A0E08 0%,#2B1810 60%,#1A0E08 100%);--slide-orb:#FACC15;--slide-ital-from:#FACC15;--slide-ital-to:#FB923C}
.reel-slide--quote   {background:linear-gradient(165deg,#050B1A 0%,#0E1A33 60%,#0A1426 100%);--slide-orb:#22D3EE;--slide-ital-from:#22D3EE;--slide-ital-to:#A78BFA}
.reel-slide--reviews {background:linear-gradient(165deg,#2D1812 0%,#4A2418 60%,#2D1812 100%);--slide-orb:#F0A06A;--slide-ital-from:#F0A06A;--slide-ital-to:#EC4899}
.reel-slide--booked  {background:linear-gradient(165deg,#0E0E0C 0%,#1A1A14 60%,#0E0E0C 100%);--slide-orb:#D4A437;--slide-ital-from:#D4A437;--slide-ital-to:#FACC15}

/* Top-corner hint that the section is interactive */
.reel-hint{
  position:absolute;top:24px;left:50%;transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:600;z-index:5;
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 14px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.10);border-radius:99px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.reel-hint svg{color:#A855F7;animation:reelArrow 1.4s ease-in-out infinite}
@keyframes reelArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

/* Bottom progress bar */
.reel-progress{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  width:220px;height:3px;background:rgba(255,255,255,.10);
  border-radius:99px;overflow:hidden;z-index:5;
}
.reel-progress-bar{
  height:100%;width:var(--reel-progress,0%);
  background:linear-gradient(90deg,#A855F7,#EC4899,#FB923C,#06B6D4);
  background-size:200% 100%;animation:hue 4s linear infinite;
  border-radius:99px;transition:width .1s linear;
}

/* Mobile fallback — no scroll-jacking, just stack */
@media (max-width:780px){
  .reel{height:auto}
  .reel-sticky{position:relative;top:auto;height:auto;overflow:visible}
  .reel-track{flex-direction:column;width:100%;transform:none !important;will-change:auto}
  .reel-slide{width:100%;height:auto;min-height:80vh;padding:60px 24px}
  .reel-hint,.reel-progress{display:none}
}

/* ============================================================
   SCROLL-BOUND COLOR-SHIFTING ORB
   Fixed ambient orb that drifts in position AND hue as visitors
   scroll the page. Pure atmosphere.
   ============================================================ */
.scroll-orb{
  position:fixed;
  right:20vw;bottom:20vh;
  width:520px;height:520px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(168,85,247,.35), transparent 70%);
  filter:blur(90px) hue-rotate(var(--orb-hue,0deg));
  transform:translate3d(var(--orb-x,0px), var(--orb-y,0px), 0);
  pointer-events:none;
  z-index:-1;
  will-change:filter,transform;
}
@media (max-width:780px){
  .scroll-orb{width:280px;height:280px;filter:blur(60px) hue-rotate(var(--orb-hue,0deg))}
}
@media (prefers-reduced-motion: reduce){
  .scroll-orb{display:none}
}