/* ====================================================================
   PORTAL.CSS — wspólny framework kosmicznego portalu kodduszy.pl
   ==================================================================== */
:root{
  --void:#04030c;
  --ink:#c9c0e4;
  --dim:#6d648f;
  --gold:#e8c56b;
  --hot:#fff3cf;
  --cyan:#4ff0d8;
  --magenta:#ff6bd6;
  --violet:#9a6bff;
  --edge:rgba(154,107,255,.22);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
html{scroll-behavior:smooth}
body{
  background:var(--void);
  font-family:'Cormorant Garamond',serif;color:var(--ink);
  overflow-x:hidden;
}
#sky,#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#sky{z-index:0}
#fx{z-index:5}
#spells{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.spell{
  position:absolute;white-space:nowrap;will-change:transform,opacity;
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.spell.c0{background-image:linear-gradient(95deg,var(--gold),var(--hot))}
.spell.c1{background-image:linear-gradient(95deg,var(--cyan),#bffcf1)}
.spell.c2{background-image:linear-gradient(95deg,var(--magenta),#ffc3ec)}
.spell.c3{background-image:linear-gradient(95deg,var(--violet),#d8c3ff)}

/* ===== back link ===== */
.backlink{
  position:fixed;top:18px;left:18px;z-index:10;
  font-family:'Cinzel',serif;font-weight:700;font-size:11px;
  letter-spacing:.28em;text-indent:.28em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;
  border:1px solid var(--edge);border-radius:2px;
  padding:10px 18px;background:rgba(20,12,40,.4);
  backdrop-filter:blur(6px);transition:color .35s,border-color .35s;
}
.backlink:hover{color:var(--hot);border-color:var(--cyan)}

/* ===== meditation text link ===== */
.meditation-link{
  position:fixed;top:18px;right:18px;z-index:10;
  font-family:'Cinzel',serif;font-weight:700;font-size:11px;
  letter-spacing:.28em;text-indent:.28em;text-transform:uppercase;
  color:var(--cyan);text-decoration:none;
  border:1px solid var(--edge);border-radius:2px;
  padding:10px 18px;background:rgba(20,12,40,.4);
  backdrop-filter:blur(6px);transition:color .35s,border-color .35s;
}
.meditation-link:hover{color:var(--hot);border-color:var(--magenta)}

/* ===== layout ===== */
.wrap{
  position:relative;z-index:2;min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  gap:clamp(18px,3vw,48px);align-items:center;
  padding:clamp(18px,3vw,44px);
  max-width:1500px;margin:0 auto;
}
.left{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2vh,22px);min-width:0}
.title{text-align:center;opacity:0;animation:fade 2s ease .4s forwards}
.title .eyebrow{
  font-family:'Cinzel',serif;font-size:clamp(9px,1.2vw,12px);font-weight:500;
  letter-spacing:.6em;text-indent:.6em;text-transform:uppercase;color:var(--dim);
}
.title h1{
  font-family:'Cinzel',serif;font-weight:700;
  font-size:clamp(15px,2.1vw,24px);letter-spacing:.24em;text-indent:.24em;
  margin-top:6px;
  background:linear-gradient(96deg,var(--cyan),var(--gold) 38%,var(--magenta) 72%,var(--violet));
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hueflow 12s linear infinite;
}
@keyframes hueflow{to{background-position:280% 0}}

/* ===== controls ===== */
.controls{display:flex;gap:10px;align-items:stretch;opacity:0;animation:fade 1.4s ease .8s forwards}
.switch,.sndbtn{
  border:1px solid var(--edge);border-radius:2px;overflow:hidden;
  backdrop-filter:blur(6px);background:rgba(20,12,40,.4);
}
.switch{display:flex}
.switch button,.sndbtn{
  background:transparent;border:0;cursor:pointer;color:var(--dim);
  font-family:'Cinzel',serif;font-weight:700;font-size:11px;
  letter-spacing:.28em;text-indent:.28em;text-transform:uppercase;
  padding:11px 22px;transition:color .35s,background .35s,text-shadow .35s;
}
.sndbtn{border:1px solid var(--edge)}
.switch button+button{border-left:1px solid var(--edge)}
.switch button[aria-selected="true"]{
  color:var(--hot);background:linear-gradient(180deg,rgba(154,107,255,.28),rgba(79,240,216,.12));
  text-shadow:0 0 14px rgba(255,243,207,.55);
}
.switch button:hover,.sndbtn:hover{color:var(--ink)}
.sndbtn.on{
  color:var(--cyan);
  background:linear-gradient(180deg,rgba(79,240,216,.16),rgba(154,107,255,.10));
  text-shadow:0 0 12px rgba(79,240,216,.5);
}
.switch button:focus-visible,.sndbtn:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}

/* ===== stage ===== */
.stage{position:relative;width:min(72vmin,600px);aspect-ratio:1;perspective:1600px}
.flipper{
  position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform 1.15s cubic-bezier(.62,.02,.24,1);
}
.flipper.back{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden}
.face.rev{transform:rotateY(180deg)}
svg{width:100%;height:100%;overflow:visible;display:block}

/* ===== SVG animation classes ===== */
.rim{fill:none;stroke:url(#gStroke);opacity:0}
.rim.on{opacity:1;animation:scribe var(--d,1.4s) cubic-bezier(.5,0,.2,1) forwards}
@keyframes scribe{to{stroke-dashoffset:0}}

.beam{opacity:0;transform-box:fill-box;transform-origin:center}
.beam.on{animation:beamIn .85s cubic-bezier(.2,.9,.25,1.06) forwards}
@keyframes beamIn{from{opacity:0;transform:scale(var(--sx,1),var(--sy,1))}to{opacity:1;transform:scale(1,1)}}

.glyph text{
  font-family:'Cinzel',serif;font-weight:900;fill:url(#gFill);
  opacity:0;transform-box:fill-box;transform-origin:center;
}
.glyph text.land{
  animation:mat var(--t,.85s) cubic-bezier(.2,.85,.3,1.06) forwards,
            flash .75s ease-out var(--t,.85s) forwards;
}
@keyframes mat{
  0%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--dr)) scale(2.6);filter:blur(9px)}
  55%{opacity:1;filter:blur(0)}
  100%{opacity:1;transform:translate(0,0) rotate(0) scale(1);filter:blur(0)}
}
@keyframes flash{
  0%{fill:#ffffff;filter:drop-shadow(0 0 20px var(--cyan)) drop-shadow(0 0 34px var(--magenta)) brightness(2.1)}
  100%{fill:url(#gFill);filter:drop-shadow(0 0 6px rgba(232,197,107,.4)) brightness(1)}
}

.line{fill:none;stroke:url(#gStroke);stroke-linecap:round;opacity:0}
.line.on{opacity:1;animation:scribe var(--d,1s) cubic-bezier(.4,0,.2,1) forwards}

.star{opacity:0;transform-box:fill-box;transform-origin:center}
.star.on{animation:starPop .7s cubic-bezier(.2,.9,.3,1.1) forwards}
@keyframes starPop{
  0%{opacity:0;transform:scale(0)}
  55%{opacity:1;transform:scale(1.9);filter:drop-shadow(0 0 16px var(--cyan))}
  100%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 6px rgba(232,197,107,.7))}
}

.wave{fill:none;stroke:var(--hot);opacity:0;transform-box:fill-box;transform-origin:center}
.wave.on{animation:wv 1.6s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes wv{0%{opacity:.95;stroke-width:8;transform:scale(.15)}100%{opacity:0;stroke-width:.5;transform:scale(1.4)}}

.root{transform-box:fill-box;transform-origin:center}
.root.breathe{animation:breathe 10s ease-in-out infinite}
@keyframes breathe{
  0%,100%{filter:drop-shadow(0 0 24px rgba(154,107,255,.22));transform:rotate(-.5deg)}
  50%{filter:drop-shadow(0 0 60px rgba(79,240,216,.34));transform:rotate(.5deg)}
}

.ray{opacity:0;transform-box:fill-box;transform-origin:center}
.ray.on{animation:rayOut 1.2s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes rayOut{
  0%{opacity:0;transform:scale(.3)}
  40%{opacity:1;transform:scale(1.15);filter:drop-shadow(0 0 20px var(--gold))}
  100%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 8px rgba(232,197,107,.5))}
}

.disc{transition:opacity 1.5s ease}

/* ===== legend ===== */
.legend{
  opacity:0;transition:opacity 1.6s ease;text-align:center;max-width:680px;
  font-size:clamp(11.5px,1.4vw,15px);line-height:1.6;min-height:3em;
}
.legend.show{opacity:1}
.legend b{font-family:'Cinzel',serif;font-weight:700;font-size:.8em;letter-spacing:.16em;color:var(--gold)}
.legend i{color:var(--dim)}
.legend .r{margin:2px 0}

/* ===== meditation text panel ===== */
.meditation{
  position:relative;z-index:2;
  max-width:720px;margin:0 auto;
  padding:clamp(20px,4vw,48px) clamp(18px,5vw,48px) 60px;
  text-align:center;
}
.meditation h2{
  font-family:'Cinzel',serif;font-weight:700;
  font-size:clamp(18px,2.5vw,28px);letter-spacing:.1em;
  background:linear-gradient(96deg,var(--cyan),var(--gold),var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:24px;
}
.meditation p{
  font-size:clamp(13px,1.6vw,17px);line-height:1.75;
  color:var(--ink);margin-bottom:18px;
}
.meditation .verse{
  font-style:italic;color:var(--dim);
  border-left:2px solid var(--edge);
  padding-left:18px;text-align:left;
  margin:24px auto;max-width:560px;
}
.meditation .mantra{
  font-family:'Cinzel',serif;font-weight:700;
  font-size:clamp(15px,2vw,20px);letter-spacing:.18em;
  background:linear-gradient(96deg,var(--gold),var(--hot));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin:30px 0;
}

/* ===== right panels ===== */
.right{display:flex;flex-direction:column;gap:clamp(14px,2vh,22px);min-width:0}
.panel{
  border:1px solid var(--edge);border-radius:3px;
  background:linear-gradient(165deg,rgba(28,16,56,.55),rgba(8,6,22,.55));
  backdrop-filter:blur(10px);
  padding:clamp(14px,2vw,22px);
  opacity:0;transform:translateY(18px);
  animation:rise 1.2s cubic-bezier(.2,.8,.3,1) forwards;
  position:relative;overflow:hidden;
}
.panel:nth-of-type(1){animation-delay:1.1s}
.panel:nth-of-type(2){animation-delay:1.35s}
.panel::after{
  content:"";position:absolute;inset:-1px;pointer-events:none;
  background:linear-gradient(120deg,transparent 42%,rgba(79,240,216,.13) 50%,transparent 58%);
  background-size:260% 100%;animation:sheen 9s linear infinite;
}
@keyframes sheen{to{background-position:-260% 0}}
@keyframes rise{to{opacity:1;transform:translateY(0)}}
@keyframes fade{to{opacity:1}}

.plabel{
  font-family:'Cinzel',serif;font-size:10px;font-weight:700;
  letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;color:var(--dim);
  margin-bottom:12px;
}
.clockwrap{display:flex;align-items:center;gap:clamp(12px,2vw,20px)}
.dial{width:clamp(96px,11vw,132px);flex:0 0 auto}
.readout{min-width:0}
.time{
  font-family:'Space Mono',monospace;font-weight:700;
  font-size:clamp(26px,3.4vw,42px);line-height:1;letter-spacing:.02em;
  background:linear-gradient(100deg,var(--cyan),var(--hot) 45%,var(--magenta));
  background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hueflow 8s linear infinite;
}
.time .sec{font-size:.5em;color:var(--dim);-webkit-text-fill-color:var(--dim);margin-left:6px}
.datefull{margin-top:8px;font-size:clamp(13px,1.5vw,17px);color:var(--ink)}
.feast{margin-top:5px;font-size:12px;color:var(--dim);font-style:italic}

.calhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.calmonth{font-family:'Cinzel',serif;font-weight:700;font-size:clamp(13px,1.6vw,17px);letter-spacing:.14em;color:var(--gold)}
.calyear{font-family:'Space Mono',monospace;font-size:12px;color:var(--dim)}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.dow{
  font-family:'Space Mono',monospace;font-size:9.5px;text-align:center;
  color:var(--dim);letter-spacing:.06em;padding-bottom:5px;text-transform:uppercase;
}
.day{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-family:'Space Mono',monospace;font-size:clamp(10px,1.15vw,13px);
  color:var(--ink);border-radius:2px;border:1px solid transparent;
}
.day.mute{color:#332c4d}
.day.wknd{color:#9d8fc9}
.day.today{
  color:#06040f;font-weight:700;
  background:radial-gradient(circle at 50% 40%,var(--hot),var(--gold) 55%,var(--violet));
  box-shadow:0 0 18px rgba(232,197,107,.55),0 0 34px rgba(154,107,255,.35);
  animation:pulseday 3.4s ease-in-out infinite;
}
@keyframes pulseday{50%{box-shadow:0 0 26px rgba(79,240,216,.6),0 0 48px rgba(255,107,214,.35)}}

@media (max-width:900px){
  .wrap{grid-template-columns:1fr;padding-top:24px}
  .stage{width:min(88vmin,520px)}
  .right{order:2}
  .backlink{font-size:9px;padding:8px 12px}
  .meditation-link{font-size:9px;padding:8px 12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important}
}