*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#020202;color:#f4eee9;font-family:Georgia,'Times New Roman',serif}
.page{background:#020202}
.hero{
  width:100%;
  height:100vh;
  background:#020202;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  overflow-x:hidden;
}
.hero-image{
  display:block;
  width:100%;
  height:100vh;
  object-fit:contain;
  max-width:none;
}
.below{
  width:min(1180px,calc(100% - 32px));
  margin:40px auto 90px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.panel{
  border:1px solid rgba(216,0,24,.38);
  background:linear-gradient(145deg,rgba(35,5,8,.82),rgba(0,0,0,.86));
  padding:28px;
  min-height:180px;
}
h2{margin:0 0 12px;text-transform:uppercase;letter-spacing:.08em;color:#fff}
p{color:#b9aca5;line-height:1.65}
@media(max-width:900px){
  .below{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .hero{min-height:auto}
  .below{grid-template-columns:1fr}
}


/* DRACULAVERSE V2E sound button polish */
.sound, #soundToggle{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sound:hover, #soundToggle:hover{
  transform: scale(1.08);
  box-shadow: 0 0 28px rgba(216,0,24,.55);
}
.sound-on, #soundToggle.sound-on{
  border-color: rgba(255,0,28,.95) !important;
  box-shadow: 0 0 32px rgba(216,0,24,.7), inset 0 0 20px rgba(216,0,24,.28);
}


/* DRACULAVERSE V2F entrance gate: sound begins on entry click */
.enter-gate{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at center, rgba(120,0,18,.22), rgba(0,0,0,.96) 58%),
    #020202;
  color:#f4eee9;
  text-align:center;
  padding:24px;
  transition:opacity .85s ease, visibility .85s ease;
}
.enter-gate::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at bottom, rgba(255,255,255,.12), transparent 55%),
    linear-gradient(to bottom, transparent, rgba(0,0,0,.75));
  pointer-events:none;
}
.enter-gate-inner{
  position:relative;
  width:min(760px, 92vw);
  border:1px solid rgba(216,0,24,.45);
  background:linear-gradient(145deg, rgba(35,5,10,.84), rgba(0,0,0,.72));
  padding:clamp(32px,6vw,70px);
  box-shadow:0 0 80px rgba(216,0,24,.25), inset 0 0 40px rgba(0,0,0,.65);
}
.gate-kicker{
  color:#d2b374;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.85rem;
  margin:0 0 16px;
}
.enter-gate h1{
  margin:0 0 16px;
  font-size:clamp(3rem,8vw,7rem);
  line-height:.9;
  color:#fff;
  text-shadow:0 0 30px rgba(216,0,24,.35);
}
.enter-gate p{
  color:#cbbdb5;
  font-size:1.2rem;
}
#enterSiteButton{
  margin-top:26px;
  min-height:58px;
  padding:16px 38px;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(135deg,#65000b,#e0001d,#5e0009);
  color:#fff;
  font-family:Georgia,"Times New Roman",serif;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 0 38px rgba(216,0,24,.45), inset 0 0 22px rgba(0,0,0,.45);
}
#enterSiteButton:hover{
  filter:brightness(1.18);
}
.enter-gate.gate-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.sound, #soundToggle{
  display:none !important;
}


/* DRACULAVERSE V3B – Cinematic Sync */
.cinematic-sync-layer{
  position:fixed;
  inset:0;
  z-index:9;
  pointer-events:none;
  overflow:hidden;
}
.sync-lightning{
  position:absolute;
  inset:0;
  opacity:0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.78), transparent 19%),
    linear-gradient(120deg, transparent 0 14%, rgba(255,255,255,.62) 15%, transparent 17% 100%);
  mix-blend-mode:screen;
}
.sync-lightning-b{
  background:
    radial-gradient(circle at 82% 16%, rgba(255,255,255,.58), transparent 20%),
    linear-gradient(245deg, transparent 0 40%, rgba(255,255,255,.45) 41%, transparent 43% 100%);
}
.bass-vignette{
  position:absolute;
  inset:-5%;
  opacity:0;
  background:radial-gradient(circle at center, transparent 0 38%, rgba(216,0,24,.28) 62%, rgba(0,0,0,.75) 100%);
}
.neon-pulse{
  position:absolute;
  inset:0;
  opacity:0;
  background:
    radial-gradient(circle at 52% 44%, rgba(216,0,24,.30), transparent 28%),
    radial-gradient(circle at 50% 54%, rgba(255,60,70,.18), transparent 22%);
  mix-blend-mode:screen;
}
.sync-flash-a{
  animation:syncFlashA .9s ease-out both;
}
.sync-flash-b{
  animation:syncFlashB 1.15s ease-out both;
}
.sync-bass{
  animation:bassPulse .8s ease-out both;
}
.sync-neon{
  animation:neonGlow .95s ease-out both;
}
.sync-bat{
  position:absolute;
  left:-8vw;
  color:#050505;
  text-shadow:0 0 16px rgba(255,255,255,.35);
  opacity:0;
  font-size:clamp(22px,3vw,46px);
}
.sync-bat-a{top:18%}
.sync-bat-b{top:28%;font-size:clamp(18px,2.2vw,34px)}
.sync-bat-c{top:11%;font-size:clamp(14px,1.8vw,28px)}
.bat-burst-a{animation:batBurst 5.2s linear both}
.bat-burst-b{animation:batBurst 6.3s .25s linear both}
.bat-burst-c{animation:batBurst 7.1s .55s linear both}
.hero-swell .hero-image{
  animation:heroSwell 1.1s ease-out both;
}
.hero-awake .hero-image{
  filter:contrast(1.12) saturate(1.16) brightness(1.06);
}
@keyframes syncFlashA{
  0%,100%{opacity:0}
  8%{opacity:.72}
  14%{opacity:.06}
  22%{opacity:.42}
  34%{opacity:0}
}
@keyframes syncFlashB{
  0%,100%{opacity:0}
  12%{opacity:.45}
  20%{opacity:0}
  28%{opacity:.22}
  42%{opacity:0}
}
@keyframes bassPulse{
  0%{opacity:0;transform:scale(1)}
  18%{opacity:.9;transform:scale(1.018)}
  100%{opacity:0;transform:scale(1.055)}
}
@keyframes neonGlow{
  0%{opacity:0}
  20%{opacity:.95}
  100%{opacity:0}
}
@keyframes batBurst{
  0%{opacity:0;transform:translateX(-10vw) translateY(0) scale(.8)}
  8%{opacity:.88}
  55%{opacity:.75;transform:translateX(55vw) translateY(-8vh) scale(1.1)}
  100%{opacity:0;transform:translateX(112vw) translateY(3vh) scale(.75)}
}
@keyframes heroSwell{
  0%{transform:scale(1)}
  25%{transform:scale(1.012)}
  100%{transform:scale(1)}
}
.sync-note{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  z-index:9998;
  color:#d2b374;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(216,0,24,.35);
  padding:10px 16px;
  border-radius:999px;
  font-size:.9rem;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
}
.sync-note.show{opacity:1}


/* DRACULAVERSE V3C – Living Sky */
.living-sky{
  position:fixed;
  inset:0;
  z-index:7;
  pointer-events:none;
  overflow:hidden;
  mix-blend-mode:screen;
}
.sky-cloud{
  position:absolute;
  top:-10vh;
  width:80vw;
  height:42vh;
  opacity:.18;
  filter:blur(22px);
  background:
    radial-gradient(ellipse at 30% 40%, rgba(160,185,220,.42), transparent 45%),
    radial-gradient(ellipse at 62% 30%, rgba(120,145,185,.32), transparent 42%),
    radial-gradient(ellipse at 72% 65%, rgba(255,255,255,.16), transparent 48%);
}
.sky-cloud-a{
  left:-35vw;
  animation:cloudDriftA 64s linear infinite;
}
.sky-cloud-b{
  top:2vh;
  left:25vw;
  opacity:.12;
  transform:scale(1.2);
  animation:cloudDriftB 88s linear infinite;
}
.sky-cloud-c{
  top:8vh;
  left:65vw;
  opacity:.16;
  transform:scale(.86);
  animation:cloudDriftC 72s linear infinite;
}
.moon-breathe{
  position:absolute;
  top:6vh;
  right:8vw;
  width:18vw;
  height:18vw;
  max-width:260px;
  max-height:260px;
  border-radius:50%;
  opacity:.18;
  background:radial-gradient(circle, rgba(210,230,255,.65), rgba(160,180,220,.18) 35%, transparent 68%);
  filter:blur(14px);
  animation:moonBreathe 7s ease-in-out infinite;
}
.rain-shimmer{
  position:absolute;
  inset:-20%;
  opacity:.11;
  background-image:
    linear-gradient(115deg, transparent 0 47%, rgba(200,220,255,.22) 49%, transparent 51% 100%);
  background-size:34px 120px;
  animation:rainMove 1.2s linear infinite;
}
.sky-flash{
  position:absolute;
  inset:0;
  opacity:0;
  background:
    radial-gradient(circle at 16% 10%, rgba(255,255,255,.9), transparent 16%),
    radial-gradient(circle at 78% 12%, rgba(180,210,255,.5), transparent 22%);
}
.sky-flash.active{
  animation:skyFlash 1.1s ease-out both;
}
@keyframes cloudDriftA{
  from{transform:translateX(-8vw) translateY(0) scale(1)}
  to{transform:translateX(145vw) translateY(4vh) scale(1.08)}
}
@keyframes cloudDriftB{
  from{transform:translateX(60vw) translateY(0) scale(1.2)}
  to{transform:translateX(-120vw) translateY(2vh) scale(1.25)}
}
@keyframes cloudDriftC{
  from{transform:translateX(20vw) translateY(0) scale(.86)}
  to{transform:translateX(-125vw) translateY(-3vh) scale(.96)}
}
@keyframes moonBreathe{
  0%,100%{opacity:.12;transform:scale(.96)}
  50%{opacity:.26;transform:scale(1.06)}
}
@keyframes rainMove{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-34px,120px,0)}
}
@keyframes skyFlash{
  0%,100%{opacity:0}
  8%{opacity:.55}
  15%{opacity:.05}
  24%{opacity:.32}
  36%{opacity:0}
}
@media(max-width:700px){
  .living-sky{opacity:.72}
  .rain-shimmer{opacity:.07}
  .sky-cloud{height:25vh}
}

/* DRACULAVERSE V4A – Working top buttons, placeholder pages, music controls, Abbey-to-castle flythrough */
.top-nav{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:12000;
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:min(980px,calc(100% - 24px));
  padding:8px 10px;border:1px solid rgba(216,0,24,.42);border-radius:999px;
  background:rgba(0,0,0,.62);backdrop-filter:blur(10px);box-shadow:0 0 28px rgba(216,0,24,.2)
}
.top-nav a,.page-actions a,.track-btn,.track-stop{
  color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:.09em;font-size:.78rem;font-weight:700;
  border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:10px 14px;
  background:linear-gradient(145deg,rgba(72,0,9,.92),rgba(10,0,0,.76));cursor:pointer;font-family:Georgia,'Times New Roman',serif
}
.top-nav a:hover,.page-actions a:hover,.track-btn:hover,.track-stop:hover{filter:brightness(1.25);box-shadow:0 0 20px rgba(216,0,24,.45)}
.panel-link{display:block;color:inherit;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}.panel-link:hover{transform:translateY(-4px);box-shadow:0 0 35px rgba(216,0,24,.28)}
.subpage{background:#020202;min-height:100vh}.subpage-wrap{min-height:100vh;display:grid;place-items:center;padding:110px 18px 60px;background:radial-gradient(circle at 50% 0,rgba(120,0,18,.22),transparent 46%)}
.subpage-card{width:min(920px,100%);border:1px solid rgba(216,0,24,.44);background:linear-gradient(145deg,rgba(35,5,8,.88),rgba(0,0,0,.86));padding:clamp(28px,5vw,68px);box-shadow:0 0 70px rgba(216,0,24,.2),inset 0 0 55px rgba(0,0,0,.72)}
.subpage-card h1{font-size:clamp(3rem,8vw,6.5rem);line-height:.9;margin:0 0 20px;text-shadow:0 0 26px rgba(216,0,24,.38)}
.music-panel{margin-top:34px;padding:22px;border:1px solid rgba(210,179,116,.32);background:rgba(0,0,0,.38)}
.music-panel h2{font-size:1rem;color:#d2b374}.music-panel button{margin:6px}.page-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.flythrough-stage{position:absolute;inset:0;overflow:hidden;opacity:0;pointer-events:none;background:radial-gradient(circle at 50% 20%,rgba(80,95,130,.28),transparent 28%),linear-gradient(to bottom,#07101b 0%,#09080b 50%,#020202 100%)}
.fly-moon{position:absolute;top:9vh;left:14vw;width:13vw;height:13vw;max-width:180px;max-height:180px;border-radius:50%;background:radial-gradient(circle,rgba(240,245,255,.85),rgba(170,190,230,.24) 48%,transparent 70%);filter:blur(1px);box-shadow:0 0 80px rgba(190,210,255,.25)}
.fly-abbey,.fly-harbour,.fly-steps,.fly-castle{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;text-transform:uppercase;letter-spacing:.18em;color:#d2b374;text-shadow:0 0 18px #000,0 0 28px rgba(216,0,24,.35);font-size:clamp(1rem,3vw,2.4rem);opacity:0}
.fly-abbey{top:24vh}.fly-harbour{top:42vh}.fly-steps{top:58vh}.fly-castle{top:34vh;color:#fff;font-size:clamp(1.4rem,5vw,4rem)}
.fly-tunnel{position:absolute;inset:-20%;opacity:0;background:radial-gradient(ellipse at center,transparent 0 16%,rgba(216,0,24,.12) 17%,transparent 18% 23%,rgba(255,255,255,.08) 24%,transparent 25% 31%,rgba(216,0,24,.18) 32%,rgba(0,0,0,.92) 70%);transform:scale(1.7)}
.enter-gate.flying .enter-gate-inner{animation:gatePanelVanish .7s ease both}.enter-gate.flying .flythrough-stage{animation:flyStageOn 5.6s ease both}.enter-gate.flying .fly-abbey{animation:flyText 1.25s .2s ease both}.enter-gate.flying .fly-harbour{animation:flyText 1.35s 1.15s ease both}.enter-gate.flying .fly-steps{animation:flyText 1.3s 2.05s ease both}.enter-gate.flying .fly-castle{animation:flyCastle 1.8s 3.05s ease both}.enter-gate.flying .fly-tunnel{animation:flyTunnel 2.1s 3.1s ease-in both}
.hero.fly-arrive .hero-image{animation:arriveCastle 1.8s ease-out both}
@keyframes gatePanelVanish{to{opacity:0;transform:scale(.95)}}@keyframes flyStageOn{0%{opacity:0}8%,92%{opacity:1}100%{opacity:0}}@keyframes flyText{0%{opacity:0;transform:translateX(-50%) translateY(35px) scale(.72)}35%,70%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-18px) scale(1.35)}}@keyframes flyCastle{0%{opacity:0;transform:translateX(-50%) translateY(60px) scale(.38)}45%,78%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-8vh) scale(3.2)}}@keyframes flyTunnel{0%{opacity:0;transform:scale(1.7) rotate(0)}30%{opacity:.75}100%{opacity:0;transform:scale(.34) rotate(8deg)}}@keyframes arriveCastle{0%{transform:scale(1.08);filter:brightness(.65) blur(2px)}100%{transform:scale(1);filter:brightness(1) blur(0)}}
@media(max-width:760px){.top-nav{border-radius:18px}.top-nav a{font-size:.68rem;padding:8px 10px}.hero{padding-top:58px}.subpage-wrap{padding-top:140px}.music-panel button{width:100%;margin:6px 0}}