:root{
  --bg:#030605;
  --bg2:#07140f;
  --card:#0b1511;
  --card2:#101f18;
  --green:#00ff88;
  --green2:#00b86b;
  --cyan:#00d9ff;
  --purple:#a855ff;
  --orange:#ffae35;
  --text:#f4fff9;
  --muted:#9fc4b6;
  --danger:#ff4d5e;
  --warn:#ffd166;
  --glass:rgba(10,22,17,.72);
  --border:rgba(0,255,136,.28);
  --shadow:0 0 35px rgba(0,255,136,.18);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  min-height:100vh;
  background:
    radial-gradient(circle at 20% 0%,rgba(0,255,136,.22),transparent 32%),
    radial-gradient(circle at 80% 10%,rgba(0,217,255,.13),transparent 30%),
    linear-gradient(180deg,#06120e 0%,#020403 100%);
  overflow-x:hidden;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 80%);
  z-index:-1;
}

a{color:inherit}

/* TOPBAR */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:16px 6%;
  background:rgba(3,6,5,.72);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  box-shadow:0 10px 35px rgba(0,0,0,.35);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--green);
  font-weight:900;
  font-size:24px;
  text-decoration:none;
  text-shadow:0 0 18px rgba(0,255,136,.9);
  letter-spacing:.4px;
}

.brand img{
  max-height:46px;
  max-width:230px;
  object-fit:contain;
  filter:drop-shadow(0 0 14px rgba(0,255,136,.8));
}

nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

nav a{
  color:var(--text);
  text-decoration:none;
  font-weight:800;
  padding:10px 13px;
  border-radius:999px;
  border:1px solid transparent;
  transition:.2s;
}

nav a:hover{
  color:var(--green);
  border-color:var(--border);
  background:rgba(0,255,136,.08);
  box-shadow:0 0 18px rgba(0,255,136,.18);
}

.admin-link{
  color:var(--green);
}

/* LAYOUT */
main{
  padding:42px 6%;
}

.footer{
  text-align:center;
  padding:35px 6%;
  color:var(--muted);
  border-top:1px solid rgba(255,255,255,.06);
}

/* HERO */
.hero{
  position:relative;
  text-align:center;
  padding:90px 20px 55px;
  overflow:hidden;
}

.hero:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:520px;
  height:520px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(0,255,136,.16),transparent 65%);
  filter:blur(10px);
  z-index:-1;
}

.hero-with-banner{
  position:relative;
  overflow:hidden;
  border-radius:34px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

.hero-with-banner:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(3,6,5,.62),rgba(3,6,5,.88)),
    var(--heroBanner) center/cover;
  z-index:-1;
  filter:saturate(1.18) contrast(1.05);
}

.hero h1{
  font-size:clamp(42px,7vw,88px);
  margin:0;
  color:var(--green);
  text-shadow:
    0 0 16px rgba(0,255,136,.85),
    0 0 42px rgba(0,255,136,.42);
  letter-spacing:-1px;
}

.hero p{
  max-width:900px;
  margin:22px auto 0;
  color:#dfffee;
  font-size:21px;
  line-height:1.65;
}

.hero-actions{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:30px;
}

/* BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:none;
  border-radius:16px;
  padding:14px 22px;
  background:linear-gradient(135deg,var(--green),var(--green2));
  color:#001b10;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
  box-shadow:
    0 0 24px rgba(0,255,136,.35),
    inset 0 1px 0 rgba(255,255,255,.35);
  transition:.2s;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 0 34px rgba(0,255,136,.55);
}

.btn.secondary{
  background:rgba(12,26,20,.82);
  color:var(--green);
  border:1px solid var(--border);
}

/* GAME CARDS */
.game-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:26px;
  margin-top:34px;
}

.game-card{
  position:relative;
  overflow:hidden;
  min-height:360px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:26px;
  border-radius:28px;
  background:linear-gradient(180deg,rgba(14,30,23,.9),rgba(3,6,5,.96));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  transition:.28s ease;
  isolation:isolate;
}

.game-card:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(circle at 50% 20%,rgba(0,255,136,.25),transparent 35%),
    linear-gradient(180deg,transparent 35%,rgba(0,0,0,.8) 100%);
  z-index:0;
}

.game-card:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.08);
  pointer-events:none;
}

.game-card:hover{
  transform:translateY(-9px) scale(1.018);
  box-shadow:
    0 0 45px rgba(0,255,136,.38),
    0 24px 55px rgba(0,0,0,.45);
}

.game-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.38;
  transition:.35s;
  z-index:-1;
}

.game-card:hover img{
  opacity:.52;
  transform:scale(1.08);
}

.game-card-content{
  position:relative;
  z-index:2;
}

.game-card h2{
  font-size:32px;
  margin:0 0 10px;
  color:var(--green);
  text-shadow:0 0 18px rgba(0,255,136,.65);
}

.game-card p{
  color:#c6e7da;
  line-height:1.55;
}

/* SECTIONS */
.section-title{
  font-size:clamp(30px,4vw,44px);
  color:var(--green);
  text-align:center;
  margin:26px 0;
  text-shadow:0 0 18px rgba(0,255,136,.45);
}

.page-box,
.admin-box,
.status-card{
  background:
    linear-gradient(180deg,rgba(13,26,20,.86),rgba(5,8,7,.92));
  border:1px solid var(--border);
  border-radius:26px;
  padding:26px;
  box-shadow:var(--shadow);
}

.page-box{
  max-width:980px;
  margin:auto;
  line-height:1.78;
}

.admin-box{
  max-width:1100px;
  margin:auto;
}

/* STATUS */
.status-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
}

.status-card{
  position:relative;
  overflow:hidden;
}

.status-card:before{
  content:"";
  position:absolute;
  right:-60px;
  top:-60px;
  width:150px;
  height:150px;
  border-radius:50%;
  background:rgba(0,255,136,.13);
  filter:blur(8px);
}

.badge{
  display:inline-block;
  padding:8px 13px;
  border-radius:999px;
  font-weight:900;
}

.online{
  background:rgba(0,255,136,.14);
  color:var(--green);
  border:1px solid rgba(0,255,136,.55);
}

.offline{
  background:rgba(255,77,94,.14);
  color:var(--danger);
  border:1px solid rgba(255,77,94,.55);
}

.warning{
  background:rgba(255,209,102,.15);
  color:var(--warn);
  border:1px solid rgba(255,209,102,.55);
}

.status-meta{
  display:grid;
  gap:7px;
  margin-top:15px;
  color:var(--muted);
  font-size:13px;
}

.status-meta b{
  color:var(--text);
}

/* TIMELINE */
.small{
  font-size:13px;
  color:var(--muted);
}

.timeline{
  display:flex;
  flex-direction:column;
  gap:15px;
  margin-top:22px;
}

.timeline-item{
  position:relative;
  border-left:4px solid rgba(0,255,136,.55);
  padding:15px 18px;
  background:rgba(255,255,255,.04);
  border-radius:16px;
  box-shadow:0 0 20px rgba(0,0,0,.18);
}

.timeline-item:before{
  content:"";
  position:absolute;
  left:-9px;
  top:18px;
  width:13px;
  height:13px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 16px var(--green);
}

.timeline-item.outage{
  border-left-color:var(--danger);
}

.timeline-item.outage:before{
  background:var(--danger);
  box-shadow:0 0 16px var(--danger);
}

.timeline-item.maintenance,
.timeline-item.warning{
  border-left-color:var(--warn);
}

.timeline-item.maintenance:before,
.timeline-item.warning:before{
  background:var(--warn);
  box-shadow:0 0 16px var(--warn);
}

.timeline-item.resolved{
  border-left-color:var(--green);
}

.timeline-item p{
  margin:7px 0;
}

.timeline-item small{
  color:var(--muted);
}

/* FORMS / ADMIN */
input,
textarea,
select{
  width:100%;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(0,255,136,.28);
  background:rgba(3,10,7,.92);
  color:var(--text);
  margin:8px 0 15px;
  outline:none;
}

input:focus,
textarea:focus,
select:focus{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(0,255,136,.12);
}

label{
  font-weight:900;
  color:var(--green);
}

table{
  width:100%;
  border-collapse:collapse;
  margin-top:20px;
  overflow:hidden;
  border-radius:16px;
}

td,th{
  border-bottom:1px solid rgba(255,255,255,.09);
  padding:13px;
  text-align:left;
}

th{
  color:var(--green);
  background:rgba(0,255,136,.06);
}

tr:hover td{
  background:rgba(255,255,255,.025);
}

.notice{
  background:rgba(0,255,136,.12);
  border:1px solid rgba(0,255,136,.36);
  padding:13px;
  border-radius:15px;
  color:var(--green);
}

.twofa-box{
  border:1px solid rgba(0,255,136,.25);
  background:rgba(255,255,255,.04);
  border-radius:18px;
  padding:15px;
  margin:14px 0;
}

.twofa-box code{
  color:var(--green);
  word-break:break-all;
}

.avatar-preview{
  width:94px;
  height:94px;
  object-fit:cover;
  border-radius:50%;
  border:2px solid rgba(0,255,136,.6);
  box-shadow:0 0 22px rgba(0,255,136,.3);
}

/* PORTAL */
.portal-screen{
  position:relative;
  min-height:72vh;
  display:grid;
  place-items:center;
  text-align:center;
  overflow:hidden;
  border-radius:34px;
  background:#020504;
  border:1px solid var(--border);
  box-shadow:0 0 55px rgba(0,255,136,.18);
  isolation:isolate;
}

.portal-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.26;
  filter:blur(2px) saturate(1.35) contrast(1.08);
  transform:scale(1.08);
  animation:bgZoom 2.6s ease forwards;
}

.portal-screen:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle,rgba(0,255,136,.22),rgba(0,0,0,.92) 62%),
    linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.88));
  z-index:0;
}

.portal-screen:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-radial-gradient(circle at center,rgba(255,255,255,.08) 0 1px,transparent 1px 18px);
  opacity:.25;
  animation:portalWarp 2.6s linear forwards;
  z-index:1;
}

.portal-ring{
  position:absolute;
  width:min(58vw,560px);
  height:min(58vw,560px);
  border-radius:50%;
  border:12px solid rgba(0,255,136,.62);
  box-shadow:
    0 0 50px rgba(0,255,136,.95),
    0 0 120px rgba(0,255,136,.28),
    inset 0 0 65px rgba(0,255,136,.48);
  animation:
    portalPulse 1.15s infinite alternate,
    portalSpin 3.4s linear infinite,
    portalOpen 2.6s ease forwards;
  z-index:2;
}

.portal-ring:before{
  content:"";
  position:absolute;
  inset:22px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.25);
  box-shadow:inset 0 0 35px rgba(255,255,255,.12);
}

.portal-ring:after{
  content:"";
  position:absolute;
  inset:42px;
  border-radius:50%;
  border:3px dashed rgba(255,255,255,.38);
  animation:portalSpin 2s linear infinite reverse;
}

.portal-content{
  position:relative;
  z-index:4;
  padding:25px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  backdrop-filter:blur(8px);
}

.portal-content p{
  color:var(--muted);
  font-weight:900;
  letter-spacing:2.5px;
  text-transform:uppercase;
}

.portal-content h1{
  font-size:clamp(42px,7vw,88px);
  color:var(--green);
  text-shadow:0 0 34px rgba(0,255,136,.95);
  margin:10px 0 24px;
}

.loading-bar{
  width:min(470px,80vw);
  height:13px;
  border:1px solid rgba(0,255,136,.48);
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
}

.loading-bar span{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--green2),var(--green),#b8ffd9);
  box-shadow:0 0 18px rgba(0,255,136,.8);
  animation:loadPortal 2.35s forwards;
}

/* PORTAL THEMES */
.portal-screen.minecraft .portal-ring,
.portal-screen.minecraft .loading-bar{
  border-color:rgba(0,255,136,.65);
}

.portal-screen.minecraft .portal-content h1{
  color:#00ff88;
}

.portal-screen.fivem:before{
  background:radial-gradient(circle,rgba(168,85,255,.24),rgba(0,0,0,.93) 63%);
}

.portal-screen.fivem .portal-ring{
  border-color:rgba(168,85,255,.75);
  box-shadow:
    0 0 55px rgba(168,85,255,.95),
    0 0 130px rgba(0,217,255,.25),
    inset 0 0 65px rgba(168,85,255,.42);
}

.portal-screen.fivem .portal-content h1{
  color:#c69aff;
  text-shadow:0 0 34px rgba(168,85,255,.95);
}

.portal-screen.fivem .loading-bar{
  border-color:rgba(168,85,255,.55);
}

.portal-screen.fivem .loading-bar span{
  background:linear-gradient(90deg,#00d9ff,#a855ff,#f0c8ff);
}

.portal-screen.ets2:before{
  background:radial-gradient(circle,rgba(255,174,53,.24),rgba(0,0,0,.93) 63%);
}

.portal-screen.ets2 .portal-ring{
  border-color:rgba(255,174,53,.75);
  box-shadow:
    0 0 55px rgba(255,174,53,.9),
    0 0 130px rgba(255,174,53,.22),
    inset 0 0 65px rgba(255,174,53,.42);
}

.portal-screen.ets2 .portal-content h1{
  color:#ffbd59;
  text-shadow:0 0 34px rgba(255,174,53,.95);
}

.portal-screen.ets2 .loading-bar{
  border-color:rgba(255,174,53,.55);
}

.portal-screen.ets2 .loading-bar span{
  background:linear-gradient(90deg,#ff7a00,#ffae35,#fff1c7);
}

.portal-screen.farming,
.portal-screen.farming-simulator{
  box-shadow:0 0 55px rgba(142,255,72,.18);
}

.portal-screen.farming:before,
.portal-screen.farming-simulator:before{
  background:radial-gradient(circle,rgba(142,255,72,.23),rgba(0,0,0,.93) 63%);
}

.portal-screen.farming .portal-ring,
.portal-screen.farming-simulator .portal-ring{
  border-color:rgba(142,255,72,.72);
  box-shadow:
    0 0 55px rgba(142,255,72,.9),
    0 0 130px rgba(142,255,72,.22),
    inset 0 0 65px rgba(142,255,72,.42);
}

.portal-screen.farming .portal-content h1,
.portal-screen.farming-simulator .portal-content h1{
  color:#aaff73;
  text-shadow:0 0 34px rgba(142,255,72,.95);
}

.portal-screen.farming .loading-bar,
.portal-screen.farming-simulator .loading-bar{
  border-color:rgba(142,255,72,.55);
}

.portal-screen.farming .loading-bar span,
.portal-screen.farming-simulator .loading-bar span{
  background:linear-gradient(90deg,#6dff38,#aaff73,#efffdc);
}

/* ANIMATIONS */
@keyframes portalPulse{
  from{transform:scale(.9);opacity:.76}
  to{transform:scale(1.045);opacity:1}
}

@keyframes portalSpin{
  to{rotate:360deg}
}

@keyframes portalOpen{
  0%{filter:blur(0);opacity:.85}
  82%{filter:blur(0);opacity:1}
  100%{filter:blur(7px);opacity:.2;transform:scale(1.65)}
}

@keyframes loadPortal{
  to{width:100%}
}

@keyframes bgZoom{
  to{transform:scale(1.18);opacity:.38}
}

@keyframes portalWarp{
  to{
    transform:scale(1.8) rotate(18deg);
    opacity:.05;
  }
}

/* RESPONSIVE */
@media(max-width:760px){
  .topbar{
    align-items:flex-start;
    gap:14px;
    flex-direction:column;
  }

  nav{
    width:100%;
  }

  nav a{
    padding:9px 10px;
  }

  main{
    padding:28px 5%;
  }

  .hero{
    padding-top:45px;
  }

  .game-card{
    min-height:310px;
  }

  table{
    display:block;
    overflow-x:auto;
  }

  .portal-screen{
    min-height:76vh;
    border-radius:24px;
  }
}

/* =========================
   GAME INTRO SZENEN
========================= */

.portal-scene{
  min-height:78vh;
}

/* Minecraft Höhle */
.portal-scene.minecraft{
  background:
    radial-gradient(circle at center, rgba(0,255,136,.15), transparent 35%),
    linear-gradient(#141414,#050505);
}

.cave-wall{
  position:absolute;
  inset:0;
  background:
    linear-gradient(45deg, rgba(255,255,255,.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.035) 25%, transparent 25%);
  background-size:70px 70px;
  opacity:.45;
  animation:caveMove 5s linear forwards;
}

.ore{
  position:absolute;
  width:34px;
  height:34px;
  border-radius:8px;
  background:#00ff88;
  box-shadow:0 0 25px #00ff88;
  animation:oreGlow .7s infinite alternate;
}

.ore1{left:22%;top:35%}
.ore2{right:24%;top:42%;background:#00d9ff;box-shadow:0 0 25px #00d9ff}
.ore3{left:48%;top:25%;background:#ffd166;box-shadow:0 0 25px #ffd166}

.pickaxe{
  position:absolute;
  font-size:70px;
  right:22%;
  top:28%;
  z-index:3;
  animation:mineHit .8s infinite;
}

.mine-flash{
  position:absolute;
  width:160px;
  height:160px;
  border-radius:50%;
  background:rgba(255,255,255,.25);
  right:23%;
  top:30%;
  filter:blur(18px);
  animation:flashMine .8s infinite;
}

/* ETS2 Tunnel */
.portal-scene.ets2{
  background:linear-gradient(#050505,#15100a);
}

.tunnel{
  position:absolute;
  width:90%;
  height:85%;
  border-radius:50% 50% 0 0;
  border:26px solid rgba(255,174,53,.35);
  bottom:0;
  box-shadow:inset 0 0 80px rgba(0,0,0,.9), 0 0 50px rgba(255,174,53,.4);
  animation:tunnelZoom 5s linear forwards;
}

.road{
  position:absolute;
  bottom:0;
  width:42%;
  height:55%;
  background:linear-gradient(to bottom, #222, #050505);
  clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);
}

.road:after{
  content:"";
  position:absolute;
  left:50%;
  width:6px;
  height:100%;
  background:repeating-linear-gradient(to bottom,#fff 0 30px,transparent 30px 65px);
  animation:roadMove .35s linear infinite;
}

.truck{
  position:absolute;
  bottom:18%;
  left:-120px;
  font-size:86px;
  z-index:4;
  animation:truckDrive 4.6s ease-in-out forwards;
}

.tunnel-light{
  position:absolute;
  top:28%;
  width:180px;
  height:180px;
  border-radius:50%;
  background:rgba(255,220,120,.4);
  filter:blur(35px);
  animation:tunnelLight 5s forwards;
}

/* FiveM */
.city-lights{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent 0 10%, rgba(168,85,255,.22) 10% 11%, transparent 11% 22%),
    linear-gradient(0deg, #050505, #0c0615);
  background-size:160px 100%;
  animation:cityMove 5s linear forwards;
}

.police-light{
  position:absolute;
  top:20%;
  width:220px;
  height:220px;
  border-radius:50%;
  filter:blur(45px);
  opacity:.55;
  animation:policeBlink .35s infinite alternate;
}

.police-light.red{left:20%;background:red}
.police-light.blue{right:20%;background:#009dff;animation-delay:.2s}

.car{
  position:absolute;
  bottom:18%;
  left:-120px;
  font-size:82px;
  z-index:4;
  animation:truckDrive 4.6s ease-in-out forwards;
}

/* Farming */
.field{
  position:absolute;
  inset:45% 0 0 0;
  background:
    repeating-linear-gradient(90deg, #254b13 0 30px, #1f3f10 30px 60px);
  animation:fieldMove 4s linear forwards;
}

.barn-door{
  position:absolute;
  bottom:24%;
  width:260px;
  height:190px;
  background:linear-gradient(90deg,#5c261a,#8a3424,#5c261a);
  border:8px solid #2b120d;
  border-radius:12px 12px 0 0;
  box-shadow:0 0 45px rgba(255,209,102,.25);
  animation:barnOpen 4s forwards;
}

.tractor{
  position:absolute;
  bottom:19%;
  left:-120px;
  font-size:90px;
  z-index:4;
  animation:truckDrive 4.8s ease-in-out forwards;
}

.sunrise{
  position:absolute;
  top:22%;
  width:160px;
  height:160px;
  border-radius:50%;
  background:#ffd166;
  box-shadow:0 0 70px #ffd166;
  animation:sunRise 5s forwards;
}

/* Animationen */
@keyframes caveMove{
  to{transform:scale(1.18)}
}

@keyframes oreGlow{
  from{opacity:.55;transform:scale(.95)}
  to{opacity:1;transform:scale(1.08)}
}

@keyframes mineHit{
  0%,100%{transform:rotate(-18deg)}
  50%{transform:rotate(28deg) translate(-18px,18px)}
}

@keyframes flashMine{
  0%,100%{opacity:.1}
  50%{opacity:.65}
}

@keyframes tunnelZoom{
  to{transform:scale(1.35);opacity:.25}
}

@keyframes roadMove{
  to{background-position-y:65px}
}

@keyframes truckDrive{
  0%{left:-140px;transform:scale(.8)}
  55%{left:45%;transform:scale(1)}
  100%{left:110%;transform:scale(1.25)}
}

@keyframes tunnelLight{
  0%{transform:scale(.4);opacity:.15}
  100%{transform:scale(5);opacity:.9}
}

@keyframes cityMove{
  to{background-position-x:-420px}
}

@keyframes policeBlink{
  from{opacity:.25}
  to{opacity:.8}
}

@keyframes fieldMove{
  to{background-position-x:-500px}
}

@keyframes barnOpen{
  0%,45%{transform:scaleX(1)}
  100%{transform:scaleX(1.35);opacity:.25}
}

@keyframes sunRise{
  from{transform:translateY(100px);opacity:.2}
  to{transform:translateY(-40px);opacity:1}
}