html{
  scroll-behavior:smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body{
  background:var(--bg);
  color:var(--text);
  transition:.3s ease;
}

p {
  color: var(--text-secondary);
}

a {
  color: var(--primary);
  text-decoration: none;
}

/* =========================
   GLOBAL BUTTONS
========================= */

.btn{
  padding:12px 25px;

  border-radius:8px;

  font-weight:700;
  text-decoration:none;

  transition:0.3s ease;
}

body:not(.light-theme) .hero .buttons{
  margin-top:25px;
}

.btn:hover{
  transform:scale(1.05);
}

/* PRIMARY BUTTON */

.primary{
  background:var(--primary);

  color:#fff;

  box-shadow:0 0 20px rgba(59,130,246,.4);

  transition:all .3s ease;
}

.primary:hover{
  background:var(--text);

  color:var(--primary);

  transform:translateY(-2px);
}

/* SECONDARY BUTTON */

.secondary{
  position:relative;

  margin-left:20px;

  padding:12px 25px;

  border-radius:8px;

  background:transparent;

  color:var(--text);

  border:1px solid var(--text-secondary);

  overflow:hidden;
}

/* SVG BORDER */

.secondary svg{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  pointer-events:none;
}

.secondary rect{
  fill:none;

  stroke:var(--accent);

  stroke-width:2;

  stroke-dasharray:400;
  stroke-dashoffset:400;

  transition:stroke-dashoffset .6s ease;

  rx:8;
  ry:8;
}

.secondary:hover rect{
  stroke-dashoffset:0;
}

.secondary:hover{
  background:rgba(255,255,255,.05);
}


/* =========================
   SCROLL REVEAL ANIMATIONS
========================= */

/* BASE */

.reveal{
  opacity: 0;

  transform: translateY(40px);

  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.reveal.active{
  opacity: 1;

  transform: translateY(0);
}

/* DIRECTION VARIATIONS */

.reveal-left{
  transform: translateX(-60px);
}

.reveal-right{
  transform: translateX(60px);
}

.reveal-left.active,
.reveal-right.active{
  transform: translateX(0);
}

/* OPTIONAL STAGGER */

.reveal:nth-child(1){
  transition-delay: 0.1s;
}

.reveal:nth-child(2){
  transition-delay: 0.2s;
}

.reveal:nth-child(3){
  transition-delay: 0.3s;
}

/* =========================
   FEATURED CARD STAGGER
========================= */

.video-scroll .featured-card{
  opacity: 0;

  transform: translateY(40px);
}

.video-scroll.active .featured-card{
  opacity: 1;

  transform: translateY(0);
}

/* DELAYS */

.video-scroll.active .featured-card:nth-child(1){
  transition: .5s ease .1s;
}

.video-scroll.active .featured-card:nth-child(2){
  transition: .5s ease .2s;
}

.video-scroll.active .featured-card:nth-child(3){
  transition: .5s ease .3s;
}

.video-scroll.active .featured-card:nth-child(4){
  transition: .5s ease .4s;
}

.video-scroll.active .featured-card:nth-child(5){
  transition: .5s ease .5s;
}

.video-scroll.active .featured-card:nth-child(6){
  transition: .5s ease .6s;
}