/* ============================================================
   IRON HOLD — shared global styles & animations
   Loaded on every page + shared component via:
   <helmet><link rel="stylesheet" href="ironhold.css"></helmet>
   Edit here once → applies to the whole site.
   ============================================================ */

/* ---- resets ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: #0a0a0a; }

/* ---- scrollbar ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #1a1a1a; }
::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.20); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,0.35); }

/* ---- brand logo glow (preloader + accents) ---- */
@keyframes ihGlow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(244,176,15,0.30)) drop-shadow(0 0 26px rgba(212,175,55,0.16)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 22px rgba(255,200,40,0.62)) drop-shadow(0 0 60px rgba(244,146,15,0.34)); transform: scale(1.022); }
}

/* ---- triple spinner ---- */
@keyframes ihSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---- preloader gates ---- */
@keyframes ihGateUp        { 0% { transform: translateY(0); }      100% { transform: translateY(-114%); } }
@keyframes ihGateDown      { 0% { transform: translateY(0); }      100% { transform: translateY(114%); } }
@keyframes ihGateCloseTop  { 0% { transform: translateY(-114%); }  100% { transform: translateY(0); } }
@keyframes ihGateCloseBot  { 0% { transform: translateY(114%); }   100% { transform: translateY(0); } }

/* ---- generic entrance / hero float ---- */
@keyframes ihFadeUp   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes ihHeroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes ihFade { from { opacity: 0; } to { opacity: 1; } }

/* ---- glow cards: pointer-tracked golden edge light (border ring) ---- */
[data-glow] { --gc-px: 0; --gc-py: 0; --gc-spot: 260; --gc-border: 2px; --gc-hue: 44; }
[data-glow]::before,
[data-glow]::after {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: calc(var(--gc-border) * -1);
  border: var(--gc-border) solid transparent;
  border-radius: inherit;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff);
  mask: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff);
  -webkit-mask-clip: padding-box, border-box;
  mask-clip: padding-box, border-box;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: 0;
  transition: opacity 0.45s ease;
}
[data-glow].glow-on::before,
[data-glow].glow-on::after { opacity: 1; }

/* feature avatar that zooms when the card is hovered (driven by .glow-on) */
[data-glow] .feat-img { transition: transform 0.55s cubic-bezier(.22,.61,.36,1); will-change: transform; }
[data-glow].glow-on .feat-img { transform: scale(1.26) translateY(-14px); }
[data-glow]::before {
  background-image: radial-gradient(
    calc(var(--gc-spot) * 0.75px) calc(var(--gc-spot) * 0.75px) at
    calc(var(--gc-px) * 1px) calc(var(--gc-py) * 1px),
    hsl(var(--gc-hue) 88% 60% / 1), transparent 100%);
  filter: brightness(1.5);
}
[data-glow]::after {
  background-image: radial-gradient(
    calc(var(--gc-spot) * 0.5px) calc(var(--gc-spot) * 0.5px) at
    calc(var(--gc-px) * 1px) calc(var(--gc-py) * 1px),
    hsl(46 100% 92% / 1), transparent 100%);
}

/* ---- crane modal ---- */
@keyframes ihDrop {
  0%   { transform: translateY(-128vh); animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.25); }
  52%  { transform: translateY(0);      animation-timing-function: cubic-bezier(0.25, 0, 0.20, 1); }
  68%  { transform: translateY(-26px);  animation-timing-function: cubic-bezier(0.40, 0, 0.60, 1); }
  82%  { transform: translateY(0);      animation-timing-function: cubic-bezier(0.25, 0, 0.20, 1); }
  91%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
@keyframes ihSway {
  0%    { transform: rotate(0deg); }
  25%   { transform: rotate(2.24deg); }
  50%   { transform: rotate(0deg); }
  75%   { transform: rotate(-2.24deg); }
  100%  { transform: rotate(0deg); }
}
@keyframes ihLift {
  0%   { transform: translateY(0); animation-timing-function: cubic-bezier(0.32, 0, 0.7, 0.25); }
  100% { transform: translateY(-128vh); }
}
@keyframes ihContact {
  0%   { opacity: 0;    transform: scale(0.35, 0.50); }
  45%  { opacity: 0.40; transform: scale(0.70, 0.60); }
  52%  { opacity: 0.78; transform: scale(1.18, 0.42); }
  60%  { opacity: 0.48; transform: scale(0.88, 0.62); }
  82%  { opacity: 0.60; transform: scale(1.04, 0.54); }
  100% { opacity: 0.55; transform: scale(0.96, 0.60); }
}

/* ============================================================
   INTERACTIONS — centralized, brand-tuned (gold)
   ============================================================ */

/* ---- 3D-flip nav item with gold radial glow (top menu) ---- */
.ih-nav {
  position: relative;
  display: inline-block;
  padding: 8px 14px;
  border-radius: 12px;
  perspective: 600px;
  cursor: pointer;
  white-space: nowrap;
}
.ih-nav-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: 16px;
  opacity: 0; transform: scale(0.8);
  background: radial-gradient(circle, rgba(244,208,63,0.40), rgba(212,175,55,0.16) 55%, transparent 72%);
  transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1), transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.ih-nav:hover .ih-nav-glow { opacity: 1; transform: scale(2); }
.ih-nav-face {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.5s cubic-bezier(0.16,1,0.3,1);
  backface-visibility: hidden;
}
.ih-nav-front { position: relative; z-index: 1; transform-origin: center bottom; }
.ih-nav-back {
  position: absolute; inset: 0; z-index: 1;
  transform-origin: center top; transform: rotateX(90deg); opacity: 0;
  color: #F4D03F;
}
.ih-nav:hover .ih-nav-front { transform: rotateX(-90deg); opacity: 0; }
.ih-nav:hover .ih-nav-back  { transform: rotateX(0deg); opacity: 1; }

/* ---- glass hover for ALL buttons (gloss sweep + lift) ---- */
.ih-glass {
  position: relative;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.175,0.885,0.32,2.2), box-shadow 0.45s ease, border-color 0.3s ease;
}
.ih-glass::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, transparent 26%, rgba(255,255,255,0.40) 48%, transparent 62%);
  background-size: 250% 100%; background-position: 165% 0;
  transition: background-position 0.85s ease;
}
.ih-glass:hover { transform: translateY(-2px) scale(1.03); }
.ih-glass:hover::after { background-position: -70% 0; }

/* ---- shiny lead-CTA: rotating gold halo that shimmers ---- */
@property --ih-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.ih-shiny { position: relative; isolation: isolate; transition: transform 0.4s cubic-bezier(0.175,0.885,0.32,2.2), box-shadow 0.4s ease; }
.ih-shiny::before {
  content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--ih-ang),
    #B8860B, #F4D03F, #fff6cf, #F4D03F, #B8860B, #E2B62E, #B8860B);
  filter: blur(7px); opacity: 0.55;
  animation: ihAngle 3s linear infinite;
}
.ih-shiny:hover { transform: translateY(-2px) scale(1.035); }
.ih-shiny:hover::before { opacity: 0.95; inset: -5px; }
@keyframes ihAngle { to { --ih-ang: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .ih-shiny::before { animation: none; }
  .ih-nav-face, .ih-glass, .ih-shiny { transition: none; }
}

/* ---- 3D tilt-on-hover cards (mouse-follow) ---- */
[data-tilt] {
  transform-style: preserve-3d;
  transition: box-shadow 0.4s ease, border-color 0.3s ease;
  will-change: transform;
}
[data-tilt] .ih-tilt-z { transform: translateZ(34px); transition: transform 0.3s ease; }
[data-tilt] .ih-tilt-z2 { transform: translateZ(20px); transition: transform 0.3s ease; }
[data-tilt]:hover {
  border-color: rgba(212,175,55,0.45) !important;
  box-shadow: 0 26px 50px -22px rgba(0,0,0,0.75), 0 0 0 1px rgba(212,175,55,0.15);
}
@media (prefers-reduced-motion: reduce) {
  [data-tilt] { transition: none; }
}