/* =========================================================
   SUFYAN SHEIKH — ANALOG LAYER
   Loaded AFTER style.css and cinematic.css on the pages that
   use it.

   An audio waveform divider, retro sticker badges, and the art
   block that places a standalone SVG prop beside a block of copy.

   A cassette-tape rack ("Pick a tape") used to live here as the
   browse-by-format navigation. It was cut on request -- the tape
   graphic did not look good enough to carry a whole section. The
   category deep links it introduced (portfolio.html#wedding etc.)
   are kept in js/main.js: they still work as shareable URLs and
   cost nothing.
   ========================================================= */

/* =========================================================
   2. WAVEFORM DIVIDER
   An audio waveform as a section rule — the sound-design half
   of the craft, which the film-strip divider doesn't cover.
   Bars are drawn with a repeating gradient, so the whole thing
   is one element with no markup per bar.
   ========================================================= */
.wave-divider{
  position:relative;
  height:38px;
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  overflow:hidden;
  mask-image:linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-image:linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
}
.wave-divider i{
  display:block;
  width:3px;
  border-radius:2px;
  background:linear-gradient(to top, rgba(var(--neon-rgb),.5), rgba(var(--neon-rgb),.12));
  transform-origin:center;
  animation:waveBar 1.9s ease-in-out infinite;
}
@keyframes waveBar{
  0%,100%{ transform:scaleY(.35); opacity:.5; }
  50%    { transform:scaleY(1);   opacity:1; }
}
@media (max-width:600px){
  .wave-divider{ height:28px; gap:2px; }
  .wave-divider i{ width:2px; }
}

/* =========================================================
   3. RETRO STICKER BADGES
   Small rotated stamps, the kind stuck on a road case. Kept to
   three and tucked against the stats row so they read as
   marginalia rather than as UI.
   ========================================================= */
.sticker-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:38px;
}
.sticker{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  min-width:88px;
  padding:11px 15px;
  border-radius:6px;
  font-family:var(--font-mono, monospace);
  text-transform:uppercase;
  background:rgba(255,255,255,.028);
  border:1px dashed rgba(255,255,255,.16);
  transition:transform .5s var(--ease-cine, ease), border-color .5s ease, background .5s ease;
}
.sticker b{
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--white);
}
.sticker span{
  font-size:.54rem;
  letter-spacing:.16em;
  color:var(--gray-dim);
}
.sticker:nth-child(1){ transform:rotate(-2.5deg); }
.sticker:nth-child(2){ transform:rotate(1.5deg); }
.sticker:nth-child(3){ transform:rotate(-1deg); }
.sticker:hover{
  border-color:rgba(var(--neon-rgb),.45);
  background:rgba(var(--neon-rgb),.05);
  transform:rotate(0deg) translateY(-3px);
}
.sticker.is-accent b{ color:var(--neon); }

@media (max-width:600px){
  .sticker-row{ gap:12px; margin-top:28px; }
  .sticker{ min-width:74px; padding:9px 12px; }
}

/* =========================================================
   4. ANALOG ART BLOCK
   Places one of the standalone SVG props (images/*.svg) beside
   a block of copy. Used on About and Services.
   ========================================================= */
.analog-art{
  display:block;
  width:100%;
  max-width:340px;
  margin:0 auto;
  opacity:.92;
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.6));
  transition:transform .7s var(--ease-cine, ease);
}
.analog-art-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 0;
}
.analog-art-wrap:hover .analog-art{ transform:translateY(-6px) rotate(-1.2deg); }

/* =========================================================
   5. REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .wave-divider i{ animation:none !important; transform:scaleY(.7); }
  .sticker,
  .analog-art{ transition:none !important; }
}