#loading {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  background: var(--deep-ui);
  font-family: var(--font-body);
  color: var(--cream-warm);
  user-select: none;
}

#loading .bg-plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  z-index: 0;
  filter: saturate(1.04) brightness(.98);
}
.dawn-grade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(70% 50% at 72% 40%, rgba(255, 180, 110, .20), transparent 60%),
    radial-gradient(120% 90% at 50% 120%, rgba(10, 8, 20, .62), transparent 62%),
    linear-gradient(180deg, rgba(40, 30, 64, .30), transparent 30%, transparent 66%, rgba(10, 30, 42, .40));
}

.loader-stage { position: absolute; inset: 0; z-index: 2; }

.loader-logo {
  position: absolute;
  top: clamp(8px, 3.6vh, 26px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(210px, 30vw, 392px);
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .6)) drop-shadow(0 0 30px rgba(var(--glow-warm), .14));
}
.loader-logo img { width: 100%; height: auto; display: block; }
.loader-logo-text {
  position: absolute;
  inset: 40% 17% 19% 17%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.loader-logo-text .sm {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(9px, 1.25vw, 16px);
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  color: var(--cream-warm);
  opacity: .92;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5), 0 0 12px rgba(var(--glow-warm), .3);
}
.loader-logo-text .lg {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(16px, 2.35vw, 30px);
  line-height: .94;
  letter-spacing: .02em;
  color: var(--gold-hot);
  text-shadow:
    0 2px 0 rgba(74, 38, 12, .9),
    0 3px 1px rgba(0, 0, 0, .6),
    0 0 22px rgba(255, 200, 110, .4);
}

/* centered loading duo: [ progress gauge | capybara ] */
.loader-duo {
  position: absolute;
  left: 50%;
  bottom: clamp(6%, 9vh, 13%);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(18px, 4.5vw, 64px);
}

.capy-wrap {
  position: relative;
  width: clamp(120px, 18.5vw, 236px);
  flex: none;
}
.capy-rest-glow {
  position: absolute;
  inset: 6% -6% 0 -6%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(58% 52% at 50% 42%, rgba(255, 190, 110, .18), transparent 70%);
  filter: blur(9px);
}
.capy-rest {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  opacity: .45;
  filter:
    brightness(.55) saturate(.8) contrast(1.05)
    drop-shadow(2px 0 0 rgba(124, 252, 208, .4))
    drop-shadow(-1px 0 0 rgba(255, 194, 90, .3))
    drop-shadow(0 14px 24px rgba(0, 0, 0, .55));
}

.buoy {
  position: absolute;
  left: 40%;
  bottom: 16%;
  width: clamp(46px, 6.7vw, 86px);
}
.buoy-aura {
  position: absolute;
  left: 50%;
  top: -30%;
  width: 175%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 194, 90, .45), rgba(255, 194, 90, .12) 42%, transparent 70%);
  filter: blur(2px);
  pointer-events: none;
}
.buoy-img {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .5)) drop-shadow(0 0 18px rgba(255, 194, 90, .4));
}
.buoy-reflect {
  position: absolute;
  left: 50%;
  top: 102%;
  width: 22%;
  height: 74%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 194, 90, .5), rgba(255, 194, 90, .05) 70%, transparent);
  filter: blur(3px);
  opacity: .8;
  animation: reflectWaver 4.4s var(--zen-ease) infinite;
}

.piling-rig {
  position: relative;
  width: clamp(112px, 15.3vw, 196px);
  flex: none;
  z-index: 3;
  text-align: center;
}
.piling-rig > img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(var(--glow-warm), .12));
}

.tide-gauge {
  position: absolute;
  top: 21%;
  left: 50%;
  transform: translateX(-50%);
  width: 21%;
  height: 50%;
  border-radius: 22px;
  padding: clamp(4px, .5vw, 6px);
  background: linear-gradient(180deg, var(--walnut-lo), #1D1107);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .75),
    inset 0 -1px 0 rgba(166, 115, 64, .4),
    0 0 0 3px var(--brass-lo),
    0 0 0 4px rgba(248, 224, 144, .45),
    0 6px 14px rgba(0, 0, 0, .5);
}
.tide-track {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 11px),
    linear-gradient(180deg, #160D06, #2A1909);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8);
}
.tide-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, var(--gem-gold) 0%, #FFB23E 42%, #E0892A 100%);
  box-shadow:
    0 0 16px rgba(255, 208, 90, .85),
    0 0 34px rgba(255, 200, 110, .5),
    inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: height .3s var(--zen-ease);
}
.tide-fill::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFF1C0, rgba(255, 208, 90, .2));
  box-shadow: 0 0 14px rgba(255, 224, 154, .9);
}
.tide-fill::after {
  content: '';
  position: absolute;
  left: 32%;
  bottom: 24%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
  box-shadow:
    6px 16px 0 -1px rgba(255, 255, 255, .5),
    -3px 30px 0 -2px rgba(255, 255, 255, .55);
}
.tide-gauge .tick {
  position: absolute;
  right: -9px;
  width: 7px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--brass-hi), var(--brass-lo));
  opacity: .8;
}
.tide-gauge .tick-low { top: 76%; }
.tide-gauge .tick-mid { top: 50%; width: 10px; }
.tide-gauge .tick-high { top: 24%; }

.tide-pct {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 13px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--brass-hi), #C89A36);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 16px rgba(var(--glow-warm), .4);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(13px, 1.35vw, 17px);
  color: #2A1A06;
  white-space: nowrap;
}

.gem-bezel {
  top: -32px;
  left: 50%;
  width: clamp(12px, 1.3vw, 16px);
  z-index: 2;
  box-shadow:
    0 0 13px var(--gem-c), 0 0 28px var(--gem-c), 0 0 44px var(--gem-c),
    inset 0 1px 2px rgba(255, 255, 255, .8);
}
.gem-bezel::after {
  content: '';
  position: absolute;
  inset: -70%;
  border-radius: 50%;
  border: 1px solid var(--gem-c);
  opacity: .35;
  animation: gemHalo 3.6s var(--zen-ease) infinite;
}

#loading .load-status {
  margin-top: clamp(8px, 2.2vh, 16px);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(12px, 1.25vw, 16px);
  letter-spacing: .02em;
  color: var(--cream-warm);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 0 14px rgba(var(--glow-warm), .22);
}
#loading .load-status::after {
  content: '…';
  color: var(--firefly);
}

.loader-mist {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 12%;
  height: clamp(60px, 16.6vh, 120px);
  background: linear-gradient(180deg, transparent, rgba(200, 210, 230, .10) 40%, rgba(180, 195, 225, .16));
  filter: blur(10px);
  z-index: 3;
  pointer-events: none;
}

.loader-swag {
  position: absolute;
  top: -14px;
  left: -4%;
  right: -4%;
  height: clamp(64px, 20vh, 150px);
  z-index: 4;
  pointer-events: none;
}
.loader-swag img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .4)) saturate(.92) brightness(.94);
}

#loading .fx { z-index: 5; }
.loader-lantern-l { top: clamp(56px, 13.3vh, 96px); left: 12%; }
.loader-lantern-r { top: clamp(64px, 15.5vh, 112px); right: 15%; animation-delay: -1.7s; }
.loader-bio-a { bottom: 9%; left: 30%; width: clamp(80px, 11.7vw, 150px); }
.loader-bio-b { bottom: 9%; left: 52%; width: clamp(60px, 8.6vw, 110px); animation-delay: -3s; }
.loader-bio-c { bottom: 9%; right: 16%; width: clamp(70px, 10vw, 130px); animation-delay: -1.6s; }

.loader-vignette {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  box-shadow: inset 0 0 140px rgba(8, 6, 16, .6), inset 0 0 40px rgba(8, 6, 16, .4);
}

@keyframes reflectWaver {
  0%, 100% { opacity: .8; transform: translateX(-50%) scaleY(1); }
  50% { opacity: .55; transform: translateX(-46%) scaleY(1.12); }
}

@media (orientation: landscape) and (max-height: 480px) {
  .loader-logo { width: clamp(170px, 24vw, 240px); }
  .loader-duo { bottom: clamp(8%, 12vh, 16%); gap: clamp(12px, 3vw, 36px); }
  .capy-wrap { width: clamp(96px, 15vw, 150px); }
  .piling-rig { width: clamp(96px, 13.5vw, 136px); }
  .loader-swag { height: clamp(44px, 14vh, 76px); }
  .loader-lantern-l { top: 44px; }
  .loader-lantern-r { top: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .buoy-reflect,
  .gem-bezel::after { animation: none !important; }
}