/* ============================================================
   AURA MODELS — enhancement layer
   Mobile nav, scroll reveals, focus states, filters, form UX.
   Colours pulled from the existing Tailwind theme.
   ============================================================ */

:root{
  --aura-primary:#a52e5a;
  --aura-primary-strong:#881645;
  --aura-on-surface:#22172b;
  --aura-on-surface-variant:#564146;
  --aura-surface:#fff7fd;
  --aura-surface-container:#f9e8ff;
  --aura-outline:#dcbfc5;
  --aura-error:#ba1a1a;
  --aura-cream:#fdf5f3;
  --aura-shadow:0 18px 60px rgba(44,32,53,.18);
}

/* ---------- Accessible focus ring (keyboard only) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--aura-primary);
  outline-offset:2px;
  border-radius:6px;
}

/* ---------- Sticky nav elevates once you scroll ---------- */
nav[class*="fixed top-0"]{
  transition:box-shadow .3s ease, background-color .3s ease, backdrop-filter .3s ease;
}
nav.aura-scrolled{
  box-shadow:0 6px 26px rgba(44,32,53,.08);
  background-color:rgba(255,247,253,.92) !important;
}

/* ---------- Active nav link ---------- */
.aura-nav-active{
  color:var(--aura-primary) !important;
  font-weight:600;
}

/* ---------- Scroll reveal ---------- */
.aura-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.7,.2,1),
             transform .7s cubic-bezier(.22,.7,.2,1);
  will-change:opacity, transform;
}
.aura-reveal.aura-in{
  opacity:1;
  transform:none;
}

/* =========================================================
   MOBILE NAV DRAWER
   ========================================================= */
.aura-drawer-backdrop{
  position:fixed;
  inset:0;
  background:rgba(34,23,43,.45);
  backdrop-filter:blur(2px);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
  z-index:60;
}
.aura-drawer-backdrop.aura-open{
  opacity:1;
  visibility:visible;
}

.aura-drawer{
  position:fixed;
  top:0;
  right:0;
  height:100%;
  width:min(84vw, 340px);
  background:var(--aura-cream);
  box-shadow:var(--aura-shadow);
  transform:translateX(102%);
  transition:transform .38s cubic-bezier(.3,.8,.25,1);
  z-index:70;
  display:flex;
  flex-direction:column;
  padding:22px 24px calc(24px + env(safe-area-inset-bottom));
  overflow-y:auto;
}
.aura-drawer.aura-open{
  transform:translateX(0);
}

.aura-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:26px;
}
.aura-drawer-logo{
  font-family:'Playfair Display', serif;
  font-size:22px;
  letter-spacing:-.02em;
  color:var(--aura-primary);
}
.aura-drawer-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;height:42px;
  border-radius:9999px;
  border:1px solid var(--aura-outline);
  background:transparent;
  color:var(--aura-on-surface);
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.aura-drawer-close:hover{
  border-color:var(--aura-primary);
  color:var(--aura-primary);
}

.aura-drawer-links{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.aura-drawer-links a{
  display:block;
  font-family:'DM Sans', sans-serif;
  font-size:19px;
  color:var(--aura-on-surface);
  text-decoration:none;
  padding:14px 6px;
  border-bottom:1px solid rgba(220,191,197,.5);
  transition:color .2s ease, padding-left .2s ease;
}
.aura-drawer-links a:hover{
  color:var(--aura-primary);
  padding-left:12px;
}
.aura-drawer-links a.aura-nav-active{
  color:var(--aura-primary) !important;
}

.aura-drawer-cta{
  margin-top:auto;
  padding-top:26px;
}
.aura-drawer-cta a{
  display:block;
  text-align:center;
  background:var(--aura-primary);
  color:#fff;
  font-family:'DM Sans', sans-serif;
  font-weight:600;
  letter-spacing:.04em;
  padding:16px;
  border-radius:9999px;
  text-decoration:none;
  transition:background .2s ease;
}
.aura-drawer-cta a:hover{ background:var(--aura-primary-strong); }

body.aura-noscroll{ overflow:hidden; }

/* =========================================================
   PORTFOLIO FILTER + SEARCH
   ========================================================= */
.aura-filter-active{
  background:var(--aura-primary) !important;
  color:#fff !important;
  border-color:var(--aura-primary) !important;
}
[data-aura-card]{
  transition:opacity .35s ease, transform .35s ease;
}
[data-aura-card].aura-hide{
  display:none !important;
}
.aura-empty-note{
  grid-column:1 / -1;
  text-align:center;
  padding:48px 16px;
  color:var(--aura-on-surface-variant);
  font-family:'DM Sans', sans-serif;
}

/* =========================================================
   PHOTO UPLOAD + FORM
   ========================================================= */
.aura-file-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.aura-file-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--aura-surface-container);
  color:var(--aura-on-surface);
  border-radius:9999px;
  padding:7px 14px;
  font-size:13px;
  font-family:'DM Sans', sans-serif;
  max-width:100%;
}
.aura-file-chip span.aura-file-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:180px;
}
.aura-file-chip button{
  border:none;background:transparent;cursor:pointer;
  color:var(--aura-on-surface-variant);
  display:inline-flex;line-height:0;
}
.aura-file-chip button:hover{ color:var(--aura-error); }

.aura-invalid{
  border-color:var(--aura-error) !important;
  box-shadow:0 0 0 1px var(--aura-error) !important;
}
.aura-field-msg{
  color:var(--aura-error);
  font-size:13px;
  font-family:'DM Sans', sans-serif;
  margin-top:12px;
  display:none;
}
.aura-field-msg.aura-show{ display:block; }

/* Success panel */
.aura-success{
  text-align:center;
  padding:48px 28px;
  background:var(--aura-surface-container);
  border-radius:28px;
  animation:aura-pop .4s cubic-bezier(.3,.8,.25,1);
}
.aura-success .aura-success-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:76px;height:76px;
  border-radius:9999px;
  background:var(--aura-primary);
  color:#fff;
  margin-bottom:20px;
}
.aura-success h3{
  font-family:'Playfair Display', serif;
  font-size:30px;
  color:var(--aura-on-surface);
  margin-bottom:12px;
}
.aura-success p{
  font-family:'DM Sans', sans-serif;
  color:var(--aura-on-surface-variant);
  max-width:420px;
  margin:0 auto 26px;
  line-height:1.6;
}
.aura-success button{
  background:transparent;
  border:1px solid var(--aura-primary);
  color:var(--aura-primary);
  font-family:'DM Sans', sans-serif;
  font-weight:600;
  padding:13px 28px;
  border-radius:9999px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.aura-success button:hover{
  background:var(--aura-primary);
  color:#fff;
}

@keyframes aura-pop{
  from{opacity:0;transform:scale(.96) translateY(10px);}
  to{opacity:1;transform:none;}
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .aura-reveal{opacity:1 !important;transform:none !important;transition:none !important;}
  .aura-drawer,.aura-drawer-backdrop{transition:none !important;}
  .aura-success{animation:none !important;}
  *{scroll-behavior:auto !important;}
}

/* ---------- World-map location pins (image overlay) ---------- */
.aura-map-wrap{position:relative;width:100%;max-width:780px;margin:0 auto;}
.aura-map-wrap > img{display:block;width:100%;height:auto;}
.aura-map-pin{position:absolute;width:12px;height:12px;transform:translate(-50%,-50%);pointer-events:none;}
.aura-map-pin::after{content:"";position:absolute;inset:0;border-radius:9999px;background:var(--aura-primary);box-shadow:0 0 0 2px var(--aura-surface);}
.aura-map-pin::before{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:9999px;background:var(--aura-primary);opacity:.4;animation:aura-ping 2.6s ease-out infinite;animation-delay:var(--d,0s);}
@keyframes aura-ping{0%{transform:scale(1);opacity:.5;}70%{transform:scale(3);opacity:0;}100%{transform:scale(3);opacity:0;}}
@media (prefers-reduced-motion: reduce){.aura-map-pin::before{animation:none;opacity:.22;}}