/*
Theme Name: Bellock Studios Gothic Coming Soon
Theme URI: https://bellock-studios.local
Author: Bellock Studios
Description: Animated gothic dark-purple landing page for Bellock Studios with clickable social buttons.
Version: 1.1.0
License: GPL-2.0-or-later
Text Domain: bellock-studios-gothic
*/

:root {
  --purple: #9b44ff;
  --purple-soft: #c99aff;
  --dark: #030207;
  --white: #f5efff;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #020105; }
body {
  font-family: 'Cinzel', Georgia, serif;
  color: var(--white);
  overflow: hidden;
}

.bellock-landing {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.65)),
    radial-gradient(circle at 50% 40%, rgba(122,43,255,.22), transparent 38%),
    url('assets/hero-bg.png') center center / cover no-repeat;
}

.bellock-landing::before,
.bellock-landing::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.bellock-landing::before {
  background:
    radial-gradient(circle at 50% 0%, rgba(176,91,255,.35), transparent 20%),
    radial-gradient(circle at 15% 50%, rgba(117,39,198,.26), transparent 32%),
    radial-gradient(circle at 88% 55%, rgba(117,39,198,.26), transparent 32%),
    linear-gradient(90deg, rgba(0,0,0,.72), transparent 28%, transparent 72%, rgba(0,0,0,.72));
  animation: pulseMist 5s ease-in-out infinite alternate;
}

.bellock-landing::after {
  background-image: linear-gradient(rgba(180, 92, 255, .25) 1px, transparent 1px), linear-gradient(90deg, rgba(180, 92, 255, .16) 1px, transparent 1px);
  background-size: 82px 82px;
  opacity: .08;
  transform: perspective(650px) rotateX(62deg) translateY(22%);
  transform-origin: bottom;
  animation: gridDrift 8s linear infinite;
}

.brand {
  position: fixed;
  top: clamp(24px, 5vh, 58px);
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(1.15rem, 2.3vw, 2.2rem);
  letter-spacing: .52em;
  text-indent: .52em;
  text-transform: uppercase;
  font-weight: 600;
  text-shadow: 0 0 14px rgba(255,255,255,.55), 0 0 32px rgba(150,58,255,.8);
  animation: brandGlow 3.5s ease-in-out infinite alternate;
}

.brand-line {
  position: fixed;
  top: clamp(74px, 11vh, 116px);
  width: min(430px, 60vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(151,62,255,.9), transparent);
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 14px rgba(151,62,255,.95);
}

.brand-line::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #d8b8ff;
  box-shadow: 0 0 18px 6px rgba(151,62,255,.9);
  animation: jewel 2s ease-in-out infinite;
}


.social-links {
  position: fixed;
  left: 50%;
  bottom: clamp(58px, 8vh, 78px);
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.75rem, 2vw, 1.25rem);
  padding: .65rem .9rem;
  border: 1px solid rgba(184, 108, 255, .22);
  border-radius: 999px;
  background: rgba(5, 2, 12, .42);
  box-shadow: 0 0 22px rgba(132, 42, 255, .32), inset 0 0 18px rgba(132, 42, 255, .12);
  backdrop-filter: blur(8px);
}

.social-links::before,
.social-links::after {
  content: '';
  position: absolute;
  top: 50%;
  width: min(18vw, 170px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(151,62,255,.75));
  pointer-events: none;
}

.social-links::before { right: 100%; transform: translateY(-50%); }
.social-links::after { left: 100%; transform: translateY(-50%) scaleX(-1); }

.social-link {
  width: clamp(42px, 5vw, 52px);
  height: clamp(42px, 5vw, 52px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #eadbff;
  text-decoration: none;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(198, 142, 255, .26), rgba(75, 22, 122, .36) 58%, rgba(8, 3, 15, .82));
  box-shadow: 0 0 18px rgba(151,62,255,.5), inset 0 0 12px rgba(214,175,255,.14);
  transition: transform .28s ease, color .28s ease, box-shadow .28s ease, background .28s ease;
}

.social-link svg {
  width: 52%;
  height: 52%;
  display: block;
  fill: currentColor;
  filter: drop-shadow(0 0 7px rgba(187, 117, 255, .92));
}

.social-link:hover,
.social-link:focus-visible {
  color: #ffffff;
  transform: translateY(-5px) scale(1.08);
  background: radial-gradient(circle at 50% 35%, rgba(225, 196, 255, .52), rgba(139, 48, 255, .58) 58%, rgba(20, 5, 38, .9));
  box-shadow: 0 0 28px rgba(185, 98, 255, .95), 0 0 54px rgba(103, 25, 190, .62), inset 0 0 18px rgba(255,255,255,.16);
  outline: none;
}

.particles span {
  position: absolute;
  bottom: -6vh;
  width: 2px;
  height: 2px;
  border-radius: 999px;
  background: #dabbff;
  box-shadow: 0 0 12px 4px rgba(151,62,255,.9);
  animation: rise var(--d) linear infinite;
  left: var(--x);
  opacity: .8;
}

.footer {
  position: fixed;
  bottom: 28px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: .82rem;
  color: rgba(224,213,239,.62);
  letter-spacing: .05em;
}

@keyframes pulseMist { from { opacity: .78; filter: saturate(1); } to { opacity: 1; filter: saturate(1.35); } }
@keyframes gridDrift { to { background-position: 0 82px, 82px 0; } }
@keyframes brandGlow { from { opacity: .78; } to { opacity: 1; } }
@keyframes jewel { 0%,100% { transform: translate(-50%, -50%) rotate(45deg) scale(.8); } 50% { transform: translate(-50%, -50%) rotate(45deg) scale(1.25); } }
@keyframes titleFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes titleFlicker { 0%, 100% { opacity: 1; } 12% { opacity: .92; } 14% { opacity: 1; } 54% { opacity: .96; } 56% { opacity: 1; } }
@keyframes rise { from { transform: translateY(0) scale(.75); opacity: 0; } 10% { opacity: .85; } to { transform: translateY(-112vh) scale(1.3); opacity: 0; } }
/* Mobile-only responsive refinements. Desktop styles above 720px are untouched. */
@media (max-width: 720px) {
  html,
  body {
    min-height: 100%;
    width: 100%;
    overflow-x: hidden;
  }

  body {
    overflow-y: hidden;
  }

  .bellock-landing {
    min-height: 100vh;
    min-height: 100svh;
    padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    background-position: center center;
  }

  .brand {
    top: clamp(22px, 7svh, 52px);
    left: 50%;
    right: auto;
    width: min(92vw, 420px);
    transform: translateX(-50%);
    font-size: clamp(1rem, 6vw, 1.65rem);
    line-height: 1.28;
    letter-spacing: clamp(.12em, 4vw, .28em);
    text-indent: clamp(.12em, 4vw, .28em);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .brand-line {
    top: clamp(84px, 16svh, 118px);
    width: min(76vw, 320px);
  }

  .social-links {
    bottom: max(58px, calc(env(safe-area-inset-bottom) + 46px));
    max-width: calc(100vw - 28px);
    gap: clamp(.45rem, 2.8vw, .65rem);
    padding: .5rem .62rem;
    flex-wrap: nowrap;
  }

  .social-links::before,
  .social-links::after {
    width: min(10vw, 42px);
  }

  .social-link {
    width: clamp(40px, 13vw, 48px);
    height: clamp(40px, 13vw, 48px);
    flex: 0 0 auto;
  }

  .footer {
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px));
    padding: 0 14px;
    font-size: clamp(.68rem, 3vw, .78rem);
    line-height: 1.35;
  }
}

@media (max-width: 380px) {
  .brand {
    font-size: clamp(.9rem, 6.2vw, 1.25rem);
    letter-spacing: .1em;
    text-indent: .1em;
  }

  .brand-line {
    top: clamp(76px, 15svh, 104px);
  }

  .social-links {
    gap: .38rem;
    padding: .46rem .5rem;
  }

  .social-link {
    width: clamp(36px, 12vw, 42px);
    height: clamp(36px, 12vw, 42px);
  }
}

@media (max-height: 560px) and (max-width: 720px) {
  .brand {
    top: 16px;
  }

  .brand-line {
    top: 68px;
  }

  .social-links {
    bottom: 42px;
  }

  .footer {
    bottom: 10px;
  }
}