/*───────────────────────────────────────────────────────────────
  lyrae site stylesheet  •  last updated: 2025-08-22
───────────────────────────────────────────────────────────────*/

/* — palette — */
:root{
  --moss:#0a1b18;
  --violet:#635761;
  --gold:#e0c97a;
  --cream:#f6f1e7;
}
[hidden] { display: none !important; }


/* — reset + base — */
*{box-sizing:border-box;margin:0;padding:0}
/* ───────── LAYERED BACKGROUND (from bg.zip) ───────── */
/* Top → bottom paint order: mushrooms, ferns, shuttle, front trees, back trees, sky */
body{
  font-family:'EB Garamond','Georgia',serif;
  color:var(--cream);
  line-height:1.5;
  padding-top:2rem;
  background:
    url("images/bg_img.png") center center fixed no-repeat;
  background-size: cover; /* first layer = gradient, second = gif */
  background-attachment:fixed;

}

iframe{
  width:-webkit-fill-available
}


/* — links — */
a{color:var(--gold);text-decoration:none}
a:hover{color:#9d88c7}

/* — ember glow animation for headings & anything that needs firelight — */
@keyframes emberGlow{
  0%,100%{text-shadow:0 0 2px rgba(224,201,122,.6),
          0 0 6px rgba(224,201,122,.4),
          0 0 12px rgba(224,201,122,.2)}
  50%    {text-shadow:0 0 4px rgba(224,201,122,.8),
          0 0 10px rgba(224,201,122,.6),
          0 0 16px rgba(224,201,122,.3)}
}
h1,h2{animation:emberGlow 3s infinite ease-in-out alternate}
h1{
  font-size:2rem;
  text-align:center;
  margin-bottom:1rem;
}
h2{
  font-size:1.3rem;
  margin:2rem 0 .5rem;
}

/* — nav bar (simple old-web vibe) — */
nav{
  text-align:center;
  margin-bottom:2rem;
}
nav a{
  margin:0 .8rem;
  font-weight:500;
  border-bottom:1px dashed rgba(224,201,122,.4);
}
nav a:hover{
  border-bottom:1px solid rgba(224,201,122,.7);
}

/* — content wrapper & cards — */
main{
  max-width:800px;
  margin:0 auto 4rem;
  padding:0 1rem;
}
.card{
  background:rgba(44,54,51,.75);      /* deep mossy, semi-transparent */
  border-radius:1rem;
  padding:1.5rem 2rem;
  margin-bottom:2rem;
  box-shadow:0 8px 32px #0006,
             0 1px 8px rgba(224,201,122,.15);
}

/* — fireflies overlay — */
.fireflies-container{
  position:fixed;
  top:0;left:0;width:100%;height:100%;
  pointer-events:none;
  overflow:hidden;
  z-index:5;
}
.firefly{
  position:absolute;
  width:6px;height:6px;border-radius:50%;
  background:rgba(224,201,122,.8);
  box-shadow:0 0 6px rgba(224,201,122,.6),
             0 0 12px rgba(224,201,122,.4);
  opacity:.85;
  top:100%;                         /* start off-screen bottom */
}
.firefly:nth-child(1){left:10%; animation:drift1 12s infinite ease-in-out 1s;}
.firefly:nth-child(2){left:25%; animation:drift2 11s infinite ease-in-out 2s;}
.firefly:nth-child(3){left:40%; animation:drift3 13s infinite ease-in-out 0s;}
.firefly:nth-child(4){left:60%; animation:drift4 14s infinite ease-in-out 1.5s;}
.firefly:nth-child(5){left:80%; animation:drift5 10s infinite ease-in-out 3s;}
.firefly:nth-child(6){left:30%; animation:drift6 12s infinite ease-in-out 4s;}
.firefly:nth-child(7){left:50%; animation:drift7 15s infinite ease-in-out 2.5s;}
.firefly:nth-child(8){left:70%; animation:drift8 11.5s infinite ease-in-out 1.2s;}
.firefly:nth-child(9){left:15%; animation:drift9 13s infinite ease-in-out 3.4s;}
.firefly:nth-child(10){left:90%; animation:drift10 10.5s infinite ease-in-out .6s;}

/* — keyframes for each firefly (copied from tumblr css) — */
@keyframes drift1{
  0%   {transform:translate(0,0)         scale(1);   opacity:.2;}
  25%  {opacity:1;}
  50%  {transform:translate(30px,-250px) scale(.8);  opacity:.7;}
  75%  {opacity:1;}
  100% {transform:translate(-20px,-500px)scale(.6);  opacity:.2;}
}
@keyframes drift2{
  0%   {transform:translate(0,0)          scale(1.2); opacity:.2;}
  25%  {opacity:1;}
  50%  {transform:translate(-40px,-300px) scale(1);   opacity:.8;}
  75%  {opacity:1;}
  100% {transform:translate(15px,-550px)  scale(.7);  opacity:.2;}
}
@keyframes drift3{
  0%   {transform:translate(0,0)        scale(.9);  opacity:.2;}
  25%  {opacity:1;}
  50%  {transform:translate(50px,-200px)scale(1.1); opacity:.6;}
  75%  {opacity:1;}
  100% {transform:translate(-30px,-450px)scale(.8);  opacity:.2;}
}
@keyframes drift4{
  0%   {transform:translate(0,0)        scale(1);   opacity:.2;}
  25%  {opacity:1;}
  50%  {transform:translate(-20px,-280px)scale(.7);  opacity:.7;}
  75%  {opacity:1;}
  100% {transform:translate(30px,-520px) scale(.5);  opacity:.2;}
}
@keyframes drift5{
  0%   {transform:translate(0,0)        scale(1.1); opacity:.2;}
  25%  {opacity:1;}
  50%  {transform:translate(40px,-230px)scale(.9);  opacity:.8;}
  75%  {opacity:1;}
  100% {transform:translate(-50px,-480px)scale(.6); opacity:.2;}
}
@keyframes drift6{
  0%   {transform:translate(0,0)        scale(.8);  opacity:.2;}
  25%  {opacity:1;}
  50%  {transform:translate(-30px,-260px)scale(1);  opacity:.7;}
  75%  {opacity:1;}
  100% {transform:translate(20px,-505px) scale(.5); opacity:.2;}
}
@keyframes drift7{
  0%   {transform:translate(0,0)        scale(1.2); opacity:.2;}
  25%  {opacity:1;}
  50%  {transform:translate(25px,-300px)scale(.9);  opacity:.8;}
  75%  {opacity:1;}
  100% {transform:translate(-35px,-550px)scale(.7); opacity:.2;}
}
@keyframes drift8{
  0%   {transform:translate(0,0)        scale(1);   opacity:.2;}
  25%  {opacity:1;}
  50%  {transform:translate(-45px,-240px)scale(.7); opacity:.7;}
  75%  {opacity:1;}
  100% {transform:translate(15px,-525px) scale(.6); opacity:.2;}
}
@keyframes drift9{
  0%   {transform:translate(0,0)        scale(1.1); opacity:.2;}
  25%  {opacity:1;}
  50%  {transform:translate(35px,-220px)scale(.8);  opacity:.8;}
  75%  {opacity:1;}
  100% {transform:translate(-25px,-500px)scale(.5); opacity:.2;}
}
@keyframes drift10{
  0%   {transform:translate(0,0)        scale(.9);  opacity:.2;}
  25%  {opacity:1;}
  50%  {transform:translate(-20px,-270px)scale(1);  opacity:.7;}
  75%  {opacity:1;}
  100% {transform:translate(40px,-530px) scale(.6); opacity:.2;}
}

/* ─── bottom painterly forest ─── */
.forest {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30vh;                 /* adjust to taste (25–40vh) */
  pointer-events: none;          /* don't block links */
  z-index: 2;                    /* behind fireflies (z=5), above background */
}

/* ensure the svg scales cleanly */
.forest svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* gentle “wind” sway for trees */
@keyframes treeSway {
  0%   { transform: rotate(-1.2deg); }
  50%  { transform: rotate( 1.2deg); }
  100% { transform: rotate(-1.2deg); }
}

/* tiny horizontal drift, like a breeze */
@keyframes breezeX {
  0%   { transform: translateX(-1%); opacity: .9; }
  50%  { transform: translateX( 1%); opacity: 1; }
  100% { transform: translateX(-1%); opacity: .9; }
}

/* apply animations with varied timings for depth */
.tree {
  transform-origin: 50% 95%;
  animation: treeSway 7s ease-in-out infinite alternate;
}
.t2 { animation-duration: 8s; }
.t3 { animation-duration: 9s; }
.t4 { animation-duration:10s; }
.t5 { animation-duration:11s; }
.t6 { animation-duration:12s; }
.t7 { animation-duration: 8.5s; }
.t8 { animation-duration: 9.5s; }
.t9 { animation-duration:10.5s; }
.t10{ animation-duration:11.5s; }
.t11{ animation-duration:12.5s; }
.t12{ animation-duration:13s;  }

/* canvas sits behind content, above gradient */
#fog-canvas{
  position:fixed;
  inset:0;
  width:100vw; height:100vh;
  pointer-events:none;
  z-index:1;
  mix-blend-mode:soft-light;    /* gentle merge with background */
  opacity:.22;                  /* density */
}

/* ensure content above */
nav, h1, main, .card { position:relative; z-index:2; }

/* reduced motion = no animation */
@media (prefers-reduced-motion: reduce){
  #fog-canvas{ display:none; }
}

/* ── music notes (scrolling, fluttering, fading) ───────────── */

.notes-stream{
  position:absolute;             /* not fixed → scrolls with page */
  inset:0;
  height:200vh;                  /* tall field so some start offscreen */
  pointer-events:none;           /* container ignores clicks */
  z-index:3;                     /* above fog, below fireflies if desired */
}

/* the notes themselves */
.mnote{
  position:absolute;
  width:28px; height:56px;
  color:var(--gold);
  left:2.2vw;                    /* default left gutter */
  transform-origin:50% 80%;
  opacity:.0;
  filter:
    drop-shadow(0 0 6px rgba(224,201,122,.55))
    drop-shadow(0 0 12px rgba(224,201,122,.30));
  pointer-events:auto;           /* remain clickable */
  text-decoration:none;

  /* per-note custom props from inline style */
  top:var(--top, 20vh);
  transform:
    translateX(0)
    translateY(0)
    rotate(var(--rot, 0deg))
    scale(var(--scale, .66));

  animation:
    note-rise var(--dur, 20s) linear infinite var(--delay, 0s),
    note-sway 6s ease-in-out infinite calc(var(--delay, 0s) / 2),
    note-glow 3.4s ease-in-out infinite calc(var(--delay, 0s) / 3);
}

.mnote.right{ left:auto; right:2.2vw; }   /* right gutter */

.mnote svg{ width:100%; height:100%; display:block; }

/* — moon toggle (drifts like a note, left gutter) — */
.mmoon{
  position:absolute;
  width:48px; height:48px;
  color:var(--gold);
  left:2.2vw;                 /* left side of screen */
  top:var(--top, 26vh);
  transform-origin:50% 80%;
  opacity:0;
  pointer-events:auto;
  text-decoration:none;
  filter:
    drop-shadow(0 0 6px rgba(224,201,122,.45))
    drop-shadow(0 0 12px rgba(224,201,122,.25));
  transform:
    translateX(0) translateY(0)
    rotate(var(--rot, -2deg))
    scale(var(--scale, .9));
  animation:
    note-rise var(--dur, 22s) linear infinite var(--delay, 0s),
    note-sway 6.5s ease-in-out infinite calc(var(--delay, 0s) / 2),
    note-glow 3.2s ease-in-out infinite calc(var(--delay, 0s) / 3);
}

.mmoon:hover{
  filter:
    drop-shadow(0 0 12px rgba(224,201,122,.85))
    drop-shadow(0 0 22px rgba(224,201,122,.55));
}


/* lift + fade */
@keyframes note-rise{
  0%   { opacity:0;   transform:translateX(0) translateY(12px) rotate(var(--rot)) scale(var(--scale)); }
  10%  { opacity:.95; }
  50%  { opacity:1;   transform:translateX(0) translateY(-60px) rotate(calc(var(--rot) + 1deg)) scale(var(--scale)); }
  90%  { opacity:.85; }
  100% { opacity:0;   transform:translateX(0) translateY(-120px) rotate(calc(var(--rot) + 2deg)) scale(var(--scale)); }
}

/* gentle horizontal flutter */
@keyframes note-sway{
  0%,100% { transform:translateX(0)    rotate(var(--rot))     scale(var(--scale)); }
  50%     { transform:translateX(7px)  rotate(calc(var(--rot) - 2deg)) scale(var(--scale)); }
}

/* soft flicker/glow */
@keyframes note-glow{
  0%,100% { filter:drop-shadow(0 0 6px rgba(224,201,122,.55)) drop-shadow(0 0 12px rgba(224,201,122,.30)); }
  50%     { filter:drop-shadow(0 0 9px rgba(224,201,122,.9))  drop-shadow(0 0 16px rgba(224,201,122,.55)); }
}

/* hover affordance */
.mnote:hover{
  filter:drop-shadow(0 0 12px rgba(224,201,122,.95))
         drop-shadow(0 0 22px rgba(224,201,122,.65));
}

/* keep gutters clean on tiny screens */
@media (max-width: 680px){
  .mnote{ display:none; }
}

/* motion safety */
@media (prefers-reduced-motion: reduce){
  .mnote{ animation:none; opacity:.9; }
}

/* ── modal (twilight forest chrome) ─────────────────────────── */
.modal-backdrop{
  position:fixed; inset:0; z-index:10;
  display:grid; place-items:center;
  background:radial-gradient(1200px 600px at 50% 40%, rgba(10,27,24,.35), rgba(10,27,24,.75));
  backdrop-filter: blur(4px);
}
.modal-window{
  width:min(1000px, 92vw);
  height:min(82vh, 900px);
  background:rgba(44,54,51,.92);
  border-radius:16px;
  box-shadow:
    0 24px 80px #0009,
    0 0 18px rgba(224,201,122,.12),
    inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
  border:1px solid rgba(224,201,122,.15);
  animation: modal-pop .18s ease-out;
}
@keyframes modal-pop{
  from{ transform:translateY(6px) scale(.98); opacity:.6; }
  to  { transform:none; opacity:1; }
}
.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px 10px 16px;
  background:linear-gradient(180deg, rgba(224,201,122,.06), transparent);
  border-bottom:1px solid rgba(224,201,122,.12);
}
.modal-header h2{
  margin:0; font-size:1.1rem; letter-spacing:.02em;
  animation: emberGlow 3s ease-in-out infinite alternate;
}
.modal-close{
  appearance:none; border:0; background:transparent; color:var(--gold);
  font-size:24px; line-height:1; cursor:pointer;
  filter: drop-shadow(0 0 6px rgba(224,201,122,.4));
}
.modal-close:hover{ color:#f6f1e7; }

.modal-body{ height:calc(100% - 50px); }
#modal-frame{
  width:100%; height:100%; display:block; border:0;
  background:linear-gradient(120deg, var(--moss) 10%, var(--violet) 100%);
}

/* open/close helpers */
body.modal-open{ overflow:hidden; }

/* ---- Godrays controls (tweak these to move/aim/intensity) ---- */
:root{
  /* where the rays originate, relative to the viewport */
  --ray-x: -10vw;         /* ~where you circled near the nav */
  --ray-y: -76vh;        /* slightly above the top edge */
  /* angle that matches your pink line (negative = down-right) */
  --ray-rot: 65deg;
  /* global look */
  --ray-intensity: 0.55;   /* overall strength */
  --ray-sway: 1.8deg;      /* how much they rock */
  --ray-speed: 14s;        /* sway speed */
  /* warm gold ramp (tunable) */
  --gold-core:  rgba(255,244,207,.95);  /* brightest streaks */
  --gold-1:     rgba(255,236,170,.72);
  --gold-2:     rgba(255,223,140,.42);
  --gold-3:     rgba(255,208,110,.22);
  --gold-halo:  rgba(255,247,220,.55);  /* glow at the source */
}

/* base layer */
.godrays{
  position: fixed;
  left: var(--ray-x);
  top:  var(--ray-y);
  width: 160vmax;      /* huge canvas so it always covers diagonally */
  height: 160vmax;
  transform: rotate(var(--ray-rot));
  pointer-events: none;
  z-index: 0;          /* under your fireflies / content, above page bg */
  opacity: var(--ray-intensity);
  filter: blur(.4px) saturate(110%);
  animation: rays-sway var(--ray-speed) ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Bright golden rays */
.godrays.bright{
  mix-blend-mode: screen;
  background:
    /* halo at the source */
    radial-gradient(circle at 0% 0%,
      rgba(255,248,200,0.65) 0%,
      rgba(255,240,180,0.35) 25%,
      rgba(255,230,140,0.0) 70%),

    /* main beams: brighter golden streaks */
    repeating-conic-gradient(from -8deg at 0% 0%,
      rgba(255,236,170,0) 0 7deg,
      rgba(255,215,120,.55) 8deg 10.5deg,
      rgba(255,236,170,0) 12deg 16deg),

    /* secondary finer beams for depth */
    repeating-conic-gradient(from -5deg at 0% 0%,
      rgba(255,236,170,0) 0 9deg,
      rgba(255,226,150,.35) 10deg 12deg,
      rgba(255,236,170,0) 15deg 19deg);
  background-blend-mode: screen;
  filter: blur(1px) saturate(120%);
}

/* Subtle dark beams for contrast on light areas */
.godrays.shade{
  mix-blend-mode: multiply;
  opacity: calc(var(--ray-intensity) * 0.3);
  background:
    radial-gradient(circle at 0% 0%,
      rgba(0,0,0,.08) 0%,
      rgba(0,0,0,0) 70%),
    repeating-conic-gradient(from -7deg at 0% 0%,
      rgba(0,0,0,0) 0 8deg,
      rgba(0,0,0,.08) 9deg 11deg,
      rgba(0,0,0,0) 13deg 17deg);
}


/* Dappled canopy shadow that “flutters” over the rays */
.godrays::after{
  content:"";
  position:absolute; inset:0;
  /* 3 large soft blobs act like moving leaf gaps; multiply darkens rays irregularly */
  background:
    radial-gradient(38vmax 22vmax at 14% 12%, rgba(0,0,0,.28) 35%, transparent 70%),
    radial-gradient(28vmax 18vmax at 28% 0%,  rgba(0,0,0,.22) 35%, transparent 70%),
    radial-gradient(24vmax 16vmax at 0% 26%,  rgba(0,0,0,.18) 35%, transparent 70%);
  mix-blend-mode: multiply;
  opacity:.55;
  animation: dapple 11s ease-in-out infinite alternate;
  will-change: transform;
}

/* gentle motion */
@keyframes rays-sway{
  from{ transform: rotate(calc(var(--ray-rot) - var(--ray-sway))) translateZ(0); }
  to  { transform: rotate(calc(var(--ray-rot) + var(--ray-sway))) translateZ(0); }
}
@keyframes dapple{
  from{ transform: translateX(-1.2%) translateY(-1.2%); }
  to  { transform: translateX( 1.2%) translateY( 1.4%); }
}

/* keeps things calm for folks who prefer less motion */
@media (prefers-reduced-motion: reduce){
  .godrays{ animation:none }
  .godrays::after{ animation:none }
}



/* small screens */
@media (max-width: 680px){
  .modal-window{ width:96vw; height:86vh; }
}


/* responsive tweak */
@media (max-width: 700px){
  .forest { height: 24vh; }
}

/* make the card behave like a frame shell */
.card.chat-card { padding: 0; }

/* let the iframe fully occupy the shell */
.card.chat-card #chattable{
  display:block;
  width:100%;
  height: min(68vh, 640px);   /* change to taste */
  border:0;
  border-radius: 16px;        /* matches your card rounding */
  background: transparent;
}


/* alignment block tweaks */
#alignment .quick{
  list-style: none; margin:0 0 .75rem 0; padding:0;
}
#alignment .quick li{ margin:.25rem 0; }

/* fandom grid */
.fandoms{
  list-style:none; padding:0; margin:.5rem 0 0 0;
  display:grid; gap:.6rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.fan-pill{
  display:block; text-decoration:none;
  background: rgba(224,201,122,.10);
  border:1px solid rgba(224,201,122,.22);
  border-radius:12px;
  padding:.7rem .9rem;
  color: var(--cream);
  box-shadow: 0 6px 20px #0005, inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.fan-pill:hover{
  transform: translateY(-1px);
  border-color: rgba(224,201,122,.35);
  box-shadow: 0 10px 26px #0006, 0 0 12px rgba(224,201,122,.18);
}
.fan-pill .fan{ display:block; font-weight:600; color: var(--gold); letter-spacing:.02em; }
.fan-pill .aside{ display:block; opacity:.9; margin-top:.1rem; font-size:.95rem; }
.mt{ margin-top:.6rem; }


/* — reserve for extra tweaks — */
/* @import url("extra.css"); */