/* ============================================
   GRADIENT BORDER PROPERTY
   ============================================ */

@property --bg {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --fill-alpha {
  syntax: '<number>';
  inherits: false;
  initial-value: 0.4;
}

@keyframes spinBorder {
  to { --bg: 360deg; }
}

/* ============================================
   RESET & BASE
   ============================================ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Snap all elements to their restored state instantly — class removed after 2 frames */
body.stage-restore,
body.stage-restore * {
  transition-duration: 0s !important;
}

html, body {
  overflow: hidden;
  height: 100%;
}

body {
  background: #0D0D0F;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: none;
}

/* Hide native cursor everywhere */
*, *::before, *::after {
  cursor: none !important;
}

/* Custom cursor element */
#custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 96px;
  height: 96px;
  pointer-events: none;
  z-index: 999999;
  will-change: transform;
}

#custom-cursor img {
  display: block;
  width: 96px;
  height: 96px;
  user-select: none;
  pointer-events: none;
}

/* ============================================
   BACKGROUND CANVASES
   ============================================ */

#stars,
#stardrops {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

#stardrops {
  z-index: 2;
}

/* ============================================
   NAVBAR
   ============================================ */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 48px;
}

.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  position: relative;
}

.nav-work {
  justify-self: end;
  margin-right: 40px;
}

.nav-contact {
  justify-self: start;
  margin-left: 40px;
}

/* Logo */
.nav-logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transform: scale(1);
  filter: drop-shadow(0 0 12px rgba(0, 255, 200, 0.15));
  transition: transform 0.5s ease-out, filter 0.5s ease-out;
  position: relative;
  z-index: 1;
}

.nav-opening .nav-logo,
.nav-closing .nav-logo {
  filter: drop-shadow(0 0 22px rgba(0, 255, 200, 0.35));
}

.nav-logo img {
  height: 112px;
  width: auto;
}

/* Rectangle frame */
.nav-frame {
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: -18px;
  right: -18px;
  width: calc(100% + 36px);
  height: calc(100% + 20px);
  pointer-events: none;
  overflow: visible;
}

.nf-rect {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  fill: none;
  stroke: url(#navGrad);
  stroke-width: 1;
  filter: drop-shadow(0 0 6px rgba(29, 233, 182, 0.5)) drop-shadow(0 0 18px rgba(29, 233, 182, 0.15));
  stroke-dasharray: 5000;
  stroke-dashoffset: 5000;
}

#navGradStop1 { animation: gradStop1 4s ease-in-out infinite; }
#navGradStop2 { animation: gradStop2 4s ease-in-out infinite; }

@keyframes gradStop1 {
  0%, 100% { stop-color: #0D0D0F; }
  50%       { stop-color: #1de9b6; }
}
@keyframes gradStop2 {
  0%, 100% { stop-color: #1de9b6; }
  50%       { stop-color: #0D0D0F; }
}

/* === OPEN === */
.nav-opening .nf-rect {
  animation: drawRectOpen 1s ease-in forwards;
}
.nav-opening .nav-frame {
  animation: frameExpand 0.5s ease-out 1.1s forwards;
}
.nav-opening .nav-link {
  animation: linkIn 0.35s ease-out 1.3s forwards;
}

/* === CLOSE === */
.nav-closing .nav-link {
  animation: linkOut 0.2s ease-in forwards 0s;
}
.nav-closing .nav-frame {
  animation: frameContract 0.3s ease-in 0.25s forwards;
}
.nav-closing .nf-rect {
  animation: drawRectClose 1s ease-out 0.55s forwards;
}

@keyframes drawRectOpen  { from { stroke-dashoffset: 5000; } to { stroke-dashoffset: 0; } }
@keyframes drawRectClose { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 5000; } }

@keyframes frameExpand {
  from { left: -18px; right: -18px; width: calc(100% + 36px); }
  to   { left: -180px; right: -180px; width: calc(100% + 360px); }
}
@keyframes frameContract {
  from { left: -180px; right: -180px; width: calc(100% + 360px); }
  to   { left: -18px; right: -18px; width: calc(100% + 36px); }
}

@keyframes linkOut {
  from { opacity: 1; }
  to   { opacity: 0; pointer-events: none; }
}

/* Nav links */
.nav-link {
  font-family: 'Satoshi', sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: rgba(29, 233, 182, 0.75);
  text-decoration: none;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, color 0.2s ease;
  line-height: 1;
}


.nav-link:hover {
  color: rgba(29, 233, 182, 1);
  transform: scale(1.08);
  transition: transform 0.25s ease, color 0.2s ease;
}

@keyframes linkIn {
  from { opacity: 0; }
  to   { opacity: 1; pointer-events: auto; }
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.hero-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 3vw, 52px);
}

/* ============================================
   AVATAR
   ============================================ */

.avatar-wrapper {
  position: relative;
  width: clamp(580px, 90vh, 920px);
  height: clamp(580px, 90vh, 920px);
  animation: fadeInScale 1.2s ease-out 0.3s both;
}

/* Soft outer glow */
.avatar-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220%;
  height: 220%;
  background: radial-gradient(
    circle at center,
    rgba(29, 233, 182, 0.43) 0%,
    rgba(29, 233, 182, 0.18) 20%,
    rgba(29, 233, 182, 0.04) 45%,
    rgba(29, 233, 182, 0.01) 65%,
    transparent 75%
  );
  filter: blur(40px);
  animation: glowPulse 5s ease-in-out infinite;
}

/* Thin rotating ring */
.avatar-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 106%;
  height: 106%;
  z-index: 5;
  pointer-events: none;
  border-radius: 50%;
  border: 1px solid transparent;
  background:
    transparent padding-box,
    linear-gradient(var(--bg), #0D0D0F, #1de9b6, #0D0D0F) border-box;
  animation: spinBorder 4s linear infinite;
}

.ring-dot {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1de9b6;
  box-shadow: 0 0 10px #1de9b6, 0 0 25px rgba(29, 233, 182, 0.5);
  pointer-events: none;
}

.ring-dot.bursting {
  animation: dotBurst 0.55s ease-out forwards;
}

.ring-dot.hidden {
  opacity: 0;
  pointer-events: none;
}

.ring-dot.appearing {
  animation: dotAppear 0.6s ease-out forwards;
}

@keyframes dotBurst {
  0%   { transform: translateX(-50%) scale(1);   opacity: 1;
         box-shadow: 0 0 10px #1de9b6, 0 0 25px rgba(29,233,182,0.5); }
  40%  { transform: translateX(-50%) scale(4);   opacity: 0.8;
         box-shadow: 0 0 20px #1de9b6, 0 0 55px rgba(29,233,182,0.9), 0 0 90px rgba(29,233,182,0.4); }
  100% { transform: translateX(-50%) scale(6.5); opacity: 0;
         box-shadow: 0 0 5px #1de9b6, 0 0 15px rgba(29,233,182,0); }
}

@keyframes dotAppear {
  0%   { transform: translateX(-50%) scale(0.2); opacity: 0; }
  60%  { transform: translateX(-50%) scale(1.3); opacity: 1; }
  100% { transform: translateX(-50%) scale(1);   opacity: 1; }
}

.avatar-border {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 3.5px;
  background: linear-gradient(var(--bg), #0D0D0F, #1de9b6, #0D0D0F);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spinBorder 3s linear infinite;
  pointer-events: none;
  z-index: 1;
}

.avatar-outer-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 106%;
  height: 106%;
  border-radius: 50%;
  padding: 1px;
  background: linear-gradient(var(--bg), #0D0D0F, #1de9b6, #0D0D0F);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spinBorder 4s linear infinite;
  pointer-events: none;
  z-index: 2;
}

/* ============================================
   FLOATING ICONS
   ============================================ */

.floating-icon {
  position: absolute;
  width: 46px;
  height: 46px;
}

.floating-icon-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.floating-icon:hover .floating-icon-inner {
  transform: scale(1.45);
  filter: drop-shadow(0 0 10px rgba(29, 233, 182, 0.95)) drop-shadow(0 0 22px rgba(29, 233, 182, 0.45));
}

.floating-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  display: block;
}


.avatar {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-fill {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(14, 16, 21, var(--fill-alpha)), rgba(5, 5, 7, var(--fill-alpha)));
  pointer-events: none;
  z-index: 1;
  transition: --fill-alpha 0.5s ease-out;
}

.avatar-img-wrap {
  width: 85%;
  height: 85%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s ease-out;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 30px rgba(29, 233, 182, 0.08));
  animation: avatarBreathe 4s ease-in-out infinite;
}

@keyframes avatarBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes glowPulse {
  0%    { opacity: 0.700; transform: translate(-50%,-50%) scale(1.0000); }
  1.67% { opacity: 0.699; transform: translate(-50%,-50%) scale(1.0002); }
  3.33% { opacity: 0.697; transform: translate(-50%,-50%) scale(1.0009); }
  5%    { opacity: 0.694; transform: translate(-50%,-50%) scale(1.0020); }
  6.67% { opacity: 0.689; transform: translate(-50%,-50%) scale(1.0035); }
  8.33% { opacity: 0.683; transform: translate(-50%,-50%) scale(1.0054); }
  10%   { opacity: 0.676; transform: translate(-50%,-50%) scale(1.0076); }
  11.67%{ opacity: 0.668; transform: translate(-50%,-50%) scale(1.0103); }
  13.33%{ opacity: 0.659; transform: translate(-50%,-50%) scale(1.0132); }
  15%   { opacity: 0.649; transform: translate(-50%,-50%) scale(1.0165); }
  16.67%{ opacity: 0.638; transform: translate(-50%,-50%) scale(1.0200); }
  18.33%{ opacity: 0.626; transform: translate(-50%,-50%) scale(1.0237); }
  20%   { opacity: 0.614; transform: translate(-50%,-50%) scale(1.0276); }
  21.67%{ opacity: 0.601; transform: translate(-50%,-50%) scale(1.0317); }
  23.33%{ opacity: 0.588; transform: translate(-50%,-50%) scale(1.0358); }
  25%   { opacity: 0.575; transform: translate(-50%,-50%) scale(1.0400); }
  26.67%{ opacity: 0.562; transform: translate(-50%,-50%) scale(1.0442); }
  28.33%{ opacity: 0.549; transform: translate(-50%,-50%) scale(1.0483); }
  30%   { opacity: 0.536; transform: translate(-50%,-50%) scale(1.0524); }
  31.67%{ opacity: 0.524; transform: translate(-50%,-50%) scale(1.0563); }
  33.33%{ opacity: 0.513; transform: translate(-50%,-50%) scale(1.0600); }
  35%   { opacity: 0.501; transform: translate(-50%,-50%) scale(1.0635); }
  36.67%{ opacity: 0.491; transform: translate(-50%,-50%) scale(1.0668); }
  38.33%{ opacity: 0.482; transform: translate(-50%,-50%) scale(1.0697); }
  40%   { opacity: 0.474; transform: translate(-50%,-50%) scale(1.0724); }
  41.67%{ opacity: 0.467; transform: translate(-50%,-50%) scale(1.0746); }
  43.33%{ opacity: 0.461; transform: translate(-50%,-50%) scale(1.0765); }
  45%   { opacity: 0.456; transform: translate(-50%,-50%) scale(1.0780); }
  46.67%{ opacity: 0.453; transform: translate(-50%,-50%) scale(1.0791); }
  48.33%{ opacity: 0.451; transform: translate(-50%,-50%) scale(1.0798); }
  50%   { opacity: 0.450; transform: translate(-50%,-50%) scale(1.0800); }
  51.67%{ opacity: 0.451; transform: translate(-50%,-50%) scale(1.0798); }
  53.33%{ opacity: 0.453; transform: translate(-50%,-50%) scale(1.0791); }
  55%   { opacity: 0.456; transform: translate(-50%,-50%) scale(1.0780); }
  56.67%{ opacity: 0.461; transform: translate(-50%,-50%) scale(1.0765); }
  58.33%{ opacity: 0.467; transform: translate(-50%,-50%) scale(1.0746); }
  60%   { opacity: 0.474; transform: translate(-50%,-50%) scale(1.0724); }
  61.67%{ opacity: 0.482; transform: translate(-50%,-50%) scale(1.0697); }
  63.33%{ opacity: 0.491; transform: translate(-50%,-50%) scale(1.0668); }
  65%   { opacity: 0.501; transform: translate(-50%,-50%) scale(1.0635); }
  66.67%{ opacity: 0.513; transform: translate(-50%,-50%) scale(1.0600); }
  68.33%{ opacity: 0.524; transform: translate(-50%,-50%) scale(1.0563); }
  70%   { opacity: 0.536; transform: translate(-50%,-50%) scale(1.0524); }
  71.67%{ opacity: 0.549; transform: translate(-50%,-50%) scale(1.0483); }
  73.33%{ opacity: 0.562; transform: translate(-50%,-50%) scale(1.0442); }
  75%   { opacity: 0.575; transform: translate(-50%,-50%) scale(1.0400); }
  76.67%{ opacity: 0.588; transform: translate(-50%,-50%) scale(1.0358); }
  78.33%{ opacity: 0.601; transform: translate(-50%,-50%) scale(1.0317); }
  80%   { opacity: 0.614; transform: translate(-50%,-50%) scale(1.0276); }
  81.67%{ opacity: 0.626; transform: translate(-50%,-50%) scale(1.0237); }
  83.33%{ opacity: 0.638; transform: translate(-50%,-50%) scale(1.0200); }
  85%   { opacity: 0.649; transform: translate(-50%,-50%) scale(1.0165); }
  86.67%{ opacity: 0.659; transform: translate(-50%,-50%) scale(1.0132); }
  88.33%{ opacity: 0.668; transform: translate(-50%,-50%) scale(1.0103); }
  90%   { opacity: 0.676; transform: translate(-50%,-50%) scale(1.0076); }
  91.67%{ opacity: 0.683; transform: translate(-50%,-50%) scale(1.0054); }
  93.33%{ opacity: 0.689; transform: translate(-50%,-50%) scale(1.0035); }
  95%   { opacity: 0.694; transform: translate(-50%,-50%) scale(1.0020); }
  96.67%{ opacity: 0.697; transform: translate(-50%,-50%) scale(1.0009); }
  98.33%{ opacity: 0.699; transform: translate(-50%,-50%) scale(1.0002); }
  100%  { opacity: 0.700; transform: translate(-50%,-50%) scale(1.0000); }
}

@keyframes ringRotate {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================
   NOISE OVERLAY
   ============================================ */

.hero::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
  pointer-events: none;
  z-index: -1;
}

/* ============================================
   AVATAR CIRCLE HOVER EFFECTS
   ============================================ */

.avatar-hover-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 170%;
  height: 170%;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(29, 233, 182, 0.28) 0%,
    rgba(29, 233, 182, 0.1) 35%,
    transparent 65%
  );
  filter: blur(22px);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.5s ease-out;
}

body.avatar-hovered .avatar-hover-glow {
  opacity: 1;
  transition: opacity 0.35s ease-in;
}

body.avatar-hovered .avatar-fill {
  --fill-alpha: 1;
  transition: --fill-alpha 0.35s ease-in;
}

body.avatar-hovered .avatar-img-wrap {
  transform: scale(1.2);
  transition: transform 0.4s ease-in;
}

body.avatar-hovered .nav-logo {
  transform: scale(1.16);
  filter: drop-shadow(0 0 14px rgba(29, 233, 182, 0.9)) drop-shadow(0 0 32px rgba(29, 233, 182, 0.45));
  transition: transform 0.4s ease-in, filter 0.4s ease-in;
}



/* ============================================
   INFO PANELS
   ============================================ */

.info-panels {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 540px;
  flex-shrink: 0;
}

.info-panel-wrap {
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.info-panel-wrap.ip-interactive {
  pointer-events: auto;
}

.info-panel {
  position: relative;
  width: 540px;
  height: 152px;
  padding: 28px 48px;
  border-radius: 55px;
  background-color: rgba(13, 13, 15, 0.55);
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, background-color 0.35s ease, box-shadow 0.35s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
}

.info-panel.ip-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Panel hover — JS adds ip-hovered class on the wrap */
.info-panel-wrap.ip-hovered .info-panel.ip-visible {
  background-color: rgba(13, 13, 15, 1);
  box-shadow:
    0 0 14px rgba(29, 233, 182, 0.45),
    0 0 40px rgba(29, 233, 182, 0.18);
}

/* Dropdown text below each panel */
.ip-dropdown {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.45s ease, opacity 0.35s ease, margin-top 0.45s ease, margin-bottom 0.45s ease;
  margin-top: 0;
  padding: 0 52px;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.025em;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

.info-panel-wrap.ip-hovered .ip-dropdown {
  max-height: 120px;
  opacity: 1;
  margin-top: 26px;
  margin-bottom: 10px;
  pointer-events: auto;
}

.info-panel-wrap.ip-hovered .ip-dropdown-skills {
  max-height: 200px;
}

/* Skills dropdown */
.ip-dropdown-skills {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 44px;
}

.ip-skills-inner {
  display: flex;
  flex-direction: column;
  width: 260px;
}

.ip-skills-title {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(29, 233, 182, 0.65);
  margin-bottom: 8px;
}

.ip-skill-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 4px;
}

.ip-skill-name {
  font-size: 12px;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.ip-stars {
  position: relative;
  display: inline-block;
  line-height: 1;
}

.ip-stars-bg {
  color: rgba(255, 255, 255, 0.12);
  letter-spacing: 3px;
  font-size: 13px;
}

.ip-stars-fg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: rgba(29, 233, 182, 0.9);
  letter-spacing: 3px;
  font-size: 13px;
}

/* SVG frame — identical to navbar */
.ip-frame {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}

.ip-rect {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  fill: none;
  stroke-width: 1;
  filter: drop-shadow(0 0 6px rgba(29, 233, 182, 0.5))
          drop-shadow(0 0 18px rgba(29, 233, 182, 0.15));
  transition: filter 0.35s ease;
}

/* Gradient stop animations — same keyframes as navbar */
.ip-stop1 { animation: gradStop1 4s ease-in-out infinite; }
.ip-stop2 { animation: gradStop2 4s ease-in-out infinite; }

/* Draw stroke when panel becomes visible */
.info-panel.ip-visible .ip-rect {
  animation: ipDraw 0.9s ease-in forwards;
}

@keyframes ipDraw {
  from { stroke-dashoffset: 3000; }
  to   { stroke-dashoffset: 0; }
}

.ip-name {
  font-family: 'Exo 2', sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(29, 233, 182, 0.92);
  margin: 0;
  text-align: center;
}

.ip-text {
  font-family: 'Inter', 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  text-align: center;
}

/* ============================================
   SCROLL HINT
   ============================================ */

.scroll-hint {
  position: fixed;
  bottom: 42px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.scroll-hint.visible {
  opacity: 1;
}

body:has(.project-page.pp-active) .scroll-hint {
  opacity: 0 !important;
  pointer-events: none;
}

.scroll-mouse {
  width: 22px;
  height: 36px;
  border: 1.5px solid rgba(29, 233, 182, 0.55);
  border-radius: 11px;
  position: relative;
  box-shadow: 0 0 10px rgba(29, 233, 182, 0.12);
}

.scroll-wheel {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 7px;
  background: rgba(29, 233, 182, 0.85);
  border-radius: 2px;
  animation: scrollWheelMove 1.6s ease-in-out infinite;
}

@keyframes scrollWheelMove {
  0%   { top: 6px;  opacity: 1; }
  60%  { top: 18px; opacity: 0.15; }
  61%  { top: 6px;  opacity: 0; }
  100% { top: 6px;  opacity: 1; }
}

.scroll-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: rgba(29, 233, 182, 0.45);
  text-transform: uppercase;
}


/* ============================================
   SCROLL STAGE SYSTEM
   ============================================ */

/* Hero content transition base */
.hero-content,
.navbar {
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              opacity   0.9s ease,
              filter    0.9s ease;
}

/* --- Stage 1: hero starts dissolving --- */
body[data-stage="1"] .hero-content {
  transform: scale(1.06);
  opacity: 0.45;
  filter: blur(5px) brightness(0.55);
}
body[data-stage="1"] .navbar {
  opacity: 0.35;
}

/* --- Stage 2: hero mostly gone --- */
body[data-stage="2"] .hero-content {
  transform: scale(1.15);
  opacity: 0.07;
  filter: blur(18px) brightness(0.2);
}
body[data-stage="2"] .navbar {
  opacity: 0;
  pointer-events: none;
}

/* --- Stage 3+: hero completely gone --- */
body[data-stage="3"] .hero-content,
body[data-stage="4"] .hero-content,
body[data-stage="5"] .hero-content,
body[data-stage="6"] .hero-content {
  transform: scale(1.25);
  opacity: 0;
  filter: blur(28px);
  pointer-events: none;
}
body[data-stage="3"] .navbar,
body[data-stage="4"] .navbar,
body[data-stage="5"] .navbar,
body[data-stage="6"] .navbar {
  opacity: 0;
  pointer-events: none;
}

/* Hide scroll hint after stage 0 */

/* ============================================
   JOURNEY SECTION
   ============================================ */

.journey-section {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}

.journey-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.6rem, 4.5vw, 4.2rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
  transform: scale(0.04);
  opacity: 0;
  filter: blur(32px);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              opacity   0.95s ease,
              filter    0.95s ease;
}

/* Stage 3: barely a glimmer in the distance */
body[data-stage="3"] .journey-title {
  transform: scale(0.06);
  opacity: 0.08;
  filter: blur(26px);
}

/* Stage 4: emerging */
body[data-stage="4"] .journey-title {
  transform: scale(0.22);
  opacity: 0.3;
  filter: blur(14px);
}

/* Stage 5: approaching */
body[data-stage="5"] .journey-title {
  transform: scale(0.58);
  opacity: 0.72;
  filter: blur(5px);
}

/* Stage 6: fully arrived */
body[data-stage="6"] .journey-title {
  transform: scale(1);
  opacity: 1;
  filter: blur(0px);
}

/* Stages 7-11: hero and navbar stay gone */
body[data-stage="7"] .hero-content,
body[data-stage="8"] .hero-content,
body[data-stage="9"] .hero-content,
body[data-stage="10"] .hero-content,
body[data-stage="11"] .hero-content {
  transform: scale(1.25);
  opacity: 0;
  filter: blur(28px);
  pointer-events: none;
}
body[data-stage="7"] .navbar,
body[data-stage="8"] .navbar,
body[data-stage="9"] .navbar,
body[data-stage="10"] .navbar,
body[data-stage="11"] .navbar {
  opacity: 0;
  pointer-events: none;
}

/* Stages 7-11: journey title container stays at full size; letters handle their own animation */
body[data-stage="7"] .journey-title,
body[data-stage="8"] .journey-title,
body[data-stage="9"] .journey-title,
body[data-stage="10"] .journey-title,
body[data-stage="11"] .journey-title {
  transform: scale(1);
  opacity: 1;
  filter: blur(0px);
}

/* Hide journey title instantly whenever any overlay page is open */
body:has(.project-page.pp-active) .journey-title {
  opacity: 0 !important;
  transition: none !important;
}

/* Individual letters — dissolve like hero scene (scale up = rush toward viewer) */
.jt-letter {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.4, 0, 1, 1),
              opacity   0.3s ease-in,
              filter    0.33s ease;
}

.jt-letter.jt-gone {
  transform: scale(2.2);
  opacity: 0;
  filter: blur(28px) brightness(2.5);
}

/* Fast scroll — shorten all stage transitions */
body.scroll-fast .hero-content,
body.scroll-fast .navbar,
body.scroll-fast .journey-title {
  transition-duration: 0.18s !important;
}


/* ============================================
   JOURNEY TITLE HOVER
   ============================================ */

.journey-title-wrap {
  position: relative;
  padding: 32px 72px;
  border-radius: 55px;
  pointer-events: none;
  transition: box-shadow 0.35s ease;
}

body[data-stage="6"] .journey-title-wrap,
body[data-stage="7"] .journey-title-wrap,
body[data-stage="8"] .journey-title-wrap {
  pointer-events: auto;
}

.journey-frame {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}

.journey-rect {
  fill: none;
  stroke-width: 1;
  filter: drop-shadow(0 0 6px rgba(29, 233, 182, 0.5))
          drop-shadow(0 0 18px rgba(29, 233, 182, 0.15));
}

/* JS adds journey-hovered on mouseenter */
.journey-title-wrap.journey-hovered .journey-rect {
  animation: journeyDraw 1.5s ease-in forwards;
  filter: drop-shadow(0 0 12px rgba(29, 233, 182, 0.85))
          drop-shadow(0 0 38px rgba(29, 233, 182, 0.4));
}

.journey-title-wrap.journey-hovered {
  box-shadow:
    0 0 18px rgba(29, 233, 182, 0.45),
    0 0 55px rgba(29, 233, 182, 0.18);
}

@keyframes journeyDraw {
  from { stroke-dashoffset: 6000; }
  to   { stroke-dashoffset: 0; }
}

/* ============================================
   JOURNEY TITLE FLOAT
   ============================================ */

@keyframes journeyFloat {
  0%   { transform: translateY(0px)   translateX(0px)   rotate(0deg);    }
  25%  { transform: translateY(-22px) translateX(11px)  rotate(0.65deg); }
  55%  { transform: translateY(-12px) translateX(-9px)  rotate(-0.55deg); }
  78%  { transform: translateY(-28px) translateX(6px)   rotate(0.75deg); }
  100% { transform: translateY(0px)   translateX(0px)   rotate(0deg);    }
}

/* Float only after title has fully arrived (JS adds journey-floating) */
.journey-title-wrap.journey-floating {
  animation: journeyFloat 9s ease-in-out infinite;
}

/* animation-play-state controlled via JS */

/* ============================================
   PROJECTS ROADMAP SECTION
   ============================================ */

.projects-section {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 96px;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.projects-section.projects-active {
  opacity: 1;
}

/* Title wrap */
.projects-title-wrap {
  position: absolute;
  top: 112px;
  left: 50%;
  transform: translateX(-50%);
  padding: 32px 72px;
  border-radius: 55px;
  white-space: nowrap;
  pointer-events: auto;
  opacity: 0;
  transition: box-shadow 0.35s ease;
}

.projects-section.projects-active .projects-title-wrap {
  animation: projectsTitleIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

@keyframes projectsTitleIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-22px); filter: blur(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);     filter: blur(0); }
}

.projects-title-wrap.projects-title-hovered {
  box-shadow:
    0 0 18px rgba(29, 233, 182, 0.45),
    0 0 55px rgba(29, 233, 182, 0.18);
}

/* SVG frame */
.projects-frame {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}

.projects-rect {
  fill: none;
  stroke-width: 1;
  filter: drop-shadow(0 0 6px rgba(29, 233, 182, 0.5))
          drop-shadow(0 0 18px rgba(29, 233, 182, 0.15));
}

.projects-title-wrap.projects-title-hovered .projects-rect {
  animation: projectsRectDraw 1.5s ease-in forwards;
  filter: drop-shadow(0 0 12px rgba(29, 233, 182, 0.85))
          drop-shadow(0 0 38px rgba(29, 233, 182, 0.4));
}

@keyframes projectsRectDraw {
  from { stroke-dashoffset: 6000; }
  to   { stroke-dashoffset: 0; }
}

/* Title */
.projects-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.6rem, 4.5vw, 4.2rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}

/* Roadmap container */
.roadmap {
  display: flex;
  flex-direction: column;
}

/* Each row: left column (circle + line) + label */
/* align-items: flex-start so label top-aligns with node top,
   then label uses its own height + flex centering to sit at circle midpoint */
.roadmap-item {
  display: flex;
  align-items: flex-start;
  gap: 36px;
}

/* Left column: circle node stacked above connecting line */
.roadmap-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 80px;
}

/* Node wrapper — starts hidden; 80px matches SVG */
.roadmap-node-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  opacity: 0;
  flex-shrink: 0;
}

.projects-section.projects-active .roadmap-node-wrap {
  animation: nodeAppear 0.3s ease-out var(--appear-delay) both;
}

@keyframes nodeAppear {
  from { opacity: 0; transform: scale(0.5); filter: blur(8px); }
  to   { opacity: 1; transform: scale(1);   filter: blur(0); }
}

.roadmap-node-svg {
  width: 80px;
  height: 80px;
  display: block;
  overflow: visible;
}

/* Subtle fill inside circle */
.node-bg-circle {
  fill: rgba(29, 233, 182, 0.07);
}

/* Number overlay — absolutely centered over SVG circle */
.node-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: rgba(29, 233, 182, 0.92);
  pointer-events: none;
}

/* Stroke circle — draws clockwise from 12 o'clock */
.node-stroke-circle {
  fill: none;
  stroke: #1de9b6;
  stroke-width: 1.5;
  stroke-dasharray: 226.2;
  stroke-dashoffset: 226.2;
  filter: drop-shadow(0 0 5px rgba(29, 233, 182, 0.8))
          drop-shadow(0 0 14px rgba(29, 233, 182, 0.35));
}

.projects-section.projects-active .node-stroke-circle {
  animation: circleStrokeDraw 0.6s ease-in-out var(--stroke-delay) both;
}

@keyframes circleStrokeDraw {
  from { stroke-dashoffset: 226.2; }
  to   { stroke-dashoffset: 0; }
}

/* Vertical connecting line between nodes */
.roadmap-line {
  width: 1.5px;
  height: 68px;
  background: linear-gradient(to bottom, rgba(29, 233, 182, 0.75), rgba(29, 233, 182, 0.12));
  transform-origin: top center;
  transform: scaleY(0);
  box-shadow: 0 0 5px rgba(29, 233, 182, 0.35);
}

.projects-section.projects-active .roadmap-line {
  animation: lineExtend 0.32s ease-out var(--line-delay) both;
}

@keyframes lineExtend {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* Project name label — height matches node so flex centering
   puts the text exactly at the circle's vertical midpoint */
.roadmap-label {
  height: 80px;
  display: flex;
  align-items: center;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(14px, 1.55vw, 22px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.07em;
  opacity: 0;
  white-space: nowrap;
}

.projects-section.projects-active .roadmap-label {
  animation: labelIn 0.35s ease-out var(--appear-delay) both;
}

@keyframes labelIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================================
   JOURNEY TITLE — CLICK-TO-SKIP EXIT ANIMATION
   ============================================ */

/* Stop float, block interaction */
.journey-title-wrap.journey-click-exit {
  animation: none !important;
  pointer-events: none !important;
}

/* Freeze individual letters — prevent normal random dissolve */
.journey-title-wrap.journey-click-exit .jt-letter {
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Remove border rect */
.journey-title-wrap.journey-click-exit .journey-rect {
  animation: none !important;
  transition: opacity 0.2s ease !important;
  opacity: 0 !important;
}

/* Clean fade-out on the whole title */
.journey-title-wrap.journey-click-exit .journey-title {
  transition: none !important;
  animation: journeyClickExit 0.7s ease-in forwards !important;
}

@keyframes journeyClickExit {
  0%   { opacity: 1; transform: scale(1);    filter: blur(0); }
  100% { opacity: 0; transform: scale(1.06); filter: blur(10px); }
}

/* ============================================
   ROADMAP TYPEWRITER TEXT
   ============================================ */

.roadmap-typewriter {
  margin-top: 0;
  margin-bottom: 72px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.roadmap-typewriter.tw-visible {
  opacity: 1;
}

.tw-line {
  font-family: 'Inter', 'Segoe UI', sans-serif;
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
  line-height: 1.75;
  margin: 0;
  min-height: 1.75em;
  white-space: nowrap;
}

.tw-cursor {
  display: inline-block;
  width: 1.5px;
  height: 0.85em;
  background: rgba(29, 233, 182, 0.75);
  margin-left: 2px;
  vertical-align: text-bottom;
  box-shadow: 0 0 6px rgba(29, 233, 182, 0.5);
  animation: twBlink 0.75s ease-in-out infinite;
}

@keyframes twBlink {
  0%, 48% { opacity: 1; }
  52%, 100% { opacity: 0; }
}

/* ============================================
   ROADMAP ITEM HOVER
   ============================================ */

/* Enable pointer events only after all items have finished appearing */
.roadmap.roadmap-ready .roadmap-item {
  pointer-events: auto;
}

/* Transitions */
.roadmap-item {
  transition: opacity 0.25s ease, filter 0.25s ease;
}

.roadmap-node-wrap {
  transition: scale 0.25s ease, filter 0.25s ease;
}

.roadmap-label {
  transition: scale 0.25s ease, color 0.25s ease;
}

/* Hovered item — scale up + outer glow */
.roadmap-item:hover .roadmap-node-wrap {
  scale: 1.12;
  filter: drop-shadow(0 0 14px rgba(29, 233, 182, 0.85))
          drop-shadow(0 0 30px rgba(29, 233, 182, 0.4));
}

.roadmap-item:hover .roadmap-label {
  scale: 1.06;
  color: rgba(29, 233, 182, 0.92);
}

/* Non-hovered items blur when roadmap is hovered */
.roadmap:hover .roadmap-item:not(:hover) {
  opacity: 0.3;
  filter: blur(2px);
}

/* ============================================
   PROJECT PAGE (FCA + future pages)
   ============================================ */

.project-page {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  padding-top: 80px;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.project-page.pp-active {
  opacity: 1;
  pointer-events: auto;
}

/* Back button — matches nav link style */
.pp-back {
  position: absolute;
  top: 38px;
  left: 58px;
  font-family: 'Satoshi', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: rgba(29, 233, 182, 0.75);
  text-transform: uppercase;
  background: none;
  border: none;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: color 0.2s ease;
}

.pp-back:hover {
  color: rgba(29, 233, 182, 1);
}

.project-page.pp-active .pp-back {
  animation: linkIn 0.35s ease-out 0.9s both;
}

/* Title wrap — same structure as journey-title-wrap */
.pp-title-wrap {
  position: relative;
  padding: 32px 72px;
  border-radius: 55px;
  pointer-events: none;
  transition: box-shadow 0.35s ease;
}

.project-page.pp-active .pp-title-wrap {
  pointer-events: auto;
}

.pp-title-wrap.pp-title-hovered {
  box-shadow:
    0 0 18px rgba(29, 233, 182, 0.45),
    0 0 55px rgba(29, 233, 182, 0.18);
}

.pp-title-wrap.pp-title-hovered .pp-rect {
  animation: ppRectDraw 1.5s ease-in forwards;
  filter: drop-shadow(0 0 12px rgba(29, 233, 182, 0.85))
          drop-shadow(0 0 38px rgba(29, 233, 182, 0.4));
}

@keyframes ppRectDraw {
  from { stroke-dashoffset: 6000; }
  to   { stroke-dashoffset: 0; }
}

/* SVG frame */
.pp-frame {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}

.pp-rect {
  fill: none;
  stroke-width: 1;
  filter: drop-shadow(0 0 6px rgba(29, 233, 182, 0.5))
          drop-shadow(0 0 18px rgba(29, 233, 182, 0.15));
  stroke-dasharray: 6000;
  stroke-dashoffset: 6000;
}

.project-page.pp-active .pp-rect {
  animation: ppFrameDraw 1.5s ease-in 0.5s forwards;
}

@keyframes ppFrameDraw {
  from { stroke-dashoffset: 6000; }
  to   { stroke-dashoffset: 0; }
}

/* Main title — same style as journey-title */
.pp-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.6rem, 4.5vw, 4.2rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  margin: 0;
  opacity: 0;
  transform: scale(0.08);
  filter: blur(28px);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              opacity   0.95s ease,
              filter    0.95s ease;
}

.project-page.pp-active .pp-title {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

.pp-typewriter {
  margin-top: 36px;
  margin-bottom: 0;
}

/* ============================================
   FCA GALLERY
   ============================================ */

/* Gallery wrap — contains both gallery sets stacked at the same position */
.fca-gallery-wrap {
  position: relative;
  width: min(95vw, 1480px);
  height: calc(50vh + 15px);
  margin-top: 96px;
  margin-bottom: 20px;
}

/* Shared base grid for all galleries */
.fca-gallery,
.fca-gallery-2,
.fca-gallery-3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 6fr 4fr 4fr 4fr 3fr 25vh;
  grid-template-rows: 25vh 25vh;
  gap: 15px;
}

/* Gallery 1 — tall portrait on the left */
.fca-gallery {
  grid-template-areas:
    "g1 g2 g2 g3 g4 g5"
    "g1 g6 g6 g8 g9 g10";
}

/* Gallery 2 — all landscape images in landscape cells, portraits in portrait cells */
.fca-gallery-2 {
  grid-template-areas:
    "h1 h1 h2 h3 h4 h5"
    "h6 h7 h7 h8 h9 h9";
  opacity: 0;
  pointer-events: none;
}

/* Gallery 3 — wide landscape top-left, tall portrait on the right */
.fca-gallery-3 {
  grid-template-areas:
    "j1 j1 j2 j3 j4 j5"
    "j6 j7 j7 j8 j9 j5";
  opacity: 0;
  pointer-events: none;
}

/* Galleries 2 & 3 become visible and interactive when active */
.fca-gallery-2.gallery-active,
.fca-gallery-3.gallery-active {
  opacity: 1;
  pointer-events: auto;
}

/* Per-item grid placement — Gallery 1 */
.fca-gallery .fca-work-item:nth-child(1) { grid-area: g1;  }
.fca-gallery .fca-work-item:nth-child(2) { grid-area: g2;  }
.fca-gallery .fca-work-item:nth-child(3) { grid-area: g3;  }
.fca-gallery .fca-work-item:nth-child(4) { grid-area: g4;  }
.fca-gallery .fca-work-item:nth-child(5) { grid-area: g5;  }
.fca-gallery .fca-work-item:nth-child(6) { grid-area: g6;  }
.fca-gallery .fca-work-item:nth-child(7) { grid-area: g8;  }
.fca-gallery .fca-work-item:nth-child(8) { grid-area: g9;  }
.fca-gallery .fca-work-item:nth-child(9) { grid-area: g10; }

/* Per-item grid placement — Gallery 2 */
.fca-gallery-2 .fca-work-item:nth-child(1) { grid-area: h1; }
.fca-gallery-2 .fca-work-item:nth-child(2) { grid-area: h2; }
.fca-gallery-2 .fca-work-item:nth-child(3) { grid-area: h3; }
.fca-gallery-2 .fca-work-item:nth-child(4) { grid-area: h4; }
.fca-gallery-2 .fca-work-item:nth-child(5) { grid-area: h5; }
.fca-gallery-2 .fca-work-item:nth-child(6) { grid-area: h6; }
.fca-gallery-2 .fca-work-item:nth-child(7) { grid-area: h7; }
.fca-gallery-2 .fca-work-item:nth-child(8) { grid-area: h8; }
.fca-gallery-2 .fca-work-item:nth-child(9) { grid-area: h9; }

/* Gallery 2 — focal point adjustments */
/* h6: "Dođite" (col1 row2) — person is on the right side of the landscape image */
.fca-gallery-2 .fca-work-item:nth-child(6) .fca-work-img-wrap img { object-position: right center; }
/* h9: Santa (col5+6 row2) — Santa's face/illustration is on the left side */
.fca-gallery-2 .fca-work-item:nth-child(9) .fca-work-img-wrap img { object-position: left center; }

/* ---- Gallery 2 — orientation-matched corner brackets ---- */
/* Landscape cells (h1, h6, h7, h9): wide horizontal brackets */
.fca-gallery-2 .fca-work-item:nth-child(1)::before,
.fca-gallery-2 .fca-work-item:nth-child(1)::after,
.fca-gallery-2 .fca-work-item:nth-child(6)::before,
.fca-gallery-2 .fca-work-item:nth-child(6)::after,
.fca-gallery-2 .fca-work-item:nth-child(7)::before,
.fca-gallery-2 .fca-work-item:nth-child(7)::after,
.fca-gallery-2 .fca-work-item:nth-child(9)::before,
.fca-gallery-2 .fca-work-item:nth-child(9)::after {
  width: 20px;
  height: 9px;
}

/* Portrait cells (h2, h3, h4): narrow vertical brackets */
.fca-gallery-2 .fca-work-item:nth-child(2)::before,
.fca-gallery-2 .fca-work-item:nth-child(2)::after,
.fca-gallery-2 .fca-work-item:nth-child(3)::before,
.fca-gallery-2 .fca-work-item:nth-child(3)::after,
.fca-gallery-2 .fca-work-item:nth-child(4)::before,
.fca-gallery-2 .fca-work-item:nth-child(4)::after {
  width: 9px;
  height: 20px;
}

/* Per-item grid placement — Gallery 3 */
.fca-gallery-3 .fca-work-item:nth-child(1) { grid-area: j1; }
.fca-gallery-3 .fca-work-item:nth-child(2) { grid-area: j2; }
.fca-gallery-3 .fca-work-item:nth-child(3) { grid-area: j3; }
.fca-gallery-3 .fca-work-item:nth-child(4) { grid-area: j4; }
.fca-gallery-3 .fca-work-item:nth-child(5) { grid-area: j5; }
.fca-gallery-3 .fca-work-item:nth-child(6) { grid-area: j6; }
.fca-gallery-3 .fca-work-item:nth-child(7) { grid-area: j7; }
.fca-gallery-3 .fca-work-item:nth-child(8) { grid-area: j8; }
.fca-gallery-3 .fca-work-item:nth-child(9) { grid-area: j9; }

/* Gallery 3 — focal point adjustments */
/* j3: Prolećni Predupisni Rok (portrait in square cell) — face in upper half */
.fca-gallery-3 .fca-work-item:nth-child(3) .fca-work-img-wrap img { object-position: center top; }
/* j6: Second Chance (1.91:1 in 1.5:1 cell) — woman + text on left side */
.fca-gallery-3 .fca-work-item:nth-child(6) .fca-work-img-wrap img { object-position: left center; }
/* j8: Još 5 Mesta (portrait in square cell) — VR element in upper half */
.fca-gallery-3 .fca-work-item:nth-child(8) .fca-work-img-wrap img { object-position: center top; }

/* ---- Gallery 3 — orientation-matched corner brackets ---- */
/* Landscape cells (j1, j6, j7): wide horizontal brackets */
.fca-gallery-3 .fca-work-item:nth-child(1)::before,
.fca-gallery-3 .fca-work-item:nth-child(1)::after,
.fca-gallery-3 .fca-work-item:nth-child(6)::before,
.fca-gallery-3 .fca-work-item:nth-child(6)::after,
.fca-gallery-3 .fca-work-item:nth-child(7)::before,
.fca-gallery-3 .fca-work-item:nth-child(7)::after {
  width: 20px;
  height: 9px;
}

/* Portrait cells (j3, j4, j5, j8, j9): narrow vertical brackets */
.fca-gallery-3 .fca-work-item:nth-child(3)::before,
.fca-gallery-3 .fca-work-item:nth-child(3)::after,
.fca-gallery-3 .fca-work-item:nth-child(4)::before,
.fca-gallery-3 .fca-work-item:nth-child(4)::after,
.fca-gallery-3 .fca-work-item:nth-child(5)::before,
.fca-gallery-3 .fca-work-item:nth-child(5)::after,
.fca-gallery-3 .fca-work-item:nth-child(8)::before,
.fca-gallery-3 .fca-work-item:nth-child(8)::after,
.fca-gallery-3 .fca-work-item:nth-child(9)::before,
.fca-gallery-3 .fca-work-item:nth-child(9)::after {
  width: 9px;
  height: 20px;
}

.fca-work-item {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #0a0a0c;
  border: 1px solid rgba(29, 233, 182, 0.18);
  overflow: hidden;
  cursor: pointer;
  opacity: 0; /* hidden until pp-active */
  transition: opacity      0.3s ease,
              filter       0.3s ease,
              scale        0.38s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease;
}

/* inner wrapper — simple flex fill, no animation */
.fca-work-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- GALLERY 1 ENTRY ANIMATION ---- */

/* Entry animation on the whole item rectangle — Gallery 1 only */
.project-page.pp-active .fca-gallery .fca-work-item {
  opacity: 1;
  animation: fcaItemFromDist 0.75s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/*
  fill-mode: backwards — applies 'from' keyframe during the delay (keeps item hidden).
  After animation ends, NO forward fill → opacity returns to CSS cascade value (1 from above),
  so hover dimming (opacity: 0.28) can override it normally.
*/

/* pseudo-random stagger — last starts at 1.75s + 0.75s duration = 2.5s total */
.project-page.pp-active .fca-gallery .fca-work-item:nth-child(1) { animation-delay: 0.00s; } /* g1  */
.project-page.pp-active .fca-gallery .fca-work-item:nth-child(2) { animation-delay: 0.45s; } /* g2  */
.project-page.pp-active .fca-gallery .fca-work-item:nth-child(3) { animation-delay: 1.10s; } /* g3  */
.project-page.pp-active .fca-gallery .fca-work-item:nth-child(4) { animation-delay: 0.70s; } /* g4  */
.project-page.pp-active .fca-gallery .fca-work-item:nth-child(5) { animation-delay: 1.50s; } /* g5  */
.project-page.pp-active .fca-gallery .fca-work-item:nth-child(6) { animation-delay: 0.25s; } /* g6  */
.project-page.pp-active .fca-gallery .fca-work-item:nth-child(7) { animation-delay: 0.55s; } /* g8  */
.project-page.pp-active .fca-gallery .fca-work-item:nth-child(8) { animation-delay: 1.30s; } /* g9  */
.project-page.pp-active .fca-gallery .fca-work-item:nth-child(9) { animation-delay: 0.15s; } /* g10 */

@keyframes fcaItemFromDist {
  from {
    opacity: 0;
    transform: scale(0.08);
    filter: blur(18px);
  }
  60% {
    opacity: 0.85;
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* ---- GALLERY 2 ENTRY ANIMATION ---- */

.fca-gallery-2.gallery-active .fca-work-item {
  opacity: 1;
  animation: fcaItemFromDist 0.75s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* Different pseudo-random stagger order for gallery 2 */
.fca-gallery-2.gallery-active .fca-work-item:nth-child(1) { animation-delay: 0.20s; }
.fca-gallery-2.gallery-active .fca-work-item:nth-child(2) { animation-delay: 0.80s; }
.fca-gallery-2.gallery-active .fca-work-item:nth-child(3) { animation-delay: 1.35s; }
.fca-gallery-2.gallery-active .fca-work-item:nth-child(4) { animation-delay: 0.50s; }
.fca-gallery-2.gallery-active .fca-work-item:nth-child(5) { animation-delay: 0.05s; }
.fca-gallery-2.gallery-active .fca-work-item:nth-child(6) { animation-delay: 1.00s; }
.fca-gallery-2.gallery-active .fca-work-item:nth-child(7) { animation-delay: 1.60s; }
.fca-gallery-2.gallery-active .fca-work-item:nth-child(8) { animation-delay: 0.35s; }
.fca-gallery-2.gallery-active .fca-work-item:nth-child(9) { animation-delay: 1.15s; }

/* ---- GALLERY 3 ENTRY ANIMATION ---- */

.fca-gallery-3.gallery-active .fca-work-item {
  opacity: 1;
  animation: fcaItemFromDist 0.75s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* Different pseudo-random stagger order for gallery 3 */
.fca-gallery-3.gallery-active .fca-work-item:nth-child(1) { animation-delay: 0.60s; }
.fca-gallery-3.gallery-active .fca-work-item:nth-child(2) { animation-delay: 0.10s; }
.fca-gallery-3.gallery-active .fca-work-item:nth-child(3) { animation-delay: 1.25s; }
.fca-gallery-3.gallery-active .fca-work-item:nth-child(4) { animation-delay: 0.75s; }
.fca-gallery-3.gallery-active .fca-work-item:nth-child(5) { animation-delay: 0.40s; }
.fca-gallery-3.gallery-active .fca-work-item:nth-child(6) { animation-delay: 1.55s; }
.fca-gallery-3.gallery-active .fca-work-item:nth-child(7) { animation-delay: 0.90s; }
.fca-gallery-3.gallery-active .fca-work-item:nth-child(8) { animation-delay: 0.25s; }
.fca-gallery-3.gallery-active .fca-work-item:nth-child(9) { animation-delay: 1.10s; }

/* ---- GALLERY EXIT ANIMATION (fly toward screen) ---- */

.fca-gallery.gallery-exiting .fca-work-item,
.fca-gallery-2.gallery-exiting .fca-work-item,
.fca-gallery-3.gallery-exiting .fca-work-item {
  animation: fcaItemToScreen 0.48s cubic-bezier(0.55, 0, 0.85, 0.4) forwards !important;
}

/* Quick stagger so items don't all vanish at once */
.fca-gallery.gallery-exiting .fca-work-item:nth-child(1),
.fca-gallery-2.gallery-exiting .fca-work-item:nth-child(1),
.fca-gallery-3.gallery-exiting .fca-work-item:nth-child(1) { animation-delay: 0.00s !important; }
.fca-gallery.gallery-exiting .fca-work-item:nth-child(2),
.fca-gallery-2.gallery-exiting .fca-work-item:nth-child(2),
.fca-gallery-3.gallery-exiting .fca-work-item:nth-child(2) { animation-delay: 0.04s !important; }
.fca-gallery.gallery-exiting .fca-work-item:nth-child(3),
.fca-gallery-2.gallery-exiting .fca-work-item:nth-child(3),
.fca-gallery-3.gallery-exiting .fca-work-item:nth-child(3) { animation-delay: 0.08s !important; }
.fca-gallery.gallery-exiting .fca-work-item:nth-child(4),
.fca-gallery-2.gallery-exiting .fca-work-item:nth-child(4),
.fca-gallery-3.gallery-exiting .fca-work-item:nth-child(4) { animation-delay: 0.02s !important; }
.fca-gallery.gallery-exiting .fca-work-item:nth-child(5),
.fca-gallery-2.gallery-exiting .fca-work-item:nth-child(5),
.fca-gallery-3.gallery-exiting .fca-work-item:nth-child(5) { animation-delay: 0.06s !important; }
.fca-gallery.gallery-exiting .fca-work-item:nth-child(6),
.fca-gallery-2.gallery-exiting .fca-work-item:nth-child(6),
.fca-gallery-3.gallery-exiting .fca-work-item:nth-child(6) { animation-delay: 0.03s !important; }
.fca-gallery.gallery-exiting .fca-work-item:nth-child(7),
.fca-gallery-2.gallery-exiting .fca-work-item:nth-child(7),
.fca-gallery-3.gallery-exiting .fca-work-item:nth-child(7) { animation-delay: 0.07s !important; }
.fca-gallery.gallery-exiting .fca-work-item:nth-child(8),
.fca-gallery-2.gallery-exiting .fca-work-item:nth-child(8),
.fca-gallery-3.gallery-exiting .fca-work-item:nth-child(8) { animation-delay: 0.05s !important; }
.fca-gallery.gallery-exiting .fca-work-item:nth-child(9),
.fca-gallery-2.gallery-exiting .fca-work-item:nth-child(9),
.fca-gallery-3.gallery-exiting .fca-work-item:nth-child(9) { animation-delay: 0.01s !important; }

@keyframes fcaItemToScreen {
  from {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
  55% {
    opacity: 0.65;
    filter: blur(6px);
  }
  to {
    transform: scale(2.6);
    opacity: 0;
    filter: blur(24px);
  }
}

/* Gallery 1 re-entry is handled via container opacity transition in JS,
   not via item-level animation — avoids re-triggering fcaItemFromDist. */

/* futuristic corner brackets */
.fca-work-item::before,
.fca-work-item::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  z-index: 3;
  pointer-events: none;
  transition: width 0.35s ease, height 0.35s ease, border-color 0.3s ease;
}

.fca-work-item::before {
  top: 5px; left: 5px;
  border-top: 1.5px solid rgba(29, 233, 182, 0.55);
  border-left: 1.5px solid rgba(29, 233, 182, 0.55);
}

.fca-work-item::after {
  bottom: calc(28px + 5px); right: 5px;
  border-bottom: 1.5px solid rgba(29, 233, 182, 0.55);
  border-right: 1.5px solid rgba(29, 233, 182, 0.55);
}

/* image wrapper fills all space above caption */
.fca-work-img-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.fca-work-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              filter    0.5s ease;
  filter: brightness(0.82) saturate(0.9);
}

/* caption strip */
.fca-work-caption {
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(29, 233, 182, 0.5);
  background: rgba(10, 10, 14, 0.9);
  border-top: 1px solid rgba(29, 233, 182, 0.1);
  transition: color 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

/* ---- HOVER STATES ---- */

/* hovered item */
.fca-gallery:hover .fca-work-item:hover,
.fca-gallery-2:hover .fca-work-item:hover,
.fca-gallery-3:hover .fca-work-item:hover {
  scale: 1.07;
  z-index: 10;
  border-color: rgba(29, 233, 182, 0.65);
}
.its-gallery-2:hover .fca-work-item:hover,
.its-gallery-3:hover .fca-work-item:hover {
  scale: 1.1;
  z-index: 10;
  border-color: rgba(29, 233, 182, 0.65);
}

.fca-gallery:hover .fca-work-item:hover::before,
.fca-gallery:hover .fca-work-item:hover::after,
.fca-gallery-2:hover .fca-work-item:hover::before,
.fca-gallery-2:hover .fca-work-item:hover::after,
.fca-gallery-3:hover .fca-work-item:hover::before,
.fca-gallery-3:hover .fca-work-item:hover::after,
.its-gallery-2:hover .fca-work-item:hover::before,
.its-gallery-2:hover .fca-work-item:hover::after,
.its-gallery-3:hover .fca-work-item:hover::before,
.its-gallery-3:hover .fca-work-item:hover::after {
  width: 22px;
  height: 22px;
  border-color: rgba(29, 233, 182, 0.9);
}

.fca-gallery:hover .fca-work-item:hover .fca-work-img-wrap img,
.fca-gallery-2:hover .fca-work-item:hover .fca-work-img-wrap img,
.fca-gallery-3:hover .fca-work-item:hover .fca-work-img-wrap img {
  transform: scale(1.45);
  filter: brightness(1) saturate(1.1);
}
.its-gallery-2:hover .fca-work-item:hover .fca-work-img-wrap img,
.its-gallery-3:hover .fca-work-item:hover .fca-work-img-wrap img {
  transform: scale(1.06);
  filter: brightness(1) saturate(1.1);
}

.fca-gallery:hover .fca-work-item:hover .fca-work-caption,
.fca-gallery-2:hover .fca-work-item:hover .fca-work-caption,
.fca-gallery-3:hover .fca-work-item:hover .fca-work-caption,
.its-gallery-2:hover .fca-work-item:hover .fca-work-caption,
.its-gallery-3:hover .fca-work-item:hover .fca-work-caption {
  color: rgba(29, 233, 182, 0.9);
}

/* non-hovered siblings */
.fca-gallery:hover .fca-work-item:not(:hover),
.fca-gallery-2:hover .fca-work-item:not(:hover),
.fca-gallery-3:hover .fca-work-item:not(:hover),
.its-gallery-2:hover .fca-work-item:not(:hover),
.its-gallery-3:hover .fca-work-item:not(:hover) {
  opacity: 0.28;
  filter: blur(1.5px);
}

/* Gallery fades out when lightbox is open */
.fca-gallery.gallery-lb-open,
.fca-gallery-2.gallery-lb-open,
.fca-gallery-3.gallery-lb-open,
.its-gallery-2.gallery-lb-open,
.its-gallery-3.gallery-lb-open {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

/* ============================================
   GALLERY PAGINATION DOTS
   ============================================ */

.fca-gallery-dots {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 10;
}

.project-page.pp-active .fca-gallery-dots {
  pointer-events: auto;
}

.project-page.pp-active .fca-gallery-dots {
  opacity: 1;
}

.fca-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(29, 233, 182, 0.18);
  border: 1px solid rgba(29, 233, 182, 0.3);
  cursor: pointer;
  transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease,
              transform 0.35s ease;
}

.fca-dot:hover {
  background: rgba(29, 233, 182, 0.35);
  border-color: rgba(29, 233, 182, 0.55);
}

.fca-dot.fca-dot--active {
  background: rgba(29, 233, 182, 0.82);
  border-color: rgba(29, 233, 182, 0.9);
  box-shadow: 0 0 8px rgba(29, 233, 182, 0.5), 0 0 18px rgba(29, 233, 182, 0.2);
  transform: scale(1.25);
}

/* ============================================
   FCA LIGHTBOX
   ============================================ */

.fca-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(4, 4, 7, 0.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.fca-lightbox.lb-active {
  opacity: 1;
  pointer-events: auto;
}

/* Frame wraps image + X so button is anchored to the image */
.fca-lb-frame {
  position: relative;
  display: inline-flex;
  flex-direction: column;
}

/* Close button — floats just above top-right corner of the image */
.fca-lb-close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 38px;
  height: 38px;
  background: none;
  border: 1px solid rgba(29, 233, 182, 0.35);
  color: rgba(29, 233, 182, 0.75);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  font-family: 'Orbitron', sans-serif;
  opacity: 0;
  transform: translateY(-6px);
}

.fca-lightbox.lb-active .fca-lb-close {
  animation: lbCloseIn 0.35s ease-out 0.25s both;
}

@keyframes lbCloseIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fca-lb-close:hover {
  border-color: rgba(29, 233, 182, 0.85);
  color: rgba(29, 233, 182, 1);
  box-shadow: 0 0 14px rgba(29, 233, 182, 0.45);
}

/* Image wrapper */
.fca-lb-img-wrap {
  position: relative;
  max-width: min(82vw, 1080px);
  max-height: 74vh;
  border: 1px solid rgba(29, 233, 182, 0.3);
  box-shadow:
    0 0 28px rgba(29, 233, 182, 0.18),
    0 0 80px rgba(29, 233, 182, 0.06);
  overflow: hidden;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0s, transform 0s;
}

.fca-lightbox.lb-active .fca-lb-img-wrap {
  animation: lbImgIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

@keyframes lbImgIn {
  from { opacity: 0; transform: scale(0.88); filter: blur(8px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}

.fca-lb-img-wrap img {
  display: block;
  max-width: min(82vw, 1080px);
  max-height: 74vh;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0.93);
  transition: filter 0.4s ease;
}
.fca-lightbox.lb--gold .fca-lb-img-wrap {
  box-shadow:
    0 0 14px 3px  rgba(220,170,40,0.50),
    0 0 40px 10px rgba(220,170,40,0.22),
    0 0 80px 20px rgba(200,140,0,0.10);
}

/* Corner brackets */
.fca-lb-img-wrap::before,
.fca-lb-img-wrap::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  z-index: 2;
  pointer-events: none;
}

.fca-lb-img-wrap::before {
  top: 8px; left: 8px;
  border-top: 1.5px solid rgba(29, 233, 182, 0.75);
  border-left: 1.5px solid rgba(29, 233, 182, 0.75);
}

.fca-lb-img-wrap::after {
  bottom: 8px; right: 8px;
  border-bottom: 1.5px solid rgba(29, 233, 182, 0.75);
  border-right: 1.5px solid rgba(29, 233, 182, 0.75);
}

/* Caption */
.fca-lb-caption {
  margin-top: 18px;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(29, 233, 182, 0.55);
  opacity: 0;
}

.fca-lightbox.lb-active .fca-lb-caption {
  animation: lbCloseIn 0.4s ease-out 0.35s both;
}

/* Shimmer sweep — activates 1s after lightbox opens */
.fca-lb-shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 4;
}

.fca-lb-shimmer::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 0;
  width: 45%;
  height: 140%;
  background: linear-gradient(
    105deg,
    transparent      0%,
    transparent      35%,
    rgba(255,255,255,0.06) 45%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.06) 55%,
    transparent      65%,
    transparent      100%
  );
  transform: translateX(-160%);
}

.fca-lightbox.lb-active .fca-lb-shimmer::before {
  animation: lbShimmer 1.3s cubic-bezier(0.4, 0, 0.2, 1) 1s both;
}

@keyframes lbShimmer {
  from { transform: translateX(-160%); }
  to   { transform: translateX(370%); }
}

/* ============================================
   ITS BILLBOARD GALLERY
   ============================================ */

.its-gallery-wrap {
  --H: calc((min(95vw, 1600px) - 100px) / 10);
  position: relative;
  width: min(95vw, 1600px);
  height: calc(var(--H) * 4.2 + 161px);
  margin-top: 96px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

#itsPage.pp-active .its-gallery-wrap {
  opacity: 1;
}


.its-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ---- Billboard item (the outer metallic frame) ---- */

.its-bb-item {
  position: relative;
  background: linear-gradient(160deg, #2c2c2c 0%, #181818 40%, #222 100%);
  padding: 8px;
  cursor: default;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 4px 24px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  opacity: 0;
}

/* Top metallic edge highlight */
.its-bb-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  z-index: 3;
}

/* Bottom LED accent strip */
.its-bb-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(29, 233, 182, 0.35), transparent);
  transition: all 0.45s ease;
  z-index: 3;
}

/* Corner rivets via box-shadow on screen pseudo-elements */
.its-bb-screen::before,
.its-bb-screen::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #555, #2a2a2a);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  z-index: 4;
}

.its-bb-screen::before {
  top: -11px;
  left: -11px;
}

.its-bb-screen::after {
  top: -11px;
  right: -11px;
}

/* Additional rivets via gallery item's inner shadows — simulated with screen outlines */
.its-bb-item > .its-bb-screen::before {
  top: -11px;
  left: -11px;
}

/* ---- The video/thumbnail screen ---- */

.its-bb-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(29, 233, 182, 0.12);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.7);
}

.its-bb-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 2;
  transition: filter 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  filter: brightness(0.85) saturate(0.9);
}

.its-bb-item.its-bb-playing .its-bb-thumb {
  opacity: 0;
}

/* Hover iframe — created by YT.Player API in background. Hidden by default,
   revealed only when player is "warm" (chrome auto-hidden) and user is hovering. */
.its-bb-screen iframe,
.its-bb-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  display: block;
}

.its-bb-screen iframe.its-bb-visible,
.its-bb-player.its-bb-visible {
  opacity: 1;
}

/* Mount point for YT.Player — invisible until replaced by iframe */
.its-bb-mount,
.ballies-v-mount,
.wsg-v-mount {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---- Hover states ---- */

.its-bb-item:hover {
  transform: scale(1.14);
  z-index: 5;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 12px 48px rgba(0, 0, 0, 0.7),
    0 0 60px rgba(29, 233, 182, 0.18),
    0 0 0 1px rgba(29, 233, 182, 0.12);
}

.its-bb-item:hover::after {
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(29, 233, 182, 0.75), transparent);
  box-shadow: 0 0 12px rgba(29, 233, 182, 0.4);
}

.its-bb-item:hover .its-bb-screen {
  border-color: rgba(29, 233, 182, 0.3);
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.5),
    inset 0 0 30px rgba(29, 233, 182, 0.06);
}

.its-bb-item:hover .its-bb-thumb {
  transform: scale(1.06);
  filter: brightness(1) saturate(1.05);
}

/* ---- Play icon overlay ---- */

.its-bb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.75);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1.5px solid rgba(29, 233, 182, 0.55);
  box-shadow: 0 0 18px rgba(29, 233, 182, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease, box-shadow 0.3s ease;
  pointer-events: none;
  z-index: 3;
}

/* Triangle play symbol via border trick */
.its-bb-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 53%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent rgba(29, 233, 182, 0.9);
}

.its-bb-item:hover .its-bb-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  border-color: rgba(29, 233, 182, 0.85);
  box-shadow: 0 0 28px rgba(29, 233, 182, 0.35);
}

/* Hide play icon once video is actually playing */
.its-bb-item.its-bb-playing .its-bb-play {
  opacity: 0;
}

/* Failed state — embedding disabled (Error 101/150/153) */
/* Thumbnail dims and play icon becomes a "↗" external link hint */
.its-bb-item.its-bb-failed .its-bb-thumb {
  filter: brightness(0.45) saturate(0.3);
}

.its-bb-item.its-bb-failed .its-bb-play::after {
  /* Replace play triangle with external link arrow */
  border-style: none;
  width: auto;
  height: auto;
  content: '↗';
  font-size: 18px;
  line-height: 1;
  color: rgba(29, 233, 182, 0.85);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: none;
}

/* Non-hovered siblings dim */
.its-gallery:hover .its-bb-item:not(:hover) {
  opacity: 0.35 !important;
  filter: blur(1px);
  transition: opacity 0.4s ease, filter 0.4s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}

/* ---- Entry animation — billboard "power on" ---- */

#itsPage.pp-active .its-bb-item {
  opacity: 1;
  animation: itsBbPowerOn 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

#itsPage.pp-active .its-bb-item:nth-child(1) { animation-delay: 0.20s; }
#itsPage.pp-active .its-bb-item:nth-child(2) { animation-delay: 0.55s; }
#itsPage.pp-active .its-bb-item:nth-child(3) { animation-delay: 0.35s; }
#itsPage.pp-active .its-bb-item:nth-child(4) { animation-delay: 0.65s; }
#itsPage.pp-active .its-bb-item:nth-child(5) { animation-delay: 0.40s; }
#itsPage.pp-active .its-bb-item:nth-child(6) { animation-delay: 0.75s; }

/* Hover-to-play hint */
@keyframes itsHintBlink {
  0%, 100% { opacity: 1;    color: rgba(29, 233, 182, 0.85); }
  50%       { opacity: 0.3; color: rgba(29, 233, 182, 0.4);  }
}

.its-hover-hint {
  text-align: center;
  margin-top: 18px;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(29, 233, 182, 0.55);
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
  user-select: none;
}

.its-hover-hint.its-hint-visible {
  opacity: 1;
  animation: itsHintBlink 2s ease-in-out infinite;
}

@keyframes itsBbPowerOn {
  0% {
    opacity: 0;
    transform: scale(0.88);
    filter: brightness(0) blur(6px);
  }
  45% {
    opacity: 0.8;
    filter: brightness(2.5) blur(2px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1) blur(0);
  }
}

/* ============================================
   ITS VIDEO LIGHTBOX
   ============================================ */

.its-lightbox {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 4, 7, 0.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.its-lightbox.its-lb-active {
  opacity: 1;
  pointer-events: auto;
}

.its-lb-frame {
  position: relative;
  display: inline-flex;
  flex-direction: column;
}

.its-lb-close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 38px;
  height: 38px;
  background: none;
  border: 1px solid rgba(29, 233, 182, 0.35);
  color: rgba(29, 233, 182, 0.75);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  font-family: 'Orbitron', sans-serif;
  opacity: 0;
  transform: translateY(-6px);
}

.its-lightbox.its-lb-active .its-lb-close {
  animation: lbCloseIn 0.35s ease-out 0.25s both;
}

.its-lb-close:hover {
  border-color: rgba(29, 233, 182, 0.85);
  color: rgba(29, 233, 182, 1);
  box-shadow: 0 0 14px rgba(29, 233, 182, 0.45);
}

.its-lb-video-wrap {
  position: relative;
  width: min(88vw, 1100px);
  aspect-ratio: 16 / 9;
  background: #000;
  border: 5px solid #222;
  box-shadow:
    0 0 40px rgba(29, 233, 182, 0.12),
    0 0 100px rgba(29, 233, 182, 0.05),
    0 20px 60px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transform: scale(0.9);
}

.its-lightbox.its-lb-active .its-lb-video-wrap {
  animation: lbImgIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

.its-lb-video-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Watch on YouTube fallback link */
.its-lb-yt-link {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(29, 233, 182, 0.45);
  text-decoration: none;
  transition: color 0.2s ease;
  opacity: 0;
}

.its-lightbox.its-lb-active .its-lb-yt-link {
  animation: lbCloseIn 0.4s ease-out 0.4s both;
}

.its-lb-yt-link:hover {
  color: rgba(29, 233, 182, 0.85);
}

/* Billboard-style LED edge on lightbox */
.its-lb-video-wrap::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 20px;
  right: 20px;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(29, 233, 182, 0.5), transparent);
  box-shadow: 0 0 12px rgba(29, 233, 182, 0.3);
}

/* ============================================
   ITS GALLERY 2 & 3 — IMAGE FRAMES
   ============================================ */

/* Gallery 2: 14 landscape (2:1) + 2 portrait (2:3)
   16 items: k1 & k5 are portraits (span 3 rows), rows 1-3 have 3 landscape each,
   row 4 has 5 landscape across all 5 columns (outer cols ≈ 2.1:1, inner exactly 2:1)
   Formula: 2×(2H+20) + 3×(2H) + 4×15 = W → 10H+100 = W → H = (W−100)/10 */
.its-gallery-2 {
  --H: calc((min(95vw, 1600px) - 100px) / 10);
  --LH: calc(var(--H) * 21 / 20 + 29px);
  --L: calc(var(--H) * 2);
  --P: calc(var(--H) * 2 + 20px);
  display: none;
  grid-template-columns: var(--P) var(--L) var(--L) var(--L) var(--P);
  grid-template-rows: var(--LH) var(--LH) var(--LH) var(--LH);
  gap: 15px;
  grid-template-areas:
    "k1  k2  k3  k4  k5"
    "k1  k6  k7  k8  k5"
    "k1  k9  k10 k11 k5"
    "k12 k13 k14 k15 k16";
  width: min(95vw, 1600px);
}

.its-gallery-2.gallery-active { display: grid; transform: translateY(-38px); }

.its-gallery-2 .fca-work-item:nth-child(1)  { grid-area: k1;  } /* portrait */
.its-gallery-2 .fca-work-item:nth-child(2)  { grid-area: k2;  }
.its-gallery-2 .fca-work-item:nth-child(3)  { grid-area: k3;  }
.its-gallery-2 .fca-work-item:nth-child(4)  { grid-area: k4;  }
.its-gallery-2 .fca-work-item:nth-child(5)  { grid-area: k5;  } /* portrait */
.its-gallery-2 .fca-work-item:nth-child(6)  { grid-area: k6;  }
.its-gallery-2 .fca-work-item:nth-child(7)  { grid-area: k7;  }
.its-gallery-2 .fca-work-item:nth-child(8)  { grid-area: k8;  }
.its-gallery-2 .fca-work-item:nth-child(9)  { grid-area: k9;  }
.its-gallery-2 .fca-work-item:nth-child(10) { grid-area: k10; }
.its-gallery-2 .fca-work-item:nth-child(11) { grid-area: k11; }
.its-gallery-2 .fca-work-item:nth-child(12) { grid-area: k12; }
.its-gallery-2 .fca-work-item:nth-child(13) { grid-area: k13; }
.its-gallery-2 .fca-work-item:nth-child(14) { grid-area: k14; }
.its-gallery-2 .fca-work-item:nth-child(15) { grid-area: k15; }
.its-gallery-2 .fca-work-item:nth-child(16) { grid-area: k16; }

/* Bracket orientations — Gallery 2 */
/* Landscape cells: wide bracket (20×9) */
.its-gallery-2 .fca-work-item:nth-child(2)::before,
.its-gallery-2 .fca-work-item:nth-child(2)::after,
.its-gallery-2 .fca-work-item:nth-child(3)::before,
.its-gallery-2 .fca-work-item:nth-child(3)::after,
.its-gallery-2 .fca-work-item:nth-child(4)::before,
.its-gallery-2 .fca-work-item:nth-child(4)::after,
.its-gallery-2 .fca-work-item:nth-child(6)::before,
.its-gallery-2 .fca-work-item:nth-child(6)::after,
.its-gallery-2 .fca-work-item:nth-child(7)::before,
.its-gallery-2 .fca-work-item:nth-child(7)::after,
.its-gallery-2 .fca-work-item:nth-child(8)::before,
.its-gallery-2 .fca-work-item:nth-child(8)::after,
.its-gallery-2 .fca-work-item:nth-child(9)::before,
.its-gallery-2 .fca-work-item:nth-child(9)::after,
.its-gallery-2 .fca-work-item:nth-child(10)::before,
.its-gallery-2 .fca-work-item:nth-child(10)::after,
.its-gallery-2 .fca-work-item:nth-child(11)::before,
.its-gallery-2 .fca-work-item:nth-child(11)::after,
.its-gallery-2 .fca-work-item:nth-child(12)::before,
.its-gallery-2 .fca-work-item:nth-child(12)::after,
.its-gallery-2 .fca-work-item:nth-child(13)::before,
.its-gallery-2 .fca-work-item:nth-child(13)::after,
.its-gallery-2 .fca-work-item:nth-child(14)::before,
.its-gallery-2 .fca-work-item:nth-child(14)::after,
.its-gallery-2 .fca-work-item:nth-child(15)::before,
.its-gallery-2 .fca-work-item:nth-child(15)::after,
.its-gallery-2 .fca-work-item:nth-child(16)::before,
.its-gallery-2 .fca-work-item:nth-child(16)::after {
  width: 20px;
  height: 9px;
}

/* Portrait cells: tall bracket (9×20) */
.its-gallery-2 .fca-work-item:nth-child(1)::before,
.its-gallery-2 .fca-work-item:nth-child(1)::after,
.its-gallery-2 .fca-work-item:nth-child(5)::before,
.its-gallery-2 .fca-work-item:nth-child(5)::after {
  width: 9px;
  height: 20px;
}

/* ---- Gallery 2 entry animation ---- */
.its-gallery-2.gallery-active .fca-work-item {
  opacity: 1;
  animation: fcaItemFromDist 0.75s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.its-gallery-2.gallery-active .fca-work-item:nth-child(1)  { animation-delay: 0.05s; }
.its-gallery-2.gallery-active .fca-work-item:nth-child(2)  { animation-delay: 0.50s; }
.its-gallery-2.gallery-active .fca-work-item:nth-child(3)  { animation-delay: 0.70s; }
.its-gallery-2.gallery-active .fca-work-item:nth-child(4)  { animation-delay: 0.35s; }
.its-gallery-2.gallery-active .fca-work-item:nth-child(5)  { animation-delay: 0.90s; }
.its-gallery-2.gallery-active .fca-work-item:nth-child(6)  { animation-delay: 0.20s; }
.its-gallery-2.gallery-active .fca-work-item:nth-child(7)  { animation-delay: 0.60s; }
.its-gallery-2.gallery-active .fca-work-item:nth-child(8)  { animation-delay: 1.05s; }
.its-gallery-2.gallery-active .fca-work-item:nth-child(9)  { animation-delay: 0.15s; }
.its-gallery-2.gallery-active .fca-work-item:nth-child(10) { animation-delay: 0.80s; }
.its-gallery-2.gallery-active .fca-work-item:nth-child(11) { animation-delay: 0.45s; }
.its-gallery-2.gallery-active .fca-work-item:nth-child(12) { animation-delay: 1.15s; }
.its-gallery-2.gallery-active .fca-work-item:nth-child(13) { animation-delay: 0.30s; }
.its-gallery-2.gallery-active .fca-work-item:nth-child(14) { animation-delay: 0.95s; }
.its-gallery-2.gallery-active .fca-work-item:nth-child(15) { animation-delay: 0.55s; }
.its-gallery-2.gallery-active .fca-work-item:nth-child(16) { animation-delay: 1.30s; }

/* ---- Gallery 2 exit animation ---- */
.its-gallery-2.gallery-exiting .fca-work-item {
  animation: fcaItemToScreen 0.48s cubic-bezier(0.55, 0, 0.85, 0.4) forwards !important;
}

.its-gallery-2.gallery-exiting .fca-work-item:nth-child(1)  { animation-delay: 0.00s !important; }
.its-gallery-2.gallery-exiting .fca-work-item:nth-child(2)  { animation-delay: 0.04s !important; }
.its-gallery-2.gallery-exiting .fca-work-item:nth-child(3)  { animation-delay: 0.06s !important; }
.its-gallery-2.gallery-exiting .fca-work-item:nth-child(4)  { animation-delay: 0.02s !important; }
.its-gallery-2.gallery-exiting .fca-work-item:nth-child(5)  { animation-delay: 0.08s !important; }
.its-gallery-2.gallery-exiting .fca-work-item:nth-child(6)  { animation-delay: 0.01s !important; }
.its-gallery-2.gallery-exiting .fca-work-item:nth-child(7)  { animation-delay: 0.05s !important; }
.its-gallery-2.gallery-exiting .fca-work-item:nth-child(8)  { animation-delay: 0.03s !important; }
.its-gallery-2.gallery-exiting .fca-work-item:nth-child(9)  { animation-delay: 0.07s !important; }
.its-gallery-2.gallery-exiting .fca-work-item:nth-child(10) { animation-delay: 0.09s !important; }
.its-gallery-2.gallery-exiting .fca-work-item:nth-child(11) { animation-delay: 0.02s !important; }
.its-gallery-2.gallery-exiting .fca-work-item:nth-child(12) { animation-delay: 0.06s !important; }
.its-gallery-2.gallery-exiting .fca-work-item:nth-child(13) { animation-delay: 0.00s !important; }
.its-gallery-2.gallery-exiting .fca-work-item:nth-child(14) { animation-delay: 0.04s !important; }
.its-gallery-2.gallery-exiting .fca-work-item:nth-child(15) { animation-delay: 0.08s !important; }
.its-gallery-2.gallery-exiting .fca-work-item:nth-child(16) { animation-delay: 0.03s !important; }

/* Gallery 3: identical layout to Gallery 2 — 14 landscape + 2 portrait */
.its-gallery-3 {
  --H: calc((min(95vw, 1600px) - 100px) / 10);
  --LH: calc(var(--H) * 21 / 20 + 29px);
  --L: calc(var(--H) * 2);
  --P: calc(var(--H) * 2 + 20px);
  display: none;
  grid-template-columns: var(--P) var(--L) var(--L) var(--L) var(--P);
  grid-template-rows: var(--LH) var(--LH) var(--LH) var(--LH);
  gap: 15px;
  grid-template-areas:
    "n1  n2  n3  n4  n5"
    "n1  n6  n7  n8  n5"
    "n1  n9  n10 n11 n5"
    "n12 n13 n14 n15 n16";
  width: min(95vw, 1600px);
}

.its-gallery-3.gallery-active { display: grid; transform: translateY(-38px); }

.its-gallery-3 .fca-work-item:nth-child(1)  { grid-area: n1;  } /* portrait */
.its-gallery-3 .fca-work-item:nth-child(2)  { grid-area: n2;  }
.its-gallery-3 .fca-work-item:nth-child(3)  { grid-area: n3;  }
.its-gallery-3 .fca-work-item:nth-child(4)  { grid-area: n4;  }
.its-gallery-3 .fca-work-item:nth-child(5)  { grid-area: n5;  } /* portrait */
.its-gallery-3 .fca-work-item:nth-child(6)  { grid-area: n6;  }
.its-gallery-3 .fca-work-item:nth-child(7)  { grid-area: n7;  }
.its-gallery-3 .fca-work-item:nth-child(8)  { grid-area: n8;  }
.its-gallery-3 .fca-work-item:nth-child(9)  { grid-area: n9;  }
.its-gallery-3 .fca-work-item:nth-child(10) { grid-area: n10; }
.its-gallery-3 .fca-work-item:nth-child(11) { grid-area: n11; }
.its-gallery-3 .fca-work-item:nth-child(12) { grid-area: n12; }
.its-gallery-3 .fca-work-item:nth-child(13) { grid-area: n13; }
.its-gallery-3 .fca-work-item:nth-child(14) { grid-area: n14; }
.its-gallery-3 .fca-work-item:nth-child(15) { grid-area: n15; }
.its-gallery-3 .fca-work-item:nth-child(16) { grid-area: n16; }

/* Bracket orientations — Gallery 3 (landscape: 20×9, portrait: 9×20) */
.its-gallery-3 .fca-work-item:nth-child(2)::before,
.its-gallery-3 .fca-work-item:nth-child(2)::after,
.its-gallery-3 .fca-work-item:nth-child(3)::before,
.its-gallery-3 .fca-work-item:nth-child(3)::after,
.its-gallery-3 .fca-work-item:nth-child(4)::before,
.its-gallery-3 .fca-work-item:nth-child(4)::after,
.its-gallery-3 .fca-work-item:nth-child(6)::before,
.its-gallery-3 .fca-work-item:nth-child(6)::after,
.its-gallery-3 .fca-work-item:nth-child(7)::before,
.its-gallery-3 .fca-work-item:nth-child(7)::after,
.its-gallery-3 .fca-work-item:nth-child(8)::before,
.its-gallery-3 .fca-work-item:nth-child(8)::after,
.its-gallery-3 .fca-work-item:nth-child(9)::before,
.its-gallery-3 .fca-work-item:nth-child(9)::after,
.its-gallery-3 .fca-work-item:nth-child(10)::before,
.its-gallery-3 .fca-work-item:nth-child(10)::after,
.its-gallery-3 .fca-work-item:nth-child(11)::before,
.its-gallery-3 .fca-work-item:nth-child(11)::after,
.its-gallery-3 .fca-work-item:nth-child(12)::before,
.its-gallery-3 .fca-work-item:nth-child(12)::after,
.its-gallery-3 .fca-work-item:nth-child(13)::before,
.its-gallery-3 .fca-work-item:nth-child(13)::after,
.its-gallery-3 .fca-work-item:nth-child(14)::before,
.its-gallery-3 .fca-work-item:nth-child(14)::after,
.its-gallery-3 .fca-work-item:nth-child(15)::before,
.its-gallery-3 .fca-work-item:nth-child(15)::after,
.its-gallery-3 .fca-work-item:nth-child(16)::before,
.its-gallery-3 .fca-work-item:nth-child(16)::after {
  width: 20px;
  height: 9px;
}

.its-gallery-3 .fca-work-item:nth-child(1)::before,
.its-gallery-3 .fca-work-item:nth-child(1)::after,
.its-gallery-3 .fca-work-item:nth-child(5)::before,
.its-gallery-3 .fca-work-item:nth-child(5)::after {
  width: 9px;
  height: 20px;
}

/* ---- Gallery 3 entry animation ---- */
.its-gallery-3.gallery-active .fca-work-item {
  opacity: 1;
  animation: fcaItemFromDist 0.75s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.its-gallery-3.gallery-active .fca-work-item:nth-child(1)  { animation-delay: 0.10s; }
.its-gallery-3.gallery-active .fca-work-item:nth-child(2)  { animation-delay: 0.65s; }
.its-gallery-3.gallery-active .fca-work-item:nth-child(3)  { animation-delay: 0.40s; }
.its-gallery-3.gallery-active .fca-work-item:nth-child(4)  { animation-delay: 0.85s; }
.its-gallery-3.gallery-active .fca-work-item:nth-child(5)  { animation-delay: 0.25s; }
.its-gallery-3.gallery-active .fca-work-item:nth-child(6)  { animation-delay: 0.55s; }
.its-gallery-3.gallery-active .fca-work-item:nth-child(7)  { animation-delay: 1.10s; }
.its-gallery-3.gallery-active .fca-work-item:nth-child(8)  { animation-delay: 0.30s; }
.its-gallery-3.gallery-active .fca-work-item:nth-child(9)  { animation-delay: 0.75s; }
.its-gallery-3.gallery-active .fca-work-item:nth-child(10) { animation-delay: 0.20s; }
.its-gallery-3.gallery-active .fca-work-item:nth-child(11) { animation-delay: 0.90s; }
.its-gallery-3.gallery-active .fca-work-item:nth-child(12) { animation-delay: 0.45s; }
.its-gallery-3.gallery-active .fca-work-item:nth-child(13) { animation-delay: 1.20s; }
.its-gallery-3.gallery-active .fca-work-item:nth-child(14) { animation-delay: 0.05s; }
.its-gallery-3.gallery-active .fca-work-item:nth-child(15) { animation-delay: 0.70s; }
.its-gallery-3.gallery-active .fca-work-item:nth-child(16) { animation-delay: 1.00s; }

/* ---- Gallery 3 exit animation ---- */
.its-gallery-3.gallery-exiting .fca-work-item {
  animation: fcaItemToScreen 0.48s cubic-bezier(0.55, 0, 0.85, 0.4) forwards !important;
}

.its-gallery-3.gallery-exiting .fca-work-item:nth-child(1)  { animation-delay: 0.00s !important; }
.its-gallery-3.gallery-exiting .fca-work-item:nth-child(2)  { animation-delay: 0.04s !important; }
.its-gallery-3.gallery-exiting .fca-work-item:nth-child(3)  { animation-delay: 0.06s !important; }
.its-gallery-3.gallery-exiting .fca-work-item:nth-child(4)  { animation-delay: 0.02s !important; }
.its-gallery-3.gallery-exiting .fca-work-item:nth-child(5)  { animation-delay: 0.08s !important; }
.its-gallery-3.gallery-exiting .fca-work-item:nth-child(6)  { animation-delay: 0.01s !important; }
.its-gallery-3.gallery-exiting .fca-work-item:nth-child(7)  { animation-delay: 0.05s !important; }
.its-gallery-3.gallery-exiting .fca-work-item:nth-child(8)  { animation-delay: 0.03s !important; }
.its-gallery-3.gallery-exiting .fca-work-item:nth-child(9)  { animation-delay: 0.07s !important; }
.its-gallery-3.gallery-exiting .fca-work-item:nth-child(10) { animation-delay: 0.09s !important; }
.its-gallery-3.gallery-exiting .fca-work-item:nth-child(11) { animation-delay: 0.02s !important; }
.its-gallery-3.gallery-exiting .fca-work-item:nth-child(12) { animation-delay: 0.06s !important; }
.its-gallery-3.gallery-exiting .fca-work-item:nth-child(13) { animation-delay: 0.00s !important; }
.its-gallery-3.gallery-exiting .fca-work-item:nth-child(14) { animation-delay: 0.04s !important; }
.its-gallery-3.gallery-exiting .fca-work-item:nth-child(15) { animation-delay: 0.08s !important; }
.its-gallery-3.gallery-exiting .fca-work-item:nth-child(16) { animation-delay: 0.03s !important; }

/* ITS gallery dots — same layout as FCA dots */
.its-gallery-dots {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 10;
}

#itsPage.pp-active .its-gallery-dots {
  opacity: 1;
  pointer-events: auto;
}

.its-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(29, 233, 182, 0.18);
  border: 1px solid rgba(29, 233, 182, 0.3);
  cursor: pointer;
  transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease,
              transform 0.35s ease;
}

.its-dot:hover {
  background: rgba(29, 233, 182, 0.35);
  border-color: rgba(29, 233, 182, 0.55);
}

.its-dot.its-dot--active {
  background: rgba(29, 233, 182, 0.82);
  border-color: rgba(29, 233, 182, 0.9);
  box-shadow: 0 0 8px rgba(29, 233, 182, 0.5), 0 0 18px rgba(29, 233, 182, 0.2);
  transform: scale(1.25);
}

/* Hide billboard hover hint on galleries 2 & 3 (pages 1 & 2, 0-indexed) */
#itsPage.its-gallery-1-active .its-hover-hint,
#itsPage.its-gallery-2-active .its-hover-hint {
  display: none;
}

/* ====== Ballies NFT Slideshow ====== */
.ballies-slideshow {
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
  display: flex;
  flex-direction: column;
  gap: 42px;
  margin-top: 80px;
  padding: 44px 0 28px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

.ballies-row {
  display: flex;
  overflow: visible;
}

.ballies-track {
  display: flex;
  gap: 18px;
  will-change: transform;
}

.ballies-row-rtl .ballies-track {
  animation: ballies-rtl 44s linear infinite;
}

.ballies-row-ltr .ballies-track {
  animation: ballies-ltr 44s linear infinite;
}

/* 20 cards × (220 + 18) = 4760 px per set */
@keyframes ballies-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(-4760px); }
}
@keyframes ballies-ltr {
  from { transform: translateX(-4760px); }
  to   { transform: translateX(0); }
}

.ballies-nft-card {
  flex-shrink: 0;
  width: 220px;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              z-index 0s;
  position: relative;
  z-index: 1;
}

.ballies-nft-card.ballies-card-hovered {
  transform: scale(1.22);
  z-index: 20;
}

.ballies-nft-inner {
  position: relative;
  background: linear-gradient(160deg, #050f0d 0%, #0a0a0c 100%);
  border: 2px solid #1de9b6;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(29, 233, 182, 0.18),
    0 0 16px rgba(29, 233, 182, 0.35),
    0 0 40px rgba(29, 233, 182, 0.10),
    inset 0 0 24px rgba(29, 233, 182, 0.05);
  padding: 9px 9px 0 9px;
}

/* Top teal light streak */
.ballies-nft-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, #1de9b6 35%, #00ffd5 50%, #1de9b6 65%, transparent 95%);
  border-radius: 14px 14px 0 0;
  opacity: 0.9;
}


.ballies-nft-inner img {
  width: 100%;
  aspect-ratio: 1423 / 1679;
  display: block;
  border-radius: 7px;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.ballies-nft-label {
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #1de9b6;
  margin: 28px 0 0;
}

.ballies-nft-num {
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #1de9b6;
  letter-spacing: 0.15em;
  text-shadow: 0 0 10px rgba(29, 233, 182, 0.75);
  padding: 7px 0 8px;
  background: rgba(0, 0, 0, 0.45);
  border-top: 1px solid rgba(29, 233, 182, 0.22);
}



/* ====== Ballies Mosaic (page 2) ====== */
.ballies-mosaic-outer {
  --cell: calc((min(95vw, 1600px) - 5 * 12px) / 6);
  --vis-h: calc(3 * var(--cell) + 2 * 12px);
  display: none;
  width: min(95vw, 1600px);
  margin-top: 48px;
  position: relative;
}

.ballies-mosaic-outer.ballies-mosaic-active {
  display: block;
}

.ballies-mosaic-wrap {
  width: 100%;
  height: var(--vis-h);
  overflow-y: scroll;
  scrollbar-width: none;
}
.ballies-mosaic-wrap::-webkit-scrollbar { display: none; }

.ballies-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  width: 100%;
}

/* ---- Mosaic entry animation ---- */
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item {
  opacity: 1;
  animation: fcaItemFromDist 0.75s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(1)  { animation-delay: 0.10s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(2)  { animation-delay: 0.65s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(3)  { animation-delay: 0.30s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(4)  { animation-delay: 0.90s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(5)  { animation-delay: 0.15s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(6)  { animation-delay: 0.55s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(7)  { animation-delay: 0.80s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(8)  { animation-delay: 0.25s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(9)  { animation-delay: 1.05s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(10) { animation-delay: 0.45s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(11) { animation-delay: 0.70s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(12) { animation-delay: 0.05s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(13) { animation-delay: 0.95s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(14) { animation-delay: 0.35s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(15) { animation-delay: 1.20s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(16) { animation-delay: 0.60s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(17) { animation-delay: 0.20s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(18) { animation-delay: 0.85s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(19) { animation-delay: 0.40s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(20) { animation-delay: 1.10s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(21) { animation-delay: 0.75s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(22) { animation-delay: 0.20s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(23) { animation-delay: 0.95s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(24) { animation-delay: 0.50s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(25) { animation-delay: 0.65s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(26) { animation-delay: 0.15s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(27) { animation-delay: 1.15s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(28) { animation-delay: 0.55s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(29) { animation-delay: 0.30s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(30) { animation-delay: 0.85s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(31) { animation-delay: 0.70s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(32) { animation-delay: 0.05s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(33) { animation-delay: 1.25s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(34) { animation-delay: 0.45s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(35) { animation-delay: 0.90s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(36) { animation-delay: 0.25s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(37) { animation-delay: 0.15s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(38) { animation-delay: 0.80s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(39) { animation-delay: 0.40s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(40) { animation-delay: 1.05s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(41) { animation-delay: 0.60s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(42) { animation-delay: 0.25s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(43) { animation-delay: 0.90s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(44) { animation-delay: 0.35s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(45) { animation-delay: 1.20s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(46) { animation-delay: 0.70s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(47) { animation-delay: 0.10s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(48) { animation-delay: 0.55s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(49) { animation-delay: 0.45s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(50) { animation-delay: 1.00s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(51) { animation-delay: 0.65s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(52) { animation-delay: 0.20s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(53) { animation-delay: 0.85s; }
.ballies-mosaic-outer.ballies-mosaic-active .ballies-m-item:nth-child(54) { animation-delay: 0.50s; }

@keyframes ballies-row-from-right {
  from { transform: translateX(110vw); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes ballies-row-from-left {
  from { transform: translateX(-110vw); opacity: 0; }
  to   { transform: translateX(0);      opacity: 1; }
}

.ballies-slideshow.ballies-entering .ballies-row-rtl {
  animation: ballies-row-from-right 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ballies-slideshow.ballies-entering .ballies-row-ltr {
  animation: ballies-row-from-left 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.12s;
}

@keyframes balliesItemShrink {
  from { opacity: 1; transform: scale(1);    filter: blur(0px);  }
  to   { opacity: 0; transform: scale(0.06); filter: blur(16px); }
}

/* ---- Mosaic exit animation ---- */
.ballies-mosaic-outer.ballies-mosaic-exiting .ballies-m-item {
  animation: balliesItemShrink 0.45s cubic-bezier(0.55, 0, 0.85, 0.4) forwards !important;
}

.ballies-mosaic-outer.ballies-mosaic-exiting .ballies-m-item:nth-child(6n+1) { animation-delay: 0.00s !important; }
.ballies-mosaic-outer.ballies-mosaic-exiting .ballies-m-item:nth-child(6n+2) { animation-delay: 0.03s !important; }
.ballies-mosaic-outer.ballies-mosaic-exiting .ballies-m-item:nth-child(6n+3) { animation-delay: 0.06s !important; }
.ballies-mosaic-outer.ballies-mosaic-exiting .ballies-m-item:nth-child(6n+4) { animation-delay: 0.02s !important; }
.ballies-mosaic-outer.ballies-mosaic-exiting .ballies-m-item:nth-child(6n+5) { animation-delay: 0.08s !important; }
.ballies-mosaic-outer.ballies-mosaic-exiting .ballies-m-item:nth-child(6n+6) { animation-delay: 0.04s !important; }

/* ====== Scrollbar ====== */
.ballies-scrollbar {
  position: absolute;
  right: -22px;
  top: 0;
  width: 4px;
  height: var(--vis-h);
  display: none;
}

.ballies-mosaic-outer.ballies-mosaic-active .ballies-scrollbar {
  display: block;
}

.ballies-sb-track {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(29, 233, 182, 0.07);
  border-radius: 2px;
  border: 1px solid rgba(29, 233, 182, 0.18);
  box-shadow: 0 0 6px rgba(29, 233, 182, 0.08);
  overflow: hidden;
}

.ballies-sb-track::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 13px,
    rgba(29, 233, 182, 0.14) 13px, rgba(29, 233, 182, 0.14) 14px
  );
}

.ballies-sb-thumb {
  position: absolute;
  left: -2px;
  width: 8px;
  min-height: 32px;
  background: linear-gradient(180deg, #1de9b6 0%, #00c896 100%);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(29, 233, 182, 0.9), 0 0 22px rgba(29, 233, 182, 0.4);
  cursor: ns-resize;
  transition: box-shadow 0.2s ease;
}

.ballies-sb-thumb:hover,
.ballies-sb-thumb.dragging {
  box-shadow: 0 0 14px rgba(29, 233, 182, 1), 0 0 32px rgba(29, 233, 182, 0.6);
}

.ballies-m-item {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(29, 233, 182, 0.40);
  cursor: pointer;
  box-shadow:
    0 0 10px rgba(29, 233, 182, 0.18),
    inset 0 0 16px rgba(29, 233, 182, 0.04);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.ballies-m-item:hover {
  border-color: rgba(29, 233, 182, 0.85);
  box-shadow:
    0 0 18px rgba(29, 233, 182, 0.40),
    inset 0 0 16px rgba(29, 233, 182, 0.07);
}

.ballies-m-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ballies-m-item:hover img {
  transform: scale(1.07);
}

/* ====== Ballies page dots ====== */
.ballies-dots {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 10;
}

#balliesPage.pp-active .ballies-dots {
  opacity: 1;
  pointer-events: auto;
}


.ballies-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(29, 233, 182, 0.18);
  border: 1px solid rgba(29, 233, 182, 0.3);
  cursor: pointer;
  transition: background 0.35s ease, box-shadow 0.35s ease,
              border-color 0.35s ease, transform 0.35s ease;
}

.ballies-dot:hover {
  background: rgba(29, 233, 182, 0.35);
  border-color: rgba(29, 233, 182, 0.55);
}

.ballies-dot.ballies-dot--active {
  background: rgba(29, 233, 182, 0.82);
  border-color: rgba(29, 233, 182, 0.9);
  box-shadow: 0 0 8px rgba(29, 233, 182, 0.5), 0 0 18px rgba(29, 233, 182, 0.2);
  transform: scale(1.25);
}

/* ============================================================
   Ballies Page 3 — Videos grid
   ============================================================ */
.ballies-videos-outer {
  display: none;
  width: min(88vw, 1200px);
  margin: 100px auto 0;
  padding-bottom: 72px;
  position: relative;
}
.ballies-videos-outer.ballies-videos-active {
  display: block;
}

.ballies-videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}

.ballies-v-item {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: #05100d;
  border: 2px solid rgba(29, 233, 182, 0.55);
  box-shadow:
    0 0 0 1px rgba(29, 233, 182, 0.08) inset,
    0 8px 26px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(29, 233, 182, 0.18);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.5s ease,
              box-shadow 0.5s ease,
              opacity 0.65s ease,
              filter 0.65s ease;
  opacity: 0;
}
.ballies-videos-outer.ballies-videos-active .ballies-v-item {
  animation: fcaItemFromDist 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ballies-videos-outer.ballies-videos-active .ballies-v-item:nth-child(1) { animation-delay: 0.10s; }
.ballies-videos-outer.ballies-videos-active .ballies-v-item:nth-child(2) { animation-delay: 0.60s; }
.ballies-videos-outer.ballies-videos-active .ballies-v-item:nth-child(3) { animation-delay: 0.25s; }
.ballies-videos-outer.ballies-videos-active .ballies-v-item:nth-child(4) { animation-delay: 0.80s; }
.ballies-videos-outer.ballies-videos-active .ballies-v-item:nth-child(5) { animation-delay: 0.40s; }
.ballies-videos-outer.ballies-videos-active .ballies-v-item:nth-child(6) { animation-delay: 0.15s; }
.ballies-videos-outer.ballies-videos-active .ballies-v-item:nth-child(7) { animation-delay: 0.70s; }
.ballies-videos-outer.ballies-videos-active .ballies-v-item:nth-child(8) { animation-delay: 0.35s; }
.ballies-videos-outer.ballies-videos-active .ballies-v-item:nth-child(9) { animation-delay: 0.55s; }

.ballies-videos-outer.ballies-videos-exiting .ballies-v-item {
  animation: balliesItemShrink 0.45s cubic-bezier(0.55, 0, 0.85, 0.4) forwards !important;
  opacity: 1;
}
.ballies-videos-outer.ballies-videos-exiting .ballies-v-item:nth-child(3n+1) { animation-delay: 0.00s !important; }
.ballies-videos-outer.ballies-videos-exiting .ballies-v-item:nth-child(3n+2) { animation-delay: 0.05s !important; }
.ballies-videos-outer.ballies-videos-exiting .ballies-v-item:nth-child(3n+3) { animation-delay: 0.02s !important; }

.ballies-v-item:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(29, 233, 182, 0.95);
  box-shadow:
    0 0 0 1px rgba(29, 233, 182, 0.15) inset,
    0 14px 38px rgba(0, 0, 0, 0.65),
    0 0 28px rgba(29, 233, 182, 0.45),
    0 0 55px rgba(29, 233, 182, 0.18);
}

/* Auto-featured (idle) state */
.ballies-videos.has-featured .ballies-v-item:not(.ballies-v-featured) {
  transform: scale(0.91);
  opacity: 0.45;
  filter: brightness(0.65);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.7s ease,
              filter 0.7s ease;
}
.ballies-v-item.ballies-v-featured {
  transform: scale(1.12) !important;
  z-index: 10;
  border-color: #1de9b6 !important;
  box-shadow:
    0 0 0 1px rgba(29, 233, 182, 0.2) inset,
    0 20px 50px rgba(0, 0, 0, 0.75),
    0 0 40px rgba(29, 233, 182, 0.65),
    0 0 90px rgba(29, 233, 182, 0.28) !important;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.7s ease,
              border-color 0.7s ease;
}

/* Corner brackets — same language as NFT cards */
.ballies-v-item::before,
.ballies-v-item::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid #1de9b6;
  pointer-events: none;
  z-index: 5;
  opacity: 0.85;
  transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
}
.ballies-v-item::before {
  top: 8px; left: 8px;
  border-right: none; border-bottom: none;
  border-top-left-radius: 6px;
}
.ballies-v-item::after {
  bottom: 8px; right: 8px;
  border-left: none; border-top: none;
  border-bottom-right-radius: 6px;
}
.ballies-v-item:hover::before,
.ballies-v-item:hover::after {
  opacity: 1;
  width: 24px;
  height: 24px;
}

.ballies-v-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.ballies-v-frame iframe {
  position: absolute;
  top: -7%;
  left: -7%;
  width: 114%;
  height: 114%;
  border: 0;
  pointer-events: none;
}

/* Thumbnail sits above the iframe — covers YouTube loading state until .playing */
.ballies-v-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.5s ease;
  z-index: 2;
}
.ballies-v-item.playing .ballies-v-thumb {
  opacity: 0;
}

.ballies-v-play {
  position: absolute;
  top: 50%; left: 50%;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  background: rgba(8, 20, 17, 0.72);
  border: 2px solid rgba(29, 233, 182, 0.95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 22px rgba(29, 233, 182, 0.55), 0 0 44px rgba(29, 233, 182, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  pointer-events: none;
}
.ballies-v-play::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 17px solid #1de9b6;
  margin-left: 4px;
  filter: drop-shadow(0 0 6px rgba(29, 233, 182, 0.8));
}
.ballies-v-item:hover .ballies-v-play {
  transform: translate(-50%, -50%) scale(1.08);
}
.ballies-v-item.playing .ballies-v-play {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
}

/* Gradient veil that hides any YouTube chrome that might flash in */
.ballies-v-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 16, 13, 0.25) 0%, rgba(5, 16, 13, 0) 18%, rgba(5, 16, 13, 0) 82%, rgba(5, 16, 13, 0.28) 100%);
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.ballies-v-item.playing .ballies-v-veil {
  opacity: 0.4;
}

/* ============================================================
   Ballies video lightbox
   ============================================================ */
.ballies-video-lb {
  position: fixed;
  inset: 0;
  background: rgba(2, 8, 6, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.ballies-video-lb.ballies-video-lb--active {
  opacity: 1;
  pointer-events: auto;
}

.ballies-video-lb-frame {
  position: relative;
  width: min(90vw, 1400px);
  aspect-ratio: 16 / 9;
  background: #05100d;
  border: 2px solid rgba(29, 233, 182, 0.9);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(29, 233, 182, 0.18) inset,
    0 30px 80px rgba(0, 0, 0, 0.8),
    0 0 60px rgba(29, 233, 182, 0.4),
    0 0 120px rgba(29, 233, 182, 0.18);
  transform: scale(0.92);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.ballies-video-lb.ballies-video-lb--active .ballies-video-lb-frame {
  transform: scale(1);
}

.ballies-video-lb-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.ballies-video-lb-wrap iframe {
  position: absolute;
  top: -7%;
  left: -7%;
  width: 114%;
  height: 114%;
  border: 0;
}

.ballies-video-lb-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(8, 20, 17, 0.78);
  border: 2px solid rgba(29, 233, 182, 0.9);
  color: #1de9b6;
  font-size: 18px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(29, 233, 182, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.ballies-video-lb-close:hover {
  transform: scale(1.1) rotate(90deg);
  background: rgba(29, 233, 182, 0.2);
  box-shadow: 0 0 24px rgba(29, 233, 182, 0.75);
}

/* ============================================================
   Ballies Page 4 — Editorial Gallery
   ============================================================ */
.ballies-gallery-outer {
  --gvis-h: min(700px, calc(100vh - 220px));
  display: none;
  width: min(88vw, 1200px);
  margin: 110px auto 0;
  padding-bottom: 72px;
  position: relative;
}
.ballies-gallery-outer.ballies-gallery-active {
  display: block;
}

.ballies-gallery-wrap {
  width: 100%;
  height: var(--gvis-h);
  overflow-y: scroll;
  scrollbar-width: none;
}
.ballies-gallery-wrap::-webkit-scrollbar { display: none; }

.ballies-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}

.ballies-g-item[data-span="2"] { grid-column: span 2; }
.ballies-g-item[data-span="3"] { grid-column: span 3; }

/* ---- Entry: "power-on" boot effect ---- */
@keyframes balliesGalleryPowerOn {
  0% {
    opacity: 0;
    transform: scale(0.9);
    filter: brightness(8) blur(16px) saturate(2.5)
            drop-shadow(0 0 50px rgba(29,233,182,1));
  }
  16% {
    opacity: 1;
    transform: scale(0.95);
    filter: brightness(3) blur(7px) saturate(1.5)
            drop-shadow(0 0 30px rgba(29,233,182,0.7));
  }
  52% {
    transform: scale(1.015);
    filter: brightness(1.2) blur(0.8px)
            drop-shadow(0 0 12px rgba(29,233,182,0.45));
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1) blur(0px)
            drop-shadow(0 0 5px rgba(29,233,182,0.22));
  }
}

/* ---- Futuristic card ---- */
.ballies-g-item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  opacity: 0;
  clip-path: polygon(
    14px 0%, calc(100% - 14px) 0%,
    100% 14px, 100% calc(100% - 14px),
    calc(100% - 14px) 100%, 14px 100%,
    0% calc(100% - 14px), 0% 14px
  );
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.4s ease;
}

.ballies-gallery-outer.ballies-gallery-active .ballies-g-item {
  animation: balliesGalleryPowerOn 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Entry stagger — row-by-row scan */
.ballies-gallery-outer.ballies-gallery-active .ballies-g-item:nth-child(1)  { animation-delay: 0.06s; }
.ballies-gallery-outer.ballies-gallery-active .ballies-g-item:nth-child(2)  { animation-delay: 0.20s; }
.ballies-gallery-outer.ballies-gallery-active .ballies-g-item:nth-child(3)  { animation-delay: 0.34s; }
.ballies-gallery-outer.ballies-gallery-active .ballies-g-item:nth-child(4)  { animation-delay: 0.48s; }
.ballies-gallery-outer.ballies-gallery-active .ballies-g-item:nth-child(5)  { animation-delay: 0.62s; }
.ballies-gallery-outer.ballies-gallery-active .ballies-g-item:nth-child(6)  { animation-delay: 0.76s; }
.ballies-gallery-outer.ballies-gallery-active .ballies-g-item:nth-child(7)  { animation-delay: 0.90s; }
.ballies-gallery-outer.ballies-gallery-active .ballies-g-item:nth-child(8)  { animation-delay: 1.04s; }
.ballies-gallery-outer.ballies-gallery-active .ballies-g-item:nth-child(9)  { animation-delay: 1.18s; }
.ballies-gallery-outer.ballies-gallery-active .ballies-g-item:nth-child(10) { animation-delay: 1.32s; }
.ballies-gallery-outer.ballies-gallery-active .ballies-g-item:nth-child(11) { animation-delay: 1.46s; }
.ballies-gallery-outer.ballies-gallery-active .ballies-g-item:nth-child(12) { animation-delay: 1.60s; }
.ballies-gallery-outer.ballies-gallery-active .ballies-g-item:nth-child(13) { animation-delay: 1.74s; }
.ballies-gallery-outer.ballies-gallery-active .ballies-g-item:nth-child(14) { animation-delay: 1.88s; }
.ballies-gallery-outer.ballies-gallery-active .ballies-g-item:nth-child(15) { animation-delay: 2.02s; }
.ballies-gallery-outer.ballies-gallery-active .ballies-g-item:nth-child(16) { animation-delay: 2.16s; }
.ballies-gallery-outer.ballies-gallery-active .ballies-g-item:nth-child(17) { animation-delay: 2.30s; }

/* Hover */
.ballies-g-item:hover {
  transform: scale(1.045) translateY(-4px);
  filter: drop-shadow(0 0 22px rgba(29,233,182,0.9))
          drop-shadow(0 0 55px rgba(29,233,182,0.32))
          brightness(1.06);
}

/* Exit */
.ballies-gallery-outer.ballies-gallery-exiting .ballies-g-item {
  animation: balliesItemShrink 0.45s cubic-bezier(0.55, 0, 0.85, 0.4) forwards !important;
  opacity: 1;
}
.ballies-gallery-outer.ballies-gallery-exiting .ballies-g-item:nth-child(3n+1) { animation-delay: 0.00s !important; }
.ballies-gallery-outer.ballies-gallery-exiting .ballies-g-item:nth-child(3n+2) { animation-delay: 0.05s !important; }
.ballies-gallery-outer.ballies-gallery-exiting .ballies-g-item:nth-child(3n+3) { animation-delay: 0.02s !important; }

/* Image */
.ballies-g-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ballies-g-item:hover .ballies-g-img {
  transform: scale(1.07);
}

/* Corner bracket decorations via CSS gradient */
.ballies-g-item::before {
  content: "";
  position: absolute;
  inset: 10px;
  background:
    linear-gradient(to right,  #1de9b6, #1de9b6) top    left  / 22px 2px no-repeat,
    linear-gradient(to bottom, #1de9b6, #1de9b6) top    left  / 2px 22px no-repeat,
    linear-gradient(to left,   #1de9b6, #1de9b6) top    right / 22px 2px no-repeat,
    linear-gradient(to bottom, #1de9b6, #1de9b6) top    right / 2px 22px no-repeat,
    linear-gradient(to right,  #1de9b6, #1de9b6) bottom left  / 22px 2px no-repeat,
    linear-gradient(to top,    #1de9b6, #1de9b6) bottom left  / 2px 22px no-repeat,
    linear-gradient(to left,   #1de9b6, #1de9b6) bottom right / 22px 2px no-repeat,
    linear-gradient(to top,    #1de9b6, #1de9b6) bottom right / 2px 22px no-repeat;
  z-index: 2;
  pointer-events: none;
  opacity: 0.55;
  transition: opacity 0.35s ease;
}
.ballies-g-item:hover::before {
  opacity: 1;
  background:
    linear-gradient(to right,  #1de9b6, #1de9b6) top    left  / 32px 2px no-repeat,
    linear-gradient(to bottom, #1de9b6, #1de9b6) top    left  / 2px 32px no-repeat,
    linear-gradient(to left,   #1de9b6, #1de9b6) top    right / 32px 2px no-repeat,
    linear-gradient(to bottom, #1de9b6, #1de9b6) top    right / 2px 32px no-repeat,
    linear-gradient(to right,  #1de9b6, #1de9b6) bottom left  / 32px 2px no-repeat,
    linear-gradient(to top,    #1de9b6, #1de9b6) bottom left  / 2px 32px no-repeat,
    linear-gradient(to left,   #1de9b6, #1de9b6) bottom right / 32px 2px no-repeat,
    linear-gradient(to top,    #1de9b6, #1de9b6) bottom right / 2px 32px no-repeat;
}

/* Scan line on hover */
.ballies-g-item::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 35%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(29,233,182,0.07) 50%,
    transparent 100%);
  top: -35%;
  z-index: 3;
  pointer-events: none;
}
.ballies-g-item:hover::after {
  animation: balliesGScan 0.9s ease-in-out;
}
@keyframes balliesGScan {
  from { top: -35%; }
  to   { top: 110%;  }
}

/* Scrollbar */
.ballies-g-scrollbar {
  position: absolute;
  right: -22px;
  top: 0;
  width: 4px;
  height: var(--gvis-h);
  display: none;
  background: rgba(29,233,182,0.06);
  border-radius: 2px;
}
.ballies-gallery-outer.ballies-gallery-active .ballies-g-scrollbar {
  display: block;
}
.ballies-g-sb-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.ballies-g-sb-thumb {
  position: absolute;
  left: -2px;
  width: 8px;
  min-height: 32px;
  background: linear-gradient(180deg, #1de9b6 0%, #00c896 100%);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(29,233,182,0.9), 0 0 22px rgba(29,233,182,0.4);
  cursor: ns-resize;
  transition: box-shadow 0.2s ease;
}
.ballies-g-sb-thumb:hover,
.ballies-g-sb-thumb.dragging {
  box-shadow: 0 0 16px rgba(29,233,182,1), 0 0 36px rgba(29,233,182,0.6);
}

/* ============================================================
   LA BOO — Vertical Video Gallery
   ============================================================ */

/* Grid wrapper for both pages */
.laboo-v-wrap {
  width: 100%;
  max-width: 1220px;
  margin: 64px auto 0;
  padding: 0 24px 24px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.laboo-v-wrap--hidden { display: none; }

/* Individual vertical card */
.laboo-v-item {
  position: relative;
  aspect-ratio: 9 / 16;
  cursor: pointer;
  opacity: 0;
  will-change: transform;
}
/* Animate IN — holographic materialisation */
.laboo-v-item.lbv-anim-in {
  animation: lbvIn 0.52s cubic-bezier(0.16,1,0.3,1) both;
  animation-delay: var(--lbv-d, 0s);
}
@keyframes lbvIn {
  0% {
    opacity: 0;
    transform: translateY(26px) scaleY(0.78);
    filter: brightness(3) saturate(0) blur(2px);
  }
  35% {
    filter: brightness(1.25) saturate(0.4) blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    filter: brightness(1) saturate(1) blur(0);
  }
}

/* Animate OUT — hologram dissolve */
.laboo-v-item.lbv-anim-out {
  animation: lbvOut 0.22s ease-in both;
  animation-delay: var(--lbv-d, 0s);
  pointer-events: none;
}
@keyframes lbvOut {
  0% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    filter: brightness(1) saturate(1);
  }
  55% {
    filter: brightness(2.2) saturate(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-12px) scaleY(0.82);
    filter: brightness(3) saturate(0) blur(1px);
  }
}

/* Clipped octagonal container — narrower cuts for vertical */
.laboo-v-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #030d0a;
  clip-path: polygon(
    14px 0%, calc(100% - 14px) 0%,
    100% 14px, 100% calc(100% - 14px),
    calc(100% - 14px) 100%, 14px 100%,
    0% calc(100% - 14px), 0% 14px
  );
  transition: filter 0.4s ease;
}

/* Octagonal border */
.laboo-v-item::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(
    14px 0%, calc(100% - 14px) 0%,
    100% 14px, 100% calc(100% - 14px),
    calc(100% - 14px) 100%, 14px 100%,
    0% calc(100% - 14px), 0% 14px
  );
  border: 1.5px solid rgba(29,233,182,0.30);
  pointer-events: none;
  z-index: 8;
  transition: border-color 0.4s ease;
}
.laboo-v-item:hover::after {
  border-color: rgba(29,233,182,0.90);
}

/* Corner brackets */
.laboo-v-item::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  opacity: 0.4;
  transition: opacity 0.35s ease;
  background:
    linear-gradient(to right,  #1de9b6, #1de9b6) top    left  / 18px 1.5px no-repeat,
    linear-gradient(to bottom, #1de9b6, #1de9b6) top    left  / 1.5px 18px no-repeat,
    linear-gradient(to left,   #1de9b6, #1de9b6) top    right / 18px 1.5px no-repeat,
    linear-gradient(to bottom, #1de9b6, #1de9b6) top    right / 1.5px 18px no-repeat,
    linear-gradient(to right,  #1de9b6, #1de9b6) bottom left  / 18px 1.5px no-repeat,
    linear-gradient(to top,    #1de9b6, #1de9b6) bottom left  / 1.5px 18px no-repeat,
    linear-gradient(to left,   #1de9b6, #1de9b6) bottom right / 18px 1.5px no-repeat,
    linear-gradient(to top,    #1de9b6, #1de9b6) bottom right / 1.5px 18px no-repeat;
}
.laboo-v-item:hover::before { opacity: 1; }

/* Glow on hover */
.laboo-v-item:hover .laboo-v-clip {
  filter:
    drop-shadow(0 0 10px rgba(29,233,182,0.55))
    drop-shadow(0 0 28px rgba(29,233,182,0.28));
}

/* Thumbnail */
.laboo-v-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1), filter 0.4s ease;
  filter: brightness(0.75) saturate(0.88);
}
.laboo-v-item:hover:not(.playing) .laboo-v-thumb {
  transform: scale(1.04);
  filter: brightness(0.88) saturate(1);
}
.laboo-v-item.playing .laboo-v-thumb { opacity: 0; }

/* iframe */
.laboo-v-iframe-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.laboo-v-iframe-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  pointer-events: none;
}

/* Veil */
.laboo-v-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    180deg,
    rgba(3,13,10,0.22) 0%,
    transparent 22%,
    transparent 78%,
    rgba(3,13,10,0.28) 100%
  );
  transition: opacity 0.35s ease;
}
.laboo-v-item.playing .laboo-v-veil { opacity: 0.1; }

/* Play button */
.laboo-v-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(29,233,182,0.7);
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.35s ease;
}
.laboo-v-play::after {
  content: '';
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 7px 0 7px 13px;
  border-color: transparent transparent transparent #1de9b6;
  filter: drop-shadow(0 0 5px rgba(29,233,182,0.9));
}
.laboo-v-item:hover .laboo-v-play {
  transform: translate(-50%, -50%) scale(1.14);
  border-color: rgba(29,233,182,1);
}
.laboo-v-item.playing .laboo-v-play {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
}

/* Scan sweep on hover */
.laboo-v-scan {
  position: absolute;
  left: 0; right: 0; height: 35%;
  background: linear-gradient(180deg, transparent 0%, rgba(29,233,182,0.06) 50%, transparent 100%);
  top: -35%; z-index: 5; pointer-events: none;
}
.laboo-v-item:hover .laboo-v-scan {
  animation: lbvScan 2.2s ease-in-out infinite;
}
@keyframes lbvScan {
  from { top: -35%; }
  to   { top: 110%; }
}

/* Number badge */
.laboo-v-num {
  position: absolute;
  bottom: 10px; right: 10px;
  z-index: 7;
  font-family: 'Orbitron', sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(29,233,182,0.40);
  pointer-events: none;
  transition: color 0.35s ease, text-shadow 0.35s ease;
}
.laboo-v-item:hover .laboo-v-num {
  color: rgba(29,233,182,0.95);
  text-shadow: 0 0 10px rgba(29,233,182,0.7);
}

/* Page dots */
.laboo-dots {
  position: fixed;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 10;
}
#labooPage.pp-active .laboo-dots { opacity: 1; pointer-events: auto; }
.laboo-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(29,233,182,0.35);
  border: 1px solid rgba(29,233,182,0.5);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.laboo-dot.laboo-dot--active {
  background: #1de9b6;
  box-shadow: 0 0 8px rgba(29,233,182,0.8), 0 0 18px rgba(29,233,182,0.4);
  transform: scale(1.3);
}

/* ============================================================
   WALL STREET GAMES — Video Grid
   ============================================================ */
.wsg-videos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: calc(100% - 60px);
  max-width: 1200px;
  margin: 90px auto 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
#wsgPage.pp-active .wsg-videos {
  opacity: 1;
}

/* Item */
.wsg-v-item {
  position: relative;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  opacity: 0;
  perspective: 1000px;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), z-index 0s;
  z-index: 1;
}
.wsg-v-item:hover {
  transform: scale(1.04);
  z-index: 2;
}

/* Animate-in / animate-out */
.wsg-v-item.wsg-anim-in {
  animation: wsgIn 0.62s cubic-bezier(0.16,1,0.3,1) both;
  animation-delay: var(--wsg-d, 0s);
}
.wsg-v-item.wsg-anim-out {
  animation: wsgOut 0.26s ease-in both;
  animation-delay: var(--wsg-d, 0s);
  pointer-events: none;
}
@keyframes wsgIn {
  0%   { opacity: 0; transform: perspective(900px) rotateX(-62deg) translateY(-28px) scale(0.80); filter: brightness(4.5) saturate(0) blur(3px); }
  40%  { filter: brightness(1.4) saturate(0.4) blur(0); }
  100% { opacity: 1; transform: perspective(900px) rotateX(0deg) translateY(0) scale(1); filter: brightness(1) saturate(1) blur(0); }
}
@keyframes wsgOut {
  0%   { opacity: 1; transform: perspective(900px) rotateX(0deg) translateY(0) scale(1); filter: brightness(1) saturate(1); }
  50%  { filter: brightness(3) saturate(0); }
  100% { opacity: 0; transform: perspective(900px) rotateX(38deg) translateY(18px) scale(0.84); filter: brightness(4) saturate(0) blur(2px); }
}

/* 3D tilt inner */
.wsg-v-inner {
  position: absolute;
  inset: 0;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
  transition: transform 0.14s ease;
  transform-origin: center center;
}
.wsg-v-item:hover .wsg-v-inner { --rx: 0deg; --ry: 0deg; }

/* Border */
.wsg-v-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(29,233,182,0.18);
  pointer-events: none;
  z-index: 10;
  transition: border-color 0.38s ease, box-shadow 0.38s ease;
}
.wsg-v-item:hover::after {
  border-color: rgba(29,233,182,0.75);
  box-shadow:
    0 0 16px 2px  rgba(29,233,182,0.50),
    0 0 45px 8px  rgba(29,233,182,0.22),
    0 0 90px 18px rgba(29,233,182,0.08),
    inset 0 0 24px rgba(29,233,182,0.04);
}

/* Corner brackets */
.wsg-v-item::before {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  z-index: 11;
  opacity: 0;
  transition: opacity 0.35s ease;
  background:
    linear-gradient(to right,  #1de9b6, #1de9b6) top    left  / 20px 2px no-repeat,
    linear-gradient(to bottom, #1de9b6, #1de9b6) top    left  / 2px 20px no-repeat,
    linear-gradient(to left,   #1de9b6, #1de9b6) top    right / 20px 2px no-repeat,
    linear-gradient(to bottom, #1de9b6, #1de9b6) top    right / 2px 20px no-repeat,
    linear-gradient(to right,  #1de9b6, #1de9b6) bottom left  / 20px 2px no-repeat,
    linear-gradient(to top,    #1de9b6, #1de9b6) bottom left  / 2px 20px no-repeat,
    linear-gradient(to left,   #1de9b6, #1de9b6) bottom right / 20px 2px no-repeat,
    linear-gradient(to top,    #1de9b6, #1de9b6) bottom right / 2px 20px no-repeat;
  filter: drop-shadow(0 0 3px rgba(29,233,182,0.85));
}
.wsg-v-item:hover::before { opacity: 1; }

/* Clipped content container */
.wsg-v-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #030d0a;
  transition: filter 0.38s ease;
}
.wsg-v-item:hover .wsg-v-clip { filter: brightness(1.05); }

/* Digital flicker on playing */
.wsg-v-item.playing .wsg-v-clip {
  animation: wsgFlicker 8s step-end infinite;
}
@keyframes wsgFlicker {
  0%, 96%, 100% { filter: none; }
  97%  { filter: brightness(1.08) contrast(1.04); }
  98%  { filter: brightness(0.96); }
  99%  { filter: brightness(1.04); }
}

/* iframe wrapper */
.wsg-v-iframe-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.wsg-v-iframe-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  pointer-events: none;
}

/* Thumbnail */
.wsg-v-thumb {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 2;
  transition: opacity 0.55s ease,
              transform 0.55s cubic-bezier(0.16,1,0.3,1),
              filter 0.45s ease;
  filter: brightness(0.70) saturate(0.80);
}
.wsg-v-item:hover:not(.playing) .wsg-v-thumb {
  transform: scale(1.05);
  filter: brightness(0.90) saturate(1.05);
}
.wsg-v-item.playing .wsg-v-thumb { opacity: 0; }

/* Veil */
.wsg-v-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    180deg,
    rgba(3,13,10,0.18) 0%,
    transparent 22%,
    transparent 78%,
    rgba(3,13,10,0.22) 100%
  );
  transition: opacity 0.35s ease;
}
.wsg-v-item.playing .wsg-v-veil { opacity: 0.10; }

/* Play button */
.wsg-v-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(29,233,182,0.65);
  background: rgba(0,0,0,0.40);
  backdrop-filter: blur(8px);
  transition: opacity 0.35s ease,
              transform 0.35s cubic-bezier(0.16,1,0.3,1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}
.wsg-v-play::after {
  content: '';
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 16px;
  border-color: transparent transparent transparent #1de9b6;
  filter: drop-shadow(0 0 6px rgba(29,233,182,0.9));
}
.wsg-v-item:hover .wsg-v-play {
  transform: translate(-50%, -50%) scale(1.16);
  border-color: rgba(29,233,182,1);
  box-shadow: 0 0 18px rgba(29,233,182,0.55), 0 0 38px rgba(29,233,182,0.22);
}
.wsg-v-item.playing .wsg-v-play {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
}

/* Horizontal scan line (moves top to bottom on hover) */
.wsg-v-scan {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(29,233,182,0.7) 20%,
    rgba(29,233,182,1)   50%,
    rgba(29,233,182,0.7) 80%,
    transparent 100%
  );
  box-shadow: 0 0 8px rgba(29,233,182,0.6), 0 0 20px rgba(29,233,182,0.3);
  top: -2px;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
}
.wsg-v-item:hover .wsg-v-scan {
  animation: wsgHorizScan 1.8s ease-in-out infinite;
}
@keyframes wsgHorizScan {
  0%   { top: -2px;  opacity: 0; }
  4%   { opacity: 1; }
  96%  { opacity: 1; }
  100% { top: 100%;  opacity: 0; }
}

/* Light sweep on reveal */
.wsg-v-sweep {
  position: absolute;
  top: 0; left: -100%;
  width: 55%; height: 100%;
  z-index: 5; pointer-events: none;
  background: linear-gradient(
    108deg,
    transparent 28%,
    rgba(29,233,182,0.07) 50%,
    transparent 72%
  );
  opacity: 0;
}
.wsg-v-item.wsg-revealed .wsg-v-sweep {
  animation: wsgSweep 1s 0.1s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes wsgSweep {
  from { left: -100%; opacity: 1; }
  to   { left: 160%;  opacity: 1; }
}

/* Number label */
.wsg-v-num {
  position: absolute;
  bottom: 12px; right: 14px;
  z-index: 7;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(29,233,182,0.38);
  pointer-events: none;
  transition: color 0.35s ease, text-shadow 0.35s ease;
}
.wsg-v-item:hover .wsg-v-num {
  color: rgba(29,233,182,0.95);
  text-shadow: 0 0 10px rgba(29,233,182,0.7);
}

/* WSG Page dots */
.wsg-dots {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 10;
}
#wsgPage.pp-active .wsg-dots { opacity: 1; pointer-events: auto; }
.wsg-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(29,233,182,0.35);
  border: 1px solid rgba(29,233,182,0.5);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.wsg-dot.wsg-dot--active {
  background: #1de9b6;
  box-shadow: 0 0 8px rgba(29,233,182,0.8), 0 0 18px rgba(29,233,182,0.4);
  transform: scale(1.3);
}

/* WSG Gallery outer */
.wsg-gallery-outer {
  display: none;
  width: 100%;
  align-self: stretch;
  flex: 1;
  min-height: 0;
  margin-top: 58px;
  padding: 0 60px 52px;
  box-sizing: border-box;
}
.wsg-gallery-outer.wsg-gallery-active { display: flex; flex-direction: column; }
.wsg-gallery-wrap {
  width: 100%;
  max-width: 1200px;
  flex: 1;
  min-height: 0;
  max-height: calc((100vh - 320px) * 0.8);
  margin: 0 auto;
  overflow: visible;
  padding: 0;
  box-sizing: border-box;
}
.wsg-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 22px;
  height: 100%;
}
.wsg-g-item[data-span="2"] { grid-column: span 2; }
.wsg-g-item[data-span="3"] { grid-column: span 3; }

@keyframes wsgGalleryPowerOn {
  0% {
    opacity: 0;
    transform: scale(0.9);
    filter: brightness(8) blur(16px) saturate(2.5);
  }
  16% {
    opacity: 1;
    transform: scale(0.95);
    filter: brightness(3) blur(7px) saturate(1.5);
  }
  52% {
    transform: scale(1.015);
    filter: brightness(1.2) blur(0.8px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}

/* Entry */
.wsg-gallery-outer.wsg-gallery-active .wsg-g-item {
  animation: wsgGalleryPowerOn 1.1s cubic-bezier(0.16,1,0.3,1) both;
}
.wsg-gallery-outer.wsg-gallery-active .wsg-g-item:nth-child(1) { animation-delay: 0.05s; }
.wsg-gallery-outer.wsg-gallery-active .wsg-g-item:nth-child(2) { animation-delay: 0.22s; }
.wsg-gallery-outer.wsg-gallery-active .wsg-g-item:nth-child(3) { animation-delay: 0.38s; }
.wsg-gallery-outer.wsg-gallery-active .wsg-g-item:nth-child(4) { animation-delay: 0.54s; }
.wsg-gallery-outer.wsg-gallery-active .wsg-g-item:nth-child(5) { animation-delay: 0.70s; }
.wsg-gallery-outer.wsg-gallery-active .wsg-g-item:nth-child(6) { animation-delay: 0.86s; }
.wsg-gallery-outer.wsg-gallery-active .wsg-g-item:nth-child(7) { animation-delay: 1.02s; }

/* Exit */
.wsg-gallery-outer.wsg-gallery-exiting .wsg-g-item {
  animation: balliesItemShrink 0.42s cubic-bezier(0.55,0,0.85,0.4) forwards !important;
  opacity: 1;
}
.wsg-gallery-outer.wsg-gallery-exiting .wsg-g-item:nth-child(3n+1) { animation-delay: 0.00s !important; }
.wsg-gallery-outer.wsg-gallery-exiting .wsg-g-item:nth-child(3n+2) { animation-delay: 0.05s !important; }
.wsg-gallery-outer.wsg-gallery-exiting .wsg-g-item:nth-child(3n+3) { animation-delay: 0.02s !important; }

/* Item card */
.wsg-g-item {
  position: relative;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(220,170,40,0);
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.45s ease;
}
.wsg-g-item:hover {
  transform: scale(1.04) translateY(-3px);
  box-shadow:
    0 0 10px 2px  rgba(220,170,40,0.45),
    0 0 28px 6px  rgba(220,170,40,0.20),
    0 0 55px 12px rgba(200,140,0,0.10);
  z-index: 10;
}
/* Inner clip — holds clip-path so the outer item's filter shadow is never clipped */
.wsg-g-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #030d0a;
  clip-path: polygon(14px 0%, calc(100% - 14px) 0%, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0% calc(100% - 14px), 0% 14px);
}
.wsg-g-item::before {
  content: '';
  position: absolute;
  inset: 8px;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background:
    linear-gradient(to right,  #1de9b6, #1de9b6) top    left  / 18px 2px no-repeat,
    linear-gradient(to bottom, #1de9b6, #1de9b6) top    left  / 2px 18px no-repeat,
    linear-gradient(to left,   #1de9b6, #1de9b6) top    right / 18px 2px no-repeat,
    linear-gradient(to bottom, #1de9b6, #1de9b6) top    right / 2px 18px no-repeat,
    linear-gradient(to right,  #1de9b6, #1de9b6) bottom left  / 18px 2px no-repeat,
    linear-gradient(to top,    #1de9b6, #1de9b6) bottom left  / 2px 18px no-repeat,
    linear-gradient(to left,   #1de9b6, #1de9b6) bottom right / 18px 2px no-repeat,
    linear-gradient(to top,    #1de9b6, #1de9b6) bottom right / 2px 18px no-repeat;
}
.wsg-g-item:hover::before { opacity: 1; }
.wsg-g-clip::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 32%;
  background: linear-gradient(180deg, transparent 0%, rgba(29,233,182,0.07) 50%, transparent 100%);
  top: -32%;
  z-index: 3;
  pointer-events: none;
}
.wsg-g-item:hover .wsg-g-clip::after { animation: balliesGScan 2s ease-in-out infinite; }

.wsg-g-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.wsg-g-item:hover .wsg-g-img { transform: scale(1.06); }

/* B-group triptych */
.wsg-bgroup { display: flex; width: 100%; height: 100%; gap: 3px; }
.wsg-bgroup-panel { flex: 1; position: relative; overflow: hidden; }
.wsg-bgroup-panel img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.wsg-g-item:hover .wsg-bgroup-panel img { transform: scale(1.06); }
.wsg-bgroup-label {
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-family: 'Orbitron', sans-serif;
  font-size: 8px; font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(29,233,182,0.5);
  white-space: nowrap;
  pointer-events: none;
  transition: color 0.3s ease;
}
.wsg-g-item:hover .wsg-bgroup-label { color: rgba(29,233,182,0.95); }

/* WSG gallery scrollbar — hidden (no scroll layout) */
.wsg-g-scrollbar { display: none; }

/* WSG B-group lightbox */
.wsg-bgroup-lb {
  position: fixed; inset: 0;
  background: rgba(2,8,6,0.9);
  backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
}
.wsg-bgroup-lb.wsg-bgroup-lb--active { opacity: 1; pointer-events: auto; }
.wsg-bgroup-lb-inner {
  position: relative;
  width: min(92vw, 860px);
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(29,233,182,0.5) transparent;
  display: flex; flex-direction: column; gap: 10px;
}
.wsg-bgroup-lb-inner::-webkit-scrollbar { width: 4px; }
.wsg-bgroup-lb-inner::-webkit-scrollbar-thumb { background: rgba(29,233,182,0.5); border-radius: 2px; }
.wsg-bgroup-lb-close {
  position: absolute; top: -44px; right: 0;
  background: none;
  border: 1px solid rgba(29,233,182,0.5);
  color: #1de9b6;
  font-size: 16px;
  width: 34px; height: 34px;
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.wsg-bgroup-lb-close:hover { background: rgba(29,233,182,0.15); border-color: #1de9b6; }
.wsg-bgroup-lb-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wsg-bgroup-lb-grid img {
  width: 100%;
  height: auto;
  object-fit: contain; display: block;
  border: 1px solid rgba(29,233,182,0.35);
  border-radius: 4px;
}

/* ============================================
   CONTACT PAGE
   ============================================ */

/* Back button must sit above contact-split (which has z-index:1) */
.contact-page .pp-back {
  z-index: 10;
}

/* Futuristic holographic power-on entry */
.contact-page {
  overflow: hidden;
  transition: none !important;
  padding-bottom: 120px;
}
.contact-page.pp-active {
  animation: contactPowerOn 0.72s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes contactPowerOn {
  0%   { opacity: 0; filter: brightness(4) saturate(0) blur(4px); transform: scale(0.985); }
  35%  { opacity: 1; filter: brightness(1.6) saturate(0.3) blur(0); transform: scale(0.993); }
  100% { opacity: 1; filter: none; transform: scale(1); }
}

/* Outer wrapper — centers the whole two-column block */
.contact-split {
  display: flex;
  width: 100%;
  flex: 1;
  min-height: 0;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 60px;
  align-items: center;
  gap: 80px;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

/* Left column */
.contact-left {
  flex: 1;
  min-width: 0;
  height: min(74vh, 756px);
  overflow: visible;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 60px;
}
.contact-left > * {
  width: 100%;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.contact-left::-webkit-scrollbar { width: 3px; }
.contact-left::-webkit-scrollbar-track { background: transparent; }
.contact-left::-webkit-scrollbar-thumb { background: rgba(29,233,182,0.22); border-radius: 2px; }

/* Info block */
.contact-info-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1) 0.2s, transform 0.6s cubic-bezier(0.16,1,0.3,1) 0.2s;
}
.contact-page.pp-active .contact-info-block { opacity: 1; transform: none; }
.contact-avail {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid rgba(29,233,182,0.18);
  border-radius: 100px;
  padding: 11px 20px;
  background: rgba(29,233,182,0.03);
  box-sizing: border-box;
}
.contact-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1de9b6;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(29,233,182,0.9);
  animation: statusPulse 2.2s ease-in-out infinite;
}
@keyframes statusPulse {
  0%, 100% { opacity: 1;    box-shadow: 0 0 7px rgba(29,233,182,0.9); }
  50%       { opacity: 0.5; box-shadow: 0 0 14px rgba(29,233,182,0.35); }
}
.contact-avail-text {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(29,233,182,0.55);
}
.contact-meta {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.contact-meta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  cursor: default;
  padding: 11px 4px;
  border-bottom: 1px solid rgba(29,233,182,0.07);
  transition: color 0.24s ease;
}
.contact-meta-row:last-child { border-bottom: none; }
a.contact-meta-row { cursor: pointer; }
a.contact-meta-row:hover .contact-meta-val,
.contact-meta-row--email:hover .contact-meta-email-link .contact-meta-val { color: rgba(29,233,182,0.95); }
a.contact-meta-row:hover .contact-meta-icon,
.contact-meta-row--email:hover .contact-meta-email-link .contact-meta-icon {
  color: rgba(29,233,182,1);
  filter: drop-shadow(0 0 5px rgba(29,233,182,0.65));
}
.contact-meta-row--email {
  display: flex;
  align-items: center;
  gap: 10px;
}
.contact-meta-email-link {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex: 1;
}
.contact-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(29,233,182,0.2);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  color: rgba(29,233,182,0.45);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.22s ease, border-color 0.22s ease, background 0.22s ease;
  position: relative;
}
.contact-copy-btn:hover {
  color: rgba(29,233,182,0.9);
  border-color: rgba(29,233,182,0.5);
  background: rgba(29,233,182,0.06);
}
.contact-copy-btn svg { width: 15px; height: 15px; flex-shrink: 0; position: absolute; transition: opacity 0.2s ease; }
.contact-copy-check { opacity: 0; }
.contact-copy-btn.copied .contact-copy-check { opacity: 1; color: rgba(29,233,182,1); }
.contact-copy-btn.copied svg:first-child { opacity: 0; }
.contact-meta-icon {
  font-size: 16px;
  color: rgba(29,233,182,0.5);
  width: 22px;
  text-align: center;
  flex-shrink: 0;
  transition: color 0.24s ease, filter 0.24s ease;
}
.contact-meta-val {
  font-size: 17px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.72);
  transition: color 0.24s ease;
}
.contact-headline-wrap {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.72s cubic-bezier(0.16,1,0.3,1) 0.15s, transform 0.72s cubic-bezier(0.16,1,0.3,1) 0.15s;
  width: 100%;
  text-align: center;
  padding: 28px 40px 0;
  box-sizing: border-box;
  flex-shrink: 0;
}
.contact-page.pp-active .contact-headline-wrap { opacity: 1; transform: none; }
.contact-headline {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.6rem, 4.5vw, 4.2rem);
  font-weight: 700;
  line-height: 1.15;
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}
.contact-headline-accent {
  background: linear-gradient(100deg, #1de9b6 20%, #00bcd4 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  cursor: default;
}
.contact-headline-wrap { cursor: default; }
.contact-headline-accent.ex-in {
  animation: exAccentIn 0.65s cubic-bezier(0.16,1,0.3,1) forwards;
}
.contact-headline-accent.ex-out {
  animation: exAccentOut 0.42s ease-in forwards;
}
@keyframes exAccentIn {
  0%   { letter-spacing: inherit; filter: drop-shadow(0 0 0px rgba(29,233,182,0)); }
  40%  { filter: drop-shadow(0 0 22px rgba(29,233,182,1)) drop-shadow(0 0 44px rgba(0,188,212,0.65)); }
  100% { letter-spacing: 0.32em; filter: drop-shadow(0 0 10px rgba(29,233,182,0.55)) drop-shadow(0 0 24px rgba(0,188,212,0.22)); }
}
@keyframes exAccentOut {
  0%   { letter-spacing: 0.32em; filter: drop-shadow(0 0 10px rgba(29,233,182,0.55)) drop-shadow(0 0 24px rgba(0,188,212,0.22)); }
  100% { letter-spacing: inherit; filter: drop-shadow(0 0 0px rgba(29,233,182,0)); }
}
.contact-subtext {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,0.5);
  margin-top: 14px;
  text-align: center;
}
.contact-section-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: rgba(29,233,182,0.55);
  text-transform: uppercase;
  margin-bottom: 12px;
  text-align: center;
}
.contact-services {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.68s cubic-bezier(0.16,1,0.3,1) 0.3s, transform 0.68s cubic-bezier(0.16,1,0.3,1) 0.3s;
}
.contact-page.pp-active .contact-services { opacity: 1; transform: none; }
.contact-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1) 0.32s, transform 0.6s cubic-bezier(0.16,1,0.3,1) 0.32s;
}
.contact-page.pp-active .contact-tags { opacity: 1; transform: none; }
.contact-tag { flex: 0 0 calc(50% - 4px); text-align: center; white-space: nowrap; }
.contact-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(29,233,182,0.88);
  border: 1px solid rgba(29,233,182,0.28);
  border-radius: 100px;
  padding: 7px 18px;
  background: rgba(29,233,182,0.04);
  cursor: default;
  transition: transform 0.26s cubic-bezier(0.16,1,0.3,1), border-color 0.26s ease, box-shadow 0.26s ease, background 0.26s ease;
}
.contact-tag:hover {
  transform: scale(1.06);
  border-color: rgba(29,233,182,0.75);
  background: rgba(29,233,182,0.09);
  box-shadow: 0 0 20px rgba(29,233,182,0.18), inset 0 0 10px rgba(29,233,182,0.06);
}
.contact-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.68s cubic-bezier(0.16,1,0.3,1) 0.44s, transform 0.68s cubic-bezier(0.16,1,0.3,1) 0.44s;
}
.contact-page.pp-active .contact-info { opacity: 1; transform: none; }
.contact-info-row {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: rgba(255,255,255,0.65);
  cursor: default;
  transition: color 0.24s ease, transform 0.24s ease;
}
a.contact-info-row { cursor: pointer; }
.contact-info-row:hover { color: rgba(29,233,182,0.95); transform: translateX(5px); }
.contact-info-icon {
  font-size: 15px;
  color: rgba(29,233,182,0.6);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  transition: color 0.24s ease, filter 0.24s ease;
}
.contact-info-row:hover .contact-info-icon {
  color: rgba(29,233,182,1);
  filter: drop-shadow(0 0 5px rgba(29,233,182,0.65));
}
.contact-info-text { font-size: 13px; letter-spacing: 0.04em; }
.contact-label {
  display: block;
  font-family: 'Orbitron', sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: rgba(29,233,182,0.48);
  text-transform: uppercase;
  margin-bottom: 7px;
}
.contact-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.68s cubic-bezier(0.16,1,0.3,1) 0.44s, transform 0.68s cubic-bezier(0.16,1,0.3,1) 0.44s;
}
.contact-form-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.contact-page.pp-active .contact-form { opacity: 1; transform: none; }
.contact-form-row { display: flex; gap: 12px; }
.contact-form-row .contact-field { flex: 1; }
.contact-input {
  width: 100%;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(29,233,182,0.18);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 13px;
  color: rgba(255,255,255,0.82);
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  appearance: none;
  -webkit-appearance: none;
}
.contact-input::placeholder { color: rgba(255,255,255,0.27); }
.contact-input:focus {
  border-color: rgba(29,233,182,0.6);
  background: rgba(29,233,182,0.035);
  box-shadow: 0 0 0 3px rgba(29,233,182,0.07), 0 0 22px rgba(29,233,182,0.08);
}
.contact-field-err {
  display: none;
  color: rgba(255, 70, 70, 0.9);
  font-size: 9px;
  letter-spacing: 0.12em;
  margin-left: 6px;
  font-family: 'Satoshi', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
}
.contact-field--error .contact-field-err {
  display: inline;
}
.contact-textarea { resize: none; min-height: 88px; }
.contact-select option { background: #1a1a1f; color: #fff; }
.contact-btn {
  position: relative;
  width: 100%;
  background: transparent;
  border: 1px solid rgba(29,233,182,0.42);
  border-radius: 100px;
  padding: 15px 40px;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(29,233,182,0.92);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.32s ease, box-shadow 0.32s ease;
}
.contact-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(29,233,182,0.14) 50%, transparent 100%);
  transform: translateX(-110%);
  transition: transform 0s;
}
.contact-btn:hover {
  border-color: rgba(29,233,182,0.8);
  box-shadow: 0 0 28px rgba(29,233,182,0.22), 0 0 55px rgba(29,233,182,0.09);
}
.contact-btn:hover::after {
  transform: translateX(110%);
  transition: transform 0.65s ease;
}
.contact-or {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  margin: 0;
  margin-top: auto;
}
.contact-btn-alt {
  border-color: rgba(0,188,212,0.35);
  color: rgba(0,188,212,0.85);
  margin-top: auto;
}
.contact-btn-alt:hover {
  border-color: rgba(0,188,212,0.75);
  box-shadow: 0 0 28px rgba(0,188,212,0.2), 0 0 55px rgba(0,188,212,0.08);
}
.contact-microcopy {
  font-size: 11px;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.08em;
  margin-top: -2px;
  text-align: center;
}
.contact-socials {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.68s cubic-bezier(0.16,1,0.3,1) 0.66s, transform 0.68s cubic-bezier(0.16,1,0.3,1) 0.66s;
}
.contact-page.pp-active .contact-socials { opacity: 1; transform: none; }
.contact-social-links { display: flex; gap: 10px; align-items: center; }
.contact-socials-footer {
  position: absolute;
  bottom: 52px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.68s cubic-bezier(0.16,1,0.3,1) 0.8s;
}
.contact-page.pp-active .contact-socials-footer { opacity: 1; }
.contact-footer-tags {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}
.contact-footer-tags .contact-tag {
  flex: none;
}
.contact-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(29,233,182,0.2);
  border-radius: 10px;
  background: rgba(29,233,182,0.04);
  color: rgba(29,233,182,0.6);
  text-decoration: none;
  transition: transform 0.28s cubic-bezier(0.16,1,0.3,1), border-color 0.28s ease, box-shadow 0.28s ease, color 0.28s ease;
}
.contact-social svg { width: 22px; height: 22px; flex-shrink: 0; }
.contact-social:hover {
  transform: translateY(-5px) scale(1.08);
  border-color: rgba(29,233,182,0.68);
  box-shadow: 0 8px 26px rgba(29,233,182,0.18);
  color: rgba(29,233,182,1);
}
.contact-footer-line {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(29,233,182,0.22);
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.68s cubic-bezier(0.16,1,0.3,1) 0.72s, transform 0.68s cubic-bezier(0.16,1,0.3,1) 0.72s;
}
.contact-page.pp-active .contact-footer-line { opacity: 1; transform: none; }
/* Right column — fixed width, image shifted right */
.contact-right {
  flex: 0 0 504px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-left: 28px;
}

/* Divider line */
.contact-right::after {
  content: '';
  position: absolute;
  left: -40px;
  top: 10%;
  height: 80%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(29,233,182,0.14) 25%, rgba(29,233,182,0.14) 75%, transparent);
  pointer-events: none;
}

/* Image frame */
.contact-img-frame {
  position: relative;
  height: min(74vh, 756px);
  aspect-ratio: 2 / 3;
  width: auto;
  max-width: 100%;
  opacity: 0;
  transform: scale(0.93) translateY(12px);
  transition:
    opacity 0.9s cubic-bezier(0.16,1,0.3,1) 0.4s,
    transform 0.9s cubic-bezier(0.16,1,0.3,1) 0.4s,
    box-shadow 0.45s ease;
}
.contact-page.pp-active .contact-img-frame {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ---- FUTURISTIC HOVER EFFECT ---- */

/* Corner brackets via multi-gradient background */
.contact-img-frame::before {
  content: '';
  position: absolute;
  inset: -5px;
  z-index: 5;
  border-radius: 17px;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(rgba(29,233,182,1), rgba(29,233,182,1)) top    left  / 22px 2px  no-repeat,
    linear-gradient(rgba(29,233,182,1), rgba(29,233,182,1)) top    left  / 2px  22px no-repeat,
    linear-gradient(rgba(29,233,182,1), rgba(29,233,182,1)) top    right / 22px 2px  no-repeat,
    linear-gradient(rgba(29,233,182,1), rgba(29,233,182,1)) top    right / 2px  22px no-repeat,
    linear-gradient(rgba(29,233,182,1), rgba(29,233,182,1)) bottom left  / 22px 2px  no-repeat,
    linear-gradient(rgba(29,233,182,1), rgba(29,233,182,1)) bottom left  / 2px  22px no-repeat,
    linear-gradient(rgba(29,233,182,1), rgba(29,233,182,1)) bottom right / 22px 2px  no-repeat,
    linear-gradient(rgba(29,233,182,1), rgba(29,233,182,1)) bottom right / 2px  22px no-repeat;
  filter: drop-shadow(0 0 5px rgba(29,233,182,0.9));
  transition: opacity 0.32s ease;
}
.contact-img-frame:hover::before { opacity: 1; }

/* Scale + outer glow on hover */
.contact-img-frame:hover {
  transform: scale(1.025) translateY(0) !important;
  box-shadow: 0 0 45px rgba(29,233,182,0.16), 0 0 90px rgba(29,233,182,0.07);
}

/* Border spins faster on hover */
.contact-img-frame:hover .contact-img-border {
  animation-duration: 2.5s;
}

/* Glow expands on hover */
.contact-img-frame:hover .contact-img-glow {
  opacity: 1 !important;
  transform: scale(1.18) !important;
}

/* Image slightly brightens */
.contact-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  z-index: 1;
  transition: filter 0.45s ease;
}
.contact-img-frame:hover .contact-img {
  filter: brightness(1.07) saturate(1.08);
}

/* Scan line sweeps top→bottom on hover */
.contact-img-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(29,233,182,0.85) 50%, transparent 100%);
  box-shadow: 0 0 8px rgba(29,233,182,0.7), 0 0 16px rgba(29,233,182,0.3);
  top: 0;
  z-index: 5;
  opacity: 0;
  border-radius: 2px;
  pointer-events: none;
}
.contact-img-frame:hover .contact-img-scan {
  animation: contactScanLine 2.4s linear infinite;
}
@keyframes contactScanLine {
  0%   { top: 0%;   opacity: 0; }
  4%   { opacity: 1; }
  92%  { opacity: 0.7; }
  100% { top: 100%; opacity: 0; }
}
.contact-particles-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 100px);
  height: calc(100% + 100px);
  pointer-events: none;
  z-index: 0;
}
.contact-img-glow {
  position: absolute;
  inset: -35px;
  background: radial-gradient(ellipse at center, rgba(29,233,182,0.11) 0%, transparent 68%);
  z-index: 0;
  animation: contactGlowPulse 4.5s ease-in-out infinite alternate;
}
@keyframes contactGlowPulse {
  from { opacity: 0.65; transform: scale(0.94); }
  to   { opacity: 1;    transform: scale(1.06); }
}
.contact-img-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 14px;
  background: linear-gradient(155deg, rgba(29,233,182,0.04) 0%, transparent 45%, rgba(0,0,0,0.14) 100%);
  pointer-events: none;
}
.contact-img-border {
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  z-index: 3;
  padding: 2px;
  background: conic-gradient(from var(--bg, 0deg), rgba(29,233,182,0.04), rgba(29,233,182,0.75), rgba(0,180,255,0.55), rgba(29,233,182,0.1), rgba(29,233,182,0.04));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spinBorder 7s linear infinite;
  pointer-events: none;
}
.contact-toast {
  position: fixed;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: rgba(11,11,14,0.96);
  border: 1px solid rgba(29,233,182,0.38);
  border-radius: 100px;
  padding: 12px 34px;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(29,233,182,0.92);
  opacity: 0;
  pointer-events: none;
  z-index: 200;
  box-shadow: 0 0 34px rgba(29,233,182,0.13);
  transition: opacity 0.38s ease, transform 0.38s cubic-bezier(0.16,1,0.3,1);
}
.contact-toast.contact-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.contact-page .pp-title-wrap { display: none; }

/* ---- RESPONSIVE ---- */
@media (max-width: 920px) {
  .contact-split {
    flex-direction: column;
    align-items: center;
    height: auto;
    min-height: 100%;
    overflow-y: auto;
    padding: 88px 32px 60px;
    gap: 48px;
  }
  .contact-left {
    height: auto;
    padding: 0;
    width: 100%;
    max-width: 480px;
  }
  .contact-right {
    flex: 0 0 auto;
    width: 100%;
    max-width: 300px;
  }
  .contact-right::after { display: none; }
}