/* ===== Deep Blue Kraken: side-grip hero + under-hero reveal ===== */

body.ocean{
  position:relative;
  overflow-x:hidden;
}

.dbk-scene{
  position:absolute;
  inset:0 0 auto 0;
  height:2300px;
  pointer-events:none;
  z-index:auto;
}

.dbk-hero-side{
  position:absolute;
  top:96px;
  left:50%;
  width:min(1560px,110vw);
  height:770px;
  object-fit:fill;
  object-position:center top;
  transform:translateX(-50%);
  pointer-events:none;
  user-select:none;
  z-index:7;
  opacity:.7;
  filter:
    brightness(1.06)
    saturate(1.06)
    contrast(1.05)
    drop-shadow(0 10px 16px rgba(0,0,0,.6));
  -webkit-mask-image:linear-gradient(to bottom,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,1) 16%,
    rgba(0,0,0,1) 74%,
    rgba(0,0,0,.5) 90%,
    rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,1) 16%,
    rgba(0,0,0,1) 74%,
    rgba(0,0,0,.5) 90%,
    rgba(0,0,0,0) 100%);
}

.dbk-reveal{
  position:absolute;
  top:395px;
  left:50%;
  width:min(1180px,118vw);
  height:1780px;
  object-fit:fill;
  object-position:center top;
  transform:translateX(-50%);
  pointer-events:none;
  user-select:none;
}

.dbk-reveal--back{
  z-index:2;
  opacity:.32;
  filter:
    brightness(.5)
    saturate(.78)
    contrast(1.08)
    drop-shadow(0 34px 58px rgba(0,0,0,.82));
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.58) 11%,
    rgba(0,0,0,.96) 34%,
    rgba(0,0,0,.72) 62%,
    rgba(0,0,0,.14) 82%,
    rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.58) 11%,
    rgba(0,0,0,.96) 34%,
    rgba(0,0,0,.72) 62%,
    rgba(0,0,0,.14) 82%,
    rgba(0,0,0,0) 100%);
}

.dbk-reveal--grip{
  z-index:14;
  opacity:.24;
  clip-path:inset(0 16% 81% 16%);
  filter:
    brightness(.64)
    saturate(.8)
    contrast(1.04)
    drop-shadow(0 12px 18px rgba(0,0,0,.62));
}

/* Keep business content readable. */
.krk-hero > .mx-auto,
.dbk-section > .px-6,
.stat-banner > .stat-card{
  position:relative;
  z-index:12;
}

.stat-banner > .stat-card{
  z-index:13;
}

.stat-banner > .stat-card::before,
.stat-banner > .stat-card::after{
  content:"";
  position:absolute;
  top:-18px;
  width:86px;
  height:42px;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center, rgba(197,153,76,.25), rgba(197,153,76,0) 62%);
  filter:blur(8px);
}

.stat-banner > .stat-card::before{ left:18%; }
.stat-banner > .stat-card::after{ right:18%; }

.krk-hero{
  position:relative;
  overflow:hidden;
}

.krk-host{
  position:relative;
  overflow:hidden;
  isolation:auto;
}

.about-band{
  position:relative;
}

/* Hero sea-surface waves retained from the earlier ocean theme. */
.krk-waves{
  position:absolute;
  left:0;
  width:100%;
  height:90px;
  pointer-events:none;
  background-repeat:repeat-x;
  background-position:center bottom;
  background-size:1440px 100px;
}

.krk-wave-deep{ bottom:-1px; background-image:url('kraken/wave-deep.svg'); }
.krk-wave-aqua{ bottom:6px; height:80px; background-image:url('kraken/wave-aqua.svg'); background-size:1100px 90px; }

@media (max-width:900px){
  .dbk-scene{ height:1700px; opacity:.74; }
  .dbk-hero-side{ top:126px; width:166vw; height:610px; opacity:.28; }
  .dbk-reveal{ top:520px; width:140vw; height:1320px; }
  .dbk-reveal--grip{ opacity:.12; }
}

@media (max-width:640px){
  .dbk-scene{ height:1260px; opacity:.46; }
  .dbk-hero-side{ top:136px; width:238vw; height:500px; opacity:.2; }
  .dbk-reveal{ top:610px; width:178vw; height:1050px; }
  .dbk-reveal--back{ opacity:.11; }
  .dbk-reveal--grip{ display:none; }
  .krk-waves{ height:60px; }
}

@media (prefers-reduced-motion: reduce){
  .dbk-hero-side,
  .dbk-reveal{
    transform:translateX(-50%);
  }
}