/* ============================================================
   Shendy Studio — Portfolio · Section styles
   reveals · about · stats · work · services · clients · contact
   ============================================================ */

/* ===================== IMAGE SLOTS (dark theme) =====================
   The <image-slot> empty state ships light-on-light; restyle its exposed
   parts for our dark canvas so empty slots read as intentional placeholders. */
image-slot::part(frame) {
  background: linear-gradient(135deg, rgba(43,47,102,0.28), rgba(237,90,43,0.16));
}
image-slot::part(empty) { color: rgba(255,255,255,0.62); }
image-slot::part(ring) { border-color: rgba(255,255,255,0.22); }

/* ===================== SCROLL REVEAL =====================
   Hidden states are transition-LESS and gated on html.js, so they apply
   instantly (no flash) and never trap a value. The entrance animation is
   driven by requestAnimationFrame in portfolio.js (reliable everywhere). */
.js [data-reveal] { opacity: 0; }
.js [data-reveal]:not([data-reveal="mask"]) { transform: translateY(40px); }
.js [data-reveal="scale"] { transform: scale(1.06); }
.js [data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
.js [data-stagger] > * { opacity: 0; transform: translateY(38px); }
.js [data-reveal].shown, .js [data-reveal].shown[data-reveal="mask"], .js [data-stagger].shown > * { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal="mask"], .js [data-reveal="scale"], .js [data-stagger] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

.section { padding-block: var(--space-section); position: relative; }
.section-head { max-width: 60ch; margin-bottom: clamp(2.5rem,6vh,4.5rem); }
.section-head .eyebrow { margin-bottom: 1.2rem; }
.section-title { font-size: var(--fs-display); line-height: .98; }
.section-title em { font-style: normal; color: var(--orange); }

/* word-by-word reveal (rAF-driven) */
.words .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.words .word > span { display: inline-block; }
.js .words .word > span { transform: translateY(105%); }
@media (prefers-reduced-motion: reduce){ .js .words .word > span { transform: none !important; } }

/* ===================== ABOUT ===================== */
.about { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
@media (max-width: 880px){ .about { grid-template-columns: 1fr; } }
.about__statement { font-family: var(--font-display); font-weight: var(--w-medium); font-size: clamp(1.5rem,3.2vw,2.7rem); line-height: 1.12; letter-spacing: var(--track-tight); color: #fff; }
.about__statement b { color: var(--orange); font-weight: var(--w-bold); }
.about__meta { margin-top: 2rem; max-width: 46ch; color: var(--text-body); font-size: var(--fs-lead); }
.about__photo { position: relative; }
.about__photo image-slot { width: 100%; aspect-ratio: 1080/1350; box-shadow: var(--shadow-card); }
.about__badge {
  position: absolute; bottom: -22px; left: -22px; background: var(--orange); color: #fff;
  font-family: var(--font-display); font-weight: var(--w-bold); padding: 1rem 1.3rem; border-radius: var(--r-md);
  box-shadow: var(--glow-orange); line-height: 1;
}
.about__badge b { font-size: 2.4rem; display: block; }
.about__badge span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }

/* ===================== STATS ===================== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border-block: 1px solid var(--hairline); }
@media (max-width: 820px){ .stats { grid-template-columns: repeat(2,1fr); } }
.stat { background: var(--bg); padding: clamp(2rem,4vw,3.2rem) clamp(1.2rem,2vw,2rem); }
.stat__num { font-family: var(--font-display); font-weight: var(--w-bold); font-size: clamp(3rem,6vw,5.2rem); line-height: .9; color: #fff; font-variant-numeric: tabular-nums; }
.stat__num .suf { color: var(--orange); }
.stat__label { margin-top: .6rem; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ash); }

/* ===================== WORK ===================== */
.work__bar { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; margin-bottom: clamp(2rem,5vh,3.5rem); }
.filters { display: flex; gap: .5rem; flex-wrap: wrap; }
.filter {
  cursor: none; font-family: var(--font-body); font-weight: var(--w-medium); font-size: .9rem;
  padding: .55em 1.1em; border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--smoke);
  background: transparent; transition: all .3s var(--ease-out);
}
.filter:hover { border-color: var(--border-strong); color: #fff; }
.filter.active { background: #fff; color: var(--black); border-color: #fff; }

.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem,2vw,1.6rem); grid-auto-flow: dense; }
.work-card { position: relative; overflow: hidden; border-radius: var(--r-lg); grid-column: span 6; background: var(--bg-raised); border: 1px solid var(--hairline); transition: filter .5s var(--ease-out), border-color .4s, box-shadow .4s; }
/* Format-driven sizing — matches Amr's real canvas sizes */
.work-card[data-format="kv"]  { grid-column: span 8; }   /* 1920×1080 — 16:9 */
.work-card[data-format="kv"].feature { grid-column: span 12; }
.work-card[data-format="s54"] { grid-column: span 4; }   /* 1350×1080 — 5:4 */
.work-card[data-format="s11"] { grid-column: span 4; }   /* 1080×1080 — 1:1 */
@media (max-width: 980px){ .work-card[data-format="kv"], .work-card[data-format="kv"].feature { grid-column: span 12; } .work-card[data-format="s54"], .work-card[data-format="s11"] { grid-column: span 6; } }
@media (max-width: 620px){ .work-card, .work-card[data-format="s54"], .work-card[data-format="s11"] { grid-column: span 12; } }
.work-card.is-hidden { display: none; }
.work-media { position: relative; overflow: hidden; }
.work-card image-slot { width: 100%; height: 100%; display: block; transition: transform .7s var(--ease-out); }
.work-card[data-format="kv"]  .work-media { aspect-ratio: 1920/1080; }
.work-card[data-format="s54"] .work-media { aspect-ratio: 1350/1080; }
.work-card[data-format="s11"] .work-media { aspect-ratio: 1080/1080; }
/* Size badge */
.work-size { position: absolute; top: clamp(.8rem,1.5vw,1.1rem); left: clamp(.8rem,1.5vw,1.1rem); z-index: 4;
  display: inline-flex; align-items: center; gap: .45em; padding: .4em .7em; border-radius: var(--r-pill);
  background: rgba(6,7,13,0.55); backdrop-filter: blur(8px); border: 1px solid var(--hairline-strong);
  font-family: var(--font-body); font-weight: var(--w-bold); font-size: .68rem; letter-spacing: .08em;
  color: var(--bone); font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(-6px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.work-size::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.work-card:hover .work-size { opacity: 1; transform: none; }
.work-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lift); }
.work-card:hover image-slot { transform: scale(1.05); }
.work-info {
  position: absolute; inset: auto 0 0 0; z-index: 3; padding: clamp(1.2rem,2.5vw,1.8rem);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  background: linear-gradient(to top, rgba(6,7,13,0.92), rgba(6,7,13,0.0));
  transform: translateY(8px); opacity: .96; transition: transform .5s var(--ease-out);
}
.work-card:hover .work-info { transform: translateY(0); }
.work-cat { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); font-weight: var(--w-bold); }
.work-title { font-family: var(--font-display); font-weight: var(--w-bold); font-size: clamp(1.15rem,2vw,1.7rem); color: #fff; line-height: 1.05; margin-top: .3rem; }
.work-year { font-size: .8rem; color: var(--smoke); align-self: flex-end; white-space: nowrap; }

/* ===================== SERVICES ===================== */
/* ===================== SERVICES (card grid) ===================== */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem,1.8vw,1.4rem); }
@media (max-width: 600px){ .svc-grid { grid-template-columns: 1fr; } }
.svc {
  position: relative; display: flex; flex-direction: column; gap: 1rem; overflow: hidden;
  padding: clamp(1.6rem,2.4vw,2.1rem); border-radius: var(--r-lg);
  background: var(--bg-raised); border: 1px solid var(--hairline);
  transition: transform .45s var(--ease-out), border-color .4s, box-shadow .45s, background .45s;
}
.svc::after { /* corner glow */
  content: ""; position: absolute; top: -40%; right: -30%; width: 70%; height: 80%; border-radius: 50%;
  background: radial-gradient(circle, rgba(237,90,43,0.22), transparent 70%);
  opacity: 0; transition: opacity .5s var(--ease-out); pointer-events: none;
}
.svc:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow-lift); background: #0d101b; }
.svc:hover::after { opacity: 1; }
.svc__top { display: flex; align-items: center; justify-content: space-between; }
.svc__ico {
  width: 50px; height: 50px; border-radius: var(--r-md); display: grid; place-items: center;
  background: rgba(237,90,43,0.12); border: 1px solid rgba(237,90,43,0.28); color: var(--orange);
  transition: background .4s var(--ease-out), color .4s, transform .4s var(--ease-out);
}
.svc__ico svg { width: 24px; height: 24px; stroke-width: 1.8; }
.svc:hover .svc__ico { background: var(--orange); color: #fff; transform: rotate(-6deg) scale(1.05); }
.svc__no { font-family: var(--font-display); font-weight: var(--w-medium); font-size: .95rem; color: var(--ash); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.svc__name { font-family: var(--font-display); font-weight: var(--w-bold); font-size: clamp(1.3rem,1.9vw,1.6rem); color: #fff; letter-spacing: var(--track-tight); line-height: 1.05; }
.svc__desc { font-size: .95rem; color: var(--smoke); line-height: 1.5; flex: 1; }
.svc__req {
  display: inline-flex; align-items: center; gap: .55em; align-self: flex-start; cursor: none;
  margin-top: .4rem; padding: .7em 1.2em; border-radius: var(--r-pill);
  background: transparent; border: 1px solid var(--border-strong); color: var(--bone);
  font-family: var(--font-body); font-weight: var(--w-bold); font-size: .88rem;
  transition: background .3s var(--ease-out), color .3s, border-color .3s, transform .3s var(--ease-out);
}
.svc__req svg { width: 17px; height: 17px; }
.svc__req:hover { background: #25D366; border-color: #25D366; color: #06070d; }
.svc__req .arr { transition: transform .35s var(--ease-out); }
.svc__req:hover .arr { transform: translateX(3px); }

/* CTA card */
.svc--cta { background: var(--grad-brand); border: none; justify-content: center; }
.svc--cta::after { display: none; }
.svc--cta:hover { background: var(--grad-brand); transform: translateY(-6px); }
.svc__req--light { background: #fff; border-color: #fff; color: #06070d; }
.svc__req--light:hover { background: #25D366; border-color: #25D366; color: #fff; }

/* ===================== BEFORE / AFTER (Retouching) ===================== */
.ba-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem,2.5vw,2rem); }
@media (max-width: 820px){ .ba-wrap { grid-template-columns: 1fr; } }
.ba {
  position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--hairline);
  aspect-ratio: 4/3; background: var(--bg-raised); cursor: none; touch-action: none; user-select: none;
  box-shadow: var(--shadow-card);
}
.ba__layer { position: absolute; inset: 0; }
.ba__layer image-slot { width: 100%; height: 100%; display: block; }
.ba__after { z-index: 1; }
.ba__before { z-index: 2; clip-path: inset(0 50% 0 0); will-change: clip-path; }
.ba__tag {
  position: absolute; top: 1rem; z-index: 4; padding: .4em .8em; border-radius: var(--r-pill);
  font-family: var(--font-body); font-weight: var(--w-bold); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(6,7,13,0.6); backdrop-filter: blur(8px); border: 1px solid var(--hairline-strong); color: var(--bone);
}
.ba__tag.before { left: 1rem; z-index: 4; }
.ba__tag.after { right: 1rem; z-index: 1; color: var(--orange); }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: 50%; z-index: 5; width: 2px; background: var(--orange);
  transform: translateX(-50%); box-shadow: var(--glow-orange);
}
.ba__grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 46px; height: 46px; border-radius: 50%; background: var(--orange); color: #fff;
  display: grid; place-items: center; box-shadow: var(--glow-orange); font-size: 1rem;
  border: 2px solid rgba(255,255,255,0.85);
}
.ba__grip svg { width: 20px; height: 20px; }
.ba__hint { margin-top: 1.2rem; font-size: .85rem; color: var(--ash); letter-spacing: .04em; display: flex; align-items: center; gap: .5rem; }

/* ===================== CLIENTS / TESTIMONIALS ===================== */
.logo-marquee { overflow: hidden; border-block: 1px solid var(--hairline); padding-block: clamp(1.6rem,3.4vh,2.6rem); margin-bottom: clamp(2.5rem,6vh,4rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-track { display: flex; gap: clamp(2.8rem,5vw,5rem); width: max-content; animation: marquee 64s linear infinite; align-items: center; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-mark { flex: none; height: clamp(26px, 3.1vw, 40px); width: auto; object-fit: contain; opacity: .62; transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
.logo-mark:hover { opacity: 1; transform: scale(1.06); }
.logo-mark.tall { height: clamp(34px, 4vw, 54px); }
@media (prefers-reduced-motion: reduce){ .logo-track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 2rem; } }

.testi-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(1rem,2vw,1.6rem); }
@media (max-width: 720px){ .testi-grid { grid-template-columns: 1fr; } }
.testi { position: relative; overflow: hidden; background: var(--bg-raised); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: clamp(1.7rem,3vw,2.3rem); display: flex; flex-direction: column; gap: 1.1rem; transition: transform .45s var(--ease-out), border-color .4s, box-shadow .45s, background .45s; }
.testi::after { content: ""; position: absolute; top: -40%; right: -25%; width: 60%; height: 75%; border-radius: 50%; background: radial-gradient(circle, rgba(237,90,43,0.16), transparent 70%); opacity: 0; transition: opacity .5s var(--ease-out); pointer-events: none; }
.testi:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow-lift); background: #0d101b; }
.testi:hover::after { opacity: 1; }
.testi__stars { display: flex; gap: .2rem; color: var(--orange); }
.testi__stars svg { width: 18px; height: 18px; transition: transform .3s var(--ease-back); }
.testi:hover .testi__stars svg { transform: scale(1.18); }
.testi:hover .testi__stars svg:nth-child(2){ transition-delay:.04s } .testi:hover .testi__stars svg:nth-child(3){ transition-delay:.08s } .testi:hover .testi__stars svg:nth-child(4){ transition-delay:.12s } .testi:hover .testi__stars svg:nth-child(5){ transition-delay:.16s }
.testi__text { color: var(--bone); font-size: 1.06rem; line-height: 1.55; flex: 1; }
.testi__text b { color: #fff; font-weight: var(--w-bold); }
.testi__who { display: flex; align-items: center; gap: .9rem; padding-top: .3rem; border-top: 1px solid var(--hairline); }
.testi__av { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--w-bold); font-size: 1.05rem; color: #fff; letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
.testi__name { color: #fff; font-weight: var(--w-bold); font-size: .96rem; }
.testi__role { color: var(--ash); font-size: .82rem; }

/* ===================== CONTACT ===================== */
.contact { position: relative; overflow: hidden; }
.contact__orb { position: absolute; z-index: 0; width: 80vmax; height: 80vmax; border-radius: 50%; left: 50%; bottom: -45vmax; transform: translateX(-50%); background: var(--grad-orb); filter: blur(40px); opacity: .55; }
.contact__inner { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; }
.contact__title { font-size: clamp(2.6rem,8vw,7rem); line-height: .92; color: #fff; max-width: 16ch; }
.contact__title em { font-style: normal; color: transparent; -webkit-text-stroke: 1.5px var(--orange); }
.contact__sub { margin-top: 1.6rem; max-width: 46ch; color: var(--bone); font-size: var(--fs-lead); }
.contact__cta { margin-top: 2.4rem; }
.contact__channels { margin-top: clamp(2.5rem,6vh,4rem); display: flex; flex-wrap: wrap; gap: clamp(1rem,2vw,1.5rem); justify-content: center; }
.channel { display: inline-flex; align-items: center; gap: .6rem; padding: .8em 1.3em; border: 1px solid var(--border); border-radius: var(--r-pill); color: var(--bone); font-weight: var(--w-medium); font-size: .95rem; cursor: none; transition: all .3s var(--ease-out); }
.channel:hover { border-color: var(--orange); color: #fff; transform: translateY(-3px); }
.channel svg { width: 18px; height: 18px; }

/* ===================== FOOTER ===================== */
.footer { border-top: 1px solid var(--hairline); padding-block: clamp(2.5rem,5vh,4rem); }
.footer__grid { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; }
.footer__logo { width: 150px; opacity: .9; }
.footer__nav { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.footer__nav a { color: var(--smoke); font-size: .9rem; transition: color .3s; }
.footer__nav a:hover { color: #fff; }
.footer__copy { color: var(--ash); font-size: .82rem; }
.to-top { cursor: none; display: inline-flex; align-items: center; gap: .5rem; color: var(--smoke); font-size: .85rem; letter-spacing: .04em; transition: color .3s; }
.to-top:hover { color: var(--orange); }
.footer__bottom { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--hairline); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }