/* YOU & ME Cosmic Hero — styles. Colors come from CSS vars set in functions.php. */
:root{
  --gold:#ffb43c; --gold-bright:#ffe6a8; --gold-deep:#ff7a18;
  --space-1:#0a0618; --space-2:#030208; --nebula:#2d0f4b;
}

.ym-hero{
  position:relative; min-height:100vh; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  overflow:hidden; padding:8vh 6vw 6vh; text-align:center;
  background:var(--space-2);
}

/* DEEP UNIVERSE BACKGROUND (purple nebula + deep space) */
.ym-universe{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 55% 45% at 20% 20%, color-mix(in srgb, var(--nebula) 70%, transparent), transparent 62%),
    radial-gradient(ellipse 50% 42% at 82% 28%, color-mix(in srgb, var(--nebula) 60%, transparent), transparent 64%),
    radial-gradient(ellipse 58% 48% at 78% 84%, color-mix(in srgb, var(--nebula) 58%, transparent), transparent 62%),
    radial-gradient(ellipse 48% 42% at 20% 82%, color-mix(in srgb, var(--nebula) 55%, transparent), transparent 62%),
    radial-gradient(circle at 50% 50%, var(--space-1) 0%, var(--space-2) 55%, #010003 100%);
  animation:ym-nebula 20s ease-in-out infinite;}
@keyframes ym-nebula{0%,100%{filter:hue-rotate(-6deg) brightness(1);}50%{filter:hue-rotate(8deg) brightness(1.08);}}

.ym-core-glow{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(circle 16vh at 50% 47%, color-mix(in srgb, var(--gold) 30%, transparent), transparent 80%),
    radial-gradient(circle 30vh at 50% 49%, color-mix(in srgb, var(--nebula) 30%, transparent), transparent 78%),
    radial-gradient(circle 9vh at 50% 47%, rgba(5,2,9,0.55), transparent 100%);
  animation:ym-breathe 7s ease-in-out infinite;}
@keyframes ym-breathe{0%,100%{opacity:0.6;}50%{opacity:1;}}

/* STARDUST + STARS */
.ym-stars{position:absolute;inset:0;z-index:2;}
.ym-star{position:absolute;border-radius:50%;background:#fff;animation:ym-twinkle var(--dur,4s) ease-in-out infinite;animation-delay:var(--delay,0s);}
@keyframes ym-twinkle{0%,100%{opacity:0.1;transform:scale(0.7);}50%{opacity:0.95;transform:scale(1.3);box-shadow:0 0 6px #ffe;}}
.ym-dust{position:absolute;border-radius:50%;background:rgba(255,255,255,0.5);filter:blur(0.5px);animation:ym-drift var(--ddur,30s) linear infinite;}
@keyframes ym-drift{from{transform:translateY(0);}to{transform:translateY(-40px);}}

/* LOGO (transparent PNG, floats in space) */
.ym-logo-halo{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);
  width:min(86vh,96vw);max-width:760px;aspect-ratio:3/4;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 49%, color-mix(in srgb, var(--gold) 18%, transparent), color-mix(in srgb, var(--nebula) 12%, transparent) 45%, transparent 72%);
  animation:ym-breathe 7s ease-in-out infinite;}
.ym-logo{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);
  width:min(72vh,82vw);max-width:640px;z-index:3;
  animation:ym-float 12s ease-in-out infinite, ym-logoglow 6s ease-in-out infinite;}
.ym-logo img{width:100%;display:block;}
@keyframes ym-float{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50.5%) scale(1.02);}}
@keyframes ym-logoglow{0%,100%{filter:drop-shadow(0 0 30px color-mix(in srgb, var(--gold) 35%, transparent));}50%{filter:drop-shadow(0 0 60px color-mix(in srgb, var(--gold) 60%, transparent));}}

/* SHOOTING STARS */
.ym-shooting{position:absolute;z-index:5;width:0;height:0;opacity:0;left:-40%;top:-40%;}
.ym-tail{position:absolute;right:0;top:0;height:2px;width:110px;transform-origin:right center;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,220,150,0.45) 55%, rgba(255,240,200,0.9) 100%);
  border-radius:2px;}
.ym-head{position:absolute;right:-9px;top:-9px;width:20px;height:20px;
  background:radial-gradient(circle,#fff 0%,#fff3d6 35%,rgba(255,200,110,0) 70%);
  clip-path:polygon(50% 0%,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0% 50%,40% 40%);
  filter:drop-shadow(0 0 8px rgba(255,235,180,0.95)) drop-shadow(0 0 16px rgba(255,180,90,0.6));
  animation:ym-sparkle 1.4s ease-in-out infinite;}
@keyframes ym-sparkle{0%,100%{transform:rotate(0deg) scale(1);}50%{transform:rotate(45deg) scale(1.25);}}
.s1{animation:ym-fly1 7s ease-in infinite 1s;}
.s2{animation:ym-fly2 9s ease-in infinite 4s;}
.s3{animation:ym-fly3 11s ease-in infinite 7s;}
.s4{animation:ym-fly4 13s ease-in infinite 10s;}
@keyframes ym-fly1{0%{opacity:0;top:8%;left:5%;transform:rotate(24deg);}5%{opacity:0;}9%{opacity:0.9;}16%{opacity:0;top:30%;left:38%;transform:rotate(24deg);}17%{opacity:0;}100%{opacity:0;}}
@keyframes ym-fly2{0%{opacity:0;top:14%;left:22%;transform:rotate(20deg);}5%{opacity:0;}9%{opacity:0.9;}15%{opacity:0;top:34%;left:52%;transform:rotate(20deg);}16%{opacity:0;}100%{opacity:0;}}
@keyframes ym-fly3{0%{opacity:0;top:6%;left:14%;transform:rotate(28deg);}5%{opacity:0;}9%{opacity:0.85;}16%{opacity:0;top:40%;left:46%;transform:rotate(28deg);}17%{opacity:0;}100%{opacity:0;}}
@keyframes ym-fly4{0%{opacity:0;top:18%;left:8%;transform:rotate(18deg);}5%{opacity:0;}9%{opacity:0.9;}15%{opacity:0;top:38%;left:40%;transform:rotate(18deg);}16%{opacity:0;}100%{opacity:0;}}

/* CONTENT */
.ym-content{position:relative;z-index:6;display:flex;flex-direction:column;align-items:center;
  min-height:84vh;justify-content:space-between;width:100%;}
.ym-top{display:flex;flex-direction:column;align-items:center;gap:1.6vh;}
.ym-bottom{display:flex;flex-direction:column;align-items:center;gap:0.6vh;}

.ym-brand{
  font-family:'Cinzel',serif;font-weight:900;
  font-size:clamp(2.8rem,10vw,7rem);letter-spacing:0.1em;line-height:1;
  background:linear-gradient(180deg,#fff4d6,var(--gold-bright) 35%,var(--gold) 60%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px color-mix(in srgb, var(--gold) 70%, transparent)) drop-shadow(0 0 60px color-mix(in srgb, var(--gold-deep) 40%, transparent));
  animation:ym-fadeup 1.6s ease both, ym-goldpulse 5s ease-in-out infinite;}
@keyframes ym-goldpulse{0%,100%{filter:drop-shadow(0 0 18px color-mix(in srgb,var(--gold) 50%,transparent)) drop-shadow(0 0 40px color-mix(in srgb,var(--gold-deep) 30%,transparent));}50%{filter:drop-shadow(0 0 38px color-mix(in srgb,var(--gold-bright) 90%,transparent)) drop-shadow(0 0 80px color-mix(in srgb,var(--gold-deep) 55%,transparent));}}

.ym-tagline{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;
  font-size:clamp(1.6rem,5vw,3.2rem);letter-spacing:0.03em;
  display:flex;flex-wrap:wrap;justify-content:center;gap:0.32em;min-height:1.3em;}
.ym-tagline .w{
  background:linear-gradient(180deg,#fffdf6,#fff0d2 40%,#ffd98a);
  -webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;
  opacity:0;transform:translateY(28px) scale(0.78);will-change:transform,opacity,filter;}
.ym-tagline .w.show{animation:ym-lift .8s cubic-bezier(.2,.75,.25,1.12) forwards, ym-wordglow 3.6s ease-in-out infinite 1s;}
@keyframes ym-lift{
  0%{opacity:0;transform:translateY(28px) scale(0.78);filter:blur(6px) drop-shadow(0 0 0 rgba(255,200,120,0));}
  55%{opacity:1;transform:translateY(-3px) scale(1.06);filter:blur(0) drop-shadow(0 0 26px rgba(255,240,195,0.9)) drop-shadow(0 0 52px rgba(255,180,90,0.5));}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)
    drop-shadow(0 0 12px rgba(255,250,235,0.95)) drop-shadow(0 0 28px rgba(255,224,160,0.8))
    drop-shadow(0 0 56px rgba(255,185,95,0.5)) drop-shadow(0 0 100px rgba(255,145,55,0.3));}}
@keyframes ym-wordglow{
  0%,100%{filter:blur(0) drop-shadow(0 0 8px rgba(255,250,235,0.9)) drop-shadow(0 0 20px rgba(255,220,150,0.7)) drop-shadow(0 0 44px rgba(255,180,90,0.45)) drop-shadow(0 0 80px rgba(255,140,50,0.25));}
  50%{filter:blur(0) drop-shadow(0 0 14px rgba(255,252,242,1)) drop-shadow(0 0 32px rgba(255,232,170,0.95)) drop-shadow(0 0 64px rgba(255,190,100,0.65)) drop-shadow(0 0 120px rgba(255,150,55,0.4));}}

.ym-mission{
  font-family:'Cinzel',serif;font-weight:600;
  font-size:clamp(0.8rem,2.2vw,1.25rem);letter-spacing:0.22em;text-transform:uppercase;
  background:linear-gradient(180deg,#fff4d6,var(--gold) 60%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--gold) 55%,transparent));
  margin-bottom:0.8vh;animation:ym-fadeup 1.6s ease 0.5s both;}

.ym-entity{
  font-family:'Cinzel',serif;font-weight:700;
  font-size:clamp(0.95rem,3vw,1.7rem);letter-spacing:0.05em;
  background:linear-gradient(180deg,#fff4d6,var(--gold) 55%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--gold) 55%,transparent));
  animation:ym-fadeup 1.6s ease both;}
.ym-divider{display:flex;align-items:center;gap:0.6rem;width:min(360px,68%);margin:0.4vh auto;opacity:0.85;animation:ym-fadeup 1.6s ease 0.7s both;}
.ym-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.ym-gem{width:6px;height:6px;background:var(--gold-bright);transform:rotate(45deg);box-shadow:0 0 10px var(--gold);}

@keyframes ym-fadeup{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}

/* Fallback for browsers without color-mix: variables still apply via solid colors */
@supports not (background: color-mix(in srgb, red, blue)){
  .ym-universe{background:radial-gradient(circle at 50% 50%, var(--space-1), var(--space-2) 60%, #010003);}
}

/* ===== NAV BAR (top-left: small icon + title) ===== */
.ym-navbar{position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;gap:1.4rem;
  padding:1.1rem 1.6rem;}
.ym-navbar--solid{position:relative;background:linear-gradient(180deg, var(--space-1), color-mix(in srgb, var(--space-2) 92%, transparent));border-bottom:1px solid color-mix(in srgb, var(--gold) 22%, transparent);}
.ym-navbrand{display:flex;align-items:center;gap:0.6rem;text-decoration:none;}
.ym-navicon{width:38px;height:38px;object-fit:contain;
  filter:drop-shadow(0 0 8px color-mix(in srgb, var(--gold) 60%, transparent));}
.ym-navtitle{font-family:'Cinzel',serif;font-weight:700;font-size:1.05rem;letter-spacing:0.12em;
  background:linear-gradient(180deg,#fff4d6,var(--gold) 60%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 8px color-mix(in srgb, var(--gold) 45%, transparent));white-space:nowrap;}
.ym-navmenu{list-style:none;display:flex;gap:1.3rem;margin:0;padding:0;margin-left:auto;flex-wrap:wrap;}
.ym-navmenu li{list-style:none;}
.ym-navmenu a{font-family:'Cinzel',serif;font-weight:600;font-size:0.82rem;letter-spacing:0.08em;
  text-transform:uppercase;color:color-mix(in srgb, var(--gold-bright) 88%, #fff);text-decoration:none;
  opacity:0.85;transition:opacity .2s, text-shadow .2s;}
.ym-navmenu a:hover{opacity:1;text-shadow:0 0 12px color-mix(in srgb, var(--gold) 70%, transparent);}

/* When nav bar is present over the hero, nudge content down a touch */
.ym-hero.has-navbar{padding-top:9vh;}

/* When the big center logo is hidden, keep the text vertically centered nicely */
.ym-content.no-center-logo{justify-content:center;gap:4vh;min-height:78vh;}

/* ===== NORMAL PAGES ===== */
.ym-page{max-width:860px;margin:0 auto;padding:6vh 6vw;color:#f3ecff;
  font-family:'Cormorant Garamond',serif;font-size:1.2rem;line-height:1.7;
  background:var(--space-2);min-height:60vh;}
.ym-page-title{font-family:'Cinzel',serif;font-weight:800;font-size:clamp(2rem,5vw,3rem);
  background:linear-gradient(180deg,#fff4d6,var(--gold) 60%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:1em;}
.ym-page-content a{color:var(--gold);}
body{background:var(--space-2);}

@media(max-width:600px){
  .ym-navbar{gap:0.8rem;padding:0.8rem 1rem;}
  .ym-navmenu{gap:0.8rem;width:100%;margin-left:0;justify-content:flex-start;}
  .ym-navtitle{font-size:0.9rem;}
}