/* ============================================================
   KERRAVE — web system (site adaptation of the flyer system)
   Shared tokens + atmospheric backdrop + components.
   Used by all homepage directions and (later) the WP theme.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Audiowide&family=Oswald:wght@300;400;500;600;700&display=swap');

:root{
  --bg0:#0a0614;
  --bg1:#160b2e;
  --bg2:#2c1856;
  --cream:#f4ecd8;
  --ink:#0b0816;
  --amber:#f4b04a;
  --amber-soft:#f6c476;
  --purple:#a06bff;
  --pink:#ff6a8a;

  --c1:oklch(0.76 0.16 62);
  --c2:oklch(0.80 0.15 88);
  --c3:oklch(0.66 0.20 24);
  --c4:oklch(0.64 0.18 305);
  --c5:oklch(0.72 0.13 232);

  --maxw:1200px;
  --gut:clamp(20px,4vw,56px);
  --card:rgba(20,11,40,.55);
  --line:rgba(244,176,74,.22);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Oswald',system-ui,sans-serif;
  color:var(--cream);
  background:var(--bg0);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  position:relative;
  overflow-x:hidden;
}

/* ============================================================
   ATMOSPHERIC BACKDROP — fixed, behind everything
   (lifted from the flyer background, tuned for tall pages)
   ============================================================ */
.kr-bg{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:var(--bg0);}
.kr-bg .base{position:absolute;inset:0;
  background:
    radial-gradient(120% 50% at 50% 100%, rgba(255,138,46,.30), transparent 55%),
    radial-gradient(110% 55% at 50% 100%, rgba(150,44,224,.34), transparent 60%),
    radial-gradient(70% 40% at 50% 12%, rgba(154,96,232,.20), transparent 70%),
    radial-gradient(90% 50% at 14% 4%, rgba(70,40,150,.34), transparent 60%),
    radial-gradient(90% 50% at 86% 2%, rgba(120,40,180,.32), transparent 60%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 60%, #060410 100%);
  background-attachment:fixed;}
.kr-bg .rays{position:absolute;inset:-10% -10% 40% -10%;
  background:repeating-conic-gradient(from 202deg at 50% 120%,
     transparent 0deg 5.4deg, rgba(190,96,255,.16) 5.4deg 6.2deg,
     transparent 6.2deg 11deg, rgba(255,150,64,.12) 11deg 11.8deg,
     transparent 11.8deg 17deg);
  mix-blend-mode:screen;
  -webkit-mask:radial-gradient(70% 80% at 50% 110%, #000 8%, transparent 72%);
          mask:radial-gradient(70% 80% at 50% 110%, #000 8%, transparent 72%);}
.kr-bg .stars{position:absolute;inset:0;}
.kr-bg .stars i{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 2px #fff;
  animation:krtwinkle 4s ease-in-out infinite;}
@keyframes krtwinkle{0%,100%{opacity:.25;}50%{opacity:.9;}}
.kr-bg .grain{position:absolute;inset:0;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
@media (prefers-reduced-motion: reduce){.kr-bg .stars i{animation:none;opacity:.6;}}

/* ============================================================
   TYPE
   ============================================================ */
.kr-display{font-family:'Bungee';font-weight:400;line-height:.92;letter-spacing:.005em;
  color:var(--cream);
  text-shadow:.010em .045em 0 #6b5520,.010em .085em 0 #3a2c12,0 .12em .14em rgba(0,0,0,.55);}
.kr-eyebrow{font-family:'Audiowide';text-transform:uppercase;letter-spacing:.10em;
  background:linear-gradient(92deg,#ffb24a 6%,#ff6a8a 52%,#a06bff 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 .35em rgba(255,120,150,.35));font-size:clamp(13px,1.4vw,18px);}
.kr-kicker{font-family:'Oswald';font-weight:700;text-transform:uppercase;letter-spacing:.32em;
  color:var(--amber);font-size:13px;}
h1,h2,h3{font-family:'Bungee';font-weight:400;line-height:1;}
p{color:rgba(244,236,216,.82);}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.kr-wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);}
.kr-section{padding-block:clamp(56px,8vw,120px);position:relative;}
.kr-sec-head{display:flex;flex-direction:column;gap:10px;margin-bottom:40px;}
.kr-sec-head h2{font-size:clamp(28px,4vw,52px);}
.kr-rule{height:1px;width:100%;background:linear-gradient(90deg,transparent,var(--line),transparent);}

/* corner-bracket frame (section / card motif) */
.kr-framed{position:relative;border:1px solid var(--line);}
.kr-framed::before,.kr-framed::after,
.kr-framed > .br-bl,.kr-framed > .br-br{content:"";position:absolute;width:22px;height:22px;
  border:2px solid var(--amber);opacity:.8;}
.kr-framed::before{top:-1px;left:-1px;border-right:none;border-bottom:none;}
.kr-framed::after{top:-1px;right:-1px;border-left:none;border-bottom:none;}
.kr-framed > .br-bl{bottom:-1px;left:-1px;border-right:none;border-top:none;}
.kr-framed > .br-br{bottom:-1px;right:-1px;border-left:none;border-top:none;}

/* ============================================================
   NAV
   ============================================================ */
.kr-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:14px var(--gut);
  background:linear-gradient(180deg,rgba(8,5,18,.92),rgba(8,5,18,.55) 70%,transparent);
  backdrop-filter:blur(8px);}
.kr-nav .brand{display:flex;align-items:center;gap:12px;font-family:'Bungee';font-size:20px;
  color:var(--cream);text-decoration:none;letter-spacing:.02em;}
.kr-nav .brand img{height:38px;width:auto;display:block;
  filter:drop-shadow(0 0 .6em rgba(255,175,80,.3));}
.kr-nav .links{display:flex;align-items:center;gap:28px;}
.kr-nav .links a{font-family:'Oswald';font-weight:500;text-transform:uppercase;letter-spacing:.12em;
  font-size:13px;color:rgba(244,236,216,.78);text-decoration:none;position:relative;padding:6px 0;
  transition:color .2s;}
.kr-nav .links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--amber);transition:right .25s ease;}
.kr-nav .links a:hover{color:var(--cream);}
.kr-nav .links a:hover::after{right:0;}

/* ============================================================
   BUTTONS
   ============================================================ */
.kr-btn{display:inline-flex;align-items:center;gap:10px;font-family:'Oswald';font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;font-size:14px;text-decoration:none;cursor:pointer;
  padding:14px 26px;border-radius:6px;border:1.6px solid var(--amber);color:var(--ink);
  background:linear-gradient(180deg,var(--amber-soft),var(--amber));
  box-shadow:0 0 1.4em -.4em var(--amber);transition:transform .18s ease, box-shadow .25s ease;}
.kr-btn:hover{transform:translateY(-2px);box-shadow:0 .4em 1.8em -.4em var(--amber);}
.kr-btn.ghost{background:transparent;color:var(--amber-soft);
  box-shadow:inset 0 0 1.4em -.6em var(--amber);}
.kr-btn.ghost:hover{background:rgba(244,176,74,.08);color:var(--cream);}

/* ============================================================
   EVENT CARD (neon lineup-row DNA, as a web card)
   ============================================================ */
.kr-events{display:grid;gap:16px;}
.kr-event{--c:var(--c1);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;
  padding:20px 24px;border:1.6px solid var(--c);border-radius:12px;text-decoration:none;color:var(--cream);
  background:linear-gradient(90deg,color-mix(in oklab,var(--c) 14%,transparent),var(--card) 60%);
  box-shadow:0 0 1.1em -.3em var(--c),inset 0 0 1.6em -.6em var(--c);
  transition:transform .2s ease, box-shadow .25s ease;}
.kr-event:hover{transform:translateX(4px);box-shadow:0 0 1.8em -.2em var(--c),inset 0 0 1.6em -.5em var(--c);}
.kr-event .date{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:64px;padding-right:22px;border-right:1.4px solid color-mix(in oklab,var(--c) 50%,transparent);}
.kr-event .date .d{font-family:'Bungee';font-size:26px;color:var(--c);line-height:1;
  text-shadow:0 0 .5em var(--c);}
.kr-event .date .m{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.18em;
  font-size:12px;color:var(--amber);}
.kr-event .meta .t{font-family:'Audiowide';font-size:clamp(18px,2.2vw,24px);letter-spacing:.02em;color:var(--cream);}
.kr-event .meta .s{font-family:'Oswald';font-weight:300;text-transform:uppercase;letter-spacing:.08em;
  font-size:13px;color:rgba(244,236,216,.62);margin-top:4px;}
.kr-event .go{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:12px;color:var(--amber-soft);white-space:nowrap;}

/* ============================================================
   MEDIA PLACEHOLDER (for user's photos / videos)
   ============================================================ */
.kr-media{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--line);
  background:
    repeating-linear-gradient(135deg,rgba(160,107,255,.08) 0 14px,rgba(160,107,255,.02) 14px 28px),
    linear-gradient(160deg,var(--bg2),var(--bg0));
  display:flex;align-items:center;justify-content:center;min-height:200px;}
.kr-media .tag{font-family:'Oswald',monospace;font-weight:500;text-transform:uppercase;letter-spacing:.18em;
  font-size:12px;color:rgba(244,236,216,.5);border:1px dashed rgba(244,236,216,.28);
  padding:8px 14px;border-radius:6px;background:rgba(8,5,18,.4);}
.kr-media .play{position:absolute;width:64px;height:64px;border-radius:50%;border:2px solid var(--amber);
  display:flex;align-items:center;justify-content:center;background:rgba(8,5,18,.5);
  box-shadow:0 0 1.4em -.3em var(--amber);}
.kr-media .play::after{content:"";border-left:18px solid var(--amber);border-top:11px solid transparent;
  border-bottom:11px solid transparent;margin-left:4px;}

/* ============================================================
   FOOTER
   ============================================================ */
.kr-footer{padding:64px var(--gut) 40px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,rgba(6,4,16,.7));}
.kr-footer .top{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start;
  max-width:var(--maxw);margin:0 auto;}
.kr-footer .brand{display:flex;align-items:center;gap:12px;font-family:'Bungee';font-size:22px;}
.kr-footer .brand img{height:46px;}
.kr-footer .cols{display:flex;gap:56px;flex-wrap:wrap;}
.kr-footer h4{font-family:'Oswald';font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  font-size:12px;color:var(--amber);margin-bottom:14px;}
.kr-footer a{display:block;color:rgba(244,236,216,.72);text-decoration:none;font-size:14px;
  margin-bottom:9px;transition:color .2s;}
.kr-footer a:hover{color:var(--cream);}
.kr-footer .legal{max-width:var(--maxw);margin:40px auto 0;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:12px;letter-spacing:.06em;color:rgba(244,236,216,.45);text-transform:uppercase;}

/* newsletter */
.kr-news{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
.kr-news input{font-family:'Oswald';font-size:14px;color:var(--cream);background:rgba(8,5,18,.6);
  border:1px solid var(--line);border-radius:6px;padding:12px 14px;min-width:220px;outline:none;}
.kr-news input:focus{border-color:var(--amber);}

/* ============================================================
   REVEAL ON SCROLL (subtle motion)
   ============================================================ */
.kr-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease;}
.kr-reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){.kr-reveal{opacity:1;transform:none;}}

@media (max-width:760px){
  .kr-nav .links{display:none;}
  .kr-event{grid-template-columns:auto 1fr;}
  .kr-event .go{display:none;}
}