/* ===== Fonts (local) ===== */
@font-face{font-family:'Baloo 2';src:url(../fonts/Baloo2.ttf) format('truetype');font-weight:400 800;font-display:swap;}
@font-face{font-family:'Open Sans';src:url(../fonts/OpenSans.ttf) format('truetype');font-weight:300 800;font-display:swap;}
@font-face{font-family:'Bebas Neue';src:url(../fonts/BebasNeue.ttf) format('truetype');font-display:swap;}

:root{
  --lavendel:#9b7fc7; --lavendel-ljus:#efe8f9; --rosa:#ef84ad; --rosa-ljus:#fde9f2; --guld:#e0a93a;
  --groda:#4e9a48; --groda-mork:#356b31; --groda-ljus:#eaf5e7;
  --leif:#9a4fc4; --leif-mork:#6a2f93; --leif-ljus:#f2e9fa;
  --plommon:#43355c; --text:#473b5e;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
img{max-width:100%;display:block;}
body{font-family:'Open Sans',sans-serif; color:var(--text); line-height:1.68; overflow-x:hidden;
  font-size:clamp(16px,1.5vw,18.5px);
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(60vw 40vw at 80% 0%, #fce9f2 0%, rgba(252,233,242,0) 60%),
    radial-gradient(55vw 45vw at 0% 30%, #eef0fb 0%, rgba(238,240,251,0) 55%),
    radial-gradient(60vw 50vw at 100% 75%, #e9f4e6 0%, rgba(233,244,230,0) 60%),
    linear-gradient(180deg,#f7f1fb 0%, #fdfbfe 30%, #fbf4f8 100%);
  background-attachment:fixed;}
h1,h2,h3{font-family:'Baloo 2',cursive; color:var(--plommon); line-height:1.1;}
b,strong{font-weight:700; color:#3c2f55;}
.wrap{width:100%; max-width:880px; margin:0 auto; padding:0 24px; position:relative; z-index:2;}

/* shared image helpers (background, reused) */
.cimg{background-size:contain; background-position:center bottom; background-repeat:no-repeat; display:inline-block;}
.img-g-lg{background-image:url(../img/gunnar.png); aspect-ratio:560/808;}
.img-l-lg{background-image:url(../img/leif.png); aspect-ratio:460/822;}
.img-g-sm{background-image:url(../img/gunnar-sm.png); aspect-ratio:200/288;}
.img-l-sm{background-image:url(../img/leif-sm.png); aspect-ratio:180/321;}

/* ===== HERO ===== */
.hero{min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:6vh 20px 9vh; position:relative; overflow:hidden;}
.hero .spark{position:absolute; color:var(--guld); opacity:.7; animation:twinkle 3s ease-in-out infinite;}
.hero .kick{font-family:'Bebas Neue',sans-serif; letter-spacing:.34em; color:var(--lavendel);
  font-size:clamp(13px,2.8vw,18px); margin-bottom:16px; padding-left:.34em; opacity:0; animation:fadeUp .8s .1s forwards;}
.hero .logo{width:min(92vw,760px); height:auto; filter:drop-shadow(0 10px 22px rgba(67,53,92,.18));
  opacity:0; transform:scale(.9); animation:pop .9s .25s cubic-bezier(.2,.8,.2,1.1) forwards;}
.hero .duo{position:relative; margin-top:clamp(14px,4vw,24px); display:flex; justify-content:center;
  align-items:flex-end; gap:min(4vw,22px); width:100%;}
.hero .duo .g{width:min(42vw,250px); opacity:0; animation:slideInL 1s .5s cubic-bezier(.2,.8,.2,1) forwards, bobA 5s 1.5s ease-in-out infinite;}
.hero .duo .l{width:min(36vw,210px); opacity:0; animation:slideInR 1s .65s cubic-bezier(.2,.8,.2,1) forwards, bobB 5.6s 1.65s ease-in-out infinite;}
.hero .tag{margin-top:clamp(16px,3vw,22px); color:#7c7196; font-size:clamp(15px,2.6vw,17.5px); opacity:0; animation:fadeUp .8s .9s forwards; padding:0 12px;}
.scrolldown{display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--lavendel);
  font-size:12.5px; letter-spacing:.2em; padding:0 0 0 .2em; text-transform:uppercase; cursor:pointer;
  background:none; border:0; font-family:inherit; transition:color .25s;}
.scrolldown:hover,.scrolldown:focus-visible{color:var(--rosa); outline:none;}
.hero .scrolldown{position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  opacity:0; animation:fadeUpCenter 1s 1.3s forwards;}
.chscroll{width:fit-content; margin:clamp(34px,6vh,56px) auto 0;}
.scrolldown .arrow{width:18px; height:18px; border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor;
  transform:rotate(45deg); animation:bounce 1.8s infinite;}
.drills{display:flex; gap:9px; margin-top:16px; opacity:0; animation:fadeUp .8s 1.05s forwards;}
.drills i{width:13px; height:13px; border-radius:4px; transform:rotate(45deg); display:block;}

/* ===== MEET ===== */
.meet{padding:9vh 0 6vh;}
.meet .title{text-align:center; font-weight:800; font-size:clamp(30px,5.6vw,46px); margin-bottom:10px;}
.meet .sub{text-align:center; color:#8b80a0; font-style:italic; margin-bottom:46px; font-size:clamp(16px,2.7vw,19px);}
.card{display:flex; gap:clamp(16px,3vw,26px); align-items:center; border-radius:26px; padding:clamp(18px,3vw,28px); margin-bottom:26px;}
.card.g{background:linear-gradient(135deg,var(--groda-ljus),#f4faf2); border:1.5px solid rgba(78,154,72,.28);}
.card.l{background:linear-gradient(135deg,var(--leif-ljus),#faf4fe); border:1.5px solid rgba(154,79,196,.26); flex-direction:row-reverse;}
.card .cimg{width:clamp(140px,27vw,196px); flex:none; filter:drop-shadow(0 8px 14px rgba(67,53,92,.18));}
.card .role{font-family:'Baloo 2'; font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:15px;}
.card.g .role{color:var(--groda);} .card.l .role{color:var(--leif);}
.card .name{font-family:'Baloo 2'; font-weight:800; font-size:clamp(26px,4.4vw,36px); margin:3px 0 12px;}
.card.g .name{color:var(--groda-mork);} .card.l .name{color:var(--leif-mork);}
.card p{font-size:clamp(16px,2.5vw,18px); line-height:1.64;}

/* ===== CHAPTERS ===== */
.chapter{position:relative; padding:11vh 0 9vh; overflow:hidden;}
.ch-head{text-align:center; margin-bottom:34px;}
.ch-head .kick{font-family:'Bebas Neue',sans-serif; letter-spacing:.32em; color:var(--lavendel); font-size:18px; padding-left:.32em;}
.ch-head .num{font-family:'Baloo 2'; font-weight:800; color:var(--rosa); font-size:clamp(52px,9.5vw,86px); line-height:1; margin:2px 0 4px;}
.ch-head h2{font-weight:800; font-size:clamp(26px,4.8vw,40px);}
.ch-head .rule{display:flex; align-items:center; justify-content:center; gap:9px; margin-top:16px;}
.ch-head .rule span{height:2px; width:clamp(34px,8vw,54px); background:linear-gradient(90deg,transparent,var(--lavendel));}
.ch-head .rule span:last-child{background:linear-gradient(90deg,var(--lavendel),transparent);}
.ch-head .rule i{width:11px; height:11px; background:var(--guld); border-radius:3px; transform:rotate(45deg); display:block;}
.narr{text-align:center; font-style:italic; color:#5a4f76; max-width:640px; margin:0 auto 44px; font-size:clamp(17px,2.8vw,20px);}

.dialogue{display:flex; flex-direction:column; gap:18px;}
.line{display:flex; gap:clamp(10px,2vw,14px); align-items:flex-end; max-width:88%;}
.line.gunnar{align-self:flex-start;}
.line.leif{align-self:flex-end; flex-direction:row-reverse;}
.line .who{width:clamp(52px,10vw,74px); flex:none; filter:drop-shadow(0 3px 5px rgba(67,53,92,.2));}
.bubble{position:relative; border-radius:18px; padding:15px 19px; box-shadow:0 6px 18px rgba(67,53,92,.07);}
.line.gunnar .bubble{background:linear-gradient(135deg,#fff,var(--groda-ljus)); border:1.5px solid rgba(78,154,72,.25); border-bottom-left-radius:6px;}
.line.leif .bubble{background:linear-gradient(135deg,#fff,var(--leif-ljus)); border:1.5px solid rgba(154,79,196,.22); border-bottom-right-radius:6px;}
.bubble .nm{display:block; font-family:'Baloo 2'; font-weight:700; font-size:15px; margin-bottom:4px;}
.line.gunnar .nm{color:var(--groda-mork);} .line.leif .nm{color:var(--leif-mork);}
.bubble p{font-size:clamp(16px,2.6vw,18.5px); line-height:1.58;}
.line.song .bubble{background:linear-gradient(120deg,var(--rosa-ljus),var(--leif-ljus)); font-style:italic;}
.line.song .bubble p{color:var(--leif-mork);}

.tips{display:flex; gap:18px; margin-top:46px; flex-wrap:wrap;}
.tip{flex:1 1 300px; border-radius:20px; padding:26px;}
.tip.grod{background:linear-gradient(135deg,var(--groda-ljus),#f4faf2); border:1.5px solid rgba(78,154,72,.3);}
.tip.al{background:linear-gradient(135deg,var(--leif-ljus),#f8f2fd); border:1.5px solid rgba(154,79,196,.26);}
.tip-h{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
.tip-h .tav{width:52px; flex:none; filter:drop-shadow(0 3px 5px rgba(67,53,92,.18));}
.tip-h h3{font-size:clamp(18px,3.1vw,22px);}
.tip.grod h3{color:var(--groda-mork);} .tip.al h3{color:var(--leif-mork);}
.tip p{font-size:clamp(15.5px,2.5vw,17.5px); line-height:1.62;}
.gnote{display:block; margin-top:12px; padding-left:14px; font-style:italic; font-size:15px;
  color:var(--groda-mork); border-left:3px solid rgba(78,154,72,.4);}

/* big parallax characters framing each chapter (DESKTOP ONLY) */
/* anchored relative to the page centre so they always hug the content column
   and never drift off-screen on wide monitors */
.bigchar{position:absolute; top:8vh; z-index:0; pointer-events:none; display:none;}
.bigchar .bc{width:100%; max-height:48vh; opacity:.9;}
.bigchar.left{left:calc(50% - 690px); width:clamp(170px,15vw,220px); transform:translateX(-130%); opacity:0;}
.bigchar.right{right:calc(50% - 690px); width:clamp(160px,14vw,210px); transform:translateX(130%); opacity:0;}
.chapter.inview .bigchar.left{opacity:1; transform:translateX(0); transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .05s, opacity .9s ease;}
.chapter.inview .bigchar.right{opacity:1; transform:translateX(0); transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .15s, opacity .9s ease;}

/* show side characters only when there's genuine room beside the 880px column */
@media (min-width:1400px){ .bigchar{display:block;} }

/* ===== EPILOG ===== */
.epilog{padding:12vh 0 10vh;}
.epilog .ch-head .orn{color:var(--guld); font-size:22px; margin-bottom:8px;}
.epilog .ch-head h2{font-weight:800; font-size:clamp(28px,4.8vw,40px);}
.epibody{max-width:660px; margin:34px auto 0; text-align:center;}
.epibody p{margin-bottom:18px; color:#52476e; font-size:clamp(17px,2.7vw,19.5px);}
.epi-sign{font-family:'Baloo 2'; font-weight:700; color:var(--plommon); font-size:clamp(21px,3.6vw,26px); margin-top:12px;}

/* ===== END ===== */
.end{text-align:center; padding:10vh 20px 13vh;}
.end .drills{justify-content:center; animation:none; opacity:1;}
.end h2{font-weight:800; font-size:clamp(40px,7.5vw,66px); margin-top:20px;}
.end .small{color:#7c7196; font-style:italic; margin-top:10px; font-size:clamp(15px,2.6vw,17.5px);}
.end .brand{margin-top:28px; display:inline-block; font-family:'Baloo 2'; font-weight:700; color:var(--lavendel);
  letter-spacing:.04em; font-size:21px; text-decoration:none;}
.end .brand:hover{color:var(--rosa);}

.progress{position:fixed; top:0; left:0; height:4px; width:0; z-index:50;
  background:linear-gradient(90deg,var(--groda),var(--lavendel),var(--rosa),var(--guld),var(--leif));}

/* ===== reveal animations ===== */
.reveal{opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1);}
.reveal.from-left{transform:translateX(-60px);}
.reveal.from-right{transform:translateX(60px);}
.reveal.in{opacity:1; transform:none;}

@keyframes fadeUp{from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:none;}}
@keyframes fadeUpCenter{from{opacity:0; transform:translate(-50%,20px);} to{opacity:1; transform:translateX(-50%);}}
@keyframes pop{from{opacity:0; transform:scale(.9);} to{opacity:1; transform:scale(1);}}
@keyframes slideInL{from{opacity:0; transform:translateX(-60px);} to{opacity:1; transform:translateX(0);}}
@keyframes slideInR{from{opacity:0; transform:translateX(60px);} to{opacity:1; transform:translateX(0);}}
@keyframes bobA{0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);}}
@keyframes bobB{0%,100%{transform:translateY(0);} 50%{transform:translateY(-13px);}}
@keyframes twinkle{0%,100%{opacity:.25; transform:scale(.85);} 50%{opacity:.85; transform:scale(1.1);}}
@keyframes bounce{0%,100%{transform:rotate(45deg) translate(0,0);} 50%{transform:rotate(45deg) translate(4px,4px);}}

/* ===== responsive tweaks ===== */
@media (max-width:680px){
  .card,.card.l{flex-direction:column; text-align:center; gap:14px;}
  .line{max-width:100%;}
  .wrap{padding:0 16px;}
  .chapter{padding:9vh 0 7vh;}
  .tips{gap:14px; margin-top:34px;}
}
@media (max-width:400px){
  .hero .duo .g{width:42vw;} .hero .duo .l{width:36vw;}
  .bubble{padding:12px 14px;}
}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.from-left,.reveal.from-right{opacity:1!important; transform:none!important; transition:none;}
  .bigchar{display:none;} *{animation:none!important;} html{scroll-behavior:auto;}
}