/* ============================================================
   MILLE BACI · D3 · STUDIO — ljeto ima novu adresu (roze najava)
   ============================================================ */

body{
  background:
    radial-gradient(48% 32% at 88% 4%,rgba(255,123,172,.3),transparent 70%),
    radial-gradient(36% 26% at 6% 30%,rgba(246,162,43,.14),transparent 70%),
    var(--paper);
}

/* ---------- hero ---------- */
.uhero2{width:var(--w);margin:0 auto;padding:8rem 0 2rem}
.uhero2-grid{display:grid;grid-template-columns:52fr 40fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.uhero2-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.4rem,8vw,6.2rem);line-height:.98;letter-spacing:-.01em;margin-bottom:1.4rem;
}
.uhero2-h span,.uhero2-h em{display:block;font-style:normal}
.uhero2-h em{color:var(--pink)}
/* the teaser photo is a pale shot: give it a loud pink slab + heavier frame so it POPS */
.uhero2-fig{margin:0;position:relative;transform:rotate(2deg)}
.uhero2-fig::before{
  content:"";position:absolute;inset:10px -14px -14px 10px;z-index:-1;
  background:var(--pink);border-radius:26px;border:4px solid var(--pink);
}
.uhero2-fig::after{
  content:"";position:absolute;inset:-18px 14px auto auto;width:74px;height:74px;z-index:2;
  background:var(--mango);border:3px solid var(--pink);border-radius:50%;
  -webkit-mask:radial-gradient(circle at 50% 50%,black 98%,transparent 100%);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.uhero2-fig img{
  border-radius:22px;border:5px solid var(--pink);width:100%;
  filter:contrast(1.07) saturate(1.12);
  box-shadow:0 10px 26px -14px rgba(228,72,124,.45);
}
.uhero2-cap{
  position:absolute;left:50%;bottom:-1.2rem;transform:translateX(-50%) rotate(-2deg);
  background:var(--paper);border:3px solid var(--pink);border-radius:14px;
  padding:.35rem .9rem;white-space:nowrap;
}
/* USKORO letters bounce */
.soonword{display:flex;gap:.25rem;margin-top:2rem}
.soonword span{
  font-family:var(--disp);font-weight:800;font-size:clamp(1.4rem,3.4vw,2.4rem);
  background:var(--pink);color:var(--paper);border-radius:12px;
  padding:.25em .42em;display:inline-block;will-change:transform;
}
.soonword span:nth-child(2n){background:var(--pink);color:#fff}
.soonword span:nth-child(3n){background:var(--mango);color:var(--ink)}

/* ---------- window (wooden shutters you can actually read) ---------- */
.winsec{text-align:left}
.win-note{color:var(--pink);transform:rotate(-1.2deg);margin-top:.6rem}
.window{
  position:relative;margin-top:1.6rem;border-radius:24px;overflow:hidden;
  border:5px solid #E4487C;cursor:pointer;
  box-shadow:0 0 0 4px var(--pink),10px 14px 0 rgba(228,72,124,.22);
  perspective:1400px;max-width:920px;background:#E4487C;
}
.window:focus-visible{outline:4px solid var(--pink);outline-offset:6px}
.win-photo{margin:0}
.win-photo img{width:100%;display:block}
/* vertical planks + top/bottom rails so they read as shutters */
.shutter{
  position:absolute;top:0;bottom:0;width:50.5%;
  background:
    linear-gradient(180deg,rgba(0,0,0,.22) 0 12%,transparent 12% 88%,rgba(0,0,0,.22) 88%),
    repeating-linear-gradient(90deg,#2E8F8A 0 8px,#26A19C 8px 52px,#1F827D 52px 56px),
    #26A19C;
  border:3px solid var(--pink);
  transition:transform 1s var(--ease);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.7rem;
  will-change:transform;
}
.shutter::before,.shutter::after{
  content:"";position:absolute;left:6%;right:6%;height:10px;border-radius:6px;
  background:#1F6E6A;border:2.5px solid rgba(228,72,124,.55);
}
.shutter::before{top:9%}
.shutter::after{bottom:9%}
.shutter b{
  font-family:var(--hand);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.4rem);
  color:#FFFDFB;background:rgba(228,72,124,.42);border:2.5px solid rgba(255,253,251,.85);
  border-radius:14px;padding:.15em .7em;transform:rotate(-3deg);letter-spacing:.02em;
}
.sh-r b{transform:rotate(3deg)}
.sh-l{left:0;transform-origin:left center;border-radius:16px 4px 4px 16px}
.sh-r{right:0;transform-origin:right center;border-radius:4px 16px 16px 4px}
.shutter span{
  width:40px;height:40px;border-radius:50%;border:3px solid var(--pink);
  background:var(--mango);box-shadow:0 3px 0 rgba(228,72,124,.4);
}
/* impatient shutters: a tiny knock every few seconds until opened */
@keyframes shutknock{
  0%,86%,100%{transform:rotateY(0)}
  89%{transform:rotateY(-9deg)}
  93%{transform:rotateY(4deg)}
  96%{transform:rotateY(-2deg)}
}
@keyframes shutknockR{
  0%,86%,100%{transform:rotateY(0)}
  89%{transform:rotateY(9deg)}
  93%{transform:rotateY(-4deg)}
  96%{transform:rotateY(2deg)}
}
.window:not(.open) .sh-l{animation:shutknock 4.6s var(--ease) 1.2s infinite}
.window:not(.open) .sh-r{animation:shutknockR 4.6s var(--ease) 1.35s infinite}
.window.open .sh-l{animation:none;transform:rotateY(-138deg)}
.window.open .sh-r{animation:none;transform:rotateY(138deg)}
.window.open{cursor:default}
.win-after{margin-top:1.6rem;font-size:1.05rem}
.win-after a{font-weight:700;color:var(--pink)}
@media (prefers-reduced-motion:reduce){
  .shutter{transition:opacity .2s;animation:none !important}
  .window.open .shutter{opacity:0;transform:none}
}

/* ---------- caution tape band ---------- */
.tape-band{
  transform:rotate(-1.6deg) scale(1.04);margin:1rem 0 0;
  background:repeating-linear-gradient(45deg,var(--mango) 0 26px,var(--pink) 26px 52px);
  padding:.5rem 0;overflow:hidden;border-top:3px solid var(--pink);border-bottom:3px solid var(--pink);
}
.tape-in{display:flex;white-space:nowrap;width:max-content;background:var(--paper);padding:.32rem 0;border-top:3px solid var(--pink);border-bottom:3px solid var(--pink)}
.tape-in span{
  font-family:var(--disp);font-weight:600;font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;padding-right:1rem;animation:tapemove 30s linear infinite;color:var(--ink);
}
@keyframes tapemove{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.tape-in span{animation:none}}

/* ---------- what's coming ---------- */
.coming{position:relative}
.coming::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pink)}
.coming-in{color:var(--paper)}
.coming-in .sec-h{color:#fff}
.coming-in .kicker{color:var(--mango)}
.coming-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.2vw,1.8rem);margin-top:2.4rem}
.cm-card{
  border:3px solid var(--paper);border-radius:20px;padding:1.5rem 1.3rem;
  background:rgba(255,253,251,.05);
  transition:transform .35s var(--spring),background .3s;
}
.cm-card:hover{transform:translateY(-6px) rotate(-.6deg);background:rgba(255,253,251,.1)}
.cm-big{
  font-family:var(--disp);font-weight:800;font-size:.85rem;letter-spacing:.1em;
  background:var(--cmc,var(--pink));color:#fff;border:3px solid var(--paper);
  border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  padding:.5em 1.1em;margin-bottom:1rem;transform:rotate(-3deg);
}
.cm-card h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:1.15rem;margin-bottom:.5rem}
.cm-card p:not(.cm-big){font-size:.95rem;color:#EFF4EC}
.coming-note{margin-top:2rem;color:#FFD98E;transform:rotate(-1.2deg)}

/* ---------- hiring ---------- */
.hire-grid{display:grid;grid-template-columns:36fr 54fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hire-fig{margin:0;transform:rotate(-2deg)}
.hire-fig img{border-radius:20px;border:4px solid var(--pink);box-shadow:8px 10px 0 rgba(228,72,124,.4)}
.hire-copy p:not(.kicker){max-width:48ch;margin-bottom:.9rem}
.hire-copy .btn{margin-top:.8rem}

/* ---------- teaser band ---------- */
.tease{position:relative;min-height:74svh;display:flex;align-items:flex-end;overflow:hidden}
.tease-fig{margin:0;position:absolute;inset:0}
.tease-fig img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.tease::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(228,72,124,0) 30%,rgba(228,72,124,.8) 92%)}
.tease-ov{
  position:relative;z-index:2;width:var(--w);margin:0 auto;
  padding:0 0 clamp(2.6rem,7vh,4.5rem);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;
}
.tease-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.5rem,4.2vw,3rem);line-height:1.1;max-width:16ch;
}
/* neon sign: flickers on when it scrolls into view */
.tease-h.neon{
  color:#FFE9F2;
  text-shadow:0 0 8px rgba(255,123,172,.9),0 0 26px rgba(255,123,172,.65),0 0 60px rgba(228,72,124,.5);
}
@keyframes neonflick{
  0%,100%{opacity:1}
  8%{opacity:.35}12%{opacity:1}18%{opacity:.5}22%{opacity:1}46%{opacity:1}
  50%{opacity:.6}54%{opacity:1}
}
.tease-h.neon.flick{animation:neonflick 1.6s steps(1) 1}
@media (prefers-reduced-motion:reduce){.tease-h.neon.flick{animation:none}}

/* breathing room above the next-page band (the tease band is full-bleed) */
.tease{margin-bottom:0}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .uhero2-grid{grid-template-columns:1fr}
  .uhero2-fig{max-width:430px}
  .coming-grid{grid-template-columns:1fr}
  .hire-grid{grid-template-columns:1fr}
  .hire-fig{max-width:400px}
  .shutter b{font-size:1.15rem}
  .shutter span{width:30px;height:30px}
}