/* Ayro main layout */
@import url('./theme.css');

body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:var(--z-base);
  background:
    radial-gradient(1200px 600px at 80% 10%, rgba(111,183,215,0.18), transparent 55%),
    radial-gradient(900px 500px at 10% 20%, rgba(227,179,106,0.15), transparent 60%),
    linear-gradient(180deg, rgba(18,22,28,0.85), rgba(11,13,16,0.95));
  pointer-events:none;
}

main, header, footer{
  position:relative;
  z-index:var(--z-ui);
}

.site-header{
  position:sticky;
  top:18px;
  z-index:var(--z-ui);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:14px 24px;
  border-radius:var(--radius-md);
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));
  border:var(--hairline) solid var(--glass-border);
  box-shadow:var(--shadow-1);
}

.brand{
  font-family:var(--font-serif);
  font-weight:var(--fw-bold);
  letter-spacing:0.2em;
  font-size:0.95rem;
  color:var(--text-primary);
}

.nav{
  display:flex;
  gap:20px;
  align-items:center;
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:var(--ls-wide);
}

.nav a{
  color:var(--text-secondary);
  transition:transform var(--time-medium) var(--easing-brand), color var(--time-medium) var(--easing-brand);
}

.nav-link{
  position:relative;
}

.nav-link::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:2px;
  background:linear-gradient(90deg, rgba(227,179,106,0), rgba(227,179,106,0.85), rgba(227,179,106,0));
  transform:scaleX(0);
  transform-origin:center;
  transition:transform var(--time-medium) var(--easing-brand);
}

.nav-link:hover::after{
  transform:scaleX(1);
}

.nav a:hover{
  color:var(--text-primary);
  transform:translateY(-2px);
}

.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 20px;
  border-radius:999px;
  background:linear-gradient(120deg, var(--color-accent), rgba(227,179,106,0.65));
  color:#120f08;
  font-weight:600;
  letter-spacing:0.02em;
  box-shadow:var(--shadow-1);
  transition:transform var(--time-medium) var(--easing-brand), box-shadow var(--time-medium) var(--easing-brand);
  position:relative;
  overflow:hidden;
}

.btn-primary:hover{
  transform:translateY(-3px);
}

.btn-primary--sheen::after{
  content:'';
  position:absolute;
  inset:-40% -20%;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.6) 45%, transparent 60%);
  transform:translateX(-80%);
  transition:transform 800ms var(--easing-brand);
}

.btn-primary--sheen:hover::after{
  transform:translateX(80%);
}

.btn-primary--pulse{
  animation:buttonPulse 2.8s infinite;
}

@keyframes buttonPulse{
  0%{box-shadow:0 0 0 rgba(227,179,106,0);}
  40%{box-shadow:0 0 0 10px rgba(227,179,106,0);}
  70%{box-shadow:0 0 0 16px rgba(227,179,106,0);}
  100%{box-shadow:0 0 0 rgba(227,179,106,0);}
}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--text-primary);
  transition:transform var(--time-medium) var(--easing-brand), border var(--time-medium) var(--easing-brand), box-shadow var(--time-medium) var(--easing-brand);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.btn-ghost:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,0.2);
}

.btn-ghost--slide::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(111,183,215,0.35), rgba(111,183,215,0.05));
  transform:translateX(-110%);
  transition:transform var(--time-medium) var(--easing-brand);
  z-index:-1;
}

.btn-ghost--slide:hover::before{
  transform:translateX(0);
}

.btn-ghost--slide{
  color:var(--text-primary);
}

.btn-ghost--glow{
  box-shadow:0 0 0 rgba(111,183,215,0);
}

.btn-ghost--glow:hover{
  box-shadow:0 0 20px rgba(111,183,215,0.35);
}

/* Ripple */
.btn-primary,
.btn-ghost{
  --ripple-color:rgba(255,255,255,0.45);
}

.btn-primary{
  --ripple-color:rgba(255,255,255,0.55);
}

.btn-ghost{
  --ripple-color:rgba(111,183,215,0.45);
}

.btn-ripple{
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  animation:ripple 600ms var(--easing-brand);
  background:var(--ripple-color);
  opacity:0.85;
  pointer-events:none;
  z-index:2;
}

@keyframes ripple{
  to{
    transform:scale(2.6);
    opacity:0;
  }
}

.hero{
  padding-top:var(--space-xxl);
}

.hero-inner{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gutter);
  align-items:center;
  min-height:70vh;
}

.hero-copy{
  grid-column:span 6;
}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:0.32em;
  font-size:0.75rem;
  color:var(--text-secondary);
  margin-bottom:var(--space-sm);
}

.h-hero{
  font-family:var(--font-serif);
  font-size:var(--type-hero);
  line-height:0.95;
  margin:0 0 var(--space-md);
  letter-spacing:var(--ls-headline);
}

.hero-actions{
  display:flex;
  gap:14px;
  margin:var(--space-md) 0;
  flex-wrap:wrap;
}

.hero-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
  margin-top:var(--space-lg);
}

.stat{
  padding:16px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.03);
  border:var(--hairline) solid var(--glass-border);
}

.stat-value{
  font-family:var(--font-serif);
  font-size:1.6rem;
  color:var(--text-primary);
}

.stat-label{
  color:var(--text-secondary);
  font-size:0.9rem;
}

.hero-media{
  grid-column:span 6;
  min-height:520px;
  border-radius:var(--radius-lg);
  background-size:cover;
  background-position:center;
  position:relative;
  overflow:hidden;
  border:var(--hairline) solid var(--glass-border);
  box-shadow:var(--shadow-2);
}

.hero-media::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(160deg, rgba(9,12,16,0.55), rgba(9,12,16,0.1));
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:var(--space-md);
  flex-wrap:wrap;
}

.section-title{
  font-family:var(--font-serif);
  font-size:var(--type-h1);
  margin:0;
}

.featured{
  padding-top:var(--space-xl);
}

.featured-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gutter);
}

.case{
  min-height:280px;
  border-radius:var(--radius-md);
  background-size:cover;
  background-position:center;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:24px;
  border:var(--hairline) solid var(--glass-border);
}

.case::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(12,15,18,0.1), rgba(9,12,16,0.75));
}

.case .meta{
  position:relative;
  z-index:1;
}

.case-large{
  grid-column:span 7;
  min-height:420px;
}

.case-stack{
  grid-column:span 5;
  display:grid;
  gap:var(--gutter);
}

.case h3{
  margin:0 0 6px 0;
  font-family:var(--font-serif);
  font-size:1.35rem;
}

.case p{
  margin:0;
  color:var(--text-secondary);
}

.services .bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.bento-item{
  position:relative;
  height:280px;
  border-radius:var(--radius-md);
  background-size:cover;
  background-position:center;
  overflow:hidden;
  border:var(--hairline) solid var(--glass-border);
  display:flex;
  align-items:flex-end;
  padding:22px;
}

.bento-item::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(15,18,24,0.1), rgba(10,13,17,0.85));
}

.bento-meta{
  position:relative;
  z-index:1;
}

.bento-meta h3{
  margin:0 0 6px 0;
  font-family:var(--font-serif);
  font-size:1.15rem;
}

.bento-meta p{
  margin:0;
  color:var(--text-secondary);
}

.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.step{
  padding:22px;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,0.02);
  border:var(--hairline) solid var(--glass-border);
  min-height:190px;
}

.step .num{
  font-family:var(--font-serif);
  font-size:2rem;
  color:var(--color-accent);
  font-weight:var(--fw-bold);
}

.step h4{
  margin:8px 0;
}

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

.studio-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gutter);
  align-items:center;
}

.studio-media{
  grid-column:span 6;
  height:460px;
  border-radius:var(--radius-lg);
  background-size:cover;
  background-position:center;
  border:var(--hairline) solid var(--glass-border);
  box-shadow:var(--shadow-2);
}

.studio-copy{
  grid-column:span 6;
}

.studio-copy blockquote{
  margin:18px 0;
  padding-left:18px;
  border-left:3px solid var(--color-accent);
  font-family:var(--font-serif);
  font-size:1.15rem;
  color:var(--text-primary);
}

.offer-list{
  margin:18px 0 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.offer-list li{
  padding:10px 14px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.03);
  border:var(--hairline) solid var(--glass-border);
}

.clients-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  align-items:center;
}

.logo{
  height:90px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.03);
  border:var(--hairline) solid var(--glass-border);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
}

.logo img{
  max-height:48px;
  object-fit:contain;
  filter:grayscale(1) brightness(1.1);
}

.testimonial{
  margin-top:var(--space-md);
  padding:24px;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,0.03);
  border:var(--hairline) solid var(--glass-border);
}

.contact-cta{
  padding:var(--space-xl) 0 var(--space-xxl);
}

.cta-inner{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gutter);
  padding:32px;
  border-radius:var(--radius-lg);
  background:linear-gradient(120deg, rgba(227,179,106,0.12), rgba(15,20,26,0.8));
  border:var(--hairline) solid rgba(227,179,106,0.35);
}

.cta-inner > div:first-child{
  grid-column:span 7;
}

.cta-actions{
  grid-column:span 5;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-start;
  justify-content:center;
}

.cta-title{
  font-family:var(--font-serif);
  font-size:var(--type-display);
  margin:0 0 10px 0;
}

.site-footer{
  padding:40px 0 60px;
  border-top:var(--hairline) solid var(--glass-border);
}

/* Reveal animations baseline */
.fade-slide{
  opacity:0;
  transform:translateY(28px);
  transition:opacity var(--time-long) var(--easing-brand), transform var(--time-long) var(--easing-brand);
}

.fade-slide.in-view{
  opacity:1;
  transform:none;
}

/* Custom cursor element (visible on desktop) */
#cursor{
  position:fixed;
  left:0;
  top:0;
  width:var(--cursor-size);
  height:var(--cursor-size);
  border-radius:50%;
  pointer-events:none;
  z-index:var(--z-overlay);
  mix-blend-mode:screen;
  background:var(--cursor-color);
  transform:translate(-50%,-50%);
  transition:width 300ms var(--easing-soft), height 300ms var(--easing-soft), filter 300ms var(--easing-soft);
  filter:blur(calc(var(--cursor-blur) / 2));
}

/* Tilt base */
.tilt{
  transform-style:preserve-3d;
  will-change:transform;
}

.tilt::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 120px rgba(0,0,0,0.14);
}

@media (max-width:1100px){
  .hero-inner{
    grid-template-columns:1fr;
  }
  .hero-copy,
  .hero-media{
    grid-column:1 / -1;
  }
  .hero-media{
    min-height:380px;
  }
  .hero-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .featured-grid{
    grid-template-columns:1fr;
  }
  .case-large,
  .case-stack{
    grid-column:1 / -1;
  }
  .services .bento{
    grid-template-columns:repeat(2,1fr);
  }
  .process-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .studio-grid{
    grid-template-columns:1fr;
  }
  .studio-media,
  .studio-copy{
    grid-column:1 / -1;
  }
  .clients-row{
    grid-template-columns:repeat(2,1fr);
  }
  .cta-inner{
    grid-template-columns:1fr;
  }
  .cta-inner > div:first-child,
  .cta-actions{
    grid-column:1 / -1;
  }
}

@media (max-width:700px){
  .header-inner{
    flex-direction:column;
    align-items:flex-start;
  }
  .nav{
    flex-wrap:wrap;
  }
  .hero-stats{
    grid-template-columns:1fr;
  }
  .services .bento{
    grid-template-columns:1fr;
  }
}