/* ================================================================
   FANCY DECOR — 2050 VFX LAYER  (additive — keeps original theme)
   Only adds effects. Never overrides colors or layout.
================================================================ */

/* ===== CANVAS — behind everything ===== */
#vfxCanvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

/* All page content sits above canvas — do NOT touch fixed-positioned elements */
header,
section,
footer {
  position: relative;
  z-index: 2;
}


/* ================================================================
   HEADER VFX
================================================================ */

/* ── Entrance: header slides in after page load ── */
.site-header {
  animation: headerEnter .8s cubic-bezier(.23,1,.32,1) both;
  animation-delay: .1s;
}
@keyframes headerEnter {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ── Scrolled: richer glassmorphism ── */
.site-header.scrolled {
  background: rgba(250,250,248,.88) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  box-shadow: 0 1px 0 rgba(184,149,106,.18), 0 4px 30px rgba(0,0,0,.08) !important;
}

/* ── Animated gold sweep line at bottom ── */
.site-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(184,149,106,.8) 40%,
    rgba(240,220,180,1) 50%,
    rgba(184,149,106,.8) 60%,
    transparent 100%);
  background-size: 300% 100%;
  animation: headerLineSweep 5s ease-in-out infinite;
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}
.site-header.scrolled::after { opacity: 1; }
@keyframes headerLineSweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

/* ── Logo: glow + lift on hover ── */
.site-header .logo img {
  transition: filter .4s, transform .4s;
  filter: drop-shadow(0 0 0px transparent);
}
.site-header .logo:hover img {
  filter: drop-shadow(0 0 10px rgba(184,149,106,.75)) drop-shadow(0 0 22px rgba(184,149,106,.35));
  transform: scale(1.06) translateY(-1px);
}

/* ── Nav links: enhanced underline glow + spacing on hover ── */
.site-header .main-nav a {
  transition: color .3s, letter-spacing .3s !important;
}
.site-header .main-nav a:hover {
  letter-spacing: .14em !important;
}
.site-header .main-nav a::after {
  height: 1.5px !important;
  box-shadow: 0 0 8px rgba(184,149,106,.8), 0 0 16px rgba(184,149,106,.4);
  border-radius: 2px;
}

/* Floating nav indicator dot (JS adds .nav-active) */
.site-header .main-nav a.nav-active {
  color: var(--gold) !important;
}
.site-header .main-nav a.nav-active::after {
  width: 100% !important;
}

/* ── Nav background pill on hover ── */
.site-header .main-nav a {
  padding: 4px 6px;
  border-radius: 6px;
  transition: color .3s, letter-spacing .3s, background .3s !important;
}
.site-header .main-nav a:hover {
  background: rgba(184,149,106,.08);
}
.site-header.scrolled .main-nav a:hover {
  background: rgba(184,149,106,.10);
}

/* ── CTA button: breathing pulse glow ── */
.header-cta {
  animation: ctaBreath 3.5s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
@keyframes ctaBreath {
  0%,100% { box-shadow: 0 0 0 0 rgba(184,149,106,0); }
  50%     { box-shadow: 0 0 14px 3px rgba(184,149,106,.25); }
}

/* CTA shimmer sweep on hover */
.header-cta::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
  transition: none;
  pointer-events: none;
}
.header-cta:hover::before {
  left: 150%;
  transition: left .5s ease;
}

/* ── Dropdown: modern glass card ── */
.dropdown {
  border-radius: 14px !important;
  border: 1px solid rgba(184,149,106,.2) !important;
  backdrop-filter: blur(18px) !important;
  background: rgba(250,250,248,.95) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 0 0 1px rgba(184,149,106,.08) !important;
  overflow: hidden;
}
.dropdown li a {
  position: relative;
  transition: background .25s, color .25s, padding-left .25s !important;
}
.dropdown li a::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .25s cubic-bezier(.23,1,.32,1);
  border-radius: 0 2px 2px 0;
}
.dropdown li a:hover::before { transform: scaleY(1); }
.dropdown li a:hover { padding-left: 26px !important; }

/* ── Hamburger: gold glow on hover + active ── */
.hamburger span {
  border-radius: 2px;
  transition: background .3s, box-shadow .3s, transform .35s, opacity .35s !important;
}
.hamburger:hover span {
  background: #d4b28a !important;
  box-shadow: 0 0 8px rgba(184,149,106,.6);
}
.hamburger.active span {
  background: var(--gold) !important;
}

/* ── Header scan-line sweep (subtle) ── */
.site-header .header-inner::before {
  content: '';
  position: absolute;
  top: 0; left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(184,149,106,.04), transparent);
  animation: headerScan 8s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes headerScan {
  from { left: -30%; }
  to   { left: 130%; }
}

/* Keep header-inner content above scan overlay */
.site-header .header-inner > * { position: relative; z-index: 1; }

/* Splash, modals, viewer keep their own fixed positioning from style.css */
.splash-screen { z-index: 9999 !important; }
.album-modal   { z-index: 8000 !important; }
.insta-viewer  { z-index: 8500 !important; }
.cursor        { z-index: 9998 !important; }
.cursor-follower { z-index: 9997 !important; }

/* Orbs must never block clicks */
.vfx-orb {
  pointer-events: none !important;
  z-index: 1;
}

/* ===== FLOATING AMBIENT ORBS ===== */
.vfx-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  opacity: 0.18;
  z-index: 1;
  animation: orbDrift 18s ease-in-out infinite;
}
.vfx-orb-1 {
  width: 500px; height: 500px;
  background: #b8956a;
  top: -150px; right: -150px;
  animation-duration: 22s;
}
.vfx-orb-2 {
  width: 350px; height: 350px;
  background: #d4b28a;
  bottom: 10%; left: -100px;
  animation-duration: 16s;
  animation-delay: -7s;
}
.vfx-orb-3 {
  width: 280px; height: 280px;
  background: #c8a87a;
  top: 45%; right: 5%;
  animation-duration: 25s;
  animation-delay: -12s;
}
@keyframes orbDrift {
  0%,100% { transform: translate(0,0) scale(1); }
  25%      { transform: translate(25px,-35px) scale(1.07); }
  50%      { transform: translate(-18px,28px) scale(.95); }
  75%      { transform: translate(35px,18px) scale(1.03); }
}

/* ===== SCANLINES — very subtle ===== */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none !important;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,.012) 3px,
    rgba(0,0,0,.012) 4px
  );
}

/* ===== BUTTONS — shimmer sweep + lift ===== */
.btn-gold,
.btn.btn-gold {
  position: relative;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.23,1,.32,1),
              box-shadow .35s cubic-bezier(.23,1,.32,1) !important;
}
.btn-gold::after,
.btn.btn-gold::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
  pointer-events: none;
}
.btn-gold:hover::after,
.btn.btn-gold:hover::after {
  left: 160%;
}
.btn-gold:hover,
.btn.btn-gold:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 10px 30px rgba(184,149,106,.45) !important;
}
.btn-gold:active,
.btn.btn-gold:active {
  transform: translateY(0) scale(.97) !important;
}

.btn-outline:hover,
.btn-outline-light:hover {
  transform: translateY(-3px) scale(1.03) !important;
}

/* ===== LOGO GLOW ===== */
.logo img {
  transition: filter .4s;
}
.logo:hover img {
  filter: drop-shadow(0 0 14px rgba(184,149,106,.6));
}

/* ===== NAV LINK UNDERLINE SLIDE ===== */
.main-nav ul > li > a {
  position: relative;
}
.main-nav ul > li > a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1.5px;
  background: var(--gold);
  transition: width .35s cubic-bezier(.23,1,.32,1);
}
.main-nav ul > li > a:hover::after {
  width: 100%;
}

/* ===== HERO TITLE — shimmer wave ===== */
.hero-title {
  background: linear-gradient(
    90deg,
    var(--white, #fafaf8) 0%,
    #fff9f0 30%,
    var(--gold, #b8956a) 48%,
    #ffe8b0 55%,
    var(--white, #fafaf8) 70%,
    var(--white, #fafaf8) 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: heroShimmer 5s linear infinite;
}
@keyframes heroShimmer {
  0%   { background-position: 250% center; }
  100% { background-position: -50% center; }
}

/* Glitch flash (triggered via JS) */
.hero-title.glitch {
  animation: heroShimmer 5s linear infinite, vfxGlitch .18s steps(3) 1;
}
@keyframes vfxGlitch {
  0%   { transform: translate(-3px, 0) skewX(2deg); opacity: .9; }
  33%  { transform: translate(3px, -1px) skewX(-2deg); opacity: 1; }
  66%  { transform: translate(-2px, 1px) skewX(1deg); opacity: .95; }
  100% { transform: translate(0, 0) skewX(0); opacity: 1; }
}

/* ===== SERVICE CARDS — 3D tilt ready ===== */
.service-statement {
  transition: transform .4s cubic-bezier(.23,1,.32,1),
              box-shadow .4s cubic-bezier(.23,1,.32,1) !important;
  transform-style: preserve-3d;
  will-change: transform;
}

/* HUD corner brackets appear on hover */
.service-statement {
  position: relative;
}
.service-statement::before,
.service-statement::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--gold, #b8956a);
  border-style: solid;
  opacity: 0;
  transition: opacity .35s, width .35s, height .35s;
  pointer-events: none;
}
.service-statement::before {
  top: 8px; left: 8px;
  border-width: 2px 0 0 2px;
  border-radius: 2px 0 0 0;
}
.service-statement::after {
  bottom: 8px; right: 8px;
  border-width: 0 2px 2px 0;
  border-radius: 0 0 2px 0;
}
.service-statement:hover::before,
.service-statement:hover::after {
  opacity: 1;
  width: 22px; height: 22px;
}

/* ===== ALBUM CARDS — 3D ready ===== */
.album-card {
  transition: transform .45s cubic-bezier(.23,1,.32,1),
              box-shadow .45s cubic-bezier(.23,1,.32,1) !important;
  transform-style: preserve-3d;
  will-change: transform;
}

/* ===== TESTIMONIAL CARDS — float on hover ===== */
.testimonial-card {
  transition: transform .4s cubic-bezier(.23,1,.32,1),
              box-shadow .4s cubic-bezier(.23,1,.32,1) !important;
}
.testimonial-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 50px rgba(184,149,106,.2) !important;
}

/* ===== FAQ ITEMS — glow border on open ===== */
.faq-item.open {
  box-shadow: 0 0 0 1.5px rgba(184,149,106,.35), 0 8px 30px rgba(184,149,106,.1) !important;
}

/* ===== STAT NUMBERS — pulse glow ===== */
.stat strong {
  display: inline-block;
  animation: statPulse 3s ease-in-out infinite;
}
@keyframes statPulse {
  0%,100% { text-shadow: 0 0 0 transparent; }
  50%      { text-shadow: 0 0 20px rgba(184,149,106,.5); }
}

/* ===== SECTION EYEBROW — bracket decoration ===== */
.section-eyebrow {
  position: relative;
  letter-spacing: .18em;
}
.section-eyebrow::before { content: '⟨ '; color: var(--gold, #b8956a); opacity: .7; }
.section-eyebrow::after  { content: ' ⟩'; color: var(--gold, #b8956a); opacity: .7; }

/* ===== SECTION H2 — HUD corners on scroll-in ===== */
.section-header {
  position: relative;
}
.section-header h2 {
  position: relative;
  display: inline-block;
}
.section-header h2::before,
.section-header h2::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border-color: var(--gold, #b8956a);
  border-style: solid;
  opacity: 0;
  transition: opacity .5s .2s, width .4s .2s, height .4s .2s;
  pointer-events: none;
}
.section-header h2::before {
  top: -4px; left: -12px;
  border-width: 2px 0 0 2px;
}
.section-header h2::after {
  bottom: -4px; right: -12px;
  border-width: 0 2px 2px 0;
}
.section-header.vfx-in h2::before,
.section-header.vfx-in h2::after {
  opacity: .8;
  width: 26px; height: 26px;
}

/* ===== RIPPLE CLICK EFFECT ===== */
@keyframes rippleOut {
  to { transform: scale(1); opacity: 0; }
}

/* ===== MOBIL — skjul cursor, bevar alt andet ===== */
@media (pointer: coarse) {
  .cursor,
  .cursor-follower {
    display: none !important;
  }
  /* Større touch-target på knapper */
  .btn, .btn-gold, .btn-outline {
    min-height: 48px;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  /* Kortere tilt-animation på mobil (hurtigere respons) */
  .service-statement,
  .album-card {
    transition: transform .25s cubic-bezier(.23,1,.32,1) !important;
  }
}

/* ===== FORM INPUTS — glow focus ===== */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  box-shadow: 0 0 0 3px rgba(184,149,106,.18), 0 0 16px rgba(184,149,106,.15) !important;
  transition: box-shadow .3s, border-color .3s !important;
}

/* ===== ABOUT BADGE — float ===== */
.about-badge {
  animation: badgeFloat 5s ease-in-out infinite;
}
@keyframes badgeFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ===== ALBUM CARDS — MODERNE REDESIGN ===== */

/* Kort wrapper — blødere skygge + større radius */
.album-card {
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.08) !important;
  padding: 10px !important;
  overflow: hidden;
  background: rgba(255,255,255,.15) !important;
  backdrop-filter: blur(6px) !important;
}

/* Hover — løft + varm guldglow i stedet for neon */
.album-card:hover {
  border-color: rgba(184,149,106,.55) !important;
  box-shadow:
    0 20px 50px rgba(184,149,106,.22),
    0 8px 20px rgba(0,0,0,.12) !important;
  transform: translateY(-12px) perspective(1000px) rotateX(4deg) scale(1.03) !important;
}

/* Billede-cover — blød radius */
.album-cover {
  border-radius: 10px !important;
  overflow: hidden;
}

/* Shine-sweep på hover */
.album-cover::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,.35) 50%,
    transparent 70%
  );
  transform: skewX(-15deg);
  transition: left .6s ease;
  pointer-events: none;
  z-index: 2;
}
.album-card:hover .album-cover::after {
  left: 130%;
}

/* Placeholder tekst — mørkere og mere læselig */
.album-placeholder-text {
  font-size: 1.5rem !important;
  color: rgba(0,0,0,.45) !important;
  font-weight: 400;
  letter-spacing: .06em;
}

/* Badge — guldfarvet og mere elegant */
.album-count-badge {
  background: rgba(184,149,106,.85) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  font-size: .6rem !important;
  padding: 5px 10px !important;
  letter-spacing: .1em !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 8px rgba(184,149,106,.4) !important;
}

/* Album info-boks under kortet */
.album-info {
  padding: 14px 6px 4px !important;
}
.album-info h4 {
  font-family: var(--font-serif);
  font-size: 1.05rem !important;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--black) !important;
  position: relative;
  display: inline-block;
  transition: color .3s;
}
.album-info h4::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--gold, #b8956a);
  transition: width .4s cubic-bezier(.23,1,.32,1);
}
.album-card:hover .album-info h4 {
  color: var(--gold, #b8956a) !important;
}
.album-card:hover .album-info h4::after {
  width: 100%;
}

/* Overlay — blødere og varmere */
.album-overlay {
  background: linear-gradient(
    160deg,
    rgba(0,0,0,.2) 0%,
    rgba(30,15,0,.6) 100%
  ) !important;
  border-radius: 10px !important;
}

/* Åbn-ikon */
.album-open-icon {
  font-size: 2rem !important;
  filter: drop-shadow(0 2px 8px rgba(255,255,255,.5));
}

/* ===== ALBUM MODAL — MODERNE ===== */
.album-modal-inner {
  border-radius: 20px !important;
  overflow: hidden;
}

/* Billedgrid i modal — større tiles med blød radius */
.album-modal-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 14px !important;
  padding: 8px !important;
}

.album-modal-grid .gallery-item,
.album-modal-grid > div {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.1) !important;
  transition: transform .35s cubic-bezier(.23,1,.32,1),
              box-shadow .35s !important;
  aspect-ratio: 1 !important;
  background: var(--border, #e8e2d8) !important;
}
.album-modal-grid > div:hover {
  transform: scale(1.04) !important;
  box-shadow: 0 10px 28px rgba(184,149,106,.3) !important;
  z-index: 2;
}
.album-modal-grid img,
.album-modal-grid video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #f5f0e8; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--gold, #b8956a), #d4b28a);
  border-radius: 3px;
}

/* ===== SELECTION ===== */
::selection {
  background: rgba(184,149,106,.28);
  color: #0d0d0d;
}

/* ===== TEKST KONTRAST FIX =====
   Regel: lys baggrund → sort/mørk tekst  |  mørk baggrund → hvid tekst
======================================================= */

/* --- LYS BAGGRUND SEKTIONER (hvid/creme) → mørk tekst --- */
.services-statement p,
.service-statement p {
  color: #333 !important;
}
.section-sub {
  color: #444 !important;
}
.about-content p {
  color: #333 !important;
}
.stat span {
  color: #555 !important;
}
.faq-question {
  color: #1a1a1a !important;
}
.faq-answer p {
  color: #333 !important;
}
.album-modal-back,
.album-modal-close {
  color: #333 !important;
}
.album-modal-header h3 {
  color: #0d0d0d !important;
}
.contact-form label {
  color: #333 !important;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  color: #0d0d0d !important;
  background: #fff !important;
}

/* --- MØRK BAGGRUND SEKTIONER (sort/guld) → hvid tekst --- */
/* Testimonials: sort baggrund */
.testimonials .testimonial-card > p {
  color: rgba(255,255,255,.9) !important;
}
.testimonials .reviewer strong {
  color: #fff !important;
}
.testimonials .reviewer span {
  color: rgba(255,255,255,.55) !important;
}
.testimonials .section-sub {
  color: rgba(255,255,255,.7) !important;
}
.testimonials .google-badge {
  color: rgba(255,255,255,.75) !important;
}

/* Footer: mørk baggrund */
.site-footer {
  color: rgba(255,255,255,.8) !important;
}
.footer-brand p {
  color: rgba(255,255,255,.65) !important;
}
.footer-col ul li,
.footer-col ul li a {
  color: rgba(255,255,255,.6) !important;
}
.footer-col ul li a:hover {
  color: #fff !important;
}
.footer-bottom p,
.footer-bottom a {
  color: rgba(255,255,255,.5) !important;
}
.footer-instagram span {
  color: rgba(255,255,255,.75) !important;
}

/* ================================================================
   ALBUM SERVICE INFO SECTION
================================================================ */

.album-service-info {
  margin: 0 0 8px;
  padding: 32px 36px;
  background: linear-gradient(135deg, rgba(184,149,106,.06) 0%, rgba(184,149,106,.02) 100%);
  border-bottom: 1px solid rgba(184,149,106,.15);
}

.asi-inner {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  max-width: 900px;
  margin: 0 auto;
}

/* Left column: icon + desc + CTA */
.asi-left {
  display: flex;
  gap: 20px;
  flex: 1 1 55%;
}

.asi-icon {
  font-size: 2.8rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(184,149,106,.5));
  animation: asiIconFloat 3s ease-in-out infinite;
}
@keyframes asiIconFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-5px); }
}

.asi-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: #1a1a1a !important;
  letter-spacing: .04em;
  margin-bottom: 8px;
}

.asi-desc {
  font-size: .88rem;
  line-height: 1.75;
  color: #444 !important;
  margin-bottom: 18px;
}

.asi-cta {
  display: inline-block;
  font-size: .78rem;
  padding: 10px 24px;
  letter-spacing: .1em;
}

/* Right column: services list */
.asi-right { flex: 0 0 38%; }

.asi-services-label {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #b8956a !important;
  margin-bottom: 12px;
  font-weight: 500;
}

.asi-services-list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}

.asi-service-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: .8rem;
  color: #333 !important;
  line-height: 1.5;
}

.asi-check {
  color: #b8956a;
  font-size: .65rem;
  margin-top: 3px;
  flex-shrink: 0;
}

/* Section label between info and media grid */
.album-section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px 14px;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #b8956a;
  font-family: 'Cormorant Garamond', serif;
}
.album-section-label .album-section-icon {
  font-size: .55rem;
  opacity: .6;
}

/* Mobile */
@media (max-width: 680px) {
  .asi-inner          { flex-direction: column; gap: 24px; }
  .asi-left           { flex-direction: column; }
  .asi-right          { width: 100%; }
  .asi-services-list  { grid-template-columns: 1fr; }
  .album-service-info { padding: 24px 20px; }
  .album-section-label { padding: 14px 20px 10px; }
}


/* ================================================================
   SPLASH SCREEN — 3D FUTURISTIC EVENT PLANNER
================================================================ */

/* Kill old elements injected by earlier version */
#splashScreen::before,
#splashScreen::after { display: none !important; }

/* ── 3D Perspective floor grid ── */
.splash-grid {
  position: absolute;
  bottom: 0; left: -20%; right: -20%;
  height: 45%;
  background-image:
    linear-gradient(to right, rgba(184,149,106,.12) 1px, transparent 1px),
    linear-gradient(to top,   rgba(184,149,106,.10) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(500px) rotateX(68deg);
  transform-origin: bottom center;
  pointer-events: none;
  z-index: 1;
  mask-image: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 100%);
}

/* ── Central glow stage ── */
.splash-stage-glow {
  position: absolute;
  width: 520px; height: 520px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(184,149,106,.2) 0%, transparent 65%);
  pointer-events: none;
  z-index: 1;
  animation: stageGlowPulse 4s ease-in-out infinite;
}
@keyframes stageGlowPulse {
  0%,100% { opacity: .7; transform: translate(-50%,-50%) scale(1);    }
  50%     { opacity: 1;  transform: translate(-50%,-50%) scale(1.12); }
}

/* ── Rotating diamond frame around logo ── */
.splash-diamond-frame {
  position: absolute;
  width: 232px; height: 232px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(184,149,106,.55);
  box-shadow: 0 0 24px rgba(184,149,106,.2), inset 0 0 24px rgba(184,149,106,.06);
  pointer-events: none;
  z-index: 4;
  animation: diamondSpin 20s linear infinite;
}
.splash-diamond-frame::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(184,149,106,.22);
}
.splash-diamond-frame::after {
  content: '◆';
  position: absolute;
  top: -9px; left: 50%;
  transform: translateX(-50%) rotate(-45deg);
  font-size: .6rem;
  color: rgba(212,178,138,.9);
  text-shadow: 0 0 10px rgba(184,149,106,.9);
}
@keyframes diamondSpin {
  from { transform: translate(-50%,-50%) rotate(45deg); }
  to   { transform: translate(-50%,-50%) rotate(405deg); }
}

/* Cardinal gem dots */
.splash-gem {
  position: absolute;
  font-size: .55rem;
  color: rgba(212,178,138,.9);
  text-shadow: 0 0 10px rgba(184,149,106,1);
  pointer-events: none;
  z-index: 5;
  animation: gemGlow 2s ease-in-out infinite;
}
.splash-gem-n { top: calc(50% - 124px); left: 50%; transform: translateX(-50%); }
.splash-gem-s { top: calc(50% + 117px); left: 50%; transform: translateX(-50%); }
.splash-gem-w { top: 50%; left: calc(50% - 124px); transform: translateY(-50%); }
.splash-gem-e { top: 50%; left: calc(50% + 117px); transform: translateY(-50%); }
@keyframes gemGlow {
  0%,100% { opacity: .5; text-shadow: 0 0 6px rgba(184,149,106,.6); }
  50%     { opacity: 1;  text-shadow: 0 0 18px rgba(212,178,138,1); }
}

/* ── Horizontal gold lines either side of logo ── */
.splash-hline {
  position: absolute;
  height: 1px;
  top: 50%;
  background: linear-gradient(to right, transparent, rgba(184,149,106,.6) 50%, transparent);
  pointer-events: none;
  z-index: 3;
  animation: hlinePulse 3s ease-in-out infinite;
}
.splash-hline-l { left: 0;   width: calc(50% - 138px); }
.splash-hline-r { right: 0;  width: calc(50% - 138px); transform: scaleX(-1); }
@keyframes hlinePulse {
  0%,100% { opacity: .35; }
  50%     { opacity: .85; }
}

/* ── Brand name — metallic gold shimmer ── */
.splash-brand {
  position: absolute;
  top: calc(50% + 140px);
  left: 50%; transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  z-index: 5;
}
.splash-brand-title {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .55em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #c8a05a 0%, #f0d898 35%, #d4aa6a 60%, #b8844a 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  animation: brandShimmer 4s ease-in-out infinite;
}
@keyframes brandShimmer {
  0%   { background-position: 0% center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0% center; }
}
.splash-brand-sub {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: .58rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(184,149,106,.5);
  margin-top: 7px;
  white-space: nowrap;
  animation: subFade 3s ease-in-out infinite;
}
@keyframes subFade {
  0%,100% { opacity: .4; }
  50%     { opacity: .9; }
}

/* ── 3D Enter button ── */
.splash-enter-3d {
  position: absolute;
  bottom: 56px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 36px;
  border: 1px solid rgba(184,149,106,.5);
  border-bottom: 2px solid rgba(184,149,106,.4);
  border-radius: 3px;
  background: linear-gradient(160deg, rgba(184,149,106,.1), rgba(212,178,138,.05), rgba(184,149,106,.1));
  box-shadow: 0 0 24px rgba(184,149,106,.15), inset 0 1px 0 rgba(255,255,255,.07);
  cursor: pointer;
  z-index: 5;
  white-space: nowrap;
  animation: btnFloat 3s ease-in-out infinite;
  transition: box-shadow .35s, transform .35s;
}
.splash-enter-3d:hover {
  box-shadow: 0 0 44px rgba(184,149,106,.4), 0 6px 0 rgba(184,149,106,.2), inset 0 1px 0 rgba(255,255,255,.12);
  animation-play-state: paused;
  transform: translateX(-50%) translateY(-4px);
}
@keyframes btnFloat {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%     { transform: translateX(-50%) translateY(-4px); }
}
.splash-enter-label {
  font-family: 'Jost', sans-serif;
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(212,178,138,.9);
}
.splash-enter-arrow {
  font-size: .7rem;
  color: rgba(184,149,106,.65);
  animation: arrowPulse 1.4s ease-in-out infinite;
}
@keyframes arrowPulse {
  0%,100% { opacity: .35; transform: translateX(0); }
  50%     { opacity: 1;   transform: translateX(4px); }
}

/* ── Floating spark diamonds ── */
.splash-spark {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  color: rgba(212,178,138,.8);
  text-shadow: 0 0 8px rgba(184,149,106,.9);
  animation: sparkDrift linear infinite;
  font-size: .45rem;
}
@keyframes sparkDrift {
  0%   { transform: translateY(20px) rotate(0deg) scale(.7);    opacity: 0; }
  8%   { opacity: .9; }
  88%  { opacity: .4; }
  100% { transform: translateY(-92vh) rotate(540deg) scale(1.3); opacity: 0; }
}

/* ── Scan line (single sweep every cycle) ── */
.splash-scanline {
  position: absolute;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,149,106,.4) 30%, rgba(240,210,150,.85) 50%, rgba(184,149,106,.4) 70%, transparent);
  top: -2px; left: 0;
  animation: scanSweep 5s ease-in-out infinite;
  pointer-events: none; z-index: 6;
  box-shadow: 0 0 8px rgba(184,149,106,.35);
}
@keyframes scanSweep {
  0%,12%  { top: -2px; opacity: 0; }
  15%     { opacity: .9; }
  83%     { opacity: .9; }
  86%,100%{ top: 100%; opacity: 0; }
}

/* ── Loadbar ── */
.splash-loadbar-wrap {
  position: absolute;
  bottom: 36px; left: 50%;
  transform: translateX(-50%);
  width: 150px; height: 1px;
  background: rgba(184,149,106,.12);
  border-radius: 1px; overflow: hidden; z-index: 5;
}
.splash-loadbar {
  height: 100%;
  background: linear-gradient(90deg, rgba(184,149,106,.4), #d4b28a, #f0d898, #d4b28a);
  background-size: 200% 100%;
  animation: splashLoad 3s ease-in-out infinite, splashLoadShimmer 1.5s linear infinite;
  box-shadow: 0 0 6px rgba(184,149,106,.7);
}
@keyframes splashLoad {
  0%{width:0%}70%{width:100%}85%{width:100%}100%{width:0%}
}
@keyframes splashLoadShimmer {
  from{background-position:200% 0} to{background-position:-200% 0}
}

/* ── Logo glow ── */
.splash-logo img {
  filter: drop-shadow(0 0 20px rgba(184,149,106,.5)) !important;
}
.splash-logo:hover img {
  filter: drop-shadow(0 0 34px rgba(212,178,138,.85)) !important;
}
.splash-logo.opening { cursor: default !important; pointer-events: none !important; }

/* ── Hide everything from old designs ── */
.splash-status, .splash-flr, .splash-tagline, .splash-hint,
.splash-divider, .splash-confetti, .splash-corner,
.splash-orbit-dot, .splash-text { display: none !important; }



/* ===== LEGAL MODALS (Privatlivspolitik / Vilkår) ===== */
.legal-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.legal-modal.open { display: flex; }

.legal-modal-box {
  position: relative;
  background: #fafaf8;
  color: #1a1a1a;
  border-radius: 16px;
  max-width: 640px;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  border: 1px solid rgba(184,149,106,.3);
}

.legal-modal-box h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  color: #1a1a1a !important;
  padding: 28px 32px 0;
  letter-spacing: .04em;
}

.legal-modal-body {
  overflow-y: auto;
  padding: 20px 32px 32px;
  flex: 1;
}

.legal-modal-body h3 {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #b8956a !important;
  margin: 20px 0 6px;
}

.legal-modal-body p {
  font-size: .9rem;
  line-height: 1.7;
  color: #333 !important;
}

.legal-modal-body a { color: #b8956a; text-decoration: underline; }

.legal-modal-close {
  position: absolute;
  top: 16px; right: 20px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: #888;
  transition: color .2s;
  padding: 4px 8px;
}
.legal-modal-close:hover { color: #1a1a1a; }


/* ================================================================
   MOBILE PERFORMANCE — (pointer: coarse) = touch device
   Kill expensive effects that cause lag on phones
================================================================ */
@media (pointer: coarse) {

  /* ── Kill backdrop-filter (most expensive on mobile) ── */
  .site-header,
  .site-header.scrolled,
  .dropdown,
  .album-modal-inner,
  .legal-modal-box {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Give solid fallback backgrounds where blur was providing contrast */
  .site-header.scrolled {
    background: rgba(250,250,248,.97) !important;
  }
  .dropdown {
    background: #fafaf8 !important;
  }

  /* ── Kill heavy CSS animations — keep only essential ones ── */

  /* Orbs: too large, blurred, constantly animating */
  .vfx-orb { display: none !important; }

  /* Canvas opacity: reduce so it's lighter to composite */
  #vfxCanvas { opacity: 0.3 !important; }

  /* Header scan line: off */
  .site-header .header-inner::before { display: none !important; }

  /* Header entrance animation: instant */
  .site-header { animation: none !important; }

  /* Stat counter glow pulse: off */
  .stat strong { animation: none !important; }

  /* Button shimmer sweep: off */
  .btn::after,
  .btn-gold::after,
  .btn-outline::after { display: none !important; }

  /* CTA breathing pulse: off */
  .header-cta { animation: none !important; }

  /* Scroll reveal: show everything instantly (no stagger lag) */
  .reveal,
  .service-statement,
  .album-card,
  .faq-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Section header HUD corners: off */
  .section-header::before,
  .section-header::after { display: none !important; }

  /* Album card 3D tilt: remove perspective transforms */
  .album-card { transform: none !important; }

  /* Splash sparks & grid: expensive on mobile */
  .splash-spark,
  .splash-grid { display: none !important; }

  /* Splash diamond frame spin: simplify to static */
  .splash-diamond-frame { animation: none !important; }

  /* Splash stage glow pulse: off */
  .splash-stage-glow { animation: none !important; }

  /* Splash scan line: off */
  .splash-scanline { display: none !important; }

  /* Footer text contrast already handled; no extra needed */
}

/* ── Respect system reduced-motion preference ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}




/* ══════════════════════════════════════════════
   ALBUM INFINITE CAROUSEL
   ══════════════════════════════════════════════ */

@keyframes carouselScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Wrapper — clips overflow, adds edge fade masks */
.album-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 12px 0 24px;
  cursor: grab;
  user-select: none;
  /* Fade cards at edges */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

/* Carousel wrapper — positions arrows outside the clipping carousel */
.album-carousel-wrap {
  position: relative;
  width: 100%;
}

/* Arrow buttons */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: rgba(255,255,255,0.92);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 28px;
  line-height: 1;
  color: #7a5c3c;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
  user-select: none;
}
.carousel-arrow:hover {
  background: rgba(255,255,255,1);
  transform: translateY(-50%) scale(1.1);
}
.carousel-arrow:active {
  transform: translateY(-50%) scale(0.93);
}
.carousel-arrow-left  { left: 8px; }
.carousel-arrow-right { right: 8px; }

@media (pointer: coarse) {
  .carousel-arrow { width: 38px; height: 38px; font-size: 24px; }
  .carousel-arrow-left  { left: 4px; }
  .carousel-arrow-right { right: 4px; }
}

/* The scrolling track — flex row of all cards (original + duplicate) */
.album-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 24px;
  width: max-content;
  animation: carouselScroll 22s linear infinite;
  will-change: transform;
}

/* Pause on hover so users can read / click */
.album-carousel:hover .album-track {
  animation-play-state: paused;
}

/* Each card — fixed width so layout is predictable */
.album-track .album-card {
  flex: 0 0 280px;
  width: 280px;
  cursor: pointer;
}

/* Override the old grid layout when inside carousel */
.album-carousel .album-grid {
  display: contents;
}

/* ── Mobile: slower speed, no hover pause ── */
@media (pointer: coarse) {
  .album-track {
    animation-duration: 30s;
    gap: 16px;
  }
  .album-track .album-card {
    flex: 0 0 220px;
    width: 220px;
  }
  .album-carousel:hover .album-track {
    animation-play-state: running;
  }
}

/* ══════════════════════════════════════════════
   HERO PHOTO BACKGROUND STRIP
   Scrolls LEFT-TO-RIGHT (opposite of album carousel)
   Sits behind .hero-content via absolute positioning
   ══════════════════════════════════════════════ */

@keyframes heroPhotoScroll {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

.hero-photo-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;               /* above hero-bg overlay, below hero-content */
  pointer-events: none;
  /* vertical centering of the strip */
  display: flex;
  align-items: center;
  /* fade top+bottom edges so it blends into the hero */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,0.6) 20%,
    rgba(0,0,0,0.6) 80%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,0.6) 20%,
    rgba(0,0,0,0.6) 80%,
    transparent 100%
  );
}

.hero-photo-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 16px;
  width: max-content;
  animation: heroPhotoScroll 35s linear infinite;
  will-change: transform;
}

.hero-photo-item {
  flex: 0 0 260px;
  width: 260px;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  opacity: 0.22;            /* very subtle — lets text stay readable */
  filter: brightness(0.7) saturate(0.8);
  transition: opacity 0.3s;
}

.hero-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Make sure hero-content sits above the strip */
.hero-content {
  position: relative;
  z-index: 2;
}

/* ── Mobile: lighter strip, smaller items ── */
@media (pointer: coarse) {
  .hero-photo-item {
    flex: 0 0 180px;
    width: 180px;
    height: 130px;
    opacity: 0.15;
  }
  .hero-photo-track {
    animation-duration: 50s;
    gap: 12px;
  }
}