*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#031018;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:white;
}

#world{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.intro-overlay{
  position:fixed;
  inset:0;
  z-index:20;
  display:flex;
  justify-content:center;
  align-items:center;
  background:
    radial-gradient(circle at center, rgba(8,24,42,.12), rgba(1,8,12,.24)),
    rgba(1,8,12,.14);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  transition:
    opacity 1.25s ease,
    backdrop-filter 1.25s ease,
    -webkit-backdrop-filter 1.25s ease;
}

.intro-overlay.hide{
  opacity:0;
  pointer-events:none;
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);
}

.portal-ui{
  position:relative;
  width:min(780px,96vw);
  height:min(780px,96vw);
  display:flex;
  justify-content:center;
  align-items:center;
}

.portal-core{

  position:relative;
  z-index:3;

  width:min(560px,84vw);
  height:min(560px,84vw);

  border-radius:50%;

  display:flex;
  justify-content:center;
  align-items:center;

  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(7,18,38,.98),
      rgba(3,9,20,.98) 62%,
      rgba(1,4,10,.99)
    );

  border:
    2.5px solid rgba(90,180,255,.84);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 0 62px rgba(70,150,255,.08),
    0 0 0 1px rgba(70,150,255,.10),
    0 0 24px rgba(70,150,255,.26),
    0 0 72px rgba(40,100,255,.20);
}



.portal-inner{
  width:82%;
  text-align:center;
  position:relative;
  z-index:2;
}

.mark{
  font-family:Georgia,serif;
  font-size:72px;
  letter-spacing:.04em;

  background:
    linear-gradient(
      135deg,
      #2fd0ff,
      #3f7dff
    );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  filter:
    drop-shadow(0 0 10px rgba(70,140,255,.38));

  margin-bottom:8px;
}

h1{
  margin:0;
  font-size:clamp(42px,5.8vw,64px);
  font-weight:300;
  letter-spacing:.02em;
}

p{
  margin:18px auto 28px;
  max-width:330px;
  color:rgba(225,238,255,.66);
  line-height:1.65;
  font-size:17px;
}

button{

  cursor:pointer;

  border:
    1px solid rgba(70,160,255,.82);

  color:white;

  font-size:17px;

  letter-spacing:.18em;

  text-transform:uppercase;

  padding:18px 32px;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      rgba(47,208,255,.90),
      rgba(63,125,255,.90)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 10px 26px rgba(50,120,255,.10);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease;
}

button:hover{
  transform:translateY(-2px);

  filter:
    brightness(1.08);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 14px 34px rgba(50,120,255,.26);
}

.portal-rings{
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:50%;
}

.ring{

  position:absolute;

  left:50%;
  top:50%;

  border-radius:50%;

  border:
    1px solid rgba(80,160,255,.13);

  transform:
    translate(-50%,-50%);

  box-shadow:
    0 0 8px rgba(70,150,255,.25),
    inset 0 0 8px rgba(70,150,255,.05);
}

.ring::after{

  content:"";

  position:absolute;

  inset:-1px;

  border-radius:50%;

  border-top:
    2px solid rgba(90,180,255,.68);

  border-right:
    1px solid transparent;

  border-bottom:
    1px solid transparent;

  border-left:
    1px solid transparent;

  filter:
    drop-shadow(0 0 4px rgba(70,150,255,.48));
}

.ring-a{
  width:680px;
  height:680px;
  animation:rotateA 13s linear infinite;
}

.ring-b{
  width:615px;
  height:615px;
  opacity:.62;
  animation:rotateB 20s linear infinite;
}

.ring-c{
  width:680px;
  height:680px;
  opacity:.34;
  animation:rotateA 31s linear infinite;
}

.ring-d{
  width:742px;
  height:742px;
  opacity:.18;
  animation:rotateB 44s linear infinite;
}

.spark{
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#dffffb;
  box-shadow:
    0 0 10px rgba(180,255,248,.95),
    0 0 24px rgba(42,255,230,.7),
    0 0 44px rgba(36,143,255,.35);
}

.spark::after{
  content:"";
  position:absolute;
  right:5px;
  top:3px;
  width:34px;
  height:1px;
  background:
    linear-gradient(90deg, transparent, rgba(150,255,246,.85));
  transform:translateY(-50%);
}

.spark-a{ animation:orbitA 4.8s linear infinite; }
.spark-b{ animation:orbitB 7.4s linear infinite; opacity:.8; }
.spark-c{ animation:orbitC 10s linear infinite; opacity:.62; }
.spark-d{ animation:orbitD 13.5s linear infinite; opacity:.48; }

@keyframes rotateA{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to{ transform:translate(-50%,-50%) rotate(360deg); }
}

@keyframes rotateB{
  from{ transform:translate(-50%,-50%) rotate(360deg); }
  to{ transform:translate(-50%,-50%) rotate(0deg); }
}

@keyframes orbitA{
  from{ transform:rotate(0deg) translateX(340px) rotate(0deg); }
  to{ transform:rotate(360deg) translateX(340px) rotate(-360deg); }
}

@keyframes orbitB{
  from{ transform:rotate(90deg) translateX(307px) rotate(-90deg); }
  to{ transform:rotate(-270deg) translateX(307px) rotate(270deg); }
}

@keyframes orbitC{
  from{ transform:rotate(220deg) translateX(340px) rotate(-220deg); }
  to{ transform:rotate(580deg) translateX(340px) rotate(-580deg); }
}

@keyframes orbitD{
  from{ transform:rotate(310deg) translateX(371px) rotate(-310deg); }
  to{ transform:rotate(-50deg) translateX(371px) rotate(50deg); }
}

#hud{
  position:fixed;
  top:28px;
  left:34px;
  z-index:5;
  display:flex;
  flex-direction:column;
  gap:5px;
  opacity:.9;
  pointer-events:none;
}

#hud strong{
  font-size:16px;
  letter-spacing:.08em;
}

#hud span{
  color:rgba(210,230,255,.62);
  font-size:13px;
}

#panel{
  position:fixed;
  right:32px;
  top:50%;
  transform:translateY(-50%) translateX(120%);
  width:min(390px,88vw);
  padding:28px;
  z-index:10;
  border-radius:28px;
  background:rgba(2,14,22,.74);
  border:1px solid rgba(90,180,255,.18);
  box-shadow:0 30px 100px rgba(0,0,0,.45);
  backdrop-filter:blur(18px);
  transition:transform .55s ease;
}

#panel.open{
  transform:translateY(-50%) translateX(0);
}

#closePanel{
  position:absolute;
  right:16px;
  top:16px;
  width:34px;
  height:34px;
  padding:0;
  letter-spacing:0;
}

#panel h2{
  margin:0 0 12px;
  font-size:30px;
  font-weight:300;
}

#panel p{
  margin:0;
  max-width:none;
}

@media(max-width:700px){

  .portal-ui{
    transform:scale(.92);
  }

  #hud{
    left:20px;
    top:20px;
  }
}

/* =========================================
   CINEMATIC JOURNEY ADD-ON
   Přidáno bez změny úvodního portálu
========================================= */

.intro-overlay.portal-activating .ring-a{ animation-duration:2.2s; }
.intro-overlay.portal-activating .ring-b{ animation-duration:3s; }
.intro-overlay.portal-activating .ring-c{ animation-duration:4.2s; }
.intro-overlay.portal-activating .ring-d{ animation-duration:5.4s; }
.intro-overlay.portal-activating .portal-core{ animation:portalPulse .95s ease-in-out infinite alternate; }

@keyframes portalPulse{
  from{
    transform:scale(1);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      inset 0 0 62px rgba(70,150,255,.08),
      0 0 0 1px rgba(70,150,255,.10),
      0 0 24px rgba(70,150,255,.26),
      0 0 72px rgba(40,100,255,.20);
  }
  to{
    transform:scale(1.035);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 0 90px rgba(70,150,255,.18),
      0 0 0 1px rgba(70,150,255,.18),
      0 0 52px rgba(70,150,255,.42),
      0 0 140px rgba(40,100,255,.32);
  }
}

.journey-text{
  position:fixed;
  left:50%;
  bottom:8vh;
  transform:translateX(-50%) translateY(24px);
  z-index:12;
  width:min(720px,88vw);
  padding:28px 34px;
  border-radius:28px;
  color:white;
  background:linear-gradient(180deg, rgba(2,16,30,.58), rgba(1,8,18,.72));
  border:1px solid rgba(90,180,255,.22);
  box-shadow:0 24px 80px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  opacity:0;
  pointer-events:none;
  transition:opacity .7s ease, transform .7s ease;
}
.journey-text.visible{ opacity:1; transform:translateX(-50%) translateY(0); }
.journey-kicker{ font-size:12px; letter-spacing:.28em; color:rgba(90,180,255,.82); margin-bottom:12px; }
.journey-text h2{ margin:0 0 12px; font-size:clamp(30px,4vw,54px); font-weight:300; letter-spacing:.04em; }
.journey-text p{ margin:0; max-width:none; font-size:18px; line-height:1.7; color:rgba(225,238,255,.78); }
#journeyCursor{ display:inline-block; margin-top:10px; color:rgba(90,180,255,.95); animation:cursorBlink .8s steps(1) infinite; }
@keyframes cursorBlink{ 50%{ opacity:0; } }
.journey-status{
  position:fixed; left:34px; bottom:28px; z-index:6; padding:10px 14px; border-radius:999px;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(225,238,255,.66);
  background:rgba(2,14,22,.42); border:1px solid rgba(90,180,255,.14);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); pointer-events:none;
}
@media(max-width:700px){
  .journey-text{ bottom:5vh; padding:22px; }
  .journey-text p{ font-size:15px; }
  .journey-status{ left:20px; bottom:18px; }
}


/* =========================================
   BUOY + PORTAL JOURNEY — NEW SYSTEM
   Starý HTML typewriter panel se nepoužívá.
   Text je kreslený přímo do 3D portálu přes CanvasTexture.
========================================= */

.journey-text,
.journey-text.visible,
.journey-kicker,
#journeyTitle,
#journeyBody,
#journeyCursor{
  display:none !important;
}

.continue-orb{
  position:fixed;
  left:50%;
  top:50%;
  z-index:14;

  width:94px;
  height:94px;

  display:flex;
  justify-content:center;
  align-items:center;

  border-radius:50%;

  border:
    1px solid rgba(90,180,255,.72);

  color:white;

  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;

  background:
    radial-gradient(
      circle at 35% 28%,
      rgba(255,255,255,.22),
      rgba(47,208,255,.30) 30%,
      rgba(63,125,255,.20) 64%,
      rgba(5,18,42,.56)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 0 28px rgba(70,150,255,.16),
    0 0 24px rgba(70,150,255,.28),
    0 0 72px rgba(40,100,255,.18);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  opacity:0;
  pointer-events:none;

  transform:
    translate(-50%,-50%)
    scale(.72);

  transition:
    opacity .45s ease,
    transform .45s ease,
    box-shadow .25s ease,
    filter .25s ease;
}

.continue-orb.visible{
  opacity:1;
  pointer-events:auto;

  transform:
    translate(-50%,-50%)
    scale(1);
}

.continue-orb:hover{
  filter:brightness(1.12);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 0 34px rgba(70,150,255,.22),
    0 0 34px rgba(70,150,255,.42),
    0 0 96px rgba(40,100,255,.28);
}

.continue-orb span{
  pointer-events:none;
}

.journey-status{
  opacity:.72;
}

body.is-reading #hud{
  opacity:.35;
}

body.is-reading .journey-status{
  color:rgba(225,238,255,.78);
  border-color:rgba(90,180,255,.24);
  background:rgba(2,14,22,.55);
}

@media(max-width:700px){
  .continue-orb{
    width:78px;
    height:78px;
    font-size:10px;
  }
}