/* ==========================================================================
   CSC Innovations — DECALS layer ("The Moving Billboard")
   Loads AFTER site.css on decals.html. Vibe: a garage/locker wall of peel-and-
   stick decals — each tile sits at a playful angle, lifts and straightens on
   hover, with a gentle ambient bob. Retinted to racing blue + signal red.
   ========================================================================== */

/* ==========================================================================
   PER-PAGE THEME — "Racing Blue + Signal Red"
   ========================================================================== */
body.page-decals{
  /* COLOR v2 — Racing Blue + Signal Red, charged (electric-blue base) */
  --bg:#080C18; --bg-2:#05080F; --surface:#121A2A; --surface-2:#1C2740; --panel:#0C1E48;
  --accent:#3D7BFF; --accent-deep:#1B4FD6; --accent-glow:#8FB6FF; --on-accent:#03102E;
  --accent-12:rgba(61,123,255,.12); --accent-18:rgba(61,123,255,.18);
  --line:rgba(228,236,255,.11); --line-strong:rgba(228,236,255,.20);
  --text:#EEF3FF; --text-muted:rgba(238,243,255,.76); --text-faint:rgba(238,243,255,.56);
  --sh-forest:0 14px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(61,123,255,.16);
  --dec-accent:#3D7BFF; --dec-red:#FF4438;
  background:var(--bg);
}
/* Knot = PAGE COLOR (client's ask): mark falls back to site.css var(--accent*).
   CONTRAST GUARD — decals' darkest stop (--accent-deep) is dark on the near-black
   header, so keep the nav + footer mark on the bright end of the ramp. */
body.page-decals .site-head .brand-mark,
body.page-decals .site-foot .brand-mark{
  background:radial-gradient(circle at 35% 30%,var(--accent-glow),var(--accent) 70%);}

/* signal-red accents = the racing stripe; the hero/knot stay racing blue */
.page-decals .page-hero h1 em{color:var(--dec-red);}
.page-decals .eyebrow{color:var(--accent-glow);}
.page-decals .eyebrow::before{background:var(--dec-red);}
/* hero atmosphere: blue wash top-right + a signal-red wash lower-left */
.page-decals .ph-wash{background:
  radial-gradient(115% 130% at 90% -12%,var(--accent-18),transparent 56%),
  radial-gradient(70% 80% at 10% 110%,rgba(255,68,56,.14),transparent 58%);}

/* the gallery sits on a subtly planked "wall" */
.page-decals .bg-bone{background:
  radial-gradient(90% 80% at 80% -10%, rgba(45,108,255,.10), transparent 55%),
  repeating-linear-gradient(180deg, #0c1018 0 38px, #0a0e16 38px 39px),
  var(--bg-2);}

/* decals become peel-stickers: drop shadow, a slight tilt, straighten on hover */
.page-decals .gallery{gap:clamp(20px,3vw,40px);}
.page-decals .gallery > img,
.page-decals .gallery > a{position:relative;border-radius:14px;border:0;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.5));
  transition:transform var(--t) var(--ease-spring),filter var(--t) var(--ease);}
.page-decals .gallery > img{background:transparent;box-shadow:none;}
.page-decals .gallery > img:nth-child(4n+1){transform:rotate(-3deg);}
.page-decals .gallery > img:nth-child(4n+2){transform:rotate(2deg);}
.page-decals .gallery > img:nth-child(4n+3){transform:rotate(-1.5deg);}
.page-decals .gallery > img:nth-child(4n){transform:rotate(2.5deg);}
.page-decals .gallery > img:hover{transform:rotate(0) scale(1.06) translateY(-6px);
  filter:drop-shadow(0 22px 36px rgba(0,0,0,.6));z-index:3;}
/* the "your decal here" call tile is a dashed placeholder on the wall */
.page-decals .gallery > a.card{transform:rotate(1.5deg);border:2px dashed var(--line-strong);
  background:rgba(18,26,44,.5);}
.page-decals .gallery > a.card:hover{transform:rotate(0) translateY(-4px);border-color:var(--accent);}

/* gentle ambient bob (off for reduced-motion + touch handled via media) */
@media (prefers-reduced-motion:no-preference){
  @media (pointer:fine){
    .page-decals .gallery > img:nth-child(3n+1){animation:bob 7s var(--ease) infinite;}
    .page-decals .gallery > img:nth-child(3n+2){animation:bob 8.5s var(--ease) infinite .6s;}
    .page-decals .gallery > img:nth-child(3n){animation:bob 7.8s var(--ease) infinite .3s;}
    .page-decals .gallery > img:hover{animation-play-state:paused;}
  }
}
@keyframes bob{0%,100%{translate:0 0;}50%{translate:0 -7px;}}

/* pillars read as a billboard sequence */
.page-decals .grid-3 .card h3{font-size:var(--fs-h3);}

/* closing callout — deep racing blue with a red-leaning ring */
.page-decals .callout{background:linear-gradient(135deg,#11265e,#070d1e);
  border-color:rgba(61,123,255,.26);
  box-shadow:0 14px 40px rgba(0,0,0,.55),0 0 0 1px rgba(61,123,255,.16);}

/* ---- HERO focal — the knot as a die-cut peel-and-stick decal ------------- */
/* The product itself: white vinyl, the page-blue knot printed on it, a die-cut
   border, a lifted/peeled bottom-right corner, tilt + grounded drop-shadow. */
.page-decals .ph-sticker{position:relative;width:min(360px,80%);aspect-ratio:1;margin-inline:auto;
  transform:rotate(-5deg);filter:drop-shadow(0 26px 40px rgba(0,0,0,.55));
  transition:transform var(--t) var(--ease-spring);}
.page-decals .ph-sticker:hover{transform:rotate(0) scale(1.03);}
/* (D) gentle idle sway — the peel-sticker breathes on the wall; hover pauses it so
   the straighten-and-lift interaction still reads. Off touch + reduced-motion. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .page-decals .ph-sticker{animation:stickerSway 8s var(--ease) infinite;}
  .page-decals .ph-sticker:hover{animation-play-state:paused;}
}
@keyframes stickerSway{0%,100%{transform:rotate(-5deg) translateY(0);}50%{transform:rotate(-2.5deg) translateY(-6px);}}
.page-decals .ph-sticker .die{position:absolute;inset:0;border-radius:28px;background:#fff;
  box-shadow:inset 0 0 0 11px #fff, inset 0 0 0 12px rgba(20,30,52,.10);}
.page-decals .ph-sticker .knot{position:absolute;inset:16%;
  background:radial-gradient(circle at 38% 30%,var(--accent-glow),var(--accent) 56%,var(--accent-deep));
  -webkit-mask:url('dara-knot-path.svg') center/contain no-repeat;
          mask:url('dara-knot-path.svg') center/contain no-repeat;}
/* the lifted corner: backing paper revealed under a curled flap */
.page-decals .ph-sticker .peel{position:absolute;right:0;bottom:0;width:30%;height:30%;
  clip-path:polygon(100% 0,100% 100%,0 100%);border-radius:0 0 28px 0;
  background:linear-gradient(135deg,#aeb8c6 0%,#e8edf4 55%,#fdfefe 100%);
  box-shadow:-7px -7px 16px rgba(0,0,0,.28);}