/*
Theme Name: Fantasyverse
Theme URI: https://example.com/fantasyverse
Author: Fantasyverse Philippines
Description: Responsive, poster-led Fantasyverse Philippines landing page.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: fantasyverse
*/
:root {
  --ube: #24103f;
  --ube-deep: #10051f;
  --gold: #ffe66d;
  --white: #fffdfd;
  --lavender: #e8d9ff;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ube-deep); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--white);
  background: var(--ube-deep);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; }
.site-shell {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 2.3vw, 36px);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(16,5,31,.12), rgba(16,5,31,.18)),
    url("assets/fantasy-parade-hero.png") center center / cover no-repeat,
    var(--ube-deep);
}
.site-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 34%, rgba(10,3,20,.16) 100%);
  pointer-events: none;
}
.hero {
  width: min(100%, 1600px);
  min-height: calc(100svh - clamp(28px, 4.6vw, 72px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: clamp(12px, 2vw, 30px) 12px clamp(10px, 1.8vw, 26px);
}
.hero-content {
  width: 100%;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.5vh, 22px);
}
.social-section { width: 100%; margin-top: clamp(10px, 2vh, 24px); }
.social-label {
  margin: 0 0 clamp(9px, 1.3vh, 16px);
  color: rgba(255,255,255,.9);
  font-size: clamp(9px, .8vw, 13px);
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px #160329;
}
.social-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.3vw, 34px);
}
.social-link {
  --brand: #fff;
  --glow: rgba(255,230,109,.45);
  width: clamp(62px, 7.1vw, 104px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(5px, .8vh, 10px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--white);
  text-decoration: none;
  font-size: clamp(9px, .82vw, 14px);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(9,2,19,.95);
  box-shadow: none;
  transition: transform .22s ease, filter .22s ease;
}
.social-link::before { display: none; }
.social-link svg {
  display: block;
  width: clamp(52px, 5.7vw, 82px);
  height: clamp(52px, 5.7vw, 82px);
  padding: clamp(11px, 1.25vw, 18px);
  border: 2px solid var(--brand);
  border-radius: 50%;
  color: #fff;
  background: rgba(29,7,54,.46);
  box-shadow: 0 0 12px var(--glow), 0 0 26px var(--glow), inset 0 0 10px rgba(255,255,255,.08);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.social-link[aria-label^="Facebook"] { --brand: #3b82f6; --glow: rgba(24,119,242,.78); }
.social-link[aria-label^="Instagram"] { --brand: #ff4fc3; --glow: rgba(225,48,108,.78); }
.social-link[aria-label^="Threads"] { --brand: #c78aff; --glow: rgba(151,71,255,.8); }
.social-link[aria-label^="YouTube"] { --brand: #ff344b; --glow: rgba(255,0,51,.78); }
.social-link[aria-label^="TikTok"] { --brand: #25f4ee; --glow: rgba(37,244,238,.65); }
.social-link:hover, .social-link:focus-visible {
  transform: translateY(-5px);
  filter: brightness(1.16);
  outline: none;
}
.social-link:hover svg, .social-link:focus-visible svg {
  background: rgba(65,25,103,.8);
  box-shadow: 0 0 18px var(--glow), 0 0 40px var(--glow), inset 0 0 14px rgba(255,255,255,.16);
}
.social-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.social-link .arrow { display: none; }
.site-footer { display: none; }

/* Tablet portrait and phones: keep the poster dominant while preventing controls from clipping. */
@media (max-width: 800px) {
  .site-shell {
    min-height: 100svh;
    padding: 12px;
    background-position: center center;
  }
  .hero {
    min-height: calc(100svh - 24px);
    justify-content: flex-end;
    padding: 12px 4px 14px;
  }
  .social-links { gap: clamp(8px, 2.5vw, 20px); }
  .social-link { width: clamp(52px, 12vw, 82px); font-size: clamp(8px, 1.7vw, 12px); letter-spacing: .08em; }
  .social-link svg { width: clamp(44px, 10vw, 66px); height: clamp(44px, 10vw, 66px); padding: clamp(9px, 2.1vw, 14px); }
}
@media (max-width: 480px) {
  .site-shell {
    padding: 8px;
    background-size: auto 100%;
    background-position: center center;
  }
  .hero { min-height: calc(100svh - 16px); padding: 8px 0 12px; }
  .hero-content { gap: 8px; }
  .social-section { margin-top: 8px; }
  .social-label { font-size: 8px; letter-spacing: .18em; margin-bottom: 8px; }
  .social-links { gap: 8px; }
  .social-link { width: clamp(48px, 16vw, 64px); font-size: 7px; letter-spacing: .05em; gap: 5px; }
  .social-link svg { width: clamp(40px, 12vw, 52px); height: clamp(40px, 12vw, 52px); padding: 8px; border-width: 1.5px; }
}
/* Short landscape screens: preserve the full artwork and compact the social controls. */
@media (max-height: 560px) and (orientation: landscape) {
  .site-shell { min-height: 100vh; padding: 8px 16px; background-size: cover; }
  .hero { min-height: calc(100vh - 16px); padding: 4px; }
  .hero-content { gap: 5px; }
  .social-section { margin-top: 4px; }
  .social-label { margin-bottom: 5px; font-size: 8px; }
  .social-links { gap: 12px; }
  .social-link { width: 58px; font-size: 8px; gap: 4px; }
  .social-link svg { width: 38px; height: 38px; padding: 7px; }
}
/* Large TVs and wide monitors: scale the social controls with the canvas. */
@media (min-width: 1600px) {
  .social-links { gap: 42px; }
  .social-link { width: 120px; font-size: 16px; }
  .social-link svg { width: 96px; height: 96px; padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}