/* Stone Galleria - particle intro layer for the existing hero slider.
   Only styles elements the script creates, plus a z-index on the tab bar. */

.tabing_slider { position: relative; }

.sg-intro {
  position: absolute;
  inset: 0;
  z-index: 4;
  /* warm graphite rather than pitch black, lifted slightly at the centre */
  background: var(--sg-bg, #22211F);
  background-image: radial-gradient(ellipse 70% 60% at 50% 42%, var(--sg-bg-centre, #2C2A27) 0%, var(--sg-bg, #22211F) 70%);
  animation: sg-in .6s ease-out both;
  transition: opacity .7s ease;
  touch-action: pan-y;          /* page still scrolls on phones */
}
.sg-intro canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.sg-intro.sg-intro-out { opacity: 0; pointer-events: none; }

/* the tab bar stays above the layer, visible and clickable */
.tabing_slider-nav { z-index: 5; }

@keyframes sg-in { from { opacity: 0; } to { opacity: 1; } }

/* small control to bring the intro back; only shown once it has been dismissed */
.sg-replay {
  position: absolute;
  right: clamp(14px, 3vw, 32px);
  bottom: 76px;                       /* set precisely by the script, above the tab bar */
  z-index: 5;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: scale(.9);
  transition: opacity .4s ease .35s, transform .4s ease .35s, visibility 0s linear .75s, border-color .2s, background .2s;
}
.sg-replay svg { width: 16px; height: 16px; fill: currentColor; }
.sg-intro-off .sg-replay { opacity: .75; visibility: visible; transform: none; transition-delay: .35s, .35s, 0s, 0s, 0s; }
.sg-replay:hover, .sg-replay:focus-visible { opacity: 1; border-color: #fff; background: rgba(0,0,0,.7); }
.sg-replay:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }


/* === Stone Galleria Hero Visual Upgrade === */

.tabing_slider {
    background:
        radial-gradient(circle at 20% 30%, rgba(196,171,141,0.12), transparent 28%),
        radial-gradient(circle at 78% 22%, rgba(255,255,255,0.05), transparent 18%),
        radial-gradient(circle at 60% 75%, rgba(120,98,78,0.12), transparent 24%),
        linear-gradient(135deg, #171718 0%, #23201f 38%, #2d2927 62%, #161616 100%);
}

/* Keep menu white */
header a,
.header a,
nav a,
.navbar a {
    color: #ffffff !important;
}

/* Option A: subtle light backing around the black logo */
header img,
.header img,
.navbar-brand img {
    position: relative;
    z-index: 5;
}

header .logo,
.header .logo,
.navbar-brand {
    position: relative;
    z-index: 5;
}

header .logo::before,
.header .logo::before,
.navbar-brand::before {
    content: "";
    position: absolute;
    inset: -10px -14px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: -1;
}