/* ============================================================
   Integra Develop — visual enhancement layer (ADDITIVE / non-destructive)
   Loaded from index.html, layered on top of the React app. Keeps the
   existing palette (cream / ink / gold #8a6f3f) and fonts. Targets
   STABLE hooks (#home, [data-fx], [data-magnetic], nav, main em) so it
   survives rebuilds.
   ============================================================ */

:root{
  --fx-accent: 138,111,63;     /* --accent  #8a6f3f */
  --fx-accent-l: 184,150,90;   /* lighter gold */
  --fx-ink: 26,26,26;
  --fx-bg: 245,242,236;
}

/* ---------- film grain ---------- */
.integra-grain{
  position:fixed; inset:0; z-index:9990; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply; will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: integraGrain 1.1s steps(4) infinite;
}
@keyframes integraGrain{
  0%{transform:translate(0,0)}    25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-2%)}75%{transform:translate(-2%,-1%)}
  100%{transform:translate(1%,2%)}
}

/* ---------- custom magnetic cursor ---------- */
.integra-cursor,.integra-cursor-dot{
  position:fixed; top:0; left:0; pointer-events:none;
  border-radius:50%; transform:translate3d(-50%,-50%,0); will-change:transform;
}
.integra-cursor{
  width:38px; height:38px; z-index:10000;
  border:1px solid rgba(var(--fx-accent),.65);
  transition:width .28s cubic-bezier(.2,.8,.2,1),height .28s cubic-bezier(.2,.8,.2,1),
             background-color .28s ease,border-color .28s ease,opacity .3s ease;
}
.integra-cursor-dot{ width:5px; height:5px; z-index:10001; background:rgba(var(--fx-ink),.9); transition:opacity .3s ease; }
.integra-cursor.is-hover{ width:62px; height:62px; background:rgba(var(--fx-accent),.10); border-color:rgba(var(--fx-accent),0); }
.integra-cursor.is-down{ width:28px; height:28px; }
.integra-cursor.is-hidden,.integra-cursor-dot.is-hidden{ opacity:0; }
body.integra-cursor-on,body.integra-cursor-on *{ cursor:none !important; }

/* ---------- scroll progress ---------- */
.integra-progress{
  position:fixed; top:0; left:0; height:2px; width:0%; z-index:10002; pointer-events:none;
  background:linear-gradient(90deg, rgba(var(--fx-accent),.35), rgba(var(--fx-accent),1));
  box-shadow:0 0 12px rgba(var(--fx-accent),.5);
}

/* ---------- intro curtain ---------- */
.integra-intro{ position:fixed; inset:0; z-index:10050; background:var(--bg,#f5f2ec); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; }
.integra-intro__word{ font-family:"Cormorant Garamond",serif; font-weight:300; font-size:clamp(44px,9vw,104px); letter-spacing:.06em; color:var(--ink,#1a1a1a); opacity:0; transform:translateY(16px); display:flex; gap:.02em; }
.integra-intro__word b{ font-weight:300; display:inline-block; opacity:0; transform:translateY(70%); }
.integra-intro__mark{ font-family:Inter,sans-serif; font-size:11px; letter-spacing:.45em; text-transform:uppercase; color:var(--accent,#8a6f3f); opacity:0; }
.integra-intro__line{ width:0; height:1px; background:var(--accent,#8a6f3f); }

/* ---------- living gold shimmer on serif accents (<em> in main) ---------- */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  main em{
    background:linear-gradient(100deg,
      rgba(var(--fx-accent),1) 0%, rgba(var(--fx-accent-l),1) 28%,
      rgba(107,85,48,1) 54%, rgba(var(--fx-accent),1) 82%);
    background-size:220% 100%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    animation: integraShimmer 8s ease-in-out infinite;
  }
}
@keyframes integraShimmer{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* ---------- generative canvas backdrops ---------- */
.integra-hero-fx,.integra-visual-fx{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:0; transition:opacity 1.4s ease; }
.integra-hero-fx{ z-index:0; }
.integra-visual-fx{ z-index:0; }
#home{ position:relative; }
#home > *:not(.integra-hero-fx):not(.integra-hero-glow){ position:relative; z-index:1; }
[data-fx="art"]{ position:relative; }
[data-fx="art"] > *:not(.integra-visual-fx){ position:relative; z-index:1; }

/* drifting gold glow for hero depth (behind flow-field) */
.integra-hero-glow{
  position:absolute; z-index:0; pointer-events:none; border-radius:50%;
  width:62vw; height:62vw; max-width:820px; max-height:820px; right:-8%; top:4%;
  background:radial-gradient(circle at 50% 50%, rgba(var(--fx-accent),.17), rgba(var(--fx-accent),.05) 45%, transparent 70%);
  animation: integraGlow 24s ease-in-out infinite alternate;
}
.integra-hero-glow.is-second{
  width:46vw; height:46vw; max-width:560px; max-height:560px; left:-10%; right:auto; top:auto; bottom:6%;
  background:radial-gradient(circle at 50% 50%, rgba(var(--fx-accent-l),.12), rgba(var(--fx-accent-l),.04) 45%, transparent 70%);
  animation: integraGlow2 30s ease-in-out infinite alternate;
}
@keyframes integraGlow{ 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-7%,5%) scale(1.18)} }
@keyframes integraGlow2{ 0%{transform:translate(0,0) scale(1.05)} 100%{transform:translate(8%,-5%) scale(1.25)} }

/* ---------- service cards: top line-draw + sheen + 3D tilt ---------- */
[data-fx="card"]{
  position:relative; overflow:hidden;
  transform-style:preserve-3d; will-change:transform;
  transition:background .35s ease, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
[data-fx="card"]::before{
  content:""; position:absolute; top:0; left:0; height:2px; width:0;
  background:linear-gradient(90deg, rgba(var(--fx-accent),.9), rgba(var(--fx-accent-l),.9));
  transition:width .55s cubic-bezier(.2,.8,.2,1); z-index:3;
}
[data-fx="card"]:hover::before{ width:100%; }
[data-fx="card"]::after{
  content:""; position:absolute; top:0; left:-70%; width:45%; height:100%; z-index:2;
  background:linear-gradient(100deg, transparent, rgba(var(--fx-accent),.12), transparent);
  transform:skewX(-18deg); opacity:0; pointer-events:none;
}
[data-fx="card"]:hover::after{ opacity:1; animation: integraSheen 1.05s ease; }
@keyframes integraSheen{ from{left:-70%} to{left:130%} }
[data-fx="card"]:hover{ box-shadow:0 26px 60px -34px rgba(var(--fx-ink),.30); }

/* ---------- magnetic elements ---------- */
[data-magnetic]{ will-change:transform; }

/* ---------- marquee edge fade ---------- */
[data-fx="marquee"]{ position:relative; }
[data-fx="marquee"]::before,[data-fx="marquee"]::after{ content:""; position:absolute; top:0; bottom:0; width:140px; z-index:3; pointer-events:none; }
[data-fx="marquee"]::before{ left:0;  background:linear-gradient(90deg, var(--bg,#f5f2ec), transparent); }
[data-fx="marquee"]::after{  right:0; background:linear-gradient(270deg, var(--bg,#f5f2ec), transparent); }

/* ---------- nav entrance ---------- */
nav{ animation: integraNavIn .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes integraNavIn{ from{opacity:0; transform:translateY(-100%)} to{opacity:1; transform:translateY(0)} }

/* ---------- contact polish ---------- */
#contact input, #contact textarea{ transition:border-color .25s ease, box-shadow .25s ease; }
#contact input:focus, #contact textarea:focus{ box-shadow:0 1px 0 0 rgba(var(--fx-accent),.6); }
[data-fx="contact-item"]{ transition:padding .25s ease, background-color .3s ease; }
[data-fx="contact-item"]:hover{ background:rgba(var(--fx-accent),.04); }

/* ---------- floating Telegram quick-contact ---------- */
.integra-tg{
  position:fixed; right:30px; bottom:30px; z-index:980;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#1a1a1a; color:#f5f2ec; text-decoration:none;
  border:1px solid rgba(var(--fx-accent),0);
  box-shadow:0 16px 38px -14px rgba(26,26,26,.55);
  opacity:0; transform:translateY(18px) scale(.9); pointer-events:none;
  transition:opacity .5s ease, transform .55s cubic-bezier(.2,.8,.2,1), background-color .3s ease, border-color .3s ease;
}
.integra-tg.is-in{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.integra-tg:hover{ background:var(--accent,#8a6f3f); border-color:rgba(var(--fx-accent),.55); }
.integra-tg svg{ width:25px; height:25px; display:block; transition:transform .3s ease; }
.integra-tg:hover svg{ transform:translate(1px,-1px) rotate(-6deg); }
.integra-tg::after{ content:""; position:absolute; inset:-1px; border-radius:50%; border:1px solid rgba(var(--fx-accent),.5); opacity:0; animation: integraTgPulse 3.4s ease-out infinite; }
.integra-tg__label{ position:absolute; right:66px; white-space:nowrap; background:#1a1a1a; color:#f5f2ec; font-family:Inter,sans-serif; font-size:12px; letter-spacing:.04em; padding:9px 15px; border-radius:4px; opacity:0; transform:translateX(8px); transition:opacity .3s ease, transform .3s ease; pointer-events:none; box-shadow:0 10px 26px -12px rgba(26,26,26,.5); }
.integra-tg:hover .integra-tg__label{ opacity:1; transform:translateX(0); }
@keyframes integraTgPulse{ 0%{transform:scale(1); opacity:.45} 70%{transform:scale(1.55); opacity:0} 100%{opacity:0} }
@media (max-width:1000px){ .integra-tg{ right:18px; bottom:18px; width:52px; height:52px; } .integra-tg__label{ display:none; } }

/* ---------- accessibility / safety ---------- */
@media (prefers-reduced-motion: reduce){
  .integra-grain,.integra-cursor,.integra-cursor-dot,.integra-hero-fx,.integra-visual-fx,.integra-hero-glow{ display:none !important; }
  main em{ animation:none !important; }
  nav{ animation:none !important; }
  .integra-tg::after{ animation:none !important; }
  body.integra-cursor-on,body.integra-cursor-on *{ cursor:auto !important; }
}
@media (max-width:1000px){
  .integra-cursor,.integra-cursor-dot{ display:none !important; }
  body.integra-cursor-on,body.integra-cursor-on *{ cursor:auto !important; }
}