/* motion + interactive effects */

/* -------------------------
   Reveal
------------------------- */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 640ms var(--ease), transform 640ms var(--ease);
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------
   Cursor FX
------------------------- */
.cursorFx{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
}
.cursorFx__dot{
  position:absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  transform: translate(-50%, -50%);
  opacity: 0;
}
.cursorFx__glow{
  position:absolute;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(255,255,255,.12), transparent 68%);
  transform: translate(-50%, -50%);
  opacity: 0;
  filter: blur(2px);
  mix-blend-mode: screen;
  transition: width 200ms var(--ease), height 200ms var(--ease), opacity 220ms var(--ease);
}
.cursorFx.is-active .cursorFx__dot,
.cursorFx.is-active .cursorFx__glow{ opacity: 1; }

/* -------------------------
   Card hover / glow
------------------------- */
.card{
  transition: transform 260ms var(--ease), border-color 260ms var(--ease), background 260ms var(--ease);
}
.card:hover{
  transform: translateY(-6px);
  border-color: var(--border2);
  background: var(--panel2);
}
.card::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(closest-side, rgba(255,255,255,.16), transparent 65%);
  opacity: 0;
  transition: opacity 260ms var(--ease);
  pointer-events:none;
}
.card:hover::after{ opacity: 1; }

.chip{
  transition: transform 220ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease);
}
.chip:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
}
.footer__top{
  transition: transform 220ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease);
}
.footer__top:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

/* -------------------------
   HERO: Moving Grid (NEW)
   - layer inside heroVisual
------------------------- */
.movingGrid{
  position:absolute;
  inset:-2px;
  z-index: 1;
  opacity: .28;
  pointer-events:none;
  mix-blend-mode: overlay;

  /* Two layers: fine grid + large grid */
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);

  background-size:
    34px 34px,
    34px 34px,
    120px 120px,
    120px 120px;

  background-position:
    0 0,
    0 0,
    0 0,
    0 0;

  /* soft vignette on grid */
  -webkit-mask-image: radial-gradient(circle at 50% 42%, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 58%, rgba(0,0,0,0) 78%);
  mask-image: radial-gradient(circle at 50% 42%, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 58%, rgba(0,0,0,0) 78%);
  filter: blur(.2px);
  will-change: background-position, transform;
  animation: gridMove 10.5s linear infinite;
}
@keyframes gridMove{
  0%{
    background-position:
      0 0,
      0 0,
      0 0,
      0 0;
    transform: translate3d(0,0,0) scale(1);
    opacity: .22;
  }
  50%{
    background-position:
      64px 42px,
      64px 42px,
      26px 18px,
      26px 18px;
    transform: translate3d(0,-6px,0) scale(1.01);
    opacity: .30;
  }
  100%{
    background-position:
      128px 84px,
      128px 84px,
      52px 36px,
      52px 36px;
    transform: translate3d(0,0,0) scale(1);
    opacity: .22;
  }
}

/* -------------------------
   HERO logo animation
------------------------- */
.heroLogoWrap{
  position: relative;
  width: 92%;
  max-width: 560px;
  z-index: 2;
  transform: translateZ(18px);
}
.hero__logo--anim{
  opacity: 0;
  transform: translateY(14px) scale(.985);
  animation: logoEnter 900ms var(--ease) 120ms forwards, logoFloat 4.2s var(--ease) 1.2s infinite alternate;
  filter: drop-shadow(0 18px 60px rgba(0,0,0,.55));
}
.logoSheen{
  position:absolute;
  inset:-20px;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.20), transparent 55%);
  transform: translateX(-55%) rotate(8deg);
  opacity: 0;
  animation: sheen 3.2s var(--ease) 1.4s infinite;
  pointer-events:none;
  mix-blend-mode: screen;
}
@keyframes logoEnter{
  to{ opacity:.98; transform: translateY(6px) scale(1); }
}
@keyframes logoFloat{
  from{ transform: translateY(6px) scale(1); }
  to{ transform: translateY(0px) scale(1.01); }
}
@keyframes sheen{
  0%{ opacity: 0; transform: translateX(-55%) rotate(8deg); }
  18%{ opacity: .55; }
  45%{ opacity: 0; transform: translateX(55%) rotate(8deg); }
  100%{ opacity: 0; transform: translateX(55%) rotate(8deg); }
}

/* -------------------------
   Ambient float + rings
------------------------- */
.ambient__a, .ambient__b, .ambient__c{
  animation: floaty 10s var(--ease) infinite alternate;
  will-change: transform;
}
.ambient__b{ animation-duration: 12s; }
.ambient__c{ animation-duration: 14s; }
@keyframes floaty{
  from{ transform: translate3d(0,0,0) scale(1); }
  to{ transform: translate3d(14px,-12px,0) scale(1.04); }
}
.ring{ animation: pulse 5.6s var(--ease) infinite; }
.ring--2{ animation-duration: 6.8s; }
@keyframes pulse{
  0%{ transform: scale(1); opacity:.22; }
  50%{ transform: scale(1.03); opacity:.34; }
  100%{ transform: scale(1); opacity:.22; }
}

/* -------------------------
   Industries marquee
------------------------- */
.marquee__track{
  animation: marquee 26s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track{ animation-play-state: paused; }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* -------------------------
   Particles container (lightweight)
------------------------- */
.particles{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.35;
  mix-blend-mode: overlay;
}

/* -------------------------
   Section transitions: Soft Divider Glow (NEW)
   Add class: .section--glow
------------------------- */
.section--glow{
  position: relative;
  isolation: isolate;
}
.section--glow::before,
.section--glow::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height: 42px;
  pointer-events:none;
  z-index: 0;
  opacity: .85;
}
.section--glow::before{
  top:-1px;
  background: radial-gradient(70% 120% at 50% 0%, rgba(255,255,255,.10), transparent 70%);
}
.section--glow::after{
  bottom:-1px;
  background: radial-gradient(70% 120% at 50% 100%, rgba(255,255,255,.10), transparent 70%);
}

/* Light sections: adjust glow so it looks premium on white */
.section--light.section--glow::before{
  background: radial-gradient(70% 120% at 50% 0%, rgba(10,11,12,.10), transparent 72%);
  opacity: .40;
}
.section--light.section--glow::after{
  background: radial-gradient(70% 120% at 50% 100%, rgba(10,11,12,.10), transparent 72%);
  opacity: .40;
}

/* Keep content above dividers */
.section--glow > .container{
  position: relative;
  z-index: 1;
}

/* -------------------------
   Motion safety
------------------------- */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .ambient__a, .ambient__b, .ambient__c,
  .ring, .marquee__track,
  .hero__logo--anim, .logoSheen,
  .movingGrid{ animation:none !important; }
  .card, .chip, .footer__top, .btn, .brand__logo, .header{ transition:none !important; }
  .cursorFx{ display:none !important; }
}
@media (pointer: coarse){
  .cursorFx{ display:none !important; }
}
/* --- Moving Grid premium upgrade (tilt + depth) --- */
.movingGrid{
  transform-origin: 50% 50%;
  will-change: transform, background-position, opacity, filter;
  filter: blur(.18px) saturate(1.05);
}

/* heroVisual 3D hissi artsın */
#heroVisual{
  transform-style: preserve-3d;
  perspective: 900px;
}
/* =========================================================
   Section Gradient Separator Line (NEW)
   - Works with .section--glow
   - Dark + Light aware
   - Mobile friendly
========================================================= */

/* Line thickness & blur are responsive */
:root{
  --sep-h: clamp(1px, .18vw, 2px);
  --sep-blur: clamp(8px, 1.3vw, 18px);
  --sep-width: min(980px, 82vw);
}

/* Ensure section has stacking context */
.section--glow{
  position: relative;
}

/* Top separator */
.section--glow::before{
  /* keep existing glow background if you have it:
     we’re layering line via box-shadow-ish pseudo-element trick
  */
}

/* Add separator lines using extra pseudo elements via background layers */
.section--glow::before,
.section--glow::after{
  /* already used for soft glow; keep them */
}

/* NEW: gradient line element */
.section--glow .sepLineTop,
.section--glow .sepLineBot{
  position: absolute;
  left: 50%;
  width: var(--sep-width);
  height: var(--sep-h);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
  opacity: .95;

  /* crisp line */
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0) 8%,
    rgba(255,255,255,.42) 28%,
    rgba(255,255,255,.95) 50%,
    rgba(255,255,255,.42) 72%,
    rgba(255,255,255,0) 92%,
    transparent 100%
  );

  /* soft aura */
  filter: blur(.0px);
}
.section--glow .sepLineTop::after,
.section--glow .sepLineBot::after{
  content:"";
  position:absolute;
  inset: 0;
  background: inherit;
  filter: blur(var(--sep-blur));
  opacity: .55;
}

/* placement */
.section--glow .sepLineTop{ top: 0; }
.section--glow .sepLineBot{ bottom: 0; }

/* Light section: line should be dark-ish */
.section--light.section--glow .sepLineTop,
.section--light.section--glow .sepLineBot{
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(10,11,12,0) 8%,
    rgba(10,11,12,.22) 28%,
    rgba(10,11,12,.55) 50%,
    rgba(10,11,12,.22) 72%,
    rgba(10,11,12,0) 92%,
    transparent 100%
  );
  opacity: .70;
}
.section--light.section--glow .sepLineTop::after,
.section--light.section--glow .sepLineBot::after{
  opacity: .35;
}

/* Prevent clipping if sections have overflow hidden somewhere */
.section{
  overflow: visible;
}

/* Mobile: slightly wider, less blur */
@media (max-width: 640px){
  :root{
    --sep-width: min(560px, 92vw);
    --sep-blur: 12px;
  }
}