/* =========================================================
   FOTON.DIGITAL — design tokens
   ========================================================= */
:root{
  --bg:        #0D0D0B;
  --surface:   #17171389;
  --surface-solid: #1B1B17;
  --line:      #33322C;
  --text:      #EDEAE1;
  --text-muted:#948E7E;
  --accent:    #C69A4B;
  --accent-dim:#8A6C36;

  --font-display: "Bodoni Moda", "Times New Roman", serif;
  --font-body: "Work Sans", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --max: 1160px;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.05;
  margin:0 0 0.5em;
  letter-spacing:-0.01em;
}
p{ margin:0 0 1em; color:var(--text); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }

.eyebrow-tc{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.04em;
  color:var(--accent);
  margin:0 0 0.9em;
}

section{ padding: clamp(4rem,10vw,7rem) var(--pad); max-width:var(--max); margin:0 auto; }

.btn{
  display:inline-block;
  padding:0.85em 1.6em;
  font-family:var(--font-body);
  font-size:0.95rem;
  font-weight:500;
  border:1px solid var(--line);
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.btn-primary{ background:var(--accent); border-color:var(--accent); color:#161510; }
.btn-primary:hover{ background:#d9ac5c; border-color:#d9ac5c; }
.btn-ghost{ background:transparent; color:var(--text); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.25rem var(--pad);
  background:linear-gradient(to bottom, rgba(13,13,11,0.9), transparent);
}
.wordmark{
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:600;
  letter-spacing:0.01em;
  display:flex; align-items:center; gap:0.55rem;
}
.wordmark .dot{ color:var(--accent); }
.logo-mark{ width:26px; height:26px; display:block; }
.logo-mark-sm{ width:18px; height:18px; }
.footer-mark{ display:flex; align-items:center; gap:0.5rem; font-family:var(--font-display); }

.site-nav{ display:flex; align-items:center; gap:2rem; }
.site-nav a{ font-size:0.92rem; color:var(--text-muted); transition:color .2s ease; }
.site-nav a:hover{ color:var(--text); }
.nav-cta{
  border:1px solid var(--line); padding:0.5em 1.1em; color:var(--text) !important;
}
.nav-cta:hover{ border-color:var(--accent); color:var(--accent) !important; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:8px;
}
.nav-toggle span{ width:22px; height:1.5px; background:var(--text); display:block; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding: 0 var(--pad);
  overflow:hidden;
}
.hero-aperture{
  position:absolute; top:50%; right:-8%; transform:translateY(-50%);
  width:min(60vw, 640px); height:min(60vw, 640px);
  color:var(--line);
  opacity:0.9;
  pointer-events:none;
}
.ap-ring{ opacity:0.4; }
.hero-content{ max-width:640px; position:relative; z-index:2; }
.hero-title{
  font-size:clamp(2.4rem, 6vw, 4.4rem);
  color:var(--text);
}
.hero-sub{
  max-width:46ch;
  color:var(--text-muted);
  font-size:1.05rem;
}
.hero-actions{ display:flex; gap:1rem; margin-top:1.75rem; flex-wrap:wrap; }

.scroll-cue{
  position:absolute; bottom:2.5rem; left:var(--pad);
  display:flex; align-items:center; gap:0.6rem;
  font-family:var(--font-mono); font-size:0.7rem; color:var(--text-muted);
  letter-spacing:0.04em;
}
.scroll-cue span{
  width:1px; height:28px; background:var(--text-muted);
  position:relative; overflow:hidden;
}
.scroll-cue span::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--accent);
  animation:scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{ top:-100%; } 50%{ top:0; } 100%{ top:100%; }
}

/* =========================================================
   NICHES
   ========================================================= */
.section-head{ max-width:640px; margin-bottom:3rem; }
.section-head h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); }
.section-lede{ color:var(--text-muted); }

.niche{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
  padding: clamp(2.5rem,5vw,4rem) 0;
  border-top:1px solid var(--line);
}
.niche:first-of-type{ border-top:1px solid var(--line); }
.niche-reverse{ direction:rtl; }
.niche-reverse > *{ direction:ltr; }

.niche-visual{
  aspect-ratio:4/3;
  border:1px solid var(--line);
  position:relative;
  background:var(--surface-solid);
  overflow:hidden;
}
.niche-visual::before{
  content:""; position:absolute; inset:0;
  background-repeat:no-repeat; background-position:center; background-size:80%;
  opacity:0.9;
}
.niche-visual[data-motif="rings"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140'%3E%3Cg fill='none' stroke='%23C69A4B' stroke-width='1.2'%3E%3Ccircle cx='85' cy='70' r='38'/%3E%3Ccircle cx='120' cy='70' r='38'/%3E%3C/g%3E%3C/svg%3E");
}
.niche-visual[data-motif="motion"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140'%3E%3Cg stroke='%23C69A4B' stroke-width='1.2' fill='none' stroke-linecap='round'%3E%3Cline x1='10' y1='40' x2='150' y2='40'/%3E%3Cline x1='10' y1='60' x2='185' y2='60'/%3E%3Cline x1='10' y1='80' x2='120' y2='80'/%3E%3Cline x1='10' y1='100' x2='165' y2='100'/%3E%3C/g%3E%3C/svg%3E");
}
.niche-visual[data-motif="contour"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140'%3E%3Cg fill='none' stroke='%23C69A4B' stroke-width='1'%3E%3Cellipse cx='100' cy='70' rx='90' ry='55'/%3E%3Cellipse cx='100' cy='70' rx='65' ry='38'/%3E%3Cellipse cx='100' cy='70' rx='40' ry='22'/%3E%3Cellipse cx='100' cy='70' rx='16' ry='9'/%3E%3C/g%3E%3C/svg%3E");
}
.niche-visual[data-motif="grid"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140'%3E%3Cg stroke='%23C69A4B' stroke-width='0.8'%3E%3Cline x1='40' y1='0' x2='40' y2='140'/%3E%3Cline x1='90' y1='0' x2='90' y2='140'/%3E%3Cline x1='140' y1='0' x2='140' y2='140'/%3E%3Cline x1='0' y1='35' x2='200' y2='35'/%3E%3Cline x1='0' y1='70' x2='200' y2='70'/%3E%3Cline x1='0' y1='105' x2='200' y2='105'/%3E%3C/g%3E%3C/svg%3E");
}
.niche-visual[data-motif="arc"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140'%3E%3Cg fill='none' stroke='%23C69A4B'%3E%3Cpath d='M20 110 A80 80 0 0 1 180 110' stroke-width='1'/%3E%3Cpath d='M45 110 A55 55 0 0 1 155 110' stroke-width='1'/%3E%3Cline x1='10' y1='110' x2='190' y2='110' stroke-width='0.8'/%3E%3C/g%3E%3C/svg%3E");
}
.niche-visual[data-motif="plan"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140'%3E%3Cg fill='none' stroke='%23C69A4B' stroke-width='1'%3E%3Crect x='20' y='20' width='160' height='100'/%3E%3Cline x1='95' y1='20' x2='95' y2='75'/%3E%3Cline x1='95' y1='75' x2='180' y2='75'/%3E%3Cpath d='M95 75 A22 22 0 0 1 117 53' stroke-width='0.8'/%3E%3C/g%3E%3C/svg%3E");
}
.niche-visual[data-motif="spot"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140'%3E%3Cg fill='none' stroke='%23C69A4B'%3E%3Ccircle cx='100' cy='70' r='34' stroke-width='1'/%3E%3Ccircle cx='100' cy='70' r='55' stroke-width='0.7' stroke-dasharray='2 4'/%3E%3Cline x1='100' y1='16' x2='100' y2='30' stroke-width='0.8'/%3E%3Cline x1='100' y1='110' x2='100' y2='124' stroke-width='0.8'/%3E%3Cline x1='46' y1='70' x2='32' y2='70' stroke-width='0.8'/%3E%3Cline x1='154' y1='70' x2='168' y2='70' stroke-width='0.8'/%3E%3C/g%3E%3C/svg%3E");
}

.niche-copy h3{ font-size:clamp(1.6rem,3vw,2.1rem); }
.niche-copy p{ color:var(--text-muted); max-width:46ch; }
.niche-list{ margin-top:1rem; display:flex; flex-direction:column; gap:0.5rem; }
.niche-list li{
  font-size:0.9rem; color:var(--text);
  padding-left:1.1em; position:relative;
}
.niche-list li::before{
  content:""; position:absolute; left:0; top:0.55em;
  width:5px; height:5px; background:var(--accent);
}

/* =========================================================
   GALLERY
   ========================================================= */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:160px;
  gap:0.75rem;
}
.g-tile{
  margin:0; border:1px dashed var(--line);
  background:var(--surface-solid);
  background-size:cover;
  background-position:center;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  position:relative;
  overflow:hidden;
  grid-column:span 1; grid-row:span 1;
}
.g-tile span{
  font-family:var(--font-mono); font-size:0.68rem; color:var(--text-muted);
  line-height:1.5;
}
.g-tile.has-photo{ border-style:solid; }
.g-tile.has-photo::after{
  content:attr(data-cap);
  position:absolute; left:0; right:0; bottom:0;
  padding:1.4em 0.9em 0.6em;
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.02em;
  color:var(--text);
  background:linear-gradient(to top, rgba(13,13,11,0.85), transparent);
  opacity:0; transition:opacity .2s ease;
}
.g-tile.has-photo:hover::after{ opacity:1; }
.g-tall{ grid-row:span 2; }
.g-wide{ grid-column:span 2; }

/* =========================================================
   ABOUT
   ========================================================= */
.about{
  display:grid; grid-template-columns: 0.85fr 1.15fr; gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.about-portrait{
  aspect-ratio:3/4; border:1px dashed var(--line); background:var(--surface-solid);
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.about-portrait span{ font-family:var(--font-mono); font-size:0.7rem; color:var(--text-muted); line-height:1.6; }
.about-copy p{ color:var(--text-muted); max-width:52ch; }
.about-stats{ display:flex; gap:2.5rem; margin-top:1.5rem; }
.about-stats strong{ display:block; font-family:var(--font-display); font-size:1.8rem; color:var(--accent); }
.about-stats span{ font-size:0.8rem; color:var(--text-muted); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact{ border-top:1px solid var(--line); }
.contact-inner{ max-width:640px; }
.contact-form{ margin-top:2rem; display:flex; flex-direction:column; gap:1.1rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field{ display:flex; flex-direction:column; gap:0.4rem; }
.field label{ font-size:0.8rem; color:var(--text-muted); }
.field input, .field select, .field textarea{
  background:var(--surface-solid);
  border:1px solid var(--line);
  color:var(--text);
  padding:0.75em 0.9em;
  font-family:var(--font-body);
  font-size:0.95rem;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent);
}
.form-note{ font-size:0.78rem; color:var(--text-muted); margin-top:-0.4rem; }

.contact-direct{
  margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line);
  display:flex; gap:2.5rem; flex-wrap:wrap;
}
.cd-label{ display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:0.3rem; }
.contact-direct a{ font-family:var(--font-display); font-size:1.05rem; }
.contact-direct a:hover{ color:var(--accent); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  display:flex; justify-content:space-between; align-items:center;
  padding:2rem var(--pad); border-top:1px solid var(--line);
  font-size:0.8rem; color:var(--text-muted);
  flex-wrap:wrap; gap:0.5rem;
}
.site-footer .dot{ color:var(--accent); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:860px){
  .site-nav{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px);
    background:var(--surface-solid); border-left:1px solid var(--line);
    flex-direction:column; align-items:flex-start; justify-content:center;
    padding:2rem; gap:1.75rem;
    transform:translateX(100%); transition:transform .3s ease;
  }
  .site-nav.open{ transform:translateX(0); }
  .nav-toggle{ display:flex; }

  .niche, .niche-reverse{ grid-template-columns:1fr; direction:ltr; }
  .about{ grid-template-columns:1fr; }
  .about-portrait{ max-width:280px; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .g-wide{ grid-column:span 2; }
  .field-row{ grid-template-columns:1fr; }
  .hero-aperture{ opacity:0.5; width:90vw; height:90vw; right:-25%; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .scroll-cue span::after{ animation:none; }
  #blades circle, #blades path{ transition:none !important; }
}


/* =========================================================
   ANIMATIONS (added) — nothing above this line was changed
   ========================================================= */
:root{ --ease: cubic-bezier(.2,.7,.2,1); }

/* ---- Hero: staggered entrance on page load ---- */
@keyframes rise{
  from{ opacity:0; translate:0 28px; }
  to{ opacity:1; translate:0 0; }
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

@media (prefers-reduced-motion: no-preference){
  .hero-content > *{ animation: rise 1s var(--ease) both; }
  .hero-content > :nth-child(1){ animation-delay:.15s; }
  .hero-content > :nth-child(2){ animation-delay:.3s; }
  .hero-content > :nth-child(3){ animation-delay:.5s; }
  .hero-content > :nth-child(4){ animation-delay:.7s; }
  .scroll-cue{ animation: fadeIn 1s ease 1.4s both; }
}

/* ---- Hero: scroll parallax (values set by script.js) ---- */
.hero-aperture{
  transform: translateY(calc(-50% + var(--py, 0px))) rotate(var(--rot, 0deg));
  will-change: transform;
}
.hero-content{ will-change: translate, opacity; }

/* ---- Header: solid bar fades in after scrolling ---- */
.site-header{ transition: padding .3s ease; }
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(13,13,11,.92);
  border-bottom:1px solid var(--line);
  opacity:0; transition:opacity .3s ease;
}
.site-header.scrolled{ padding-top:.8rem; padding-bottom:.8rem; }
.site-header.scrolled::before{ opacity:1; }

/* ---- Scroll progress line ---- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:100%;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  z-index:60; pointer-events:none;
}

/* ---- Nav link underline + button lift ---- */
.site-nav a:not(.nav-cta){ position:relative; }
.site-nav a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; bottom:-4px;
  width:100%; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.site-nav a:not(.nav-cta):hover::after{ transform:scaleX(1); }
.hero-actions .btn, .nav-cta{ transition: border-color .2s ease, background .2s ease, color .2s ease, translate .25s var(--ease); }
.hero-actions .btn:hover, .nav-cta:hover{ translate:0 -2px; }

/* ---- Gallery hover ---- */
.g-tile{ transition: scale .45s var(--ease), filter .45s ease; }
.g-tile.has-photo:hover{ scale:1.025; z-index:2; filter:brightness(1.1); }

/* ---- Brass line that draws across each niche ---- */
.niche{ position:relative; }
.niche::before{
  content:""; position:absolute; top:-1px; left:0; width:100%; height:1px;
  background:linear-gradient(90deg, var(--accent), transparent 65%);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.2s var(--ease);
}
.niche.in::before{ transform:scaleX(1); }
.niches{ overflow-x:clip; }

/* =========================================================
   SCROLL REVEALS — only active when script.js adds .anim
   (if JS fails, everything simply stays visible)
   ========================================================= */

/* Section headings */
.anim .section-head > *{
  opacity:0; translate:0 24px;
  transition: opacity .9s var(--ease), translate .9s var(--ease);
}
.anim .section-head > :nth-child(2){ transition-delay:.1s; }
.anim .section-head > :nth-child(3){ transition-delay:.2s; }
.anim .section-head.in > *{ opacity:1; translate:0 0; }

/* Niche images slide in from their side */
.anim .niche-visual{
  opacity:0; translate:-48px 0; scale:1.04;
  transition: opacity 1s var(--ease), translate 1s var(--ease), scale 1.2s var(--ease);
}
.anim .niche-reverse .niche-visual{ translate:48px 0; }
.anim .niche.in .niche-visual{ opacity:1; translate:0 0; scale:1; }

/* Niche text rises one piece at a time */
.anim .niche-copy > :not(ul){
  opacity:0; translate:0 22px;
  transition: opacity .8s var(--ease), translate .8s var(--ease);
}
.anim .niche-copy > :nth-child(1){ transition-delay:.25s; }
.anim .niche-copy > :nth-child(2){ transition-delay:.33s; }
.anim .niche-copy > :nth-child(3){ transition-delay:.41s; }
.anim .niche.in .niche-copy > :not(ul){ opacity:1; translate:0 0; }

.anim .niche-list li{
  opacity:0; translate:0 14px;
  transition: opacity .6s var(--ease), translate .6s var(--ease);
}
.anim .niche-list li:nth-child(1){ transition-delay:.55s; }
.anim .niche-list li:nth-child(2){ transition-delay:.63s; }
.anim .niche-list li:nth-child(3){ transition-delay:.71s; }
.anim .niche-list li:nth-child(4){ transition-delay:.79s; }
.anim .niche-list li:nth-child(5){ transition-delay:.87s; }
.anim .niche.in .niche-list li{ opacity:1; translate:0 0; }

/* Gallery tiles pop in one after another (--d is set by script.js) */
.anim .g-tile{
  opacity:0; translate:0 32px;
  transition: opacity .9s var(--ease) var(--d, 0s), translate .9s var(--ease) var(--d, 0s), scale .45s var(--ease), filter .45s ease;
}
.anim .g-tile.in{ opacity:1; translate:0 0; }

/* About */
.anim .about-portrait{
  opacity:0; translate:-40px 0; scale:1.03;
  transition: opacity 1s var(--ease), translate 1s var(--ease), scale 1.2s var(--ease);
}
.anim .about.in .about-portrait{ opacity:1; translate:0 0; scale:1; }
.anim .about-copy > *{
  opacity:0; translate:0 22px;
  transition: opacity .8s var(--ease), translate .8s var(--ease);
}
.anim .about-copy > :nth-child(1){ transition-delay:.2s; }
.anim .about-copy > :nth-child(2){ transition-delay:.3s; }
.anim .about-copy > :nth-child(3){ transition-delay:.4s; }
.anim .about-copy > :nth-child(4){ transition-delay:.5s; }
.anim .about-copy > :nth-child(5){ transition-delay:.6s; }
.anim .about.in .about-copy > *{ opacity:1; translate:0 0; }

/* Contact: heading + contact details animate. The form itself is NOT touched. */
.anim .contact-inner > :not(.contact-form){
  opacity:0; translate:0 22px;
  transition: opacity .8s var(--ease), translate .8s var(--ease);
}
.anim .contact-inner > :nth-child(2){ transition-delay:.1s; }
.anim .contact-inner > :nth-child(3){ transition-delay:.2s; }
.anim .contact-inner.in > :not(.contact-form){ opacity:1; translate:0 0; }

/* Phones: slide up instead of sideways */
@media (max-width:860px){
  .anim .niche-visual, .anim .niche-reverse .niche-visual, .anim .about-portrait{ translate:0 32px; }
}

@media (prefers-reduced-motion: reduce){
  .hero-aperture{ transform: translateY(-50%); }
}