/* ============================================================
   GraFik Arena — Premium enhancement layer ("wow")
   Cinematic hero, kinetic type, gold sheen, marquee, custom
   cursor, magnetic buttons, page curtain, parallax, grain.
   All transform/opacity based, reduced-motion safe.
   ============================================================ */

/* ---- Film grain (global, very subtle) --------------------- */
.ga-grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Custom cursor (desktop, pointer:fine) ---------------- */
.ga-cursor, .ga-cursor-dot { display: none; }
@media (hover: hover) and (pointer: fine) {
  body.ga-cursor-on { cursor: none; }
  body.ga-cursor-on a, body.ga-cursor-on button, body.ga-cursor-on [data-magnetic], body.ga-cursor-on input, body.ga-cursor-on select, body.ga-cursor-on textarea { cursor: none; }
  .ga-cursor {
    display: block; position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
    width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
    border: 1.5px solid rgba(230,179,62,.85);
    transform: translate3d(-100px,-100px,0); will-change: transform;
    transition: width .25s var(--ease-out), height .25s var(--ease-out), margin .25s var(--ease-out), background .25s var(--ease-out), border-color .25s var(--ease-out), opacity .3s;
  }
  .ga-cursor-dot {
    display: block; position: fixed; top: 0; left: 0; z-index: 10000; pointer-events: none;
    width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
    background: var(--ga-gold); transform: translate3d(-100px,-100px,0); will-change: transform;
  }
  body.ga-cursor-hot .ga-cursor { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(230,179,62,.12); border-color: rgba(230,179,62,.9); }
  body.ga-cursor-hot .ga-cursor-dot { opacity: 0; }
  body.ga-cursor-down .ga-cursor { transform: translate3d(var(--cx,0),var(--cy,0),0) scale(.82); }
}

/* ---- Page curtain transition ------------------------------ */
.ga-curtain {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  transform: scaleY(0); transform-origin: bottom;
  background: var(--ga-gradient-gold);
}
.ga-curtain.in { animation: gaCurtainIn .42s var(--ease-in-out) forwards; }
.ga-curtain.out { transform-origin: top; animation: gaCurtainOut .42s var(--ease-in-out) forwards; }
@keyframes gaCurtainIn { from { transform: scaleY(0); transform-origin: bottom; } to { transform: scaleY(1); transform-origin: bottom; } }
@keyframes gaCurtainOut { from { transform: scaleY(1); transform-origin: top; } to { transform: scaleY(0); transform-origin: top; } }
.ga-curtain .ga-curtain-mark {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0;
}
.ga-curtain.in .ga-curtain-mark { animation: gaMarkPulse .42s var(--ease-out); }
@keyframes gaMarkPulse { 0%{opacity:0;transform:scale(.8)} 50%{opacity:.9} 100%{opacity:0;transform:scale(1.05)} }
.ga-curtain .ga-curtain-mark img { width: 64px; }

/* ---- Hero photographic background -------------------------- */
.hero .hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; opacity: .62;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 38%, #000 72%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 38%, #000 72%);
}

/* ---- Hero aurora + drifting gold glows -------------------- */
.hero::before {
  content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 50% at 78% 18%, rgba(230,179,62,.20), transparent 60%),
    radial-gradient(35% 45% at 18% 75%, rgba(184,132,26,.16), transparent 62%);
  filter: blur(8px);
  animation: gaAurora 16s var(--ease-in-out) infinite alternate;
}
@keyframes gaAurora {
  0%   { transform: translate3d(0,0,0) scale(1); opacity: .9; }
  100% { transform: translate3d(-3%,2%,0) scale(1.12); opacity: 1; }
}
.hero-inner { z-index: 2; }

/* ---- Kinetic masked headline ------------------------------ */
.kinetic .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.kinetic .w > i { display: inline-block; font-style: normal; transform: translateY(112%); }
.kinetic.run .w > i { animation: gaWordUp .9s var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
@keyframes gaWordUp { to { transform: translateY(0); } }

/* metallic sheen sweep on the gold word */
.ga-gold-text.sheen {
  background: linear-gradient(110deg, #B8841A 0%, #E6B33E 30%, #FBE9A8 48%, #E6B33E 62%, #B8841A 100%);
  background-size: 280% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gaSheen 6s var(--ease-in-out) 1.1s infinite;
}
@keyframes gaSheen { 0%{background-position: 180% 0} 55%,100%{background-position: -80% 0} }

/* ---- Hero scroll cue (fixed, visible on first screen) ------ */
.ga-scrollcue {
  position: fixed; right: clamp(16px, 4vw, 40px); bottom: 22px; z-index: 70;
  display: inline-flex; align-items: center; gap: 12px;
  color: rgba(255,255,255,.78); font-family: var(--font-display);
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; cursor: pointer;
  background: rgba(18,18,18,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 8px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), color .3s var(--ease-out);
}
.ga-scrollcue:hover { color: var(--ga-gold); border-color: rgba(230,179,62,.5); }
body.ga-scrolled .ga-scrollcue { opacity: 0; pointer-events: none; transform: translateY(12px); }
.ga-scrollcue .mouse {
  width: 22px; height: 34px; border: 1.5px solid rgba(255,255,255,.4); border-radius: 12px; position: relative;
}
.ga-scrollcue .mouse::after {
  content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px;
  background: var(--ga-gold); border-radius: 2px; animation: gaWheel 1.6s var(--ease-out) infinite;
}
@keyframes gaWheel { 0%{opacity:0;transform:translateY(0)} 30%{opacity:1} 70%{opacity:1} 100%{opacity:0;transform:translateY(10px)} }

/* ---- Hero stats strip ------------------------------------- */
.hero-stats {
  display: grid; grid-template-columns: repeat(4, auto); gap: clamp(20px, 4vw, 56px);
  margin-top: 50px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.1);
  justify-content: start;
}
.hero-stats .stat .n {
  font-family: var(--font-display); font-weight: 200; font-size: clamp(26px, 3vw, 40px); line-height: 1;
  background: var(--ga-gradient-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-stats .stat .l {
  margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.6); max-width: 18ch;
  font-family: var(--font-display); letter-spacing: .04em;
}
@media (max-width: 680px) { .hero-stats { grid-template-columns: 1fr 1fr; gap: 22px; } }

/* ---- Visible ghost button (fix low contrast) -------------- */
.hero .ghost-cta {
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.hero .ghost-cta:hover {
  border-color: var(--ga-gold); color: #fff;
  background: rgba(230,179,62,.14); box-shadow: 0 8px 30px rgba(230,179,62,.18);
}

/* ---- Marquee trust band ----------------------------------- */
.marquee { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: inline-flex; align-items: center; gap: clamp(40px, 6vw, 80px); white-space: nowrap; animation: gaMarquee 32s linear infinite; will-change: transform; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--font-display); font-weight: 300; font-size: 18px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.5); transition: color var(--dur-base) var(--ease-out); flex: none;
}
.marquee-track span::after { content: "•"; margin-left: clamp(40px,6vw,80px); color: rgba(230,179,62,.4); }
.marquee-track span:hover { color: var(--ga-gold); }
@keyframes gaMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Card sheen + gold edge on hover ---------------------- */
.svc-card, .work-tile, .value-card, .step-card, .team-card, .office-card { position: relative; }
.svc-card { overflow: hidden; }
.svc-card::after, .work-tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.10) 48%, transparent 66%);
  background-size: 220% 100%; background-position: 180% 0; opacity: 0;
  transition: opacity .4s var(--ease-out);
}
.svc-card:hover::after, .work-tile:hover::after { opacity: 1; animation: gaCardSheen 1.1s var(--ease-out); }
@keyframes gaCardSheen { from { background-position: 180% 0; } to { background-position: -60% 0; } }
.svc-card:hover { box-shadow: var(--shadow-md), 0 0 0 1px rgba(230,179,62,.35); }
.work-tile:hover { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(230,179,62,.4); }
.work-tile .ring { transition: transform .6s var(--ease-out); }
.work-tile:hover .ring { transform: rotate(45deg) scale(1.06); }
.svc-card .num { transition: transform .4s var(--ease-out); }
.svc-card:hover .num { transform: translateY(-2px) scale(1.04); }

/* number-only counter alignment */
.hero-stats .n[data-count] { font-variant-numeric: tabular-nums; }

/* ---- Generative art in work tiles ------------------------- */
.work-tile .art {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04); transition: transform .7s var(--ease-out); opacity: .96;
}
.work-tile:hover .art { transform: scale(1.1); }
.work-tile .scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,12,12,.15) 0%, rgba(12,12,12,.35) 45%, rgba(12,12,12,.86) 100%);
}
.work-tile .cat, .work-tile h3, .work-tile p { position: relative; z-index: 2; }

/* ---- Team photo avatars ----------------------------------- */
.team-card .avatar { overflow: hidden; padding: 0; }
.team-card .avatar img.ph { width: 100%; height: 100%; object-fit: cover; opacity: 1; border-radius: 50%; }
.team-card:hover .avatar { box-shadow: 0 0 0 3px rgba(230,179,62,.25); }

/* ---- About visual art ------------------------------------- */
.about-visual .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.about-visual .scrim { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(12,12,12,.25), rgba(12,12,12,.55)); }
.about-visual img.mark, .about-visual .ring { position: relative; z-index: 2; }

/* ---- Parallax helper -------------------------------------- */
[data-parallax] { will-change: transform; }

/* ---- Reveal: add a mask/clip flavour ---------------------- */
.reveal.up { transform: translateY(28px); }
.reveal.in.up { transform: none; }

/* ---- Editorial section index tag -------------------------- */
.sec-index {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em;
  color: var(--ga-gold-deep); opacity: .8;
}
.sec-dark .sec-index, .sec-ink .sec-index { color: var(--ga-gold); }

/* ---- Respect reduced motion ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .ga-gold-text.sheen, .marquee-track, .ga-scrollcue .mouse::after { animation: none !important; }
  .ga-gold-text.sheen { background: var(--ga-gradient-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .kinetic .w > i { transform: none !important; animation: none !important; }
  .ga-cursor, .ga-cursor-dot { display: none !important; }
  body.ga-cursor-on, body.ga-cursor-on a, body.ga-cursor-on button { cursor: auto !important; }
  .ga-curtain { display: none !important; }
}