/* DJA Designs. Styled after its logo: graffiti lettering in hot pink, orange and yellow
   with a dark outline, ice-blue chrome, paint splats and brush strokes on clean white. */

@font-face { font-family: "Anton"; src: url("../fonts/anton.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-wide.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  --paper: #fffaf3;
  --ink: #1a1030;
  --pink: #ff3d8b;
  --magenta: #c42a8f;
  --orange: #ff8a1c;
  --yellow: #ffd23b;
  --ice: #6fd6ff;
  --blue: #1d8fe0;
  --frame: #3a434d;
  --soft: #5a5070;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font: 400 18px/1.55 "Archivo", system-ui, sans-serif; font-stretch: 100%; overflow-x: hidden; background: var(--paper); }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
.wrap { width: min(1100px, 100% - 32px); margin-inline: auto; position: relative; }

/* Placeholders: anything still to confirm wears a dashed outline and a tag. */
.ph { outline: 2px dashed var(--magenta); outline-offset: 4px; position: relative; }
.ph[data-ph]::after {
  content: attr(data-ph); position: absolute; top: -14px; left: 6px; z-index: 5;
  padding: 2px 7px; background: #ffe63b; color: #000; outline: 1px solid #000;
  font: 700 10px/1.4 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.ph-photo { display: grid; place-items: center; text-align: center; padding: 24px; color: var(--soft); font-weight: 600;
  background: repeating-linear-gradient(45deg, #f4eefb 0 14px, #ece4f6 14px 28px); }

/* The logo lettering: a hot gradient, a thick dark outline and an ice-blue drop. */
.paint { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; line-height: .98; letter-spacing: .01em; margin: 0;
  background: linear-gradient(100deg, var(--pink) 0%, #ff5a5a 40%, var(--orange) 70%, var(--yellow) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 2px var(--ink); filter: drop-shadow(4px 4px 0 var(--ink)) drop-shadow(3px 3px 0 var(--ice)); }

.btn { display: inline-block; font-weight: 800; font-stretch: 112%; font-size: 17px; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; padding: 14px 24px; border-radius: 14px; border: 3px solid var(--ink); overflow-wrap: anywhere; }
.btn:focus-visible, a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.btn-pink { background: linear-gradient(100deg, var(--pink), var(--orange)); color: #fff; box-shadow: 4px 4px 0 var(--ink); text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.btn-line { background: #fff; box-shadow: 4px 4px 0 var(--ice), 4px 4px 0 3px var(--ink); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 16px 0 70px; }
.splat { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); opacity: .55; }
.splat.s1 { width: 420px; height: 380px; left: -140px; top: 60px; background: radial-gradient(circle, rgba(255,61,139,.45), transparent 65%); }
.splat.s2 { width: 520px; height: 460px; right: -160px; top: -80px; background: radial-gradient(circle, rgba(111,214,255,.5), transparent 65%); }
.splat.s3 { width: 380px; height: 340px; right: 20%; bottom: -160px; background: radial-gradient(circle, rgba(255,210,59,.55), transparent 65%); }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: relative; z-index: 3; }
.bar .home { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 2px solid currentColor; font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; background: rgba(0,0,0,.35); transition: transform .2s, background .2s; }
.bar .home:hover, .bar .home:focus-visible { transform: translateX(-3px); background: rgba(0,0,0,.6); }
.bar .home::before { content: "\2190"; font-size: 1.15em; }
@media (max-width: 420px) { .bar .home .long { display: none; } }
.bar .tel { font-weight: 800; text-decoration: none; padding: 8px 16px; border-radius: 12px; background: var(--ink); color: #fff; white-space: nowrap; }

.hero-grid { display: grid; gap: 40px; align-items: center; margin-top: 20px; position: relative; z-index: 2; }
@media (min-width: 880px) { .hero-grid { grid-template-columns: 1.2fr .8fr; } }
.hero-copy { text-align: center; }
.logo { width: clamp(240px, 36vw, 400px); margin: 0 auto; }
.hero h1 { margin-top: 0; font-size: clamp(52px, 8.4vw, 104px); text-wrap: balance; }
.said { margin: 44px auto 0; max-width: 36ch; font-size: clamp(19px, 2.2vw, 22px); color: var(--soft); }
.ctas { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 28px; }

/* The photo sits in a window frame, like the real thing. */
.window { margin: 0; justify-self: center; width: min(340px, 82%); padding: 14px; background: var(--frame); border-radius: 10px;
  box-shadow: inset 0 0 0 3px #2a3138, 10px 12px 0 var(--ink), 10px 12px 0 3px var(--ice); position: relative; }
.window img { border-radius: 3px; }
.window figcaption { color: #fff; text-align: center; font-weight: 700; font-stretch: 112%; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; padding: 10px 0 0; }
.window::after { content: ""; position: absolute; inset: 14px 14px 44px; border-radius: 3px; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 42%, transparent 50%) no-repeat; background-size: 300% 100%; background-position: 120% 0; animation: glint 5s ease-in-out 1.8s infinite; }
@keyframes glint { 0% { background-position: 120% 0; } 35%, 100% { background-position: -40% 0; } }

/* ---------- Sections ---------- */
section { padding: 70px 0; position: relative; }
.head { text-align: center; margin-bottom: 36px; }
.head .paint { font-size: clamp(44px, 7vw, 80px); }
.head p { margin: 14px auto 0; max-width: 42ch; color: var(--soft); font-size: 20px; }

/* A wall of windows: photos keep their own shape and stack in columns. */
.gallery { columns: 3 280px; column-gap: 22px; }
.gallery > * { break-inside: avoid; margin: 0 0 22px; }
.photo-pane { position: relative; overflow: hidden; background: var(--frame); }
.photo-pane img { width: 100%; height: auto; }
.photo-pane figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; background: rgba(26,16,48,.8); color: #fff; font-weight: 700; font-stretch: 112%; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.pane { margin: 0; min-height: 0; border: 12px solid var(--frame); border-radius: 8px; box-shadow: 6px 6px 0 var(--ink); }

.for { background: linear-gradient(180deg, transparent, #fff0f6 30%, #eefaff 80%, transparent); }
.occasions { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.occ { display: flex; align-items: center; gap: 14px; padding: 16px 24px 16px 18px; border: 3px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 5px 5px 0 var(--ink); }
.occ h3 { margin: 0; font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; font-size: 26px; letter-spacing: .02em; }
.occ .dot { flex: none; width: 46px; height: 46px; border-radius: 50% 46% 52% 44%; border: 3px solid var(--ink); }
.o1 .dot { background: #e2343b; } .o2 .dot { background: var(--orange); } .o3 .dot { background: var(--yellow); } .o4 .dot { background: var(--blue); } .o5 .dot { background: var(--pink); }
.where { display: grid; gap: 22px; margin-top: 30px; }
@media (min-width: 760px) { .where { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.where > div { padding: 24px 26px; border-left: 8px solid var(--pink); background: rgba(255,255,255,.75); border-radius: 0 18px 18px 0; }
.where > div:nth-child(2) { border-left-color: var(--blue); } .where > div:nth-child(3) { border-left-color: var(--orange); }
.where h3 { margin: 0 0 6px; font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 22px; }
.where p { margin: 0; color: var(--soft); }

.reviews { display: grid; gap: 24px; max-width: 980px; margin: 0 auto; }
@media (min-width: 760px) { .reviews { grid-template-columns: 1fr 1fr; } }
.review { margin: 0; padding: 28px; background: #fff; border: 3px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--pink); }
.review + .review { box-shadow: 6px 6px 0 var(--ice); }
.review blockquote { margin: 0; font-size: 20px; font-weight: 600; }
.review figcaption { margin-top: 12px; font-weight: 800; font-stretch: 112%; color: var(--magenta); }

.book { text-align: center; padding-bottom: 30px; background: var(--ink); color: #fff; }
.book .paint { font-size: clamp(44px, 7vw, 80px); -webkit-text-stroke-color: #000; }
.book .num { display: inline-block; margin: 16px 0 26px; font-family: "Anton", Impact, sans-serif; font-size: clamp(48px, 10vw, 100px); text-decoration: none; color: #fff; text-shadow: 4px 4px 0 var(--pink); }
.book .btn-line { color: var(--ink); }
.foot { margin-top: 56px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.25); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 15px; text-align: left; color: #d9d0ea; }

/* Prices sit on paint swatches, each with a wet drip off the bottom edge. */
.swatches { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.swatch { position: relative; padding: 24px 24px 28px; border: 3px solid var(--ink); border-radius: 18px 18px 18px 6px; background: #fff; box-shadow: 6px 6px 0 var(--ink); }
.swatch::before { content: ""; position: absolute; left: -3px; right: -3px; top: -3px; height: 16px; border-radius: 16px 16px 0 0; border: 3px solid var(--ink); background: var(--sw); }
.swatch::after { content: ""; position: absolute; left: 22px; top: 10px; width: 10px; height: 26px; border-radius: 0 0 6px 6px; background: var(--sw); transform-origin: 50% 0; animation: swdrip 4s ease-in-out infinite; }
.s1 { --sw: var(--pink); } .s2 { --sw: var(--orange); } .s3 { --sw: var(--yellow); } .s4 { --sw: var(--ice); }
.s2::after { animation-delay: -1s; } .s3::after { animation-delay: -2s; } .s4::after { animation-delay: -3s; }
@keyframes swdrip { 0%, 100% { transform: scaleY(.6); } 50% { transform: scaleY(1.3); } }
.swatch h3 { margin: 14px 0 12px; font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; font-size: 26px; letter-spacing: .02em; }
.swatch .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 8px 0; border-top: 2px dashed #e6dcef; font-weight: 600; }
.swatch .row b, .swatch .from { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 36px; line-height: 1; color: var(--magenta); font-variant-numeric: tabular-nums; }
.swatch .from { margin: 0; font-size: 56px; }
.swatch .from small { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 16px; color: var(--soft); }
.swatch { transition: translate .3s cubic-bezier(.3,1.6,.5,1), rotate .3s cubic-bezier(.3,1.6,.5,1); }
.swatch:hover { translate: 0 -6px; rotate: -1.5deg; }

/* ---------- Motion ---------- */
@keyframes splash { from { transform: scale(.4) rotate(-10deg); opacity: 0; } to { transform: none; opacity: 1; } }
/* The headline is sprayed on from left to right. */
.motion .hero h1 { animation: spray 1.1s cubic-bezier(.6,0,.3,1) .7s both; }
@keyframes spray { from { clip-path: inset(-10% 100% -10% -10%); } to { clip-path: inset(-10% -10% -10% -10%); } }
.said, .hero .ctas { animation: up .8s cubic-bezier(.2,.9,.3,1) both; }
.said { animation-delay: 1.2s; } .hero .ctas { animation-delay: 1.35s; }
.window { animation: up 1s cubic-bezier(.2,.9,.3,1) .5s both; }
@keyframes up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.splat { animation: blob 12s ease-in-out infinite alternate; }
.splat.s2 { animation-duration: 15s; } .splat.s3 { animation-duration: 18s; }
@keyframes blob { to { transform: translate(40px, 30px) scale(1.15); } }

/* Spray-paint trail from brand.js. */
.paint-trail { cursor: crosshair; }
.paint-trail a, .paint-trail .btn { cursor: pointer; }
.spray-dot { position: absolute; z-index: 1; border-radius: 50%; pointer-events: none; opacity: .8; animation: fade 1.6s ease-out forwards; }
@keyframes fade { 0% { transform: scale(.4); opacity: .9; } 20% { transform: scale(1); } 100% { transform: scale(1.4); opacity: 0; } }

/* Sparkles around the logo, like the ones painted in it. */
.logo-wrap { position: relative; width: fit-content; margin: 0 auto; }
.spark { position: absolute; color: var(--ice); font-size: 26px; line-height: 1; text-shadow: 0 0 8px rgba(111,214,255,.8); animation: spark 2.4s ease-in-out infinite; }
.spark.k1 { left: 2%; top: 18%; } .spark.k2 { right: 4%; top: 6%; color: var(--yellow); animation-delay: -.6s; }
.spark.k3 { right: 0; bottom: 22%; color: var(--pink); animation-delay: -1.2s; font-size: 20px; } .spark.k4 { left: 10%; bottom: 8%; animation-delay: -1.8s; font-size: 18px; }
@keyframes spark { 0%, 100% { transform: scale(.3) rotate(0); opacity: 0; } 50% { transform: scale(1.1) rotate(90deg); opacity: 1; } }
.motion .logo { animation: splash .9s cubic-bezier(.3,1.5,.5,1) .2s both, float 4s ease-in-out 1.2s infinite alternate; }
@keyframes float { to { transform: translateY(-8px) rotate(1.5deg); } }

/* The spray can paints the headline from left to right, then paint drips down. */
.spray { position: relative; margin-top: 14px; }
.spray .can { position: absolute; top: 10%; left: 0; width: 34px; opacity: 0; pointer-events: none; z-index: 2; }
.motion .spray .can { animation: canpass 1.1s cubic-bezier(.6,0,.3,1) .7s both, canshake .12s linear .7s 9; }
@keyframes canpass { 0% { left: -4%; opacity: 1; } 90% { left: 98%; opacity: 1; } 100% { left: 102%; opacity: 0; } }
@keyframes canshake { 50% { translate: 0 -3px; } }
.drip { position: absolute; top: 88%; width: 9px; border-radius: 0 0 6px 6px; height: 34px; transform-origin: 50% 0;
  background: linear-gradient(180deg, var(--c, var(--pink)), var(--c, var(--pink))); }
.drip::after { content: ""; position: absolute; bottom: -6px; left: -2px; width: 13px; height: 13px; border-radius: 50%; background: var(--c, var(--pink)); }
.drip.d1 { left: 18%; --c: #ff3d8b; } .drip.d2 { left: 43%; height: 22px; --c: #ff5a5a; }
.drip.d3 { left: 64%; height: 44px; --c: #ff8a1c; } .drip.d4 { left: 84%; height: 26px; --c: #ffb02e; }
.motion .drip { animation: drip 1.6s cubic-bezier(.5,0,.3,1) both; }
.motion .drip.d1 { animation-delay: 1.3s; } .motion .drip.d2 { animation-delay: 1.5s; } .motion .drip.d3 { animation-delay: 1.65s; } .motion .drip.d4 { animation-delay: 1.85s; }
@keyframes drip { from { transform: scaleY(0); } 70% { transform: scaleY(1.08); } to { transform: scaleY(1); } }

/* Brush strokes paint themselves under each heading as it scrolls in. */
.stroke { display: block; width: min(320px, 70%); height: 22px; margin: 4px auto 0; overflow: visible; }
.stroke path { fill: none; stroke: var(--ice); stroke-width: 8; stroke-linecap: round; }
.motion .stroke path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.6,0,.3,1) .3s; }
.motion .head.in .stroke path { stroke-dashoffset: 0; }
.for .stroke path { stroke: var(--pink); }

/* The work: panes swing open a touch on hover. */
.pane { transition: transform .4s cubic-bezier(.3,1.6,.5,1); transform-origin: 0 50%; }
.pane:hover { transform: perspective(800px) rotateY(-8deg); }

/* Occasions: paint blobs that keep changing shape. */
.occ .dot { animation: blob2 5s ease-in-out infinite alternate; }
.o2 .dot { animation-delay: -1s; } .o3 .dot { animation-delay: -2s; } .o4 .dot { animation-delay: -3s; } .o5 .dot { animation-delay: -4s; }
@keyframes blob2 { 0% { border-radius: 50% 46% 52% 44%; rotate: 0deg; } 33% { border-radius: 38% 60% 44% 58%; } 66% { border-radius: 58% 40% 60% 42%; } 100% { border-radius: 44% 56% 40% 60%; rotate: 40deg; } }
.occ { transition: translate .3s cubic-bezier(.3,1.6,.5,1), box-shadow .3s; }
.occ:hover { translate: -3px -3px; box-shadow: 8px 8px 0 var(--ink); }

/* Booking: the spray can gives a shake, the number flickers like a neon tag. */
.shake { width: 44px; margin: 0 auto 10px; transform-origin: 50% 90%; animation: shake 2.6s ease-in-out infinite; }
.shake .can { width: 100%; }
@keyframes shake { 0%, 55%, 100% { rotate: 0deg; } 60% { rotate: -16deg; } 65% { rotate: 14deg; } 70% { rotate: -12deg; } 75% { rotate: 10deg; } 80% { rotate: -4deg; } }
.book .num { animation: tag 4s ease-in-out infinite; }
@keyframes tag { 0%, 100% { text-shadow: 4px 4px 0 var(--pink); } 33% { text-shadow: 4px 4px 0 var(--orange); } 66% { text-shadow: 4px 4px 0 var(--ice); } }

.motion .reveal { opacity: 0; transform: translateY(36px) rotate(-1deg); transition: opacity .6s ease var(--rd, 0s), transform .7s cubic-bezier(.2,.9,.3,1.2) var(--rd, 0s); }
.motion .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}