/* ============================================================
   AURA — HOME CSS
   PURPLE VIBE VERSION
   ============================================================ */

/* ============================================================
   ROOT VARIABLES
   ============================================================ */

:root{
  --bg:#0b0b0b;
  --text:#f5f1ea;

  /* Purple theme */
  --gold:#8b5cf6;
  --gold-bright:#c084fc;

  --ink:#111;

  --max-w:1400px;

  --px:80px;
  --px-sm:24px;

  --font-serif:'Cormorant Garamond', serif;
  --font-sans:'Inter', sans-serif;
}

/* ============================================================
   RESET
   ============================================================ */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  overflow-x:hidden;
}

/* ============================================================
   COMMON
   ============================================================ */

.gold-gradient{
  background:linear-gradient(
    135deg,
    var(--gold),
    var(--gold-bright)
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ============================================================
   FLOATING BALLOON ANIMATION
   ============================================================ */

@keyframes float-up{

  0%{
    transform:translateY(110vh);
    opacity:0;
  }

  8%{
    opacity:.9;
  }

  90%{
    opacity:.75;
  }

  100%{
    transform:translateY(-15vh);
    opacity:0;
  }

}

/* ============================================================
   HERO SECTION
   ============================================================ */

#hero{
  position:relative;

  min-height:110vh;

  display:flex;
  align-items:center;

  padding:128px var(--px) 80px;

  overflow:hidden;
}

@media(max-width:768px){

  #hero{
    padding:120px var(--px-sm) 60px;
  }

}

/* ============================================================
   HERO BALLOONS
   ============================================================ */

.hero-balloons{
  position:absolute;
  inset:0;

  z-index:0;

  overflow:hidden;

  opacity:.45;
}

.balloon-img{
  position:absolute;
  bottom:-20%;

  pointer-events:none;

  filter:drop-shadow(0 8px 20px rgba(0,0,0,.2));
}

/* ============================================================
   HERO GRID
   ============================================================ */

.hero-grid{
  width:100%;
  max-width:var(--max-w);

  margin:0 auto;

  display:grid;
  grid-template-columns:1fr;

  gap:48px;

  position:relative;
  z-index:10;

  align-items:center;
}

@media(min-width:1024px){

  .hero-grid{
    grid-template-columns:7fr 5fr;
  }

}

/* ============================================================
   HERO BADGE
   ============================================================ */

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:16px;

  margin-bottom:40px;

  padding:8px 16px;

  border:1px solid rgba(139,92,246,.2);

  border-radius:999px;

  background:rgba(139,92,246,.05);

  backdrop-filter:blur(8px);
}

.hero-badge-dot{
  width:1px;
  height:12px;

  background:rgba(139,92,246,.2);
}

/* ============================================================
   HERO TITLE
   ============================================================ */

.hero-title{
  font-family:var(--font-serif);

  font-size:clamp(4rem,10vw,10rem);

  line-height:1.05;

  letter-spacing:-.02em;

  margin-bottom:40px;
}

/* ============================================================
   HERO SUB GRID
   ============================================================ */

.hero-grid-sub{
  display:grid;

  gap:48px;

  padding-top:40px;

  border-top:1px solid rgba(139,92,246,.1);
}

@media(min-width:768px){

  .hero-grid-sub{
    grid-template-columns:1fr 1fr;
  }

}

/* ============================================================
   HERO DESCRIPTION
   ============================================================ */

.hero-desc{
  opacity:.7;

  font-size:18px;
  font-weight:300;

  line-height:1.7;
}

/* ============================================================
   HERO CTA LINK
   ============================================================ */

.hero-cta-link{
  display:flex;
  align-items:center;
  gap:16px;

  width:fit-content;

  margin-top:24px;

  color:var(--gold);

  text-decoration:none;

  cursor:pointer;
}

.hero-cta-link span{
  font-size:12px;
  font-weight:700;

  text-transform:uppercase;

  letter-spacing:.12em;

  border-bottom:1px solid rgba(139,92,246,.2);

  padding-bottom:4px;

  transition:border-color .5s;
}

.hero-cta-link:hover span{
  border-color:var(--gold);
}

.hero-cta-link svg{
  width:16px;
  height:16px;

  transition:transform .4s;
}

.hero-cta-link:hover svg{
  transform:translateX(8px);
}

/* ============================================================
   HERO QUOTE
   ============================================================ */

.hero-quote{
  font-family:var(--font-serif);

  font-style:italic;

  font-size:18px;

  opacity:.4;

  line-height:1.6;

  border-left:2px solid rgba(139,92,246,.2);

  padding:8px 0 8px 24px;
}

/* ============================================================
   HERO BUTTON
   ============================================================ */

.hero-btn{
  width:100%;

  display:block;

  padding:24px 32px;

  background:var(--gold);

  color:var(--ink);

  text-align:center;

  text-decoration:none;

  border:none;

  cursor:pointer;

  box-shadow:0 20px 50px rgba(139,92,246,.3);

  font-size:10px;
  font-weight:700;

  text-transform:uppercase;

  letter-spacing:.4em;

  transition:background .5s,color .5s;
}

.hero-btn:hover{
  background:var(--text);
  color:var(--bg);
}

/* ============================================================
   HERO IMAGE
   ============================================================ */

.hero-img-panel{
  display:none;
}

@media(min-width:1024px){

  .hero-img-panel{
    display:block;
  }

}

.hero-img-wrap{
  position:relative;

  aspect-ratio:4/5;

  border-radius:2rem;

  overflow:hidden;
}

.hero-img-wrap img{
  width:100%;
  height:100%;

  object-fit:contain;

  padding:20px;

  transition:transform 3s ease;
}

.hero-img-wrap:hover img{
  transform:scale(1.04);
}

/* ============================================================
   HERO FLOAT BADGE
   ============================================================ */

.hero-float-badge{
  position:absolute;

  bottom:40px;
  left:40px;

  max-width:200px;

  padding:24px;

  border-radius:1rem;

  background:rgba(8,8,8,.8);

  backdrop-filter:blur(24px);

  border:1px solid rgba(255,255,255,.1);
}

/* ============================================================
   STATS
   ============================================================ */

.hero-stats{
  width:100%;
  max-width:var(--max-w);

  margin-inline:auto;

  margin-top:80px;

  padding-top:60px;
  padding-inline:var(--px);

  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:24px;

  border-top:1px solid rgba(139,92,246,.1);
}

@media(max-width:768px){

  .hero-stats{
    padding-inline:var(--px-sm);
  }

}

.stat-item{
  text-align:center;
}

.stat-num{
  font-family:var(--font-serif);

  font-size:clamp(2.5rem,5vw,4rem);

  line-height:1;

  margin-bottom:8px;

  background:linear-gradient(
    135deg,
    var(--gold),
    var(--gold-bright)
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.stat-label{
  font-size:10px;
  font-weight:700;

  text-transform:uppercase;

  letter-spacing:.4em;

  opacity:.4;
}

/* ============================================================
   SERVICES SECTION
   ============================================================ */

.section{
  width:100%;

  position:relative;

  padding:140px var(--px);
}

@media(max-width:768px){

  .section{
    padding:100px var(--px-sm);
  }

}

/* ============================================================
   TOP TEXT
   ============================================================ */

.top-text{
  color:var(--gold);

  font-size:15px;
  font-weight:500;

  text-transform:uppercase;

  letter-spacing:.25em;

  margin-bottom:32px;
}

/* ============================================================
   TITLE ROW
   ============================================================ */

.title-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;

  flex-wrap:wrap;

  gap:24px;

  margin-bottom:70px;
}

.main-title{
  font-family:var(--font-serif);

  font-size:clamp(3rem,8vw,7rem);

  font-weight:400;

  line-height:.9;

  letter-spacing:-.03em;
}

/* ============================================================
   VIEW ALL
   ============================================================ */

.view-all{
  color:var(--gold);

  text-decoration:none;

  font-size:12px;
  font-weight:600;

  text-transform:uppercase;

  letter-spacing:.18em;

  border-bottom:1px solid rgba(139,92,246,.25);

  padding-bottom:6px;

  transition:all .4s ease;
}

.view-all:hover{
  border-color:var(--gold);

  transform:translateX(6px);
}

/* ============================================================
   GALLERY
   ============================================================ */

.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:28px;
}

@media(max-width:1024px){

  .gallery{
    grid-template-columns:1fr;
  }

}

/* ============================================================
   CARD
   ============================================================ */

.card{
  position:relative;

  overflow:hidden;

  border-radius:28px;

  background:#111;

  display:block;

  text-decoration:none;
}

.card img{
  width:100%;
  height:100%;

  object-fit:contain;

  display:block;

  transition:transform 1.2s ease;
}

.card:hover img{
  transform:scale(1.08);
}

/* ============================================================
   OVERLAY
   ============================================================ */

.overlay{
  position:absolute;
  inset:0;

  background:linear-gradient(
    to top,
    rgba(0,0,0,.7),
    rgba(0,0,0,.1)
  );

  display:flex;
  align-items:flex-end;
  justify-content:center;

  padding-bottom:40px;

  opacity:0;

  transition:opacity .5s ease;
}

.card:hover .overlay{
  opacity:1;
}

.overlay span{
  color:#fff;

  font-size:12px;
  font-weight:600;

  text-transform:uppercase;

  letter-spacing:.18em;

  padding:14px 26px;

  border-radius:999px;

  border:1px solid rgba(255,255,255,.25);

  backdrop-filter:blur(12px);

  transition:all .4s ease;
}

.card:hover .overlay span{
  background:rgba(255,255,255,.08);

  transform:translateY(-4px);
}

/* ============================================================
   COVERAGE SECTION
   ============================================================ */

.coverage-section{
  width:100%;

  min-height:100vh;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:140px var(--px);

  background:rgba(8,8,8,.8);

  position:relative;

  overflow:hidden;
}

@media(max-width:768px){

  .coverage-section{
    padding:100px var(--px-sm);
  }

}

.coverage-container{
  width:100%;
  max-width:1200px;

  margin:0 auto;

  text-align:center;
}

/* ============================================================
   COVERAGE TOP
   ============================================================ */

.coverage-top{
  color:var(--gold);

  font-size:18px;
  font-weight:600;

  text-transform:uppercase;

  letter-spacing:.45em;

  margin-bottom:36px;
}

/* ============================================================
   COVERAGE TITLE
   ============================================================ */

.coverage-title{
  font-family:var(--font-serif);

  font-size:clamp(4rem,8vw,7rem);

  font-weight:400;

  line-height:.9;

  letter-spacing:-.03em;

  color:var(--text);

  margin-bottom:42px;
}

/* ============================================================
   COVERAGE DESCRIPTION
   ============================================================ */

.coverage-desc{
  max-width:1050px;

  margin:0 auto 72px;

  font-size:clamp(1.2rem,2vw,2.1rem);

  line-height:1.6;

  font-weight:300;

  color:rgba(255,255,255,.78);
}

/* ============================================================
   COVERAGE TAGS
   ============================================================ */

.coverage-tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;

  gap:16px;
}

/* ============================================================
   COVERAGE TAG
   ============================================================ */

.coverage-tag{
  padding:16px 28px;

  border-radius:999px;

  border:1px solid rgba(139,92,246,.28);

  text-decoration:none;

  color:var(--text);

  font-size:18px;
  font-weight:400;

  background:rgba(255,255,255,.01);

  backdrop-filter:blur(10px);

  transition:all .4s ease;
}

.coverage-tag:hover{
  background:var(--gold);

  color:var(--bg);

  border-color:var(--gold);

  transform:translateY(-4px);

  box-shadow:0 12px 30px rgba(139,92,246,.22);
}

@media(max-width:768px){

  .coverage-title{
    font-size:4rem;
  }

  .coverage-desc{
    font-size:1.15rem;
    margin-bottom:50px;
  }

  .coverage-tag{
    padding:14px 22px;
    font-size:15px;
  }

}

/* ============================================================
   STUDIO SECTION
   ============================================================ */

.studio-section{
  width:100%;

  min-height:100vh;

  display:grid;
  grid-template-columns:1.1fr 1fr;

  background:rgba(8,8,8,.8);

  overflow:hidden;
}

/* ============================================================
   STUDIO CONTENT
   ============================================================ */

.studio-content{
  padding:110px 90px;

  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* ============================================================
   STUDIO TOP
   ============================================================ */

.studio-top{
  color:var(--gold);

  font-size:16px;
  font-weight:500;

  text-transform:uppercase;

  letter-spacing:.45em;

  margin-bottom:45px;
}

/* ============================================================
   STUDIO TITLE
   ============================================================ */

.studio-title{
  font-family:var(--font-serif);

  font-size:clamp(3rem,7vw,6.8rem);

  line-height:.92;

  font-weight:500;

  color:var(--text);

  max-width:780px;

  margin-bottom:50px;
}

/* ============================================================
   STUDIO DESCRIPTION
   ============================================================ */

.studio-desc{
  max-width:760px;

  font-size:clamp(1.1rem,1.5vw,1.8rem);

  line-height:1.7;

  color:#d8c4ff;

  font-weight:300;

  margin-bottom:60px;
}

/* ============================================================
   STUDIO LINK
   ============================================================ */

.studio-link{
  width:fit-content;

  color:var(--gold);

  text-decoration:none;

  font-size:14px;
  font-weight:600;

  text-transform:uppercase;

  letter-spacing:.25em;

  transition:all .35s ease;
}

.studio-link:hover{
  transform:translateX(8px);

  color:#fff;
}

/* ============================================================
   STUDIO IMAGE
   ============================================================ */

.studio-image{
  position:relative;

  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#0b0b0b;
}

.studio-image img{
  width:100%;
  height:100%;

  object-fit:contain;

  display:block;

  transition:transform 2s ease;
}

.studio-image:hover img{
  transform:scale(1.03);
}

/* ============================================================
   STUDIO RESPONSIVE
   ============================================================ */

@media(max-width:1100px){

  .studio-section{
    grid-template-columns:1fr;
  }

  .studio-image{
    height:700px;
  }

}

@media(max-width:768px){

  .studio-content{
    padding:90px 28px;
  }

  .studio-title{
    font-size:4rem;
  }

  .studio-desc{
    font-size:1.15rem;
  }

  .studio-image{
    height:500px;
  }

}