/*
Theme Name: What Chya Portal
Theme URI: https://whatchyamakin.com
Author: Paige
Description: Custom portal theme for What Chya Makin
Version: 1.0
*/

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background: #111;
  color: #fff;
}

.portal-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(135deg, #0b0e18 0%, #121833 45%, #1a0f2e 100%);
}

.portal-hero::before,
.portal-hero::after {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
  transition:
    opacity 0.45s ease,
    transform 0.45s ease,
    background 0.45s ease,
    filter 0.45s ease;
}

.portal-hero::before {
  z-index: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(255, 90, 169, 0.10), transparent 28%),
    radial-gradient(circle at 75% 70%, rgba(0, 245, 212, 0.08), transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(124, 92, 255, 0.08), transparent 35%);
  filter: blur(40px);
  opacity: 0.9;
}

.portal-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
}

.portal-hero::after {
  z-index: 2;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.16;
}

.portal-content {
  position: relative;
  z-index: 3;
  text-align: center;
  width: min(92vw, 1100px);
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.portal-hero.is-craft::before {
  background:
    radial-gradient(circle at 28% 35%, rgba(255, 120, 184, 0.22), transparent 30%),
    radial-gradient(circle at 70% 65%, rgba(255, 209, 102, 0.14), transparent 28%),
    radial-gradient(circle at 52% 82%, rgba(255, 150, 120, 0.12), transparent 26%);
  transform: scale(1.03);
  opacity: 1;
}

.portal-hero.is-digital::before {
  background:
    radial-gradient(circle at 30% 30%, rgba(0, 246, 255, 0.20), transparent 30%),
    radial-gradient(circle at 72% 62%, rgba(155, 92, 255, 0.20), transparent 30%),
    radial-gradient(circle at 55% 80%, rgba(255, 61, 174, 0.10), transparent 26%);
  transform: scale(1.04);
  opacity: 1;}

.portal-hero.is-craft::after {opacity: 0.10;}
.portal-hero.is-digital::after {opacity: 0.22;}




.portal-logo-wrap {
  width: min(92vw, 900px);
  margin: 0 auto 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.portal-logo {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* DEFAULT PORTAL LOGO STATE */

.portal-logo #heart path {

  fill: #ff4fa3 !important;

  animation: heartPulse 2.6s ease-in-out infinite !important;

  transform-box: fill-box;
  transform-origin: center;

  filter:
    drop-shadow(0 0 10px rgba(255,79,163,0.35))
    drop-shadow(0 0 18px rgba(255,209,102,0.18))
    drop-shadow(0 0 22px rgba(0,246,255,0.12));

}

.portal-logo #sparkles path {
  fill: #fff6c2 !important;

  filter:
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.45))
    drop-shadow(0 0 8px rgba(255, 230, 160, 0.35))
    drop-shadow(0 0 12px rgba(255, 79, 163, 0.10));

  animation: sparkleGlint 2.2s ease-in-out infinite !important;

  transform-box: fill-box;
  transform-origin: center;
}

.portal-logo #textfill path {
  fill: #ffffff !important;
}

.portal-logo #textoutline path {
  fill: #e72778 !important;
}

/* CRAFT HOVER */
.portal-hero.is-craft .portal-logo #heart path {
  fill: #ff77b8 !important;
}

.portal-hero.is-craft .portal-logo #sparkles path {
  fill: #ffd86b !important;
}

.portal-hero.is-craft .portal-logo #textoutline path {
  fill: #ff4fa3 !important;
}

/* DIGITAL HOVER */
.portal-hero.is-digital .portal-logo #heart path {
  fill: #ff4fa3 !important;
  filter:
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.65))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.45))
    drop-shadow(0 0 14px rgba(255, 79, 163, 0.42))
    drop-shadow(0 0 22px rgba(78, 238, 255, 0.16))
    drop-shadow(0 0 28px rgba(123, 92, 255, 0.12));
}

.portal-hero.is-digital .portal-logo #sparkles path {
  fill: #8ef6ff !important;
  filter:
    drop-shadow(0 0 8px rgba(142, 246, 255, 0.45))
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.14))
    drop-shadow(0 0 12px rgba(123, 92, 255, 0.16));
}

.portal-hero.is-digital .portal-logo #textfill path {
  fill: #ffffff !important;
  filter:
    drop-shadow(1px 0 0 rgba(78, 238, 255, 0.35))
    drop-shadow(-1px 0 0 rgba(123, 92, 255, 0.28))
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.08));
}

.portal-hero.is-digital .portal-logo #textoutline path {
  fill: #3f2a78 !important;
  filter:
    drop-shadow(0 0 8px rgba(22, 33, 58, 0.30))
    drop-shadow(0 0 10px rgba(123, 92, 255, 0.12));
}

.portal-hero.is-digital .portal-logo #textfill path {
  animation: digitalTextGlitch 2.8s steps(1) infinite;
  transform-box: fill-box;
  transform-origin: center;
}

/* SMOOTH COLOR TRANSITION */
.portal-hero.is-craft .portal-logo #heart path,
.portal-hero.is-craft .portal-logo #sparkles path,
.portal-hero.is-digital .portal-logo #heart path,
.portal-hero.is-digital .portal-logo #sparkles path,
.portal-hero.is-craft .portal-logo #textoutline path,
.portal-hero.is-digital .portal-logo #textoutline path {
  transition: fill 0.25s ease;
}

@keyframes heartPulse {

  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.06);
    opacity: 1;
  }

}

@keyframes sparkleGlint {

  0%,100% {
    transform: scale(1);
    opacity: 0.92;
    filter:
      drop-shadow(0 0 4px rgba(255,255,255,0.35))
      drop-shadow(0 0 8px rgba(255,230,160,0.28));
  }

  50% {
    transform: scale(1.18);
    opacity: 1;

    filter:
      drop-shadow(0 0 8px rgba(255,255,255,0.6))
      drop-shadow(0 0 14px rgba(255,230,160,0.5))
      drop-shadow(0 0 18px rgba(255,79,163,0.18));
  }

}

@keyframes digitalTextGlitch {
  0%, 88%, 100% {
    transform: translate(0, 0);
    opacity: 1;
  }
  90% {
    transform: translate(0.4px, -0.2px);
    opacity: 0.98;
  }
  92% {
    transform: translate(-0.5px, 0.3px);
    opacity: 1;
  }
  94% {
    transform: translate(0.2px, 0);
    opacity: 0.99;
  }
  96% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

.portal-title {
  font-size: clamp(3rem, 7vw, 4.75rem);
  margin-bottom: 0.5rem;
  line-height: 1;
}

.portal-tagline {
  font-size: clamp(1rem, 2vw, 1.25rem);
  margin-bottom: 2rem;
  opacity: 0.9;
}

.portal-choice {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.92);
}

.portal-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.portal-btn {
  padding: 1rem 1.75rem;
  text-decoration: none;
  border-radius: 999px;
  font-family: "Outfit", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.portal-btn.craft {
  background: #e94b97;
  color: #fff;
  box-shadow: 0 8px 24px rgba(233, 75, 151, 0.20);
}

.portal-btn.craft:hover,
.portal-btn.craft:focus {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(233, 75, 151, 0.30);
}

.portal-btn.digital {
  border: 2px solid #00f7ff;
  color: #00f7ff;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 0 0 rgba(0, 247, 255, 0);
}

.portal-btn.digital:hover,
.portal-btn.digital:focus {
  transform: translateY(-2px);
  background: rgba(0, 247, 255, 0.10);
  box-shadow: 0 0 18px rgba(0, 247, 255, 0.30);
}

#page-transition {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 99999;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(255, 120, 220, 0.10), rgba(4, 6, 12, 0.95) 55%, rgba(0, 0, 0, 1) 100%);
    transition: opacity 0.45s ease;
}

.transition-ring,
.transition-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.2);
    border-radius: 999px;
    opacity: 0;
}

.transition-ring {
    width: 120px;
    height: 120px;
    border: 2px solid rgba(255, 180, 240, 0.85);
    box-shadow:
        0 0 20px rgba(255, 150, 230, 0.35),
        0 0 60px rgba(255, 100, 220, 0.25);
}

.transition-glow {
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255, 160, 235, 0.9) 0%, rgba(255, 120, 220, 0.28) 35%, rgba(255, 120, 220, 0.0) 70%);
    filter: blur(10px);
}

body.is-transitioning #page-transition {
    opacity: 1;
}

body.is-transitioning .transition-ring {
    animation: portalRingExpand 0.75s ease forwards;
}

body.is-transitioning .transition-glow {
    animation: portalGlowExpand 0.75s ease forwards;
}

body.is-transitioning main,
body.is-transitioning .site,
body.is-transitioning .site-content,
body.is-transitioning #page {
    animation: pagePullIn 0.6s ease forwards;
}

body.page-arriving #page-transition {
    opacity: 1;
    animation: portalArrivalFade 0.75s ease forwards;
}

body.page-arriving .transition-ring {
    animation: portalArrivalRing 0.75s ease forwards;
}

body.page-arriving .transition-glow {
    animation: portalArrivalGlow 0.75s ease forwards;
}

@keyframes portalRingExpand {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2);
    }
    25% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(18);
    }
}

@keyframes portalGlowExpand {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.15);
    }
    20% {
        opacity: 0.95;
    }
    100% {
        opacity: 0.85;
        transform: translate(-50%, -50%) scale(16);
    }
}

@keyframes pagePullIn {
    0% {
        transform: scale(1);
        filter: blur(0px);
        opacity: 1;
    }
    100% {
        transform: scale(1.04);
        filter: blur(5px);
        opacity: 0.75;
    }
}

@keyframes portalArrivalFade {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes portalArrivalRing {
    0% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(12);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(18);
    }
}

@keyframes portalArrivalGlow {
    0% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(10);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(15);
    }
}