/* styles.css (FULL)
   Lace & Leather — Front Porch
*/

/* =========================
   FONTS
   ========================= */
@font-face{
  font-family:"Cardinal";
  src:url("./fonts/cardinal.ttf") format("truetype");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"DarkAges";
  src:url("./fonts/dark-ages.TTF") format("truetype");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

/* =========================
   ROOT
   ========================= */
:root{
  --text:#e7e2db;
  --muted: rgba(231,226,219,.80);

  --wrap: min(1100px, calc(100% - 36px));

  --glassTintA: rgba(12,14,18,.10);
  --glassTintB: rgba(12,14,18,.16);
  --glassSheenTop: rgba(255,255,255,.08);
  --line: rgba(255,255,255,.12);

  --radius:18px;
  --shadow: 0 18px 48px rgba(0,0,0,.50);

  --bgDim:.58;

  --h2: clamp(22px, 2.6vw, 30px);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:#06070a;
  color:var(--text);
  font-family:"DarkAges", ui-serif, Georgia, serif;
  font-size:16px;
  overflow-x:hidden;
  text-align:center;
}

html.no-scroll,
html.no-scroll body{ overflow:hidden; }

/* =========================
   FIXED BACKGROUND (desktop default)
   ========================= */
.bg{
  position:fixed;
  inset:0;
  z-index:-2;
  background:url("./assets/lace-bg.png") center / cover no-repeat;
  transform: translateZ(0);
  filter:saturate(1.08) contrast(1.02) brightness(1.08);
}

.bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.66) 100%),
    linear-gradient(180deg, rgba(0,0,0,var(--bgDim)), rgba(0,0,0,var(--bgDim)));
}

/* =========================
   DUST PARTICLES (DEPTH + COLOR CYCLE)
   ========================= */
.dust{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

/* Base dust particle */
.dust span{
  position:absolute;
  border-radius:50%;
  opacity:0;
  animation: dustFloat 24s linear infinite, dustColor 6s ease-in-out infinite;
  will-change: transform, opacity, background;
}

/* Positions + individual indices */
.dust span:nth-child(1){ top:12%; left:18%; --i:1; }
.dust span:nth-child(2){ top:28%; left:72%; --i:2; }
.dust span:nth-child(3){ top:46%; left:35%; --i:3; }
.dust span:nth-child(4){ top:60%; left:10%; --i:4; }
.dust span:nth-child(5){ top:70%; left:55%; --i:5; }
.dust span:nth-child(6){ top:18%; left:50%; --i:6; }
.dust span:nth-child(7){ top:40%; left:82%; --i:7; }
.dust span:nth-child(8){ top:78%; left:28%; --i:8; }
.dust span:nth-child(9){ top:32%; left:5%;  --i:9; }
.dust span:nth-child(10){ top:84%; left:68%; --i:10; }
.dust span:nth-child(11){ top:8%;  left:40%; --i:11; }
.dust span:nth-child(12){ top:52%; left:92%; --i:12; }
.dust span:nth-child(13){ top:22%; left:25%; --i:13; }
.dust span:nth-child(14){ top:62%; left:45%; --i:14; }
.dust span:nth-child(15){ top:75%; left:15%; --i:15; }
.dust span:nth-child(16){ top:15%; left:85%; --i:16; }

/* Small background specks (depth) */
.dust span:nth-child(1),
.dust span:nth-child(4),
.dust span:nth-child(9),
.dust span:nth-child(15){
  width:2px;
  height:2px;
  background:rgba(255,255,255,0.6);
  box-shadow:0 0 4px rgba(255,255,255,.45);
  filter:blur(0.6px);
  animation-duration:28s, 8s;
  animation-delay: calc(-1s * var(--i)), calc(-1s * var(--i));
}

/* Mid specks */
.dust span:nth-child(2),
.dust span:nth-child(5),
.dust span:nth-child(7),
.dust span:nth-child(10),
.dust span:nth-child(13),
.dust span:nth-child(14){
  width:3px;
  height:3px;
  background:rgba(245,225,185,0.8);
  box-shadow:0 0 6px rgba(245,225,185,.55);
  animation-duration:24s, 6s;
  animation-delay: calc(-1.5s * var(--i)), calc(-1s * var(--i));
}

/* Larger foreground motes (a few left big for depth) */
.dust span:nth-child(3),
.dust span:nth-child(6),
.dust span:nth-child(8),
.dust span:nth-child(11),
.dust span:nth-child(12),
.dust span:nth-child(16){
  width:5px;
  height:5px;
  background:rgba(250,235,200,0.9);
  box-shadow:
    0 0 10px rgba(250,235,200,.85),
    0 0 18px rgba(0,0,0,.6);
  filter:blur(0);
  animation-duration:20s, 6s;
  animation-delay: calc(-2s * var(--i)), calc(-1s * var(--i));
}

@keyframes dustFloat{
  0%{
    transform: translate3d(0,0,0) scale(.8);
    opacity:0;
  }
  10%{
    opacity:1;
  }
  50%{
    opacity:.55;
    transform: translate3d(30px,-40px,0) scale(1);
  }
  100%{
    transform: translate3d(90px,-140px,0) scale(1.1);
    opacity:0;
  }
}
@keyframes dustColor{
  0%   { background:rgba(255,255,255,0.9); }
  25%  { background:rgba(250,230,180,0.9); }
  50%  { background:rgba(255,255,255,0.8); }
  75%  { background:rgba(250,230,180,0.9); }
  100% { background:rgba(255,255,255,0.9); }
}

/* =========================
   MOBILE BACKGROUND OVERRIDE (iOS-safe)
   ========================= */
@media (max-width: 768px){
  .bg{
    background:url("./assets/lace-mobile-bg.png") center top / cover no-repeat;
  }
}

/* =========================
   LAYOUT
   ========================= */
.wrap{
  width:var(--wrap);
  margin:28px auto 40px;
  display:grid;
  gap:18px;
}

/* =========================
   GLASS
   ========================= */
.glass{
  position:relative;
  background:
    linear-gradient(180deg, var(--glassSheenTop), transparent 42%),
    linear-gradient(180deg, var(--glassTintA), var(--glassTintB));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter: blur(6px) saturate(1.03);
  -webkit-backdrop-filter: blur(6px) saturate(1.03);
}

.section{
  padding:18px 18px 16px;
}

/* =========================
   HERO
   ========================= */
.hero{ padding:18px; }

/* Brand title above logo */
.brand-title{
  font-family: "Cardinal", serif;
  font-size: clamp(2.2rem, 5vw, 3.1rem);
  letter-spacing: 0.16em;
  margin-bottom: 16px;
  text-align: center;
  text-shadow:0 0 12px rgba(0,0,0,.85);
}

.hero-inner{
  display:grid;
  place-items:center;
  text-align:center;
  gap:10px;
  padding: 14px 10px;
}

.logo{
  width:min(380px, 82vw);
  height:auto;
  display:block;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.55));
}

/* =========================
   TYPE
   ========================= */
.h2{
  font-family:"Cardinal", serif;
  font-size:var(--h2);
  letter-spacing:.08em;
  margin:0 0 10px;
  text-shadow:0 0 10px rgba(0,0,0,.9);
}

.tagline{
  margin:0;
  font-size:19px;
  text-shadow:0 0 8px rgba(0,0,0,.85);
}
.subtag{
  margin:0;
  color:var(--muted);
  font-size:16px;
  text-shadow:0 0 8px rgba(0,0,0,.85);
}
.muted{ color:var(--muted); }

/* Center ALL text everywhere */
p, h1, h2, h3, h4, h5, h6,
.pack-title, .brand, .modal-title, .modal-sub, .pack-note,
.pack, .section, .footer-inner, .hero-inner{
  text-align:center;
}

/* =========================
   PACKS
   ========================= */
.packs{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}

.pack{
  display:grid;
  gap:10px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 55%),
    rgba(0,0,0,.12);
  cursor:pointer;
  color:inherit;
  transform: translateY(0);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.pack img{
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}

.pack-meta{ display:grid; gap:3px; }

.pack-title{
  font-family:"Cardinal", serif;
  font-size:18px;
  letter-spacing:.06em;
  text-shadow:0 0 8px rgba(0,0,0,.9);
}

.pack-note{
  font-family:"DarkAges", ui-serif, Georgia, serif;
  font-size:15px;
  text-shadow:0 0 6px rgba(0,0,0,.9);
}

.pack:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 55%),
    rgba(0,0,0,.1);
  box-shadow:0 20px 40px rgba(0,0,0,.55);
}
.pack:active{ transform: translateY(0) scale(.99); }

/* =========================
   CREATION GRID
   ========================= */
.creation-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}

.creation-grid img{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.45));
}

/* =========================
   SHOP LINE
   ========================= */
.shop-line{
  margin:18px 0 6px;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.9;
}

/* =========================
   SOCIAL SEALS
   ========================= */
.social-icons{
  display:flex;
  justify-content:center;
  gap:22px;
  margin:22px 0 6px;
  flex-wrap:wrap;
}

.seal{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding:0;
}

.seal img{
  width:96px;
  height:auto;
  max-height:96px;
  display:block;
  object-fit:contain;
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,.45))
    drop-shadow(0 2px 4px rgba(0,0,0,.35));
  transition: transform .18s ease, filter .18s ease;
  transform: translateY(0);
}

.seal:hover img,
.seal:focus-visible img{
  transform: translateY(-2px);
  filter:
    drop-shadow(0 14px 26px rgba(0,0,0,.55))
    drop-shadow(0 4px 6px rgba(0,0,0,.4));
}

.seal:active img{ transform: translateY(0) scale(.96); }

/* =========================
   MAP COMMISSIONS
   ========================= */
.section-maps{
  margin-top:4px;
}

.maps-grid{
  margin:18px 0 14px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
}

.map-card{
  margin:0;
  max-width:320px;
}

.map-thumb img{
  width:100%;
  height:auto;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.48));
}

.map-caption{
  margin-top:6px;
  font-size:13px;
}

.map-name{
  display:block;
  font-family:"Cardinal", serif;
  font-size:18px;
  letter-spacing:.06em;
  text-shadow:0 0 8px rgba(0,0,0,.9);
}

.map-tagline{
  display:block;
  font-size:15px;
  text-shadow:0 0 6px rgba(0,0,0,.9);
}

.maps-copy{
  max-width:720px;
  margin:0 auto 16px;
  display:grid;
  gap:6px;
  font-size:16px;
  text-shadow:0 0 8px rgba(0,0,0,.8);
}

.maps-ward{
  margin:2px auto 10px;
  max-width:620px;
  font-size:13px;
  opacity:.86;
  text-shadow:0 0 6px rgba(0,0,0,.85);
}

.maps-cta{
  margin-top:4px;
}

/* strip default button styling */
.maps-btn{
  display:inline-block;
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
}

.wax-seal-img{
  width:260px;
  max-width:80vw;
  height:auto;
  display:block;
  margin:0 auto;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.7));
}

/* =========================
   FOOTER
   ========================= */
.footer{ padding:14px 18px; }
.footer-inner{ display:grid; gap:4px; text-align:center; }
.brand{
  font-family:"Cardinal", serif;
  letter-spacing:.05em;
  font-size:17px;
}

/* =========================
   BASE MODAL
   ========================= */
.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:50;
}

.modal.open{ display:block; }

.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-panel{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: min(1020px, calc(100% - 28px));
  max-height: min(82vh, 900px);
  overflow:hidden;
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px 10px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.modal-left{
  display:flex;
  align-items:center;
  gap:10px;
}

.modal-title{
  font-family:"Cardinal", serif;
  letter-spacing:.08em;
  font-size:20px;
  text-shadow:0 0 10px rgba(0,0,0,.9);
}
.modal-sub{
  font-size:14px;
  margin-top:2px;
  text-shadow:0 0 8px rgba(0,0,0,.85);
}

.modal-body{
  padding:14px;
  overflow:auto;
  max-height: calc(82vh - 64px);
  -webkit-overflow-scrolling: touch;
}

/* Wax action buttons */
.wax-btn{
  appearance:none;
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.wax-btn img{
  width:52px;
  height:52px;
  display:block;
  object-fit:contain;
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,.45))
    drop-shadow(0 2px 4px rgba(0,0,0,.35));
  transition: transform .16s ease, filter .16s ease;
}

.wax-btn:hover img{
  transform: translateY(-1px);
  filter:
    drop-shadow(0 14px 26px rgba(0,0,0,.55))
    drop-shadow(0 4px 6px rgba(0,0,0,.4));
}
.wax-btn:active img{ transform: translateY(0) scale(.97); }

/* Collage + viewer modes */
.back-btn{ display:none; }

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

.tile{
  appearance:none;
  border:none;
  padding:0;
  background:transparent;
  cursor:pointer;
  border-radius:16px;
  position:relative;
  overflow:hidden;
}

/* Face is the image (background-image) */
.tile-face{
  width:100%;
  aspect-ratio: 3 / 4;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background-color: rgba(0,0,0,.10);
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.40));
  transition: transform .16s ease, border-color .16s ease;
}

/* Transparent shield: blocks “save image” on the underlying visual */
.tile-shield{
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0);
  pointer-events:auto;
}

.tile:hover .tile-face{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
}
.tile:active .tile-face{ transform: translateY(0) scale(.99); }

.viewer{
  display:none;
  margin-top:10px;
  padding:10px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  position:relative;
  overflow:hidden;
}
.map-viewer{
  display:block;
}

/* Viewer image as background */
.viewer-img{
  width:100%;
  max-height: min(68vh, 760px);
  aspect-ratio: 3 / 4;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background-color: rgba(0,0,0,.08);
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}

/* Viewer shield (same idea) */
.viewer::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0);
  pointer-events:auto;
}

.modal.mode-viewer .collage{ display:none; }
.modal.mode-viewer .viewer{ display:block; }
.modal.mode-viewer .back-btn{ display:inline-flex; }

/* =========================
   COMMISSION ENVELOPE MODAL
   ========================= */
.commission-panel{
  width:100%;
  max-width:none;
  height:100vh;
  max-height:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:hidden; /* lock scene, no scroll */
}

.commission-inner{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.commission-bg{
  position:absolute;
  inset:0;
  background:url("./commission-modal-assets/modal-bg.png") center / cover no-repeat;
  z-index:-1;
}

.commission-close{
  position:absolute;
  top:14px;
  right:16px;
  z-index:2;
}

.commission-envelope-btn{
  appearance:none;
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
}

.commission-envelope-img{
  width:min(640px, 90vw);
  height:auto;
  display:block;
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.75));
}

/* =========================
   COMMISSION LETTER MODAL
   ========================= */
.letter-panel{
  max-height:min(90vh, 900px);
}

.letter-body{
  position:relative;
  overflow:auto;
  max-height: calc(90vh - 64px);
  -webkit-overflow-scrolling: touch;
  padding:18px;
}

.letter-bg{
  position:absolute;
  inset:0;
  background:url("./commission-modal-assets/modal-bg.png") center / cover no-repeat;
  opacity:0.9;
  z-index:-1;
}

.letter-stack{
  position:relative;
  display:inline-block;
  margin:0 auto;
}

.letter-img{
  width:min(720px, 92vw);
  height:auto;
  display:block;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.85));
}

/* Wax button sitting in bottom margin of parchment */
.map-slot-btn{
  position:absolute;
  left:50%;
  bottom:7%;
  transform:translateX(-50%);
  appearance:none;
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
}

.map-slot-btn img{
  width:clamp(220px, 42vw, 320px);
  height:auto;
  display:block;
  filter:
    drop-shadow(0 12px 26px rgba(0,0,0,.75))
    drop-shadow(0 4px 6px rgba(0,0,0,.5));
  transition:transform .16s ease, filter .16s ease;
}

.map-slot-btn:hover img{
  transform:translateX(-0.5px) translateY(-1px);
  filter:
    drop-shadow(0 16px 32px rgba(0,0,0,.8))
    drop-shadow(0 6px 8px rgba(0,0,0,.55));
}
.map-slot-btn:active img{
  transform:translateX(0) translateY(0) scale(.97);
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 980px){
  .packs{ grid-template-columns: 1fr; }
  .pack img{ height: 220px; }
  .creation-grid{ grid-template-columns: repeat(2, 1fr); }
  .collage{ grid-template-columns: repeat(2, 1fr); }
  .maps-grid{ flex-direction:column; }
  .map-card{ max-width:none; }
}

@media (max-width: 420px){
  .creation-grid img{ height: 140px; }
  .seal img{ max-height:80px; width:auto; }
  .wax-btn img{ width: 46px; height: 46px; }
}