/* ------------------ GLOBAL LAYOUT ------------------ */

html, body{
    height:100%;
}

body{
    display:flex;
    flex-direction:column;
}

.site-main{
    flex:1;
}

/* ------------------ FONTS ------------------ */

@font-face {
  font-family: "Didot Regular";
  src: url("https://kencanyon.com/fonts/didot_regular.ttf");
}

@font-face {
  font-family: "Didot Medium";
  src: url("https://kencanyon.com/fonts/didot_medium.ttf");
}

/* ------------------ PAGE LOAD ANIMATION ------------------ */

body{
    font-family:"Didot Regular", serif;
    background:#0B0B0B;
    color:#E5E5E5;
    opacity:0;
    transition:opacity .6s ease;
}

body.loaded{
    opacity:1;
}

/* HERO animation */
.hero-name,
.hero-meta,
.hero-tagline{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .8s ease, transform .8s ease;
}

.loaded .hero-name{ transition-delay:.2s; }
.loaded .hero-meta{ transition-delay:.4s; }
.loaded .hero-tagline{ transition-delay:.6s; }

.loaded .hero-name,
.loaded .hero-meta,
.loaded .hero-tagline{
    opacity:1;
    transform:translateY(0);
}

/* NAV animation */
.site-header,
.desktop-nav{
    opacity:0;
    transform:translateY(-10px);
    transition:opacity .6s ease, transform .6s ease;
}

.loaded .site-header,
.loaded .desktop-nav{
    opacity:1;
    transform:translateY(0);
}

/* ------------------ HERO ------------------ */

.hero{
    min-height:100vh;
    min-height:100svh;
    display:flex;
    align-items:center;
    position:relative;
    z-index:1;
}

.hero-inner{
    width:90%;
    max-width:1200px;
    margin:0 auto;
}

/* ------------------ PAGE HERO ------------------ */

.page-hero{
    padding-top:120px;
    padding-bottom:60px;
    position:relative;
}

.page-title{
    font-family:"Didot Regular", serif;
    font-size:42px;
    letter-spacing:.18em;
    text-transform:uppercase;
    text-align:center;
}

/* ------------------ MOBILE TITLE ------------------ */

.mobile-page-title{
    position:fixed;
    top:20px;
    left:0;
    width:100%;
    text-align:center;
    font-family:"Didot Medium", serif;
    letter-spacing:.18em;
    font-size:14px;
    text-transform:uppercase;
    opacity:0;
    z-index:5000;
}

/* ------------------ NAV VISIBILITY ------------------ */

.desktop-nav{ display:none; }
.mobile-nav{ display:block; }

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

    .desktop-nav{
        display:block;
        position:fixed;
        top:0;
        width:100%;
        z-index:2000;
        background:transparent;
    }
}

/* ------------------ HEADER ------------------ */

.site-header{
    position:fixed;
    top:0;
    width:100%;
    padding:26px 40px;
    z-index:6000;
    background:transparent;
    transition:background .4s ease, border-color .4s ease;
}

/* SCROLL EFFECT */
.nav-scrolled{
    background:rgba(11,11,11,.95) !important;
    backdrop-filter:blur(10px);
    border-bottom:1px solid #2C2C2C;
}

/* ------------------ BRAND ------------------ */

.brand-logo,
.desktop-nav .navbar-brand{
    font-family:"Didot Regular", serif;
    letter-spacing:.14em;
    font-size:18px;
    color:#FFFFFF;
    text-decoration:none;
}

/* DESKTOP NAV LINKS */

.desktop-nav .nav-link{
    color:#FFFFFF !important;
    font-family:"Didot Medium", serif;
    letter-spacing:.16em;
    text-transform:uppercase;
    font-size:13px;
    opacity:.85;
    transition:opacity .25s ease;
}

.desktop-nav .nav-link:hover{
    opacity:1;
}

/* ------------------ HAMBURGER ------------------ */

.menu-toggle{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    background:none;
    cursor:pointer;
    position:relative;
    z-index:4000;
}

.menu-icon{
    width:32px;
    height:24px;
    position:relative;
}

.menu-line{
    position:absolute;
    width:100%;
    height:3px;
    background:#FFFFFF;
    transition:all .4s ease;
}

.menu-line:nth-child(1){ top:0; }
.menu-line:nth-child(2){ top:10px; }
.menu-line:nth-child(3){ bottom:0; }

.menu-toggle.active .menu-line:nth-child(1){
    transform: translateY(10px) rotate(45deg);
}

.menu-toggle.active .menu-line:nth-child(2){
    opacity:0;
}

.menu-toggle.active .menu-line:nth-child(3){
    transform: translateY(-10px) rotate(-45deg);
}

/* ------------------ MENU ------------------ */

.menu-links{
    list-style:none;
    text-align:center;
}

.menu-links li{
    margin:28px 0;
}

.menu-links a{
    font-family:"Didot Medium", serif;
    font-size:22px;
    letter-spacing:.22em;
    font-weight:500;
    text-transform:uppercase;
    color:#FFFFFF;
    text-decoration:none;
    transition:.25s ease;
    text-shadow:0 2px 10px rgba(0,0,0,.6);
}

.menu-links a:hover{
    opacity:.7;
}

/* ------------------ OVERLAY ------------------ */

.menu-overlay{
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at 50% 40%, rgba(255,255,255,0.04), rgba(0,0,0,0) 55%),
        radial-gradient(circle at 50% 100%, rgba(0,0,0,0), rgba(0,0,0,0.65) 90%),
        linear-gradient(to bottom, rgba(11,11,11,0.96), rgba(11,11,11,0.99));
    backdrop-filter:blur(14px);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .45s ease;
    z-index:3000;
}

.menu-overlay::after{
    content:"";
    position:absolute;
    inset:0;
    background-image: radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size:3px 3px;
    opacity:0.18;
    mix-blend-mode:overlay;
    pointer-events:none;
    animation:grainMove 6s steps(6) infinite;
}

@keyframes grainMove{
    0%{ transform:translate(0,0); }
    20%{ transform:translate(-1%,1%); }
    40%{ transform:translate(1%,-1%); }
    60%{ transform:translate(-1%,-1%); }
    80%{ transform:translate(1%,1%); }
    100%{ transform:translate(0,0); }
}

.menu-overlay.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

/* ------------------ WORK PAGE ------------------ */

.work-section{
    padding:120px 0 80px;
}

.work-inner{
    width:90%;
    max-width:1100px;
    margin:0 auto;
}

.work-item{
    padding:40px 0;
    border-bottom:1px solid #1E1E1E;
}

.work-meta{
    display:flex;
    gap:20px;
    margin-bottom:10px;
    font-family:"Didot Medium", serif;
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#6E6E6E;
}

.work-title{
    font-family:"Didot Regular", serif;
    font-size:20px;
    letter-spacing:.08em;
}



/* ================================
   SERVICES — EDITORIAL PANELS
   Non-destructive / scoped styles
================================ */

/* Container */
.services-panels {
  width: 100%;
  position: relative;
}

/* Panel */
.panel {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 8vw;
  overflow: hidden;
}

/* Slight overlap feel */
.panel:not(:last-child) {
  margin-bottom: -5vh;
}

/* Inner Content */
.panel-inner {
  max-width: 720px;
  width: 100%;
}

/* Typography */
.panel-eyebrow {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 1.2rem;

  /* animation base */
  transform: translateY(20px);
  opacity: 0;
}

.panel-title {
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;

  transform: translateY(30px);
  opacity: 0;
}

.panel-text {
  font-size: 1rem;
  line-height: 1.7;
  opacity: 0.75;
  max-width: 520px;

  transform: translateY(30px);
  opacity: 0;
}

/* CTA link */
.panel-link {
  display: inline-block;
  margin-top: 2rem;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;

  transform: translateY(30px);
  opacity: 0;
}

/* subtle underline animation */
.panel-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

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

/* ================================
   ACTIVE STATE (triggered via JS)
================================ */

.panel.is-visible .panel-eyebrow {
  transform: translateY(0);
  opacity: 0.5;
  transition: all 0.6s ease;
}

.panel.is-visible .panel-title {
  transform: translateY(0);
  opacity: 1;
  transition: all 0.7s ease 0.08s;
}

.panel.is-visible .panel-text {
  transform: translateY(0);
  opacity: 0.75;
  transition: all 0.8s ease 0.16s;
}

.panel.is-visible .panel-link {
  transform: translateY(0);
  opacity: 1;
  transition: all 0.8s ease 0.24s;
}

/* ================================
   PARALLAX SUBTLE SHIFT
================================ */

.panel-inner {
  will-change: transform;
  transition: transform 0.6s ease-out;
}

.panel.is-visible .panel-inner {
  transform: translateY(0);
}

/* default slight offset */
.panel-inner {
  transform: translateY(20px);
}

/* ================================
   CTA PANEL (slightly different)
================================ */

.panel-cta .panel-title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
}

.panel-cta .panel-text {
  opacity: 0.6;
}

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

@media (max-width: 768px) {
  .panel {
    padding: 0 6vw;
  }

  .panel-title {
    font-size: 2rem;
  }

  .panel-text {
    font-size: 0.95rem;
  }
}

/* Base panel background */
.panel {
  background: #0a0a0a;
}

/* Individual panel tones */
.panel:nth-child(1) {
  background: linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
}

.panel:nth-child(2) {
  background: radial-gradient(circle at 20% 30%, #111 0%, #050505 60%);
}

.panel:nth-child(3) {
  background: linear-gradient(180deg, #0a0a0a 0%, #020202 100%);
}

.panel:nth-child(4) {
  background: radial-gradient(circle at 80% 40%, #141414 0%, #050505 70%);
}

.panel:nth-child(5) {
  background: linear-gradient(160deg, #0c0c0c 0%, #020202 100%);
}

.panel:nth-child(6) {
  background: radial-gradient(circle at 50% 80%, #101010 0%, #040404 70%);
}

.panel:nth-child(7) {
  background: linear-gradient(180deg, #080808 0%, #000000 100%);
}

.panel-cta {
  background: #000;
}

/* grain overlay */

.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
  opacity: 0.15;
  mix-blend-mode: overlay;
}

/* panel shift */

.panel {
  transition: background 1s ease;
}



/* ------------------- ABOUT PAGE ------------------- */

.about {
  max-width: 720px;
  margin: 0 auto;
  padding: 140px 20px;
}

.about-block {
  margin-bottom: 140px;
  transform: translateY(0);
  transition: transform 0.2s linear;
  will-change: transform;
}

.about-block.intro {
  margin-bottom: 180px;
}

.about-block.closing {
  margin-bottom: 200px;
}

/* Typography */
.about h1 {
  font-family: 'Didot', serif;
  font-size: 42px;
  margin-bottom: 40px;
}

.about h2 {
  font-family: 'Didot', serif;
  font-size: 20px;
  margin-bottom: 24px;
  letter-spacing: 0.08em;
}

.about p {
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 18px;
  color: rgba(255,255,255,0.85);
}

/* Signature line */
.signature {
  margin-top: 80px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.fade-in.visible {
  opacity: 0.75;
  transform: translateY(0);
}

.stagger span {
  display: block;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1s ease, transform 1s ease;
}

/* visible state */
.stagger.visible span {
  opacity: 1;
  transform: translateY(0);
}

/* stagger delay */
.stagger.visible span:nth-child(1) { transition-delay: 0.1s; }
.stagger.visible span:nth-child(2) { transition-delay: 0.25s; }
.stagger.visible span:nth-child(3) { transition-delay: 0.4s; }
.stagger.visible span:nth-child(4) { transition-delay: 0.55s; }


/* ------------------ CONTACT PAGE ------------------ */

.contact-section{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.contact-inner{
    width:90%;
    max-width:500px;
}

.contact-title{
    font-size:clamp(28px,4vw,48px);
    letter-spacing:.12em;
    margin-bottom:20px;
    color:#B3B3B3;
}

.contact-divider{
    height:1px;
    background:#2C2C2C;
    margin-bottom:40px;
}

input, textarea{
    width:100%;
    background:transparent;
    border:none;
    border-bottom:1px solid #2C2C2C;
    color: #E5E5E5;
    padding:10px 0;
    font-family:"Didot Regular", serif;
    letter-spacing:.08em;
    outline:none;
    transition:border-color .25s ease;
}

input:focus, textarea:focus{
    border-color:#B3B3B3;
}

/* BUTTON */

.contact-btn{
    margin-top:20px;
    border:1px solid #B3B3B3;
    background:transparent;
    color:#B3B3B3;
    padding:12px 28px;
    letter-spacing:.12em;
    font-family:"Didot Medium", serif;
    transition:all .25s ease;
}

.contact-btn:hover{
    background:#B3B3B3;
    color:#000;
}

/* CLICK ANIMATION */

.contact-btn:active{
    transform:scale(.96);
}

/* ------------------ FOOTER ------------------ */

.site-footer{
    padding:40px 0;
    border-top:1px solid #1E1E1E;
    background:#0B0B0B;
}

.footer-inner{
    width:90%;
    max-width:1200px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-family:"Didot Medium", serif;
    font-variant:small-caps;
    text-transform:uppercase;
}

.site-footer a{
    color:#B3B3B3 !important;
    text-decoration:none !important;
    text-transform:uppercase;
}

/* ------------------ MOBILE ------------------ */

@media (max-width:768px){

    .footer-inner{
        justify-content:center;
        text-align:center;
    }

    .footer-info{
        display:none;
    }

    .work-meta{
        flex-direction:column;
        gap:4px;
    }

    .contact-section{
        padding:140px 0 100px;
        min-height:60vh;
    }

    .contact-email{
        font-size:22px;
        letter-spacing:.18em;
        margin-bottom:40px;
    }

    .contact-subtext{
        font-size:10px;
        letter-spacing:.22em;
    }
}

/* ------------------ HOME FIX ------------------ */

@media (max-width:768px){
    .home .hero{
        margin-top:80px;
    }
}