/*
Theme Name: FLUID
Theme URI: https://fluid-dnb.com
Author: FLUID
Description: FLUID Drum & Bass Collective theme (Events + Releases).
Version: 1.1.0
Text Domain: fluid-theme
*/

:root{
  --bg:#020202;
  --panel: rgb(8 8 8 / 0.60);
  --text:#ffffff;

  --muted:  rgb(255 255 255 / 0.60);
  --muted2: rgb(255 255 255 / 0.38);
  --line:   rgb(255 255 255 / 0.06);
  --line2:  rgb(255 255 255 / 0.10);

  /* theme accents */
  --blue:  rgba(37, 169, 235, 0.95);
  --blue2: rgba(59, 171, 246, 0.3);
  --blue3: rgba(37, 129, 235, 0.1);

  --max:1600px;
  --sidebar:96px;
  --radius:2px;
  --shadow: 0 30px 120px rgb(0 0 0 / 0.6);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  line-height:1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font:inherit}

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
}

.font-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-display{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.bg-app{
  position:relative;
  min-height:100vh;
  background: var(--bg);
}

.tech-grid{
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: 0 0;
}

.tech-grid::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 600px at 30% 20%, var(--blue3), transparent 60%),
    radial-gradient(900px 700px at 70% 30%, var(--blue3), transparent 65%);
  opacity:1;
}

.selection::selection{
  background: var(--blue);
  color:#fff;
}

.glass{
  background: var(--panel);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line);
}

.hr-line{
  height:1px;
  background: var(--line2);
}

.muted{color:var(--muted)}
.muted2{color:var(--muted2)}
.blue{color:var(--blue)}

.main{
  position:relative;
  z-index:10;
}

@media (min-width: 1024px){
  .main{padding-left:var(--sidebar);}
}

.custom-cursor{
  position:fixed;
  width:14px;
  height:14px;
  border-radius:999px;
  background: var(--line2);
  border:1px solid var(--blue2);
  transform: translate(-50%, -50%);
  pointer-events:none;
  z-index:70;
  mix-blend-mode: screen;
  transition: transform 0.08s ease, opacity 0.08s ease, background 0.08s ease;
}

.custom-cursor.is-down{
  transform: translate(-50%, -50%) scale(3);
  background: var(--blue2);
  opacity:0.6;
}

/* overlays */
.overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:60;
}

.overlay .vtext{
  position:absolute;
  top:40px;
  left:40px;
  writing-mode: vertical-rl;
  font-size:10px;
  opacity:0.40;
  color: var(--blue);
}

.overlay .status{
  position:absolute;
  bottom:40px;
  right:40px;
  font-size:10px;
  opacity:0.40;
  color: var(--blue);
  text-align:right;
}

@media (max-width: 1023px){
  .overlay .vtext, .overlay .status{display:none;}
}

/* NAV */
.nav-vertical{
  position:fixed;
  left:0;
  top:0;
  height:100%;
  width:var(--sidebar);
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:48px 0;
  z-index:65;
  border-right:1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(18px);
}

@media (min-width: 1024px){
  .nav-vertical{display:flex;}
}

.nav-logo{
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.nav-items{
  display:flex;
  flex-direction:column;
  gap:34px;
}

.nav-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:12px;
  border:0;
  background:transparent;
  cursor:pointer;
  transition: background 0.15s ease;
}

.nav-btn:hover{background: var(--line);}

.nav-btn svg{
  width:22px;
  height:22px;
  color: var(--muted2);
  transition: color 0.15s ease, transform 0.15s ease;
}

.nav-btn:hover svg{color:#fff;}
.nav-btn.is-active svg{color: var(--blue);}

.nav-tooltip{
  position:absolute;
  left:72px;
  background: var(--blue);
  color:#fff;
  font-size:10px;
  padding:6px 10px;
  border-radius:2px;
  opacity:0;
  pointer-events:none;
  transition: opacity 0.15s ease;
  white-space:nowrap;
}

.nav-btn:hover .nav-tooltip{opacity:1;}

.nav-phase{
  transform: rotate(90deg);
  font-size:10px;
  letter-spacing:0.4em;
  text-transform:uppercase;
  color: var(--muted2);
}

.nav-mobile{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:65;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  border-bottom:1px solid var(--line);
}

@media (min-width: 1024px){
  .nav-mobile{display:none;}
}

.nav-mobile .brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.nav-mobile .brand .title{
  font-size:20px;
  font-weight:800;
  letter-spacing:-0.02em;
}

.nav-mobile .icons{
  display:flex;
  gap:16px;
}

.nav-mobile button{
  border:0;
  background:transparent;
  cursor:pointer;
  padding:0;
}

.nav-mobile button svg{
  width:20px;
  height:20px;
  color: var(--muted2);
}

.nav-mobile button.is-active svg{color: var(--blue);}

.page-pad{
  padding-top:72px;
}

@media (min-width: 1024px){
  .page-pad{padding-top:0;}
}

/* HERO */
.hero{
  position:relative;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:0 24px;
}

.hero-bgword{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  user-select:none;
  overflow:hidden;
}

.hero-bgword span{
  font-size:25vw;
  font-weight:900;
  letter-spacing:-0.06em;
  color: var(--line);
  line-height:1;
}

.hero-inner{
  position:relative;
  z-index:10;
  width:100%;
  max-width: 1120px;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:48px;
  align-items:center;
}

@media (min-width: 1024px){
  .hero-inner{max-width: 1280px;}
  .hero-grid{
    grid-template-columns: 7fr 5fr;
    gap:48px;
  }
}

.kicker-row{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:24px;
}

.kicker-row .line{
  height:1px;
  width:48px;
  background: var(--blue2);
}

.kicker-row .kicker{
  font-size:12px;
  letter-spacing:0.5em;
  text-transform:uppercase;
  color: var(--blue);
}

.hero-title{
  font-size: clamp(44px, 5vw, 64px);
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:0.85;
  margin:0 0 24px;
}

.hero-outline{
  color: transparent;
  -webkit-text-stroke: 1px var(--muted2);
}

.hero-desc{
  margin:0 0 32px;
  font-size:18px;
  color: var(--muted2);
  max-width: 56ch;
}

.hero-actions{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  align-items:center;
}

.btn-primary{
  position:relative;
  padding:18px 38px;
  background: var(--blue);
  color:#fff;
  border:0;
  border-radius:2px;
  font-weight:800;
  cursor:pointer;
  overflow:hidden;
  transition: background 0.15s ease;
}

.btn-primary:hover{background: var(--blue);}

.btn-primary::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--line2);
  transform: translateY(100%);
  transition: transform 0.25s ease;
}

.btn-primary:hover::before{transform: translateY(0);}

.btn-primary span{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing:0.02em;
}

.hero-next{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.hero-next .label{
  font-size:10px;
  letter-spacing:0.10em;
  color: var(--muted2);
}

.hero-next .value{
  font-size:13px;
  color:#fff;
  letter-spacing:0.05em;
}

.scroll-enter{
  position:absolute;
  right:48px;
  bottom:48px;
  display:none;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

@media (min-width: 768px){
  .scroll-enter{display:flex;}
}

.scroll-enter .bar{
  width:1px;
  height:80px;
  background: linear-gradient(to top, var(--blue), transparent);
}

.scroll-enter .v{
  writing-mode: vertical-rl;
  font-size:10px;
  letter-spacing:0.20em;
  color: var(--muted2);
}

.decoder{
  position:relative;
  padding:32px;
  border:1px solid var(--line);
  border-radius:2px;
}

.decoder .tag{
  position:absolute;
  top:16px;
  left:16px;
  font-size:10px;
  color: var(--blue);
}

.decoder-inner{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.viz{
  display:flex;
  align-items:flex-end;
  gap:4px;
  height:120px;
}

.viz .bar{
  width:14px;
  background: var(--blue2);
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{opacity:0.25}
  50%{opacity:0.75}
}

.decoder-readout{
  margin-top:24px;
  text-align:center;
}

.decoder-readout .bpm{
  font-size:44px;
  color: var(--blue);
  letter-spacing:0.02em;
}

.decoder-readout .sub{
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color: var(--muted2);
}

/* HUD BRACKETS (corners) */
.hud{
  position:relative;
}

.hud::before,
.hud::after{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  border:1px solid var(--blue2);
  pointer-events:none;
  opacity:0.9;
}

.hud::before{
  top:-10px; left:-10px;
  border-right:none;
  border-bottom:none;
}

.hud::after{
  bottom:-10px; right:-10px;
  border-left:none;
  border-top:none;
}

/* SECTION LAYOUT */
.section-wrap{
  max-width:var(--max);
  margin:0 auto;
  padding: 0 24px 160px;
}

@media (min-width: 1024px){
  .section-wrap{padding: 0 80px 160px;}
}

.section{
  padding:80px 0;
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:80px;
  flex-wrap:wrap;
}

.pcode{
  font-size:12px;
  color: var(--blue);
}

.section-title{
  margin:0;
  font-size:30px;
  font-weight:800;
  letter-spacing:-0.03em;
}

.section-desc{
  margin:0;
  font-size:12px;
  color: var(--muted2);
  text-transform:uppercase;
  letter-spacing:0.02em;
  max-width: 56ch;
}

/* EVENTS ROWS */
.event-row{
  position: relative;
}

.event-row-link{
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Ensure real interactive elements sit ABOVE the stretched link */
.event-row a:not(.event-row-link),
.event-row button{
  position: relative;
  z-index: 2;
}

.event-row[data-href]{cursor:pointer;}

.event-row{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:32px;
  border:1px solid var(--line);
  border-radius:2px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

@media (min-width: 1024px){
  .event-row{
    flex-direction:row;
    align-items:center;
    gap:32px;
  }
}

.event-row:hover{
  border-color: var(--blue2);
  background: var(--line);
}

.event-index{
  display:none;
  width:48px;
  font-size:12px;
  color: var(--blue2);
}

@media (min-width: 1024px){
  .event-index{display:block;}
}

.event-date{
  display:flex;
  flex-direction:column;
  width:auto;
}

@media (min-width: 1024px){
  .event-date{width:130px;}
}

.event-day{
  font-size:28px;
  font-weight:800;
  letter-spacing:-0.02em;
}

.event-month{
  font-size:12px;
  color: var(--blue);
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.event-main{
  flex:1;
  min-width:240px;
}

.event-title{
  margin:0;
  font-size:34px;
  font-weight:900;
  letter-spacing:-0.03em;
  transition: transform 0.5s ease;
}

.event-row:hover .event-title{
  transform: translateX(8px);
}

.event-meta{
  margin-top:10px;
  display:flex;
  gap:16px;
  align-items:center;
  flex-wrap:wrap;
  font-size:12px;
  color: var(--muted2);
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.event-meta .sep{color: var(--line2);}
.event-meta .pin{
  width:14px;height:14px;
  color: var(--blue);
}

.event-action{
  display:flex;
  justify-content:flex-end;
}

@media (min-width: 1024px){
  .event-action{width:160px;}
}

.access-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border:1px solid var(--line2);
  color:#fff;
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.access-btn:hover{
  border-color: var(--blue);
  color: var(--blue);
}

.access-btn svg{
  width:16px;height:16px;
  transition: transform 0.2s ease;
}

.access-btn:hover svg{
  transform: translate(4px, -4px);
}

/* RELEASE GRID */
.release-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:1px;
  background: var(--line);
  border:1px solid var(--line);
}

@media (min-width: 768px){
  .release-grid{grid-template-columns: repeat(2, 1fr);}
}

@media (min-width: 1280px){
  .release-grid{grid-template-columns: repeat(4, 1fr);}
}

.release-card{
  position:relative;
  background: var(--bg);
  padding:32px;
  overflow:hidden;
  transition: background 0.2s ease;
}

.release-card:hover{
  background: var(--blue3);
}

.release-hud{
  position:absolute;
  top:16px;
  left:32px;
  font-size:9px;
  letter-spacing:0.18em;
  color: var(--muted2);
}

.release-cover-wrap{
  position:relative;
  margin: 18px 0 28px;
}

.vinyl-ring{
  position:absolute;
  inset:-6px;
  border-radius:999px;
  border:1px solid var(--blue3);
  opacity:0;
  animation: spin 10s linear infinite;
}

.release-card:hover .vinyl-ring{opacity:1;}

@keyframes spin{
  from{transform: rotate(0deg);}
  to{transform: rotate(360deg);}
}

.release-cover{
  position:relative;
  aspect-ratio: 1/1;
  padding:8px;
  border:1px solid var(--line);
  background: var(--line);
}

.release-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter: grayscale(1) contrast(1.25);
  transition: filter 0.7s ease;
}

.release-card:hover .release-cover img{
  filter: grayscale(0) contrast(1.15);
}

.release-title{
  margin:0;
  font-size:20px;
  font-weight:800;
  letter-spacing:-0.02em;
  transition: color 0.2s ease;
}

.release-card:hover .release-title{
  color: var(--blue);
}

.release-artist{
  margin-top:6px;
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color: var(--muted2);
}

.release-foot{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.release-genre{
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: var(--blue2);
}

.release-links{
  display:flex;
  gap:14px;
}

.release-links a{
  color: var(--muted2);
  transition: color 0.15s ease;
}

.release-links a:hover{color:#fff}
.release-links svg{width:16px;height:16px}

/* MERCH (offsite promo grid) */
.merch-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:28px;
}

@media (min-width: 768px){
  .merch-grid{grid-template-columns: repeat(2, 1fr);}
}

@media (min-width: 1024px){
  .merch-grid{grid-template-columns: repeat(4, 1fr);}
}

.merch-card{
  position:relative;
}

.merch-frame{
  position:absolute;
  inset:-8px;
  border:1px solid transparent;
  transition: border-color 0.5s ease;
  pointer-events:none;
}

.merch-card:hover .merch-frame{
  border-color: var(--blue3);
}

.merch-tile{
  background: var(--panel);
  padding:16px;
  border-radius:2px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 100%;
}

.merch-img{
  aspect-ratio:1/1;
  background:#0a0a0a;
  overflow:hidden;
  margin-bottom:20px;
}

.merch-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter: brightness(0.75);
  transform: scale(1);
  transition: filter 0.7s ease, transform 0.7s ease;
}

.merch-card:hover .merch-img img{
  filter: brightness(1);
  transform: scale(1.05);
}

.merch-name{
  font-size:12px;
  font-weight:800;
  letter-spacing:0.04em;
  text-transform:uppercase;
  margin:0 0 14px;
  color: var(--text);
}

.merch-cta{
  margin-top:auto;
  display:flex;
  gap:10px;
}

.acquire{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  background:#fff;
  color:#000;
  border:0;
  cursor:pointer;
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}

.acquire:hover{
  background: var(--blue);
  color:#fff;
}

.merch-mini{
  width:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line2);
  background: transparent;
  cursor:pointer;
  color: var(--muted2);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.merch-mini:hover{
  border-color: var(--blue);
  color: var(--blue);
}

.merch-mini svg{width:16px;height:16px}

/* FOOTER */
.site-footer{
  position:relative;
  padding:160px 24px 48px;
  border-top:1px solid var(--line);
  background: var(--bg);
}

.footer-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 0;
}

.footer-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:48px;
  margin-bottom:96px;
}

@media (min-width: 1024px){
  .footer-grid{
    grid-template-columns: 5fr 2fr 5fr;
    gap:64px;
  }
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:28px;
}

.footer-brand .mark{
  width:44px;height:44px;
  color: var(--blue);
}

.footer-brand .name{
  font-size:42px;
  font-weight:900;
  letter-spacing:-0.04em;
}

.footer-blurb{
  font-size:12px;
  color: var(--muted2);
  letter-spacing:0.03em;
  text-transform:uppercase;
  max-width: 54ch;
  margin:0 0 32px;
}

.footer-icons{
  display:flex;
  gap:14px;
}

.footer-icons a{
  width:44px;height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line2);
  border-radius:999px;
  color: var(--muted2);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.footer-icons a:hover{
  border-color: var(--blue);
  color: var(--blue);
}

.footer-head{
  font-size:10px;
  letter-spacing:0.4em;
  text-transform:uppercase;
  color: var(--blue);
  margin:0 0 24px;
}

.footer-links{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:14px;
  font-size:13px;
  letter-spacing:0.08em;
  color: var(--muted2);
}

.footer-links a:hover{color:#fff}

.uplink{
  position:relative;
}

.uplink input{
  width:100%;
  background: transparent;
  border:0;
  border-bottom:1px solid var(--line2);
  padding:0 0 12px;
  font-size:28px;
  color:#fff;
  outline:none;
}

.uplink input::placeholder{
  color: var(--line);
}

.uplink button{
  position:absolute;
  right:0;
  bottom:14px;
  border:0;
  background:transparent;
  color: var(--blue);
  cursor:pointer;
  letter-spacing:0.08em;
}

.uplink button:hover{color:#fff}

.footer-bottom{
  padding-top:24px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}

.footer-bottom .left{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:10px;
  color: var(--muted2);
  letter-spacing:0.08em;
}

.pulse-dot{
  width:6px;height:6px;border-radius:999px;
  background: var(--blue);
  animation: dot 1.5s ease-in-out infinite;
}

@keyframes dot{
  0%,100%{opacity:0.3}
  50%{opacity:1}
}

.return-top{
  border:0;
  background:transparent;
  color: var(--muted2);
  cursor:pointer;
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:10px;
}

.return-top:hover{color:#fff}

.footer-glitch{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:4px;
  background: linear-gradient(to right, var(--blue2), transparent, var(--blue2));
  opacity:0.20;
}

/* WP content */
.wp-prose{
  border:1px solid var(--line);
  background: var(--line);
  padding:18px;
}

/* ---------------------------------------------------------
   SCROLL-DRIVEN ANIMATIONS (view-timeline)
--------------------------------------------------------- */

/* Base reveal */
.reveal{
  opacity:0;
  transform: translateY(32px);
  animation: reveal-up linear forwards;
  animation-timeline: view();
  animation-range: entry 10% cover 35%;
}

@keyframes reveal-up{
  to{
    opacity:1;
    transform: translateY(0);
  }
}

/* Horizontal variants */
.reveal-left{
  opacity:0;
  transform: translateX(-40px);
  animation: reveal-left linear forwards;
  animation-timeline: view();
  animation-range: entry 10% cover 35%;
}

@keyframes reveal-left{
  to{
    opacity:1;
    transform: translateX(0);
  }
}

.reveal-right{
  opacity:0;
  transform: translateX(40px);
  animation: reveal-right linear forwards;
  animation-timeline: view();
  animation-range: entry 10% cover 35%;
}

@keyframes reveal-right{
  to{
    opacity:1;
    transform: translateX(0);
  }
}

/* Subtle scale-in (good for cards) */
.reveal-scale{
  opacity:0;
  transform: scale(0.96);
  animation: reveal-scale linear forwards;
  animation-timeline: view();
  animation-range: entry 15% cover 40%;
}

@keyframes reveal-scale{
  to{
    opacity:1;
    transform: scale(1);
  }
}

/* Stagger helpers */
.delay-1{animation-delay:0.08s;}
.delay-2{animation-delay:0.16s;}
.delay-3{animation-delay:0.24s;}
.delay-4{animation-delay:0.32s;}

/* Parallax-lite background drift */
.parallax-slow{
  animation: parallax-slow linear both;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}

@keyframes parallax-slow{
  from{transform: translateY(0);}
  to{transform: translateY(-80px);}
}

.parallax-fast{
  animation: parallax-fast linear both;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}

@keyframes parallax-fast{
  from{transform: translateY(0);}
  to{transform: translateY(-160px);}
}