/* ============================================
   PASCAL ANDERSON — FOTOGRAFIE
   Design tokens
   ============================================ */
:root{
  --black:      #0B0B0C;
  --black-2:    #101011;
  --panel:      #141416;
  --line:       rgba(237,237,238,0.12);
  --white:      #EDEDEE;
  --grey:       #8A8A8E;
  --grey-dim:   #58585C;
  --accent:     #FF3B3F;
  --accent-2:   #2BD9C9;
  --accent-3:   #FFAA3C;

  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;

  --font-display: 'Clash Display', sans-serif;
  --font-body: 'General Sans', sans-serif;

  --container: 1240px;
  --gutter: clamp(20px, 4vw, 64px);
}

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

html{ scroll-behavior:smooth; }

body{
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
input, textarea, select{ font-family:inherit; }

::selection{ background:var(--accent); color:var(--black); }

/* ============================================
   Grain overlay — photographic texture
   ============================================ */
.grain{
  position:fixed; inset:0;
  z-index:999;
  pointer-events:none;
  opacity:0.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================
   Cursor orb — the signature interactive element
   Desktop only; disabled for touch & reduced-motion
   ============================================ */
.cursor-orb{
  position:fixed;
  top:0; left:0;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--white);
  pointer-events:none;
  z-index:998;
  transform:translate(-50%,-50%);
  transition:width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1),
             background-color .35s ease, opacity .3s ease;
  mix-blend-mode:difference;
  display:none;
}
@media (hover:hover) and (pointer:fine){
  .cursor-orb{ display:flex; align-items:center; justify-content:center; }
}
.cursor-orb__label{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
  color:var(--black);
  opacity:0;
  transition:opacity .2s ease;
}
.cursor-orb.is-spotlight{
  width:340px; height:340px;
  background:radial-gradient(circle, rgba(255,59,63,0.18) 0%, rgba(43,217,201,0.10) 45%, transparent 72%);
  mix-blend-mode:screen;
}
.cursor-orb.is-viewing{
  width:96px; height:96px;
  background:var(--white);
  mix-blend-mode:normal;
}
.cursor-orb.is-viewing .cursor-orb__label{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .cursor-orb{ display:none; }
}

/* ============================================
   Layout helpers
   ============================================ */
.section-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.4rem, 5vw, 3.6rem);
  line-height:0.95;
  letter-spacing:-0.01em;
}

/* ============================================
   NAV
   ============================================ */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:500;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px var(--gutter);
  backdrop-filter:blur(10px);
  background:linear-gradient(to bottom, rgba(11,11,12,0.75), transparent);
}
.nav__logo{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:0.01em;
}
.nav__links{
  display:flex;
  gap:36px;
}
.nav__links a{
  font-size:0.9rem;
  color:var(--grey);
  transition:color .2s ease;
  position:relative;
}
.nav__links a:hover, .nav__links a:focus-visible{ color:var(--white); }
.nav__links a::after{
  content:'';
  position:absolute;
  left:0; bottom:-4px;
  width:0; height:1px;
  background:var(--accent);
  transition:width .25s ease;
}
.nav__links a:hover::after{ width:100%; }

.nav__toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  padding:6px;
}
.nav__toggle span{
  width:22px; height:1.5px;
  background:var(--white);
}

/* ============================================
   HERO
   ============================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  align-items:center;
  gap:32px;
  padding:132px var(--gutter) 56px;
  background:
    radial-gradient(ellipse 900px 600px at 12% 18%, rgba(43,217,201,0.20), transparent 62%),
    radial-gradient(ellipse 800px 550px at 92% 12%, rgba(255,170,60,0.16), transparent 60%),
    radial-gradient(ellipse 750px 550px at 60% 95%, rgba(255,59,63,0.16), transparent 60%);
}
.hero__left{
  display:flex;
  flex-direction:column;
}
.hero__inner{ max-width:640px; }
.hero__tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:24px;
}
.hero__tag{
  font-size:0.8rem;
  color:var(--grey);
  border:1px solid var(--line);
  border-radius:100px;
  padding:6px 14px;
}
.hero__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(3.4rem, 8vw, 6.6rem);
  line-height:0.88;
  letter-spacing:-0.01em;
  text-transform:uppercase;
}
.hero__line{
  display:block;
  overflow:hidden;
}
.hero__line span, .hero__line{
  will-change:transform;
}
.hero__line{
  position:relative;
}
.hero__line::before{
  content:attr(data-reveal);
  display:inline-block;
  transform:translateY(110%);
  animation:reveal-up 0.9s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:calc(var(--i, 0) * 0.09s + 0.15s);
}
.hero__line{ color:transparent; }
.hero__line:nth-child(1){ --i:0; }
.hero__line:nth-child(2){ --i:1; }
.hero__line:nth-child(3){ --i:2; }

@keyframes reveal-up{
  to{ transform:translateY(0); color:var(--white); }
}

.hero__sub{
  margin-top:28px;
  max-width:46ch;
  color:var(--grey);
  font-size:1.05rem;
  line-height:1.6;
  opacity:0;
  animation:fade-in 0.8s ease forwards;
  animation-delay:0.65s;
}
.hero__actions{
  margin-top:38px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  opacity:0;
  animation:fade-in 0.8s ease forwards;
  animation-delay:0.8s;
}
@keyframes fade-in{ to{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .hero__line::before{ animation:none; transform:none; color:var(--white); }
  .hero__sub, .hero__actions{ animation:none; opacity:1; }
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
  font-size:0.95rem;
  font-weight:500;
  border-radius:var(--radius-sm);
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn--primary{
  background:var(--white);
  color:var(--black);
}
.btn--primary:hover{ background:var(--accent); color:var(--white); transform:translateY(-2px); }
.btn--ghost{
  border:1px solid var(--line);
  color:var(--white);
}
.btn--ghost:hover{ border-color:var(--white); transform:translateY(-2px); }

.hero__scroll{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--grey-dim);
  font-size:0.8rem;
  margin-top:56px;
}
.hero__scroll-line{
  width:1px; height:40px;
  background:linear-gradient(to bottom, var(--grey-dim), transparent);
  flex-shrink:0;
}

/* ============================================
   HERO VISUAL — fills the empty right column
   ============================================ */
.hero__visual{
  position:relative;
  height:520px;
}
.hero__float{
  position:absolute;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,0.45);
}
.hero__float .tile__ph{ width:100%; height:100%; }
.hero__float--1{
  width:66%;
  aspect-ratio:4/5;
  top:0; right:0;
  transform:rotate(3deg);
  animation:float-1 7s ease-in-out infinite;
}
.hero__float--2{
  width:46%;
  aspect-ratio:4/5;
  bottom:0; left:0;
  transform:rotate(-4deg);
  z-index:2;
  animation:float-2 8s ease-in-out infinite;
}
@keyframes float-1{
  0%, 100%{ transform:rotate(3deg) translateY(0); }
  50%{ transform:rotate(3deg) translateY(-14px); }
}
@keyframes float-2{
  0%, 100%{ transform:rotate(-4deg) translateY(0); }
  50%{ transform:rotate(-4deg) translateY(10px); }
}
@media (prefers-reduced-motion: reduce){
  .hero__float--1, .hero__float--2{ animation:none; }
}

@media (max-width:960px){
  .hero{ grid-template-columns:1fr; }
  .hero__visual{ display:none; }
}
@media (max-height:700px){
  .hero__scroll{ display:none; }
}
@media (max-width:760px){
  .hero__scroll{ display:none; }
}

/* ============================================
   GENRES — three short cards under the hero
   ============================================ */
.genres{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter) 60px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.genre-card{
  display:flex;
  align-items:center;
  gap:16px;
  padding:22px 26px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:linear-gradient(160deg, rgba(255,255,255,0.035), transparent 70%);
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}
.genre-card:hover{ transform:translateY(-4px); }
.genre-card__swatch{
  width:14px; height:14px;
  border-radius:50%;
  flex-shrink:0;
}
.genre-card[data-genre="concert"] .genre-card__swatch{ background:var(--accent); }
.genre-card[data-genre="concert"]:hover{ border-color:var(--accent); }
.genre-card[data-genre="event"] .genre-card__swatch{ background:var(--accent-3); }
.genre-card[data-genre="event"]:hover{ border-color:var(--accent-3); }
.genre-card[data-genre="portrait"] .genre-card__swatch{ background:var(--accent-2); }
.genre-card[data-genre="portrait"]:hover{ border-color:var(--accent-2); }
.genre-card h3{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.6rem;
  margin:0;
}
@media (max-width:760px){
  .genres{ grid-template-columns:1fr; }
}

/* ============================================
   WORK / GALLERY
   ============================================ */
.work{
  max-width:var(--container);
  margin:0 auto;
  padding:120px var(--gutter) 60px;
}
.work__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:24px;
  margin-bottom:48px;
}
.filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.filter{
  padding:9px 18px;
  font-size:0.88rem;
  color:var(--grey);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  transition:all .2s ease;
}
.filter:hover{ color:var(--white); border-color:var(--grey); }
.filter.is-active{
  background:var(--white);
  color:var(--black);
  border-color:var(--white);
}

.gallery{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-auto-flow:dense;
  gap:4px;
}
.tile{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  cursor:pointer;
  transition:opacity .4s ease, transform .4s ease;
}
.tile.is-hidden{
  display:none;
}
.tile figcaption{
  position:absolute;
  left:16px; bottom:14px;
  font-size:0.82rem;
  font-weight:500;
  color:var(--white);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
  z-index:3;
}
.tile:hover figcaption, .tile:focus-visible figcaption{ opacity:1; transform:translateY(0); }
.tile::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.6), transparent 50%);
  opacity:0;
  transform:translate(-6%,6%);
  transition:opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1);
  z-index:1;
  mix-blend-mode:hard-light;
}
.tile:hover::after, .tile:focus-visible::after{ opacity:1; transform:translate(0,0); }

.tile[data-category="concert"]::after{
  background:linear-gradient(135deg, rgba(255,59,63,0.4), rgba(255,170,60,0.22) 70%), linear-gradient(to top, rgba(0,0,0,0.6), transparent 50%);
}
.tile[data-category="event"]::after{
  background:linear-gradient(135deg, rgba(255,170,60,0.4), rgba(255,59,63,0.22) 70%), linear-gradient(to top, rgba(0,0,0,0.6), transparent 50%);
}
.tile[data-category="portrait"]::after{
  background:linear-gradient(135deg, rgba(43,217,201,0.42), rgba(255,59,63,0.18) 70%), linear-gradient(to top, rgba(0,0,0,0.6), transparent 50%);
}

.tile__ph{
  width:100%; height:100%;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), filter .5s ease;
  transform-style:preserve-3d;
  will-change:transform;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
}
.tile:hover .tile__ph, .tile:focus-visible .tile__ph{ filter:saturate(1.25) brightness(1.05); }
.tile__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .5s ease;
}
.tile__img.is-loaded{ opacity:1; }
.tile__frame{
  margin:12px;
  font-size:0.7rem;
  letter-spacing:0.05em;
  color:rgba(237,237,238,0.55);
  z-index:2;
}
.tile__cat{
  position:absolute;
  right:14px; top:50%;
  transform:translateY(-50%) translateX(14px);
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.4rem, 2.4vw, 2.2rem);
  color:var(--white);
  opacity:0;
  z-index:3;
  transition:opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
  text-align:right;
  line-height:0.9;
}
.tile:hover .tile__cat, .tile:focus-visible .tile__cat{
  opacity:0.9;
  transform:translateY(-50%) translateX(0);
}

/* Placeholder gradients — swap tile__ph backgrounds for real photos */
.tile__ph--1{ background:radial-gradient(ellipse at 30% 20%, #3a1030, #0B0B0C 70%), linear-gradient(120deg,#1a0f24,#0B0B0C); }
.tile__ph--2{ background:radial-gradient(ellipse at 70% 30%, #241d33, #0B0B0C 70%); }
.tile__ph--3{ background:radial-gradient(ellipse at 50% 60%, #331414, #0B0B0C 70%); }
.tile__ph--4{ background:radial-gradient(ellipse at 20% 70%, #3a1a12, #0B0B0C 70%); }
.tile__ph--5{ background:radial-gradient(ellipse at 60% 40%, #1c1c2e, #0B0B0C 70%); }
.tile__ph--6{ background:radial-gradient(ellipse at 40% 20%, #2b1c33, #0B0B0C 70%); }
.tile__ph--7{ background:radial-gradient(ellipse at 75% 65%, #331020, #0B0B0C 70%); }
.tile__ph--8{ background:radial-gradient(ellipse at 30% 50%, #202433, #0B0B0C 70%); }
.tile__ph--9{ background:radial-gradient(ellipse at 55% 30%, #2a1414, #0B0B0C 70%); }
.tile__ph--about{ background:radial-gradient(ellipse at 40% 30%, #241a2e, #0B0B0C 70%); width:100%; height:100%; }

.tile--a{ grid-column:span 3; aspect-ratio:4/5; }
.tile--b{ grid-column:span 3; aspect-ratio:4/5; }
.tile--c{ grid-column:span 2; aspect-ratio:4/5; }
.tile--d{ grid-column:span 2; aspect-ratio:4/5; }
.tile--e{ grid-column:span 2; aspect-ratio:1/1; }
.tile--f{ grid-column:span 2; aspect-ratio:4/5; }
.tile--g{ grid-column:span 2; aspect-ratio:1/1; }
.tile--h{ grid-column:span 2; aspect-ratio:4/5; }
.tile--i{ grid-column:span 2; aspect-ratio:4/5; }

@media (max-width:860px){
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .tile--a,.tile--b,.tile--c,.tile--d,.tile--e,.tile--f,.tile--g,.tile--h,.tile--i{
    grid-column:span 1;
    aspect-ratio:4/5;
  }
  .tile--a{ grid-column:span 2; }
}

/* ============================================
   LIGHTBOX
   ============================================ */
.lightbox{
  position:fixed; inset:0;
  z-index:900;
  background:rgba(6,6,7,0.92);
  backdrop-filter:blur(6px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:60px var(--gutter);
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
.lightbox.is-open{
  opacity:1;
  visibility:visible;
}
.lightbox__close{
  position:absolute;
  top:26px; right:var(--gutter);
  font-size:0.85rem;
  color:var(--grey);
  transition:color .2s ease;
}
.lightbox__close:hover{ color:var(--white); }
.lightbox__stage{
  width:min(640px, 85vw);
  aspect-ratio:4/5;
  max-height:82vh;
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:scale(0.94);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
/* Once a real photo is loaded, drop the fixed 4:5 box and let the
   stage hug the photo's actual proportions — no more letterbox bars
   from forcing every photo into the same shape. */
.lightbox__stage.has-photo{
  width:auto;
  aspect-ratio:auto;
  max-width:92vw;
}
.lightbox.is-open .lightbox__stage{ transform:scale(1); }
.lightbox__ph{
  position:relative;
  width:100%; height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox__stage.has-photo .lightbox__ph{ width:auto; height:auto; }
.lightbox__ph .tile__img{
  display:none;
  position:static;
  width:auto; height:auto;
  max-width:92vw;
  max-height:82vh;
  object-fit:contain;
}
.lightbox__stage.has-photo .tile__img{ display:block; }
.lightbox__caption{
  margin-top:22px;
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.3rem;
  color:var(--white);
}

/* ============================================
   ABOUT
   ============================================ */
.about{
  max-width:var(--container);
  margin:0 auto;
  padding:80px var(--gutter) 120px;
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:64px;
  align-items:center;
}
.about__media{ aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden; }
.about__lead{
  color:var(--white) !important;
  font-size:1.15rem;
  max-width:48ch;
}
@media (max-width:860px){
  .about{ grid-template-columns:1fr; }
  .about__media{ aspect-ratio:16/10; }
}

/* ============================================
   CONTACT
   ============================================ */
.contact{
  border-top:1px solid var(--line);
  padding:120px var(--gutter);
}
.contact__inner{ max-width:640px; margin:0 auto; }
.contact__lead{
  color:var(--grey);
  margin-top:16px;
  max-width:50ch;
}
.contact__form{
  margin-top:48px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column:1 / -1; }
.field label{ font-size:0.85rem; color:var(--grey); }
.field input, .field select, .field textarea{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  padding:10px 2px;
  color:var(--white);
  font-size:1rem;
  transition:border-color .2s ease;
}
.field select option{ background:var(--black); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-bottom-color:var(--accent);
}
.field textarea{ resize:vertical; }
.contact__form .btn{ grid-column:1 / -1; justify-self:start; margin-top:8px; }
.hidden-field{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}
.form-status{
  grid-column:1 / -1;
  margin:8px 0 0;
  font-size:0.88rem;
  color:var(--grey);
}

@media (max-width:640px){
  .contact__form{ grid-template-columns:1fr; }
}

/* ============================================
   FOOTER
   ============================================ */
.footer{
  border-top:1px solid var(--line);
  padding:28px var(--gutter);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  color:var(--grey);
  font-size:0.85rem;
}
.footer__links{ display:flex; gap:24px; }
.footer__links a:hover{ color:var(--white); }

/* ============================================
   Accessibility: focus states
   ============================================ */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ============================================
   Mobile nav
   ============================================ */
@media (max-width:760px){
  .nav__links{
    position:fixed;
    top:0; right:0;
    height:100svh;
    width:min(78vw, 340px);
    background:var(--panel);
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:28px;
    padding:0 40px;
    transform:translateX(100%);
    transition:transform .35s ease;
    z-index:400;
  }
  .nav__links.is-open{ transform:translateX(0); }
  .nav__links a{ font-size:1.4rem; color:var(--white); }
  .nav__toggle{ display:flex; z-index:401; }
}