@import url("../assets/fonts/dancing/dancing.css");

/* ============================================================
   May i — prowebs · Showcase (loader orbit → hero gallery, one engine)
   Same card elements morph from a spinning circle into a moving slider.
   ============================================================ */
:root{--cardw:clamp(220px,28vw,420px)}

body.loading{overflow:hidden;height:100svh}
body.loading .site-header{opacity:0;pointer-events:none}
.site-header{transition:opacity .6s ease .2s}

.hero{position:relative;min-height:100svh;overflow:hidden;background:var(--bg);isolation:isolate}

/* ---- card stage (persists across loader → hero) ---- */
.hero__stage{position:absolute;inset:0;z-index:1;perspective:1600px;transform-style:preserve-3d;pointer-events:none}
.hero.is-gallery .hero__stage{pointer-events:auto}
.hero-card{position:absolute;top:0;left:0;width:var(--cardw);aspect-ratio:16/10;
  border:1px solid var(--line-2);background:var(--bg-2);overflow:hidden;opacity:0;
  box-shadow:0 26px 64px -26px rgba(0,0,0,.92);will-change:transform,opacity;
  transition:border-color .4s}
.hero-card img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.hero-card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,255,102,.05),transparent 30%,rgba(8,8,10,.4))}
.hero-card .tagn{position:absolute;inset-block-end:8px;inset-inline-start:10px;z-index:2;
  font:700 11px/1 var(--font-body);letter-spacing:.05em;color:var(--ink);
  background:rgba(8,8,10,.55);padding:4px 8px;backdrop-filter:blur(4px);opacity:0;transition:opacity .5s ease}
.hero.is-gallery .hero-card .tagn{opacity:1}
.hero.is-gallery .hero-card:hover{border-color:var(--green)}

/* ---- loading overlay (fades out on morph) ---- */
.hero__loading{position:absolute;inset:0;z-index:4;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center;padding:24px;
  transition:opacity .6s ease}
.hero__loading.hide{opacity:0}
.loader__tag{display:inline-flex;align-items:center;gap:9px;
  font:600 12px/1 var(--font-body);letter-spacing:.28em;text-transform:uppercase;color:var(--green)}
.loader__tag::before{content:"";width:7px;height:7px;background:var(--green);box-shadow:0 0 12px var(--green);
  animation:ld-pulse 1.1s var(--ease) infinite}
@keyframes ld-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.loader__headline{font-family:'Dancing Script',cursive;font-weight:700;
  font-size:clamp(36px,6.6vw,88px);line-height:1.08;letter-spacing:0;max-width:16ch;margin:0 auto;color:var(--ink);
  text-shadow:0 4px 40px rgba(8,8,10,.92),0 2px 12px rgba(8,8,10,.95)}
.loader__headline .hl{color:var(--green)}
.loader__count{font:700 13px/1 var(--font-body);letter-spacing:.14em;color:var(--mut)}
.loader__count b{color:var(--ink)}

/* ---- hero intro (fades in on morph, sits ABOVE the gallery) ---- */
.hero__intro{position:absolute;left:0;right:0;top:clamp(104px,17vh,196px);z-index:2;text-align:center;
  padding-inline:24px;max-width:min(900px,92vw);margin-inline:auto;
  opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .9s var(--ease);pointer-events:none}
.hero__intro.is-live{opacity:1;transform:none}
.hero__intro h1{font-size:clamp(30px,5vw,60px);margin-bottom:20px}
.hero__intro .hero__sub{margin:0 auto 28px;max-width:52ch}
.hero__intro .hero__actions{display:flex;justify-content:center;pointer-events:auto}

@media (prefers-reduced-motion:reduce){
  .loader__tag::before{animation:none}
  .hero__intro{transition:opacity .3s}
}

/* ---- gallery: "Preview Site" hover button ---- */
.hero.is-gallery .hero-card { cursor: pointer; }
.hero.is-gallery .hero-card:hover img { filter: brightness(.5); transition: filter .3s var(--ease); }
.card-preview {
  position: absolute; top: 50%; left: 50%; z-index: 3;
  transform: translate(-50%, -50%) scale(.92);
  background: var(--mustard); color: #140f00;
  font: 800 13px/1 var(--font-body); letter-spacing: .02em;
  border: none; border-radius: 999px; padding: 11px 18px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  box-shadow: 0 12px 34px -8px rgba(0,0,0,.7);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.card-preview { will-change: left, top; }   /* JS moves it to follow the cursor */
.hero.is-gallery .hero-card:hover .card-preview {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
}

/* ---- in-site preview popup ---- */
.preview { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; }
.preview[hidden] { display: none; }
.preview__backdrop { position: absolute; inset: 0; background: rgba(4,4,6,.72); backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s ease; }
.preview.open .preview__backdrop { opacity: 1; }
.preview__window {
  position: relative; z-index: 1; width: min(1100px, 94vw); height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 40px 120px -30px #000;
  transform: translateY(26px) scale(.98); opacity: 0;
  transition: transform .35s var(--ease), opacity .3s ease;
}
.preview.open .preview__window { transform: none; opacity: 1; }
.preview__bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg); }
.preview__title { font: 800 15px/1 var(--font-body); color: var(--ink); }
.preview__hint { font: 600 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); margin-inline-start: auto; }
.preview__close { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--ink); cursor: pointer; font-size: 15px; line-height: 1; transition: border-color .3s, color .3s; }
.preview__close:hover { border-color: var(--pink); color: var(--pink); }
.preview__body { flex: 1; position: relative; overflow: hidden; background: #0a0a0a; }
.preview__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.preview__imgwrap { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; background: #000; }
.preview__imgwrap::-webkit-scrollbar { width: 10px; }
.preview__imgwrap::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
.preview__img { display: block; width: 100%; height: auto; }
.preview__loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mut); font: 600 13px var(--font-body); letter-spacing: .1em; background: #0a0a0a; }
.preview.ready .preview__loading { display: none; }