/* ============================================================
   VGR America — Contacts (FX build)
   Reuses palette/fonts from styles.css
   ============================================================ */

.contacts-page{
  min-height:100dvh;
  background:var(--vgr-ink);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:56px 20px;
  position:relative;
  overflow-x:hidden;
}

/* ---------- BACKGROUND FX ---------- */
.fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}

/* real media layer (photo → video crossfade) */
.fx-media{position:absolute;inset:-4%;}
.fx-media img,
.fx-media video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:grayscale(55%) contrast(126%) saturate(90%) brightness(.26) blur(3px);
  transform:scale(1.08);
  animation:mediaDrift 34s ease-in-out infinite alternate;
  will-change:transform;
}
.fx-photo{opacity:1;transition:opacity 1.2s ease;}
.fx-video{opacity:0;transition:opacity 1.4s ease;}
.fx-media.video-on .fx-photo{opacity:0;}
.fx-media.video-on .fx-video{opacity:1;}
@keyframes mediaDrift{
  0%{transform:scale(1.08) translate3d(0,0,0);}
  100%{transform:scale(1.18) translate3d(-1.5%,-2%,0);}
}

/* teal duotone wash over the media */
.fx-duotone{
  position:absolute;inset:0;
  background:
    linear-gradient(150deg, rgba(2,158,151,.42) 0%, rgba(4,10,12,.30) 48%, rgba(1,122,117,.38) 100%),
    linear-gradient(0deg, rgba(8,10,12,.82) 0%, rgba(8,10,12,.55) 100%);
  mix-blend-mode:color;
}
.fx-duotone::after{
  content:"";position:absolute;inset:0;
  background:rgba(8,10,12,.70);
}

/* aurora blobs */
.fx-aurora{
  position:absolute;inset:-30%;
  background:
    radial-gradient(38% 44% at 18% 26%, rgba(2,158,151,0.42) 0%, transparent 62%),
    radial-gradient(32% 40% at 82% 18%, rgba(45,191,182,0.30) 0%, transparent 64%),
    radial-gradient(46% 50% at 66% 84%, rgba(1,122,117,0.36) 0%, transparent 66%),
    radial-gradient(30% 36% at 30% 78%, rgba(200,203,212,0.10) 0%, transparent 62%);
  filter:blur(28px) saturate(125%);
  animation:auroraDrift 26s ease-in-out infinite alternate;
  will-change:transform;
  mix-blend-mode:screen;
  opacity:.78;
}
@keyframes auroraDrift{
  0%  {transform:translate3d(-3%,-2%,0) scale(1)   rotate(0deg);}
  50% {transform:translate3d(3%,2%,0)   scale(1.12) rotate(6deg);}
  100%{transform:translate3d(-2%,3%,0)  scale(1.05) rotate(-5deg);}
}

/* perspective grid */
.fx-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(2,158,151,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2,158,151,0.16) 1px, transparent 1px);
  background-size:66px 66px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 78%);
  animation:gridPan 22s linear infinite;
  opacity:0.55;
}
@keyframes gridPan{to{background-position:66px 66px, 66px 66px;}}

/* scan sweep */
.fx-scan{
  position:absolute;left:0;right:0;height:36vh;top:-40vh;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(45,191,182,0.05) 42%,
    rgba(45,191,182,0.14) 50%,
    rgba(45,191,182,0.05) 58%,
    transparent 100%);
  animation:scanFall 8.5s cubic-bezier(.5,0,.5,1) infinite;
  mix-blend-mode:screen;
}
@keyframes scanFall{
  0%{transform:translateY(0);opacity:0;}
  12%{opacity:1;}
  88%{opacity:1;}
  100%{transform:translateY(180vh);opacity:0;}
}

.fx-particles{position:absolute;inset:0;width:100%;height:100%;opacity:0.85;}

/* film noise */
.fx-noise{
  position:absolute;inset:-200px;
  opacity:0.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation:noiseShift .6s steps(3) infinite;
}
@keyframes noiseShift{
  0%{transform:translate(0,0);}33%{transform:translate(-14px,9px);}66%{transform:translate(11px,-12px);}100%{transform:translate(0,0);}
}

.fx-vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 92% 78% at 50% 46%, transparent 30%, rgba(4,6,8,0.88) 100%);
}

/* ---------- STAGE ---------- */
.stage{
  position:relative;z-index:1;
  width:100%;max-width:1120px;
  text-align:center;
}

.brandmark{position:relative;display:inline-block;margin-bottom:26px;}
.brandmark img{filter:drop-shadow(0 0 22px rgba(2,158,151,0.55));}
.brandmark-glow{
  position:absolute;inset:-60% -30%;
  background:radial-gradient(ellipse at center, rgba(45,191,182,0.34) 0%, transparent 70%);
  animation:breathe 4.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes breathe{0%,100%{opacity:.45;transform:scale(.94);}50%{opacity:1;transform:scale(1.08);}}

.stage-title{
  font-family:var(--vgr-font-display);
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(2.3rem,7vw,4.4rem);
  line-height:0.98;
  letter-spacing:0.005em;
  margin-bottom:16px;
}
.stage-title .line{display:block;}
.stage-title .accent{
  position:relative;
  color:var(--vgr-green-bright);
  text-shadow:0 0 32px rgba(45,191,182,0.55), 0 0 78px rgba(2,158,151,0.32);
}
/* chromatic glitch */
.stage-title .accent::before,
.stage-title .accent::after{
  content:attr(data-text);
  position:absolute;left:0;top:0;width:100%;
  pointer-events:none;
}
.stage-title .accent::before{color:#ff3b6b;animation:glitchA 5.5s steps(2,end) infinite;mix-blend-mode:screen;}
.stage-title .accent::after {color:#3bd8ff;animation:glitchB 5.5s steps(2,end) infinite;mix-blend-mode:screen;}
@keyframes glitchA{
  0%,92%,100%{transform:translate(0,0);opacity:0;}
  93%{transform:translate(-3px,1px);opacity:.85;}
  95%{transform:translate(2px,-2px);opacity:.6;}
  97%{transform:translate(-1px,1px);opacity:.4;}
}
@keyframes glitchB{
  0%,92%,100%{transform:translate(0,0);opacity:0;}
  93.5%{transform:translate(3px,-1px);opacity:.85;}
  95.5%{transform:translate(-2px,2px);opacity:.6;}
  97.5%{transform:translate(1px,-1px);opacity:.4;}
}

.stage-sub{
  color:var(--vgr-fg-2);
  font-size:1.02rem;
  max-width:520px;
  margin:0 auto 52px;
}

/* ---------- CARDS ---------- */
.cgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:26px;
  perspective:1200px;
}

.ccard{
  --mx:50%; --my:50%; --rx:0deg; --ry:0deg;
  position:relative;
  display:block;
  padding:2px;                       /* room for animated border */
  border-radius:20px;
  background:rgba(255,255,255,0.06);
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
  transform-style:preserve-3d;
  transition:transform .18s ease-out, box-shadow .45s ease;
  box-shadow:0 18px 44px -22px rgba(0,0,0,.9);
  isolation:isolate;
}

/* rotating conic border */
.ccard-beam{
  position:absolute;inset:0;border-radius:inherit;
  padding:1.5px;
  background:conic-gradient(from var(--a,0deg),
    transparent 0deg, transparent 200deg,
    var(--vgr-green) 268deg,
    var(--vgr-green-bright) 300deg,
    #eafffd 316deg,
    var(--vgr-green-bright) 332deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:spinBeam 4.2s linear infinite;
  opacity:.55;
  transition:opacity .35s ease;
}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg;}
@keyframes spinBeam{to{--a:360deg;}}
.ccard:nth-child(2) .ccard-beam{animation-duration:5.1s;animation-delay:-1.4s;}
.ccard:nth-child(3) .ccard-beam{animation-duration:3.6s;animation-delay:-2.6s;opacity:.9;}
.ccard:hover .ccard-beam{opacity:1;}

/* cursor spotlight */
.ccard-spot{
  position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(340px circle at var(--mx) var(--my), rgba(45,191,182,0.20), transparent 62%);
  opacity:0;transition:opacity .35s ease;z-index:3;pointer-events:none;
}
.ccard:hover .ccard-spot{opacity:1;}

.ccard-inner{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  height:100%;
  padding:32px 26px 24px;
  border-radius:18px;
  text-align:left;
  background:linear-gradient(168deg, #14181C 0%, #0A0C0E 100%);
  overflow:hidden;
  transform:translateZ(30px);
}
/* shimmer sweep */
.ccard-inner::before{
  content:"";position:absolute;top:0;left:-140%;width:60%;height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,0.10), transparent);
  transform:skewX(-18deg);
  transition:left .85s var(--vgr-ease-out);
  pointer-events:none;
}
.ccard:hover .ccard-inner::before{left:150%;}

.ccard:hover{box-shadow:0 34px 70px -26px rgba(0,0,0,.95), 0 0 44px -12px rgba(2,158,151,.55);}
.ccard:focus-visible{outline:2px solid var(--vgr-green-bright);outline-offset:4px;}
.ccard:active{transform:perspective(900px) scale(.985);}

.ccard-icon{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;margin-bottom:16px;
  border-radius:14px;
  background:var(--vgr-surface-2);
  border:1px solid var(--vgr-line-strong);
  color:var(--vgr-green-bright);
  transition:transform .5s var(--vgr-ease-out), background .35s ease, color .35s ease, border-color .35s ease;
}
.ccard-icon svg{width:27px;height:27px;filter:drop-shadow(0 0 10px rgba(45,191,182,.45));}
.ccard-icon::after{
  content:"";position:absolute;inset:-6px;border-radius:18px;
  border:1px solid rgba(45,191,182,.45);
  opacity:0;transform:scale(.85);
}
.ccard:hover .ccard-icon{
  transform:translateZ(40px) scale(1.09) rotate(-5deg);
  background:var(--vgr-green-soft);
  border-color:var(--vgr-green-line);
  color:#fff;
}
.ccard:hover .ccard-icon::after{animation:pulseRing 1.6s ease-out infinite;}
@keyframes pulseRing{
  0%{opacity:.9;transform:scale(.85);}
  100%{opacity:0;transform:scale(1.35);}
}

.ccard-label{
  font-family:var(--vgr-font-display);
  font-weight:700;font-size:1.8rem;line-height:1.06;
  text-transform:uppercase;color:var(--vgr-white);
}
.ccard-handle{
  font-family:var(--vgr-font-mono);font-size:.82rem;
  color:var(--vgr-green-bright);word-break:break-all;
  text-shadow:0 0 14px rgba(45,191,182,.45);
}
.ccard-desc{
  margin-top:8px;font-size:.93rem;line-height:1.55;color:var(--vgr-fg-2);
}
.ccard-go{
  display:flex;align-items:center;gap:8px;
  margin-top:auto;padding-top:18px;width:100%;
  border-top:1px solid var(--vgr-line);
  font-family:var(--vgr-font-mono);font-size:.76rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--vgr-white);
  transition:color .3s ease;
}
.ccard-go > svg{width:15px;height:15px;transition:transform .4s var(--vgr-ease-out);}
.ccard:hover .ccard-go{color:var(--vgr-green-bright);}
.ccard:hover .ccard-go > svg{transform:translate(4px,-4px);}
/* text scramble-ish slide */
.ccard-go-text{position:relative;overflow:hidden;}
.ccard-go-text::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;
  background:var(--vgr-green-bright);
  transition:width .45s var(--vgr-ease-out);
}
.ccard:hover .ccard-go-text::after{width:100%;}

/* featured */
.ccard-featured .ccard-inner{
  background:linear-gradient(168deg, rgba(2,158,151,.16) 0%, #0A0C0E 58%);
}
.ccard-badge{
  position:absolute;top:16px;right:16px;
  padding:5px 11px;border-radius:var(--vgr-r-pill);
  background:var(--vgr-green);color:#fff;
  font-family:var(--vgr-font-mono);font-size:.64rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  box-shadow:0 0 20px rgba(2,158,151,.7);
  animation:badgePulse 2.4s ease-in-out infinite;
}
@keyframes badgePulse{0%,100%{box-shadow:0 0 16px rgba(2,158,151,.5);}50%{box-shadow:0 0 30px rgba(45,191,182,.95);}}

.stage-foot{
  margin-top:48px;
  font-family:var(--vgr-font-mono);
  font-size:.68rem;letter-spacing:.05em;
  color:var(--vgr-fg-2);
  text-shadow:0 2px 10px rgba(0,0,0,.9);
}

/* ---------- ENTRANCE ---------- */
.reveal{
  opacity:0;
  transform:translateY(26px) scale(.97);
  filter:blur(8px);
  animation:revealIn .9s var(--vgr-ease-out) forwards;
  animation-delay:var(--d,0ms);
}
@keyframes revealIn{to{opacity:1;transform:none;filter:blur(0);}}

@media (max-width:700px){
  .contacts-page{padding:36px 16px;}
  .cgrid{grid-template-columns:1fr;gap:16px;}
  .brandmark{margin-bottom:18px;}
  .brandmark img{width:96px;height:auto;}
  .stage-title{font-size:clamp(2rem,9vw,2.8rem);}
  .stage-sub{font-size:.94rem;margin-bottom:30px;}
  .ccard-inner{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "icon label"
      "icon handle"
      "desc desc"
      "go   go";
    align-items:center;
    column-gap:14px;row-gap:2px;
    padding:18px 18px 14px;
  }
  .ccard-icon{grid-area:icon;width:46px;height:46px;margin-bottom:0;align-self:center;}
  .ccard-icon svg{width:23px;height:23px;}
  .ccard-label{grid-area:label;font-size:1.35rem;align-self:end;}
  .ccard-handle{grid-area:handle;align-self:start;font-size:.76rem;}
  .ccard-desc{grid-area:desc;margin-top:12px;font-size:.87rem;}
  .ccard-go{grid-area:go;margin-top:12px;padding-top:12px;font-size:.72rem;}
  .ccard-badge{top:12px;right:12px;font-size:.58rem;padding:4px 9px;}
  .stage-foot{margin-top:30px;font-size:.62rem;}
}

@media (prefers-reduced-motion:reduce){
  .fx-aurora,.fx-grid,.fx-scan,.fx-noise,.ccard-beam,.brandmark-glow,
  .ccard-badge,.stage-title .accent::before,.stage-title .accent::after,
  .fx-media img,.fx-media video{animation:none;}
  .fx-video{display:none;}
  .fx-particles{display:none;}
  .reveal{animation:none;opacity:1;transform:none;filter:none;}
  .ccard,.ccard-icon,.ccard-go > svg{transition:none;}
}