/* Grace Photos — premium midnight edition
   A cool-toned, glass-and-light visual layer. It intentionally replaces all
   former gold-vein decoration while preserving the site's gallery structure. */

html { background: var(--color-void); }

body {
  min-height: 100%;
  background:
    radial-gradient(circle at 92% 5%, rgba(91, 128, 226, 0.12), transparent 28rem),
    radial-gradient(circle at 4% 42%, rgba(60, 197, 207, 0.06), transparent 26rem),
    var(--color-void);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(147, 180, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(147, 180, 255, 0.022) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
}

::selection { background: var(--color-gold); color: #050711; }

.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 180;
  height: 2px;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #6a8fff, #a6dcff, #7d83ff);
  box-shadow: 0 0 18px rgba(118, 171, 255, 0.72);
}

.site-header {
  padding-inline: clamp(0rem, 1.5vw, 1.5rem);
}

.site-header.is-scrolled {
  background: rgba(5, 8, 18, 0.72);
  border-color: rgba(154, 187, 255, 0.16);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  box-shadow: 0 18px 50px -34px rgba(70, 112, 234, 0.75);
}

.site-header__logo img {
  filter: drop-shadow(0 5px 18px rgba(0, 0, 0, 0.45));
}

.site-nav {
  gap: var(--space-md);
  padding: 0.4rem;
  border: 1px solid rgba(153, 186, 255, 0.13);
  border-radius: var(--radius-pill);
  background: rgba(7, 11, 23, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.site-nav a {
  padding: 0.65rem 1.05rem;
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
}

.site-nav a::after { display: none; }

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--color-ivory);
  background: rgba(128, 166, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(166, 198, 255, 0.13);
}

.mobile-nav {
  background:
    radial-gradient(circle at 50% 25%, rgba(91, 134, 241, 0.2), transparent 34%),
    rgba(4, 7, 15, 0.985);
}

.mobile-nav a { font-size: clamp(2.4rem, 12vw, 4.5rem); }

/* Hero */
.hero {
  min-height: 100svh;
  isolation: isolate;
  background: #040711;
}

.hero__media {
  inset: -3%;
  transform: translate3d(0, var(--hero-parallax, 0px), 0);
  scale: 1.07;
  filter: saturate(0.88) contrast(1.07);
  animation: hero-breathe 14s ease-in-out infinite alternate;
}

@keyframes hero-breathe {
  from { scale: 1.055; }
  to { scale: 1.105; }
}

.hero__scrim {
  background:
    radial-gradient(ellipse at 50% 39%, rgba(5, 8, 18, 0.24) 0%, rgba(5, 8, 18, 0.58) 64%, rgba(4, 6, 13, 0.84) 100%),
    linear-gradient(90deg, rgba(3, 6, 13, 0.7), transparent 30%, transparent 70%, rgba(3, 6, 13, 0.7)),
    linear-gradient(180deg, rgba(3, 6, 13, 0.55) 0%, transparent 28%, rgba(3, 6, 13, 0.18) 56%, #050711 100%);
}

.hero__ambient {
  --spot-x: 50%;
  --spot-y: 38%;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero__ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.72;
  background: radial-gradient(circle 270px at var(--spot-x) var(--spot-y), rgba(170, 211, 255, 0.13), rgba(94, 135, 246, 0.045) 42%, transparent 72%);
  mix-blend-mode: screen;
}

.hero__ambient span {
  position: absolute;
  width: min(42vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.15;
  mix-blend-mode: screen;
  animation: ambient-drift 11s ease-in-out infinite alternate;
}

.hero__ambient span:first-child {
  left: -12%;
  top: 13%;
  background: #446fff;
}

.hero__ambient span:last-child {
  right: -14%;
  bottom: 2%;
  background: #52d7e1;
  animation-delay: -5s;
}

@keyframes ambient-drift {
  from { transform: translate3d(-2%, -2%, 0) scale(0.92); }
  to { transform: translate3d(8%, 6%, 0) scale(1.08); }
}

.hero__ambient .hero__mote {
  position: absolute;
  left: var(--mote-x);
  top: var(--mote-y);
  width: var(--mote-size);
  height: var(--mote-size);
  border-radius: 50%;
  background: rgba(220, 239, 255, 0.9);
  box-shadow: 0 0 10px rgba(134, 187, 255, 0.9);
  opacity: 0;
  animation: mote-float var(--mote-duration) ease-in-out var(--mote-delay) infinite;
}

@keyframes mote-float {
  0%, 100% { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.65); }
  25% { opacity: 0.42; }
  65% { opacity: 0.18; }
  82% { opacity: 0; transform: translate3d(16px, -54px, 0) scale(1.15); }
}

.hero__frame {
  position: absolute;
  inset: calc(var(--header-h) + 1.4rem) clamp(1.25rem, 3.4vw, 3.75rem) 2.1rem;
  z-index: 2;
  pointer-events: none;
}

.hero__frame span {
  position: absolute;
  width: clamp(36px, 5vw, 72px);
  height: clamp(36px, 5vw, 72px);
  opacity: 0.72;
}

.hero__frame span:nth-child(1) { inset: 0 auto auto 0; border-top: 1px solid rgba(206, 225, 255, 0.48); border-left: 1px solid rgba(206, 225, 255, 0.48); }
.hero__frame span:nth-child(2) { inset: 0 0 auto auto; border-top: 1px solid rgba(206, 225, 255, 0.48); border-right: 1px solid rgba(206, 225, 255, 0.48); }
.hero__frame span:nth-child(3) { inset: auto auto 0 0; border-bottom: 1px solid rgba(206, 225, 255, 0.32); border-left: 1px solid rgba(206, 225, 255, 0.32); }
.hero__frame span:nth-child(4) { inset: auto 0 0 auto; border-bottom: 1px solid rgba(206, 225, 255, 0.32); border-right: 1px solid rgba(206, 225, 255, 0.32); }

.hero__content {
  transform: translateY(-5vh);
  text-shadow: 0 10px 42px rgba(0, 0, 0, 0.48);
}

.hero__eyebrow {
  color: #c9dcff;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(178, 207, 255, 0.24);
  border-radius: var(--radius-pill);
  background: rgba(6, 10, 21, 0.36);
  backdrop-filter: blur(12px);
}

.hero__title {
  font-size: clamp(3.6rem, 8.7vw, 8.8rem);
  letter-spacing: -0.015em;
  line-height: 0.88;
}

.hero__title em {
  display: block;
  padding-bottom: 0.08em;
  background: linear-gradient(112deg, #fff 12%, #a8c5ff 43%, #eef6ff 61%, #7fa2ff 88%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: title-sheen 7s linear infinite;
}

@keyframes title-sheen { to { background-position: -220% center; } }

.hero__subtitle {
  max-width: 48ch;
  color: rgba(229, 236, 250, 0.82);
}

.hero__quick-contact {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: var(--space-lg);
  padding: 0.62rem 0.8rem;
  border: 1px solid rgba(168, 198, 255, 0.2);
  border-radius: var(--radius-pill);
  background: rgba(7, 11, 24, 0.46);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 20px 50px -28px rgba(83, 127, 234, 0.7), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: fade-up 1.1s var(--ease-cinematic) 0.72s both;
}

.hero__quick-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.65rem;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(237, 243, 255, 0.86);
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
  border-radius: var(--radius-pill);
}

.hero__quick-contact a:hover { color: #fff; background: rgba(126, 166, 255, 0.12); }
.hero__quick-contact svg { width: 16px; height: 16px; color: #9fc0ff; }
.hero__contact-divider { width: 1px; height: 18px; background: rgba(177, 204, 255, 0.22); }

.hero__edition {
  position: absolute;
  right: clamp(1.6rem, 4.5vw, 5rem);
  bottom: 2.5rem;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  color: rgba(221, 233, 255, 0.72);
}

.hero__edition span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.61rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.hero__edition strong {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 500;
  line-height: 0.75;
  color: rgba(226, 238, 255, 0.4);
}

.hero__scroll-cue { color: rgba(228, 237, 255, 0.74); }
.hero__scroll-cue .aperture { background: rgba(5, 9, 19, 0.38); backdrop-filter: blur(12px); }

/* Sections and cards */
.section--charcoal,
.page-header,
.site-footer {
  background:
    radial-gradient(circle at 82% 14%, rgba(91, 132, 235, 0.11), transparent 34%),
    linear-gradient(180deg, #09101d, #060914);
}

.section--charcoal::before,
.page-header::before,
.about-cta::before,
.contact-card::before,
.enquiry-form::before,
.site-footer::before {
  background: none !important;
}

.explore {
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 16%, rgba(81, 210, 221, 0.055), transparent 24rem),
    radial-gradient(circle at 88% 50%, rgba(85, 120, 230, 0.09), transparent 30rem);
}

.explore::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0 7%, rgba(145, 179, 255, 0.07) 7% calc(7% + 1px), transparent calc(7% + 1px) 93%, rgba(145, 179, 255, 0.07) 93% calc(93% + 1px), transparent calc(93% + 1px));
}

.section-head h2 { letter-spacing: -0.015em; }
.eyebrow { color: #9fbdff; }
.eyebrow::before,
.section-head--center .eyebrow::after { background: linear-gradient(90deg, #7196ed, #b8ddff); }

.carousel__track {
  gap: clamp(1rem, 2vw, 2.2rem);
  padding-block: 0.75rem 4rem;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
}

.cat-card {
  width: min(390px, 72vw);
  aspect-ratio: 4 / 5;
  border-color: rgba(151, 185, 255, 0.17);
  box-shadow: var(--shadow-card);
  background: #0b1220;
  transform-style: preserve-3d;
  transition: transform 500ms var(--ease-cinematic), border-color 300ms ease, box-shadow 500ms ease;
}

.cat-card:nth-child(even) { margin-top: 2.25rem; }

.cat-card:hover,
.cat-card:focus-visible {
  transform: perspective(900px) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg)) translateY(-8px);
  border-color: rgba(169, 202, 255, 0.46);
  box-shadow: 0 38px 90px -34px rgba(0,0,0,0.95), 0 22px 60px -32px rgba(78, 125, 241, 0.78);
}

.cat-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 4;
  border: 1px solid rgba(218, 232, 255, 0.16);
  border-radius: calc(var(--radius-lg) - 8px);
  pointer-events: none;
  transition: border-color 350ms ease;
}

.cat-card:hover::before { border-color: rgba(218, 232, 255, 0.32); }

.cat-card__number {
  position: absolute;
  top: 1.4rem;
  right: 1.45rem;
  z-index: 6;
  font-family: var(--font-display);
  font-size: 1.45rem;
  letter-spacing: 0.05em;
  color: rgba(231, 240, 255, 0.72);
  text-shadow: 0 4px 20px rgba(0,0,0,0.55);
}

.cat-card__shine {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(174, 207, 255, 0.23), transparent 30%);
  transition: opacity 300ms ease;
}

.cat-card:hover .cat-card__shine { opacity: 1; }

.cat-card__scrim {
  background: linear-gradient(180deg, rgba(4,7,15,0.15) 0%, rgba(4,7,15,0.12) 38%, rgba(3,6,13,0.95) 100%);
}

.cat-card__body { padding: 3.4rem 2rem 2rem; }
.cat-card__title { font-size: clamp(1.9rem, 1.6rem + 0.8vw, 2.45rem); }
.cat-card__subtitle { color: #9ba8bd; }
.cat-card__cta { color: #b9d2ff; }

.ph-grad::before {
  background:
    radial-gradient(circle at 20% 12%, var(--ph-a, #18305e), transparent 52%),
    radial-gradient(circle at 86% 82%, var(--ph-b, #102238), transparent 58%),
    linear-gradient(145deg, var(--ph-base, #0d1626), #050812 88%);
}

.ph-grad::after {
  opacity: 0.52;
  background:
    radial-gradient(circle at 72% 18%, rgba(178, 211, 255, 0.2) 0 1px, transparent 2px),
    linear-gradient(135deg, transparent 47%, rgba(178, 211, 255, 0.055) 49%, transparent 51%);
  background-size: 42px 42px, 100% 100%;
}

.ph-grad-icon { color: rgba(145, 183, 255, 0.26); filter: drop-shadow(0 0 26px rgba(87, 137, 255, 0.22)); }
.cat-card[data-cat="all"] .ph-grad { --ph-a:#1c3971; --ph-b:#0c2137; --ph-base:#0c1728; }
.cat-card[data-cat="portraits"] .ph-grad { --ph-a:#3d245e; --ph-b:#142041; --ph-base:#151127; }
.cat-card[data-cat="landscape"] .ph-grad { --ph-a:#123e4c; --ph-b:#172744; --ph-base:#0b1d26; }
.cat-card[data-cat="wedding"] .ph-grad { --ph-a:#3a2b67; --ph-b:#122b50; --ph-base:#14152d; }
.cat-card[data-cat="birthday"] .ph-grad { --ph-a:#4d2549; --ph-b:#1a2449; --ph-base:#1a1227; }
.cat-card[data-cat="puberty-ceremony"] .ph-grad { --ph-a:#3b305c; --ph-b:#17324c; --ph-base:#151829; }
.cat-card[data-cat="baby-shower"] .ph-grad { --ph-a:#244468; --ph-b:#2d2458; --ph-base:#111c31; }
.cat-card[data-cat="indoor"] .ph-grad { --ph-a:#292b68; --ph-b:#163454; --ph-base:#11172d; }
.cat-card[data-cat="retirements"] .ph-grad { --ph-a:#263d62; --ph-b:#1a2948; --ph-base:#10192b; }
.cat-card[data-cat="about"] .ph-grad { --ph-a:#3b2e61; --ph-b:#163a4c; --ph-base:#14172a; }

.carousel__arrow {
  width: 52px;
  height: 52px;
  background: rgba(13, 21, 38, 0.72);
  border-color: rgba(153, 188, 255, 0.24);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.carousel__arrow:hover { background: rgba(98, 140, 242, 0.14); border-color: #91b5ff; color: #fff; transform: translateY(-2px); }
.carousel__dot { background: rgba(141, 175, 239, 0.26); }
.carousel__dot.is-active { background: linear-gradient(90deg, #6f91ee, #a8d9ff); box-shadow: 0 0 14px rgba(120, 169, 255, 0.5); }

/* Inner pages */
.page-header {
  min-height: 440px;
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid rgba(145, 180, 255, 0.11);
}

.page-header__ring {
  border-color: rgba(133, 170, 247, 0.15);
  box-shadow: 0 0 110px rgba(67, 111, 230, 0.08);
}

.page-header__ring::before { border-color: rgba(133, 170, 247, 0.1); }

.page-header__ring::after {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 68%, rgba(154, 199, 255, 0.7) 78%, transparent 88% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: ring-sweep 16s linear infinite;
}

@keyframes ring-sweep { to { transform: rotate(1turn); } }

.tile {
  border-color: rgba(143, 177, 247, 0.15);
  background: rgba(10, 17, 31, 0.86);
  box-shadow: 0 18px 45px -30px rgba(0,0,0,0.95);
  transition: border-color 300ms ease, transform 500ms var(--ease-cinematic), box-shadow 500ms ease;
}

.tile:hover,
.tile:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(160, 195, 255, 0.36);
  box-shadow: 0 30px 65px -38px rgba(61, 107, 226, 0.7);
}

.motion-ready .tile {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(32px) scale(0.985);
  transition:
    opacity 800ms var(--ease-cinematic) var(--tile-delay, 0ms),
    filter 800ms var(--ease-cinematic) var(--tile-delay, 0ms),
    transform 800ms var(--ease-cinematic) var(--tile-delay, 0ms),
    border-color 300ms ease,
    box-shadow 500ms ease;
}

.motion-ready .tile.is-in-frame {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

.motion-ready .tile.is-in-frame:hover,
.motion-ready .tile.is-in-frame:focus-visible { transform: translateY(-5px) scale(1); }

.tile__zoom,
.icon-badge {
  background: rgba(8, 14, 27, 0.56);
  border-color: rgba(150, 185, 255, 0.28);
  color: #a9c6ff;
  backdrop-filter: blur(14px);
}

.gallery-empty-note {
  background: rgba(11, 18, 33, 0.7);
  border-style: solid;
  border-color: rgba(144, 179, 247, 0.15);
}

.about-intro__media,
.about-cta,
.contact-card,
.enquiry-form {
  border-color: rgba(148, 182, 250, 0.16);
  background:
    radial-gradient(circle at 95% 0%, rgba(79, 122, 229, 0.12), transparent 35%),
    linear-gradient(145deg, rgba(15, 24, 43, 0.94), rgba(8, 13, 25, 0.94));
  box-shadow: 0 30px 80px -45px rgba(60, 103, 218, 0.66), inset 0 1px 0 rgba(255,255,255,0.035);
}

.specialty-list li {
  background: rgba(13, 21, 38, 0.55);
  border-color: rgba(144, 179, 247, 0.2);
  transition: transform 250ms ease, border-color 250ms ease, background 250ms ease;
}

.specialty-list li:hover { transform: translateY(-3px); border-color: rgba(157, 193, 255, 0.45); background: rgba(86, 127, 230, 0.11); }

.contact-map { filter: grayscale(0.72) invert(0.92) hue-rotate(178deg) contrast(0.86); }

.field input,
.field select,
.field textarea {
  padding: 0.8rem 0.15rem;
  border-color: rgba(146, 181, 248, 0.24);
}

.field input:focus,
.field select:focus,
.field textarea:focus { border-color: #91b5ff; }

.btn--gold {
  background: linear-gradient(118deg, #a6c9ff, #718ff0 58%, #8bdbe6);
  color: #06101d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.48), 0 16px 34px -18px rgba(89, 135, 246, 0.8);
}

.btn--gold:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.52), 0 22px 45px -18px rgba(91, 143, 255, 0.88); }

.site-footer { border-top-color: rgba(149, 184, 250, 0.13); }
.footer__grid { border-bottom-color: rgba(149, 184, 250, 0.12); }

@media (max-width: 780px) {
  .site-header { padding-inline: 0; }
  .hero__frame { inset: calc(var(--header-h) + 0.8rem) 1rem 1rem; }
  .hero__edition { display: none; }
  .hero__content { transform: translateY(-2vh); }
  .hero__title { font-size: clamp(3.5rem, 18vw, 6rem); }
  .hero__quick-contact { flex-direction: column; gap: 0.15rem; border-radius: 22px; }
  .hero__contact-divider { width: 80%; height: 1px; }
  .hero__scroll-cue { bottom: 1.3rem; }
  .cat-card { width: 82vw; }
  .cat-card:nth-child(even) { margin-top: 0; }
  .page-header { min-height: 370px; }
}

@media (max-width: 430px) {
  .hero__frame { display: none; }
  .hero__quick-contact { width: min(92vw, 350px); }
  .hero__quick-contact a { font-size: 0.69rem; }
  .hero__subtitle { max-width: 31ch; }
  .hero__scroll-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media,
  .hero__ambient span,
  .hero__ambient .hero__mote,
  .hero__title em,
  .page-header__ring::after { animation: none !important; }
  .cat-card:hover,
  .cat-card:focus-visible { transform: none; }
  .motion-ready .tile { opacity: 1; filter: none; transform: none; transition: none; }
}