/*
 * Theologos Place — Bespoke Luxury Theme
 * Premium palette, layered gradients, glassmorphism, micro interactions.
 */

/* Reset & foundations */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink, #f6f8ff);
  background: #050912;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
  padding-top: var(--header-height);
}

:root {
  --header-height: 78px;
  --bg-base: #050912;
  --bg-top: #090f1f;
  --bg-card: rgba(255,255,255,0.06);
  --bg-card-strong: rgba(255,255,255,0.09);
  --ink: #f6f8ff;
  --ink-soft: #c4cee6;
  --ink-muted: #97a5c5;
  --accent: #5ba8ff;
  --accent-strong: #2dd8ff;
  --accent-alt: #9f6bff;
  --border: rgba(255,255,255,0.16);
  --shadow-soft: 0 20px 60px rgba(3,6,15,.65);
  --shadow-deep: 0 30px 90px rgba(3,6,15,.75);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --max-width: 1180px;
}

/* Ambient backdrops */
body::before,
body::after {
  content: "";
  position: fixed;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  filter: blur(40px) saturate(140%);
  opacity: .75;
  pointer-events: none;
  z-index: -2;
  animation: aurora 32s ease-in-out infinite alternate;
}
body::before { top: -25vmax; right: -10vmax; background: radial-gradient(circle, rgba(47,216,255,.25), transparent 65%); }
body::after  { bottom: -30vmax; left: -15vmax; background: radial-gradient(circle, rgba(158,107,255,.25), transparent 65%); animation-duration: 40s; }
@keyframes aurora { from { transform: translate3d(-4%,0,0) rotate(5deg); } to { transform: translate3d(3%,3%,0) rotate(-4deg); } }

::selection { background: rgba(91,168,255,.5); color: #02030a; }

.container { width: min(var(--max-width), 92vw); margin: 0 auto; }

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 60;
  background: rgba(5,8,18,.7);
  border-bottom: 1px solid rgba(255,255,255,.09);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 15px 45px rgba(2,4,10,.6);
}
.nav { display:flex; align-items:center; justify-content:space-between; padding:1rem 0; }
.brand {
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: .35rem;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  display:flex;
  align-items:center;
  gap:.4rem;
}
.brand::after {
  content: "•";
  color: var(--accent-strong);
  font-size: 1.2rem;
  animation: pulse 2.8s ease-in-out infinite;
}
@keyframes pulse { 0% { opacity:.4; transform: scale(.85);} 40% { opacity:1; transform:scale(1);} 100% {opacity:.4; transform:scale(.85);} }

.main-nav { display:flex; align-items:center; gap:1rem; }
.main-nav a {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  padding:.35rem .1rem;
  opacity:.9;
}
.main-nav a::after {
  content:"";
  position:absolute; left:-4px; right:-4px; bottom:0;
  height:2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.main-nav a:hover,
.main-nav a:focus-visible { opacity:1; }
.main-nav a:hover::after,
.main-nav a:focus-visible::after { transform: scaleX(1); }

/* Hero */
.hero { position:relative; min-height:85vh; display:flex; align-items:center; overflow:hidden; }
#hero-canvas { position:absolute; inset:0; z-index:0; }
.image-gradient { position:absolute; top:-12%; right:-12%; width:900px; max-width:70vw; opacity:.35; mix-blend-mode:screen; }
.layer-blur { position:absolute; top:20%; right:-3rem; width:30rem; height:0; box-shadow:0 0 600px 55px #fff; rotate:-28deg; opacity:.13; }
.hero::before,
.hero::after {
  content:"";
  position:absolute;
  width:22vmax; height:22vmax;
  background: radial-gradient(circle, rgba(91,168,255,.25), transparent 70%);
  filter: blur(20px);
  opacity:.25;
  pointer-events:none;
  animation: drift 26s infinite alternate ease-in-out;
}
.hero::before { left:-12vmax; top:8vmax; }
.hero::after { right:-10vmax; top:2vmax; animation-delay:-8s; }
@keyframes drift { from { transform: translate3d(0,0,0);} to { transform: translate3d(4%, -4%,0);} }

.hero-inner { position:relative; z-index:1; padding:5.5rem 0 4.5rem; }
.hero-inner::before {
  content:"";
  position:absolute;
  top:0; left:0;
  width:4px; height:4px;
  border-radius:50%;
  pointer-events:none;
  background: rgba(255,255,255,.9);
  box-shadow:
    120px 30px rgba(95,168,255,.8),
    280px 10px rgba(255,255,255,.6),
    420px 90px rgba(45,216,255,.7),
    560px -10px rgba(255,255,255,.45),
    640px 50px rgba(146,107,255,.65);
  animation: sparkleBlink 6s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity:.8;
}
.hero-inner::after {
  content:"";
  position:absolute;
  width:3px; height:3px;
  border-radius:50%;
  pointer-events:none;
  top:40%; left:5%;
  background: rgba(255,255,255,.85);
  box-shadow:
    90px 10px rgba(255,255,255,.7),
    210px -30px rgba(95,168,255,.8),
    360px 40px rgba(45,216,255,.6),
    510px 5px rgba(255,255,255,.5);
  animation: sparkleBlink 8s ease-in-out infinite;
  animation-delay: -2s;
  mix-blend-mode: screen;
  opacity:.75;
}
.badge {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .9rem;
  border-radius:999px;
  background: rgba(255,255,255,.16);
  letter-spacing:.3em; text-transform:uppercase; font-size:.78rem; font-weight:600;
  margin-bottom:.9rem;
}
.badge::before {
  content:""; width:8px; height:8px; border-radius:50%;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  box-shadow:0 0 0 6px rgba(91,168,255,.25);
}
.gradient-title,
.hero h1 {
  font-family:'Montserrat','Inter',sans-serif;
  font-size: clamp(2.2rem, 4vw + 1rem, 4rem);
  line-height:1.05;
  margin-bottom:1rem;
  letter-spacing:.02em;
}
.gradient-title {
  background: linear-gradient(120deg, #fff, #dce9ff 35%, #6cc6ff 65%, #9fe3ff);
  -webkit-background-clip:text;
  color: transparent;
  text-shadow:0 14px 50px rgba(73,160,255,.35);
}
.hero p { max-width:720px; color: var(--ink-soft); font-size: clamp(1rem, 1.1vw + .6rem, 1.3rem); margin-bottom:1.6rem; }

.cta-row { display:flex; flex-wrap:wrap; gap:1rem; }

/* Buttons */
.btn {
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.4rem;
  padding:.95rem 1.3rem;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  color:var(--ink);
  text-decoration:none;
  font-weight:600;
  letter-spacing:.01em;
  background: rgba(255,255,255,.06);
  box-shadow:0 20px 35px rgba(3,6,15,.4);
  overflow:hidden;
  transition: transform .18s ease, border-color .25s ease, background .3s ease;
}
.btn::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(255,255,255,.3), rgba(255,255,255,0));
  mix-blend-mode: screen;
  transform: translateX(-120%);
  transition: transform .45s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { transform: translateX(0); }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); border-color:transparent; }
.btn.ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.btn.small { padding:.6rem .9rem; font-size:.9rem; box-shadow:none; }
.btn.link { background:transparent; border:none; color:var(--accent-strong); padding-left:0; box-shadow:none; }
.btn.pill { border-radius:999px; }

/* Sections */
.section { padding:4.8rem 0; position:relative; }
.section.alt { background: rgba(255,255,255,.03); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(0,0,0,.35); }
.section.alt::before {
  content:"";
  position:absolute;
  top:10%; left:8%;
  width:3px; height:3px;
  border-radius:50%;
  pointer-events:none;
  background: rgba(255,255,255,.85);
  box-shadow:
    140px 55px rgba(45,216,255,.65),
    320px -20px rgba(255,255,255,.55),
    520px 30px rgba(146,107,255,.5),
    660px 80px rgba(95,168,255,.6);
  animation: sparkleBlink 7s ease-in-out infinite;
  opacity:.65;
  mix-blend-mode: screen;
}
.section h2 { font-family:'Montserrat','Inter',sans-serif; font-size: clamp(1.6rem, 1.2vw + 1rem, 2.4rem); font-weight:800; margin-bottom:.75rem; letter-spacing:.01em; }
.section h2::after { content:""; display:block; width:70px; height:3px; border-radius:999px; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); margin-top:.5rem; }
.muted { color: var(--ink-soft); }
.small { font-size:.92rem; }
.center { text-align:center; }
.two-col { display:grid; grid-template-columns:1.1fr 1fr; gap:1.8rem; align-items:center; }

/* Features */
.features { list-style:none; display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:.8rem; }
.features li {
  position:relative;
  padding:.9rem 1.1rem .9rem 1.5rem;
  border-radius:var(--radius-md);
  background: var(--bg-card);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.features li::before {
  content:""; position:absolute; left:.65rem; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%;
  background: var(--accent-strong);
  box-shadow:0 0 0 6px rgba(45,216,255,.22);
}
.features li::after { content:""; position:absolute; inset:0; background: linear-gradient(120deg, rgba(255,255,255,.07), rgba(255,255,255,0)); opacity:0; transition: opacity .35s ease; }
.features li:hover::after { opacity:1; }

/* Cards */
.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:1.2rem; margin-top:1.3rem; }
.card {
  position:relative;
  padding:1.3rem;
  border-radius:var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)) padding-box,
    radial-gradient(circle at top left, rgba(91,168,255,.4), rgba(91,168,255,.05)) border-box;
  border:1px solid transparent;
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  transform: translateZ(0);
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.card::after {
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 75% 10%, rgba(255,255,255,.3), transparent 35%);
  opacity:0; transition: opacity .4s ease;
}
.card:hover { transform: translateY(-4px) scale(1.01); box-shadow: var(--shadow-deep); filter: saturate(1.05); }
.card:hover::after { opacity:1; }
.card h3 { font-size:1.25rem; font-weight:800; margin-bottom:.5rem; }
.card p { color: var(--ink-soft); margin-bottom:.7rem; }

/* Gallery */
.gallery-group {
  margin-top:1.4rem;
  padding:1.1rem 1.2rem 1rem;
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.08);
  background: var(--bg-card);
  box-shadow: var(--shadow-soft);
}
.gallery-group__header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.6rem 1.2rem;
  margin-bottom:.8rem;
}
.gallery-group h3 { margin:0; font-size:1.2rem; letter-spacing:.01em; }
.gallery-group code {
  background: rgba(255,255,255,.08);
  border-radius:6px;
  padding:0 .35rem;
  color: var(--ink);
}
.gallery-grid { position:relative; margin-top:1.7rem; display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap:.9rem; perspective:900px; }
.gallery-grid::before {
  content:"";
  position:absolute;
  top: -15%; right:10%;
  width:4px; height:4px;
  border-radius:50%;
  background: rgba(255,255,255,.85);
  pointer-events:none;
  box-shadow:
    80px 20px rgba(255,255,255,.7),
    220px -10px rgba(95,168,255,.75),
    360px 50px rgba(146,107,255,.6),
    500px 5px rgba(45,216,255,.65);
  animation: sparkleBlink 9s ease-in-out infinite;
  animation-delay: -1s;
  mix-blend-mode: screen;
  opacity:.7;
}
.shot {
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  box-shadow: var(--shadow-soft);
  transform-style: preserve-3d;
  transition: transform .45s ease, box-shadow .45s ease;
  cursor: pointer;
}
.shot:focus-visible { outline:2px solid rgba(95,168,255,.8); outline-offset:3px; }
.shot:hover { transform: translateY(-6px) rotateX(2deg) rotateY(-1deg); box-shadow:0 35px 90px rgba(3,6,15,.8); }
.shot img { display:block; width:100%; height:100%; object-fit:cover; transition: transform .75s ease; }
.shot:hover img { transform: scale(1.08); }
.shot::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.6)); opacity:.45; }
.shot figcaption { position:absolute; left:1rem; bottom:1rem; font-weight:600; text-shadow:0 8px 30px rgba(0,0,0,.75); }

/* Map */
.map { aspect-ratio:16/10; border-radius:var(--radius-md); border:1px solid rgba(255,255,255,.12); overflow:hidden; box-shadow: var(--shadow-soft); }
.map iframe { width:100%; height:100%; border:0; filter: saturate(1.1) contrast(1.05); }

/* Contact */
.contact-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:1.2rem; margin:1.6rem 0 2.6rem; }
.contact-card { background: var(--bg-card-strong); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-md); padding:1.1rem 1.3rem; box-shadow:0 18px 50px rgba(4,7,18,.7); }
.contact-card h3 { margin-bottom:.5rem; font-size:1.15rem; }
.contact-card p { margin:.25rem 0; color: var(--ink-soft); }
.contact-card a { color: var(--ink); text-decoration:none; border-bottom:1px dotted rgba(91,168,255,.7); }

/* Footer */
.site-footer { position:relative; border-top:1px solid rgba(255,255,255,.1); background: rgba(3,5,12,.9); backdrop-filter: blur(12px); padding:1.2rem 0; text-align:center; color: var(--ink-muted); overflow:hidden; }
.site-footer::before {
  content:"";
  position:absolute;
  left:10%; top:15%;
  width:3px; height:3px;
  border-radius:50%;
  pointer-events:none;
  background: rgba(255,255,255,.8);
  box-shadow:
    120px -10px rgba(95,168,255,.7),
    260px 20px rgba(255,255,255,.6),
    420px -5px rgba(146,107,255,.65);
  animation: sparkleBlink 8s ease-in-out infinite;
  opacity:.6;
  mix-blend-mode: screen;
}

/* Reveal */
.reveal { opacity:0; transform: translateY(12px); transition: opacity .65s ease, transform .65s ease; }
.reveal.in { opacity:1; transform: translateY(0); }

/* Modal */
.modal { position:fixed; inset:0; z-index:90; display:none; }
.modal.open { display:block; }
.modal__backdrop { position:absolute; inset:0; background: rgba(3,5,12,.78); backdrop-filter: blur(12px); animation: fadeIn .25s ease; }
.modal__dialog { position:relative; margin:8vh auto; width:min(720px, 92vw); border-radius:var(--radius-lg); background: rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.2); padding:1.4rem; box-shadow:0 35px 100px rgba(1,3,8,.8); backdrop-filter: blur(18px); animation: pop .28s ease forwards; }
.modal__close { position:absolute; top:.7rem; right:.7rem; width:34px; height:34px; border-radius:50%; border:none; background: rgba(255,255,255,.2); color:var(--ink); font-size:1.2rem; cursor:pointer; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes pop { from { transform: translateY(8px) scale(.96); opacity:.6; } to { transform: translateY(0) scale(1); opacity:1; } }

/* Form */
.form { display:block; font-size:1rem; }
.form__row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.form label { display:flex; flex-direction:column; gap:.35rem; font-weight:600; }
.form input,
.form select,
.form textarea {
  background: rgba(2,4,12,.6);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius-md);
  padding:.85rem .95rem;
  color:var(--ink);
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: rgba(91,168,255,.95);
  box-shadow:0 0 0 3px rgba(91,168,255,.35);
  background: rgba(10,20,45,.8);
  outline:none;
}
.form textarea { min-height:120px; resize:vertical; }
.form__actions { display:flex; gap:.9rem; margin-top:.6rem; }

/* Lightbox */
.lightbox { position:fixed; inset:0; z-index:95; display:none; }
.lightbox.open { display:block; }
.lightbox__backdrop { position:absolute; inset:0; background: rgba(2,4,10,.82); backdrop-filter: blur(14px); animation: fadeIn .25s ease; }
.lightbox__frame {
  position:relative;
  margin: 6vh auto;
  width: min(900px, 92vw);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,.75);
  transform: translateY(10px) scale(.96);
  animation: zoomIn .3s ease forwards;
}
.lightbox__frame img { display:block; width:100%; height:auto; }
.lightbox__close {
  position:absolute; top:.6rem; right:.6rem;
  width:36px; height:36px; border-radius:50%; border:none;
  background: rgba(0,0,0,.6); color:#fff; font-size:1.3rem; cursor:pointer;
}
@keyframes zoomIn { from { opacity:.3; transform: translateY(15px) scale(.9);} to { opacity:1; transform: translateY(0) scale(1);} }

/* Scrollbar */
*::-webkit-scrollbar { width:12px; height:12px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.08)); border:3px solid transparent; border-radius:999px; background-clip: content-box; }

/* Responsive */
@media (max-width:1024px) {
  .main-nav { flex-wrap:wrap; gap:.7rem; }
  .two-col { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  .nav { flex-direction:column; gap:.8rem; }
  .hero { min-height:auto; padding-top:3rem; }
  .cta-row { flex-direction:column; align-items:flex-start; }
  .form__row { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

@keyframes sparkleBlink {
  0%, 100% { opacity:.2; transform: scale(.85); }
  50% { opacity:1; transform: scale(1.2); }
}