/* SnokuPhoto — Cinematic Dark Theme */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600;700&family=Inter:wght@300;400;500;600&display=swap');

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

:root {
  --color-primary: #e0a800;
  --color-secondary: #b08800;
  --color-bg: #0d0d0d;
  --color-surface: #1a1a1a;
  --color-text: #f0ece4;
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --motion-speed: 0.6s;
  --radius: 4px;
  --max-w: 1200px;
}

html { scroll-behavior: smooth; }
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.7; }

/* ── NAV ── */
.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(to bottom, rgba(13,13,13,.95), transparent); transition: background var(--motion-speed); }
.site-nav.scrolled { background: rgba(13,13,13,.97); }
.nav-logo img { height: 44px; width: auto; }
.nav-logo span { font-family: var(--font-heading); font-size: 1.5rem; letter-spacing: .1em; color: var(--color-primary); }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { color: var(--color-text); text-decoration: none; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; opacity: .8; transition: opacity .3s, color .3s; }
.nav-links a:hover, .nav-links a.active { opacity: 1; color: var(--color-primary); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
.nav-toggle span { width: 24px; height: 2px; background: var(--color-text); transition: all .3s; }

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .nav-links { position: fixed; top: 0; right: -100%; width: 75vw; max-width: 320px; height: 100vh; background: var(--color-surface); flex-direction: column; gap: 0; padding: 5rem 2rem 2rem; transition: right .4s ease; }
  .nav-links.open { right: 0; }
  .nav-links a { font-size: 1rem; padding: .75rem 0; border-bottom: 1px solid rgba(255,255,255,.07); }
}

/* ── HERO ── */
.hero { position: relative; height: 100vh; min-height: 600px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; animation: kenBurns 20s ease-in-out infinite alternate; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(13,13,13,.4) 0%, rgba(13,13,13,.7) 60%, rgba(13,13,13,.95) 100%); }
@keyframes kenBurns { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero-content { position: relative; z-index: 2; text-align: center; padding: 0 1.5rem; max-width: 900px; }
.hero-eyebrow { font-size: .75rem; letter-spacing: .35em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 1rem; opacity: 0; animation: fadeUp .8s .3s forwards; }
.hero-title { font-family: var(--font-heading); font-size: clamp(2.5rem, 7vw, 6rem); font-weight: 300; line-height: 1.05; letter-spacing: .02em; margin-bottom: 1.25rem; opacity: 0; animation: fadeUp .9s .5s forwards; }
.hero-sub { font-size: clamp(1rem, 2vw, 1.2rem); font-weight: 300; opacity: 0; animation: fadeUp .9s .7s forwards; margin-bottom: 2.5rem; color: rgba(240,236,228,.8); }
.hero-cta { opacity: 0; animation: fadeUp .9s .9s forwards; }
.scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; animation: bounce 2s 1.5s infinite; }
.scroll-indicator span { font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; opacity: .5; }
.scroll-indicator::after { content: ''; display: block; width: 1px; height: 40px; background: linear-gradient(to bottom, var(--color-primary), transparent); }
@keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

/* ── BUTTONS ── */
.btn { display: inline-block; padding: .9rem 2.5rem; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; transition: all .3s; }
.btn-primary { background: var(--color-primary); color: #000; }
.btn-primary:hover { background: var(--color-secondary); }
.btn-outline { border: 1px solid var(--color-primary); color: var(--color-primary); background: transparent; }
.btn-outline:hover { background: var(--color-primary); color: #000; }

/* ── SECTIONS ── */
section { padding: 6rem 2rem; }
.container { max-width: var(--max-w); margin: 0 auto; }
.section-eyebrow { font-size: .7rem; letter-spacing: .35em; text-transform: uppercase; color: var(--color-primary); margin-bottom: .75rem; }
.section-title { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 300; line-height: 1.1; margin-bottom: 1.5rem; }
.section-intro { font-size: 1.05rem; line-height: 1.8; opacity: .8; max-width: 680px; }

/* ── REVEAL ANIMATIONS ── */
[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity var(--motion-speed) ease, transform var(--motion-speed) ease; }
[data-reveal].revealed { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .1s; }
[data-reveal][data-delay="2"] { transition-delay: .2s; }
[data-reveal][data-delay="3"] { transition-delay: .3s; }
[data-reveal][data-delay="4"] { transition-delay: .4s; }
[data-reveal][data-delay="5"] { transition-delay: .5s; }

/* ── PORTFOLIO GRID ── */
.filter-bar { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.filter-btn { padding: .45rem 1.2rem; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.2); background: transparent; color: var(--color-text); cursor: pointer; transition: all .3s; border-radius: 2px; }
.filter-btn:hover, .filter-btn.active { border-color: var(--color-primary); color: var(--color-primary); }
.masonry-grid { columns: 3; column-gap: 1rem; }
@media (max-width: 900px) { .masonry-grid { columns: 2; } }
@media (max-width: 560px) { .masonry-grid { columns: 1; } }
.masonry-item { break-inside: avoid; margin-bottom: 1rem; position: relative; overflow: hidden; cursor: pointer; }
.masonry-item img { width: 100%; display: block; transition: transform .6s ease; }
.masonry-item:hover img { transform: scale(1.04); }
.masonry-item .item-overlay { position: absolute; inset: 0; background: rgba(13,13,13,.7); opacity: 0; display: flex; align-items: flex-end; padding: 1.25rem; transition: opacity .4s; }
.masonry-item:hover .item-overlay { opacity: 1; }
.masonry-item .item-caption { color: #fff; font-size: .85rem; }
.masonry-item .item-category { font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--color-primary); display: block; margin-bottom: .25rem; }

/* ── LIGHTBOX ── */
.lightbox { display: none; position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.94); align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; }
.lightbox-close { position: absolute; top: 1.5rem; right: 2rem; color: #fff; font-size: 2rem; cursor: pointer; line-height: 1; background: none; border: none; }
.lightbox-caption { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-size: .85rem; text-align: center; }

/* ── VIDEO GRID ── */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; }
.video-card { background: var(--color-surface); overflow: hidden; }
.video-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; cursor: pointer; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.video-card:hover .video-thumb img { transform: scale(1.04); }
.play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.play-btn::after { content: '▶'; font-size: 2.5rem; color: #fff; background: rgba(0,0,0,.5); width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding-left: 5px; transition: background .3s; }
.video-card:hover .play-btn::after { background: var(--color-primary); color: #000; }
.video-info { padding: 1.25rem; }
.video-info h3 { font-family: var(--font-heading); font-size: 1.3rem; margin-bottom: .4rem; }
.video-info p { font-size: .85rem; opacity: .65; }

/* ── VIDEO MODAL ── */
.video-modal { display: none; position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.95); align-items: center; justify-content: center; }
.video-modal.open { display: flex; }
.video-modal-inner { position: relative; width: 90vw; max-width: 900px; aspect-ratio: 16/9; }
.video-modal-inner iframe { width: 100%; height: 100%; border: none; }
.video-modal-close { position: absolute; top: -2.5rem; right: 0; color: #fff; font-size: 1.5rem; cursor: pointer; background: none; border: none; }

/* ── PRINTING ── */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }
.product-card { background: var(--color-surface); overflow: hidden; }
.product-img { aspect-ratio: 4/3; overflow: hidden; }
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.product-card:hover .product-img img { transform: scale(1.04); }
.product-info { padding: 1.5rem; }
.product-info h3 { font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: .5rem; }
.product-price { color: var(--color-primary); font-size: 1.1rem; font-weight: 600; margin: .5rem 0; }
.product-sizes { font-size: .8rem; opacity: .6; margin-bottom: 1rem; }
.product-desc { font-size: .88rem; opacity: .75; line-height: 1.6; }

/* ── CLIENTS FORM ── */
.booking-form { max-width: 640px; }
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; opacity: .75; margin-bottom: .5rem; }
.form-group input,
.form-group select,
.form-group textarea { width: 100%; padding: .85rem 1rem; background: var(--color-surface); border: 1px solid rgba(255,255,255,.12); color: var(--color-text); font-family: var(--font-body); font-size: 1rem; transition: border-color .3s; border-radius: 2px; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--color-primary); }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group select option { background: #1a1a1a; }
.form-alerts { margin-bottom: 1.5rem; }
.form-error { background: rgba(220,50,50,.15); border: 1px solid rgba(220,50,50,.4); padding: .75rem 1rem; margin-bottom: .5rem; font-size: .88rem; color: #ff8080; border-radius: 2px; }
.form-success { background: rgba(80,180,100,.15); border: 1px solid rgba(80,180,100,.4); padding: 1rem 1.25rem; font-size: 1rem; color: #7df7a0; border-radius: 2px; }

/* ── ABOUT ── */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
@media (max-width: 768px) { .about-grid { grid-template-columns: 1fr; } }
.about-img img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.about-meta { display: flex; gap: 2rem; margin: 2rem 0; flex-wrap: wrap; }
.about-stat strong { display: block; font-family: var(--font-heading); font-size: 2.5rem; color: var(--color-primary); }
.about-stat span { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.tag-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.tag { padding: .35rem .9rem; border: 1px solid rgba(224,168,0,.35); color: var(--color-primary); font-size: .75rem; letter-spacing: .08em; border-radius: 2px; }
.about-quote { border-left: 3px solid var(--color-primary); padding: 1rem 1.5rem; margin: 2rem 0; font-family: var(--font-heading); font-size: 1.3rem; font-style: italic; opacity: .85; }

/* ── FOOTER ── */
.site-footer { background: #080808; border-top: 1px solid rgba(255,255,255,.06); padding: 3rem 2rem; text-align: center; }
.footer-logo { margin-bottom: 1rem; }
.footer-logo img { height: 36px; }
.footer-socials { display: flex; justify-content: center; gap: 1.5rem; margin: 1rem 0; }
.footer-socials a { color: rgba(240,236,228,.5); text-decoration: none; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; transition: color .3s; }
.footer-socials a:hover { color: var(--color-primary); }
.footer-copy { font-size: .75rem; opacity: .35; margin-top: 1.5rem; }

/* ── MISC ── */
.divider { width: 50px; height: 2px; background: var(--color-primary); margin: 1.5rem 0; }
.text-gold { color: var(--color-primary); }
.page-hero { padding: 12rem 2rem 5rem; text-align: center; background: linear-gradient(to bottom, rgba(13,13,13,0) 0%, var(--color-bg) 100%); }