/* ================================================================
   VOELLMIN — SECTIONS.CSS v3.0
   ================================================================ */

#v-gl { position: fixed; inset: 0; z-index: 0; opacity: 0; will-change: contents; }
#v-particles { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; }
.v-vig {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 130% 110% at 50% 36%, transparent 8%, rgba(2,2,2,0.55) 50%, rgba(2,2,2,0.97) 100%);
}
#v-site { position: relative; z-index: 3; opacity: 0; }

/* ── HERO ── */
#hero {
  min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding-left: calc(clamp(22px,6vw,110px) + var(--safe-l));
  padding-right: calc(clamp(22px,6vw,110px) + var(--safe-r));
  padding-top: clamp(96px,16vh,150px);
  padding-bottom: clamp(88px,13vh,130px);
  position: relative; overflow: hidden;
}

.hero-date { font-family: var(--mono); font-size: clamp(0.44rem,1.6vw,0.52rem); letter-spacing: .44em; text-transform: uppercase; color: var(--cream-30); margin-bottom: clamp(28px,5.5vh,52px); opacity: 0; transition: opacity .9s; }
.hero-date.is-visible { opacity: 1; }

.hero-crest-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-bottom: clamp(22px,4vh,44px); }
.hero-crest-ring { position: absolute; inset: calc(-1 * clamp(22px,5vw,36px)); border: 1px solid rgba(191,160,80,0.1); border-radius: 50%; opacity: 0; will-change: transform; transition: opacity 2s; }
.hero-crest-ring--inner { inset: calc(-1 * clamp(14px,3.2vw,22px)); border-color: rgba(191,160,80,0.06); }
.hero-crest-ring.is-visible { opacity: 1; }

.hero-crest {
  width: clamp(100px,22vw,200px); height: auto; opacity: 0;
  filter: drop-shadow(0 0 80px rgba(191,160,80,0.25)) drop-shadow(0 0 30px rgba(191,160,80,0.12)) drop-shadow(0 2px 8px rgba(0,0,0,0.9));
  will-change: transform, opacity; transition: opacity 1.6s;
  object-fit: contain;
}
.hero-crest.is-visible { opacity: 1; }

.hero-greet { font-family: var(--mono); font-size: clamp(0.46rem,1.7vw,0.56rem); letter-spacing: .56em; text-transform: uppercase; color: var(--gold); margin-bottom: clamp(10px,1.8vh,16px); opacity: 0; transition: opacity .8s; }
.hero-greet.is-visible { opacity: 1; }

.hero-title {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(4.5rem,19vw,18rem) !important;
  line-height: 0.85; letter-spacing: 0.02em; color: var(--cream);
  display: flex; justify-content: center; flex-wrap: nowrap; margin-bottom: clamp(16px,2.8vh,30px); max-width: 100%;
}

.hero-rule { width: clamp(30px,9vw,80px); height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: 0 auto clamp(14px,2.2vh,22px); opacity: 0; transform: scaleX(0); transition: opacity 1s, transform 1s var(--ease-exp); }
.hero-rule.is-visible { opacity: 1; transform: scaleX(1); }

.hero-sub { font-family: var(--mono); font-size: clamp(0.46rem,1.7vw,0.56rem); letter-spacing: .48em; text-transform: uppercase; color: var(--cream-30); margin-bottom: clamp(40px,8vh,90px); opacity: 0; transition: opacity .9s; }
.hero-sub.is-visible { opacity: 1; }

.hero-ctas { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 380px; opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease-exp), transform 1s var(--ease-exp); }
.hero-ctas.is-visible { opacity: 1; transform: none; }
@media (min-width: 580px) { .hero-ctas { flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: none; width: auto; } }

.hero-scroll { position: absolute; bottom: calc(clamp(20px,4vh,44px) + var(--safe-b)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; transition: opacity .8s; }
.hero-scroll.is-visible { opacity: 1; }
@media (max-height: 620px) { .hero-scroll { display: none; } }
.hero-scroll__text { font-family: var(--mono); font-size: clamp(0.38rem,1.4vw,0.44rem); letter-spacing: .44em; text-transform: uppercase; color: var(--cream-30); }
.hero-scroll__line { width: 1px; height: clamp(36px,6vh,54px); background: linear-gradient(to bottom, rgba(191,160,80,0.65), transparent); animation: scroll-line 2.8s ease-in-out infinite; }
@keyframes scroll-line { 0%,100% { opacity:.2; transform:scaleY(0.6); } 50% { opacity:1; transform:scaleY(1); } }

/* ── 3D GALLERY / PHOTO ROOM ── */
#gallery3d {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--deep);
}
#gallery3d canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.gallery3d-label {
  position: absolute;
  bottom: clamp(30px, 5vh, 60px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: clamp(0.42rem, 1.4vw, 0.5rem);
  letter-spacing: 0.48em;
  text-transform: uppercase;
  color: var(--cream-30);
  z-index: 5;
  text-align: center;
}
.gallery3d-scroll-hint {
  position: absolute;
  top: 50%;
  right: clamp(20px, 4vw, 48px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 5;
  opacity: 0;
  transition: opacity 1s;
}
.gallery3d-scroll-hint.is-visible { opacity: 1; }
.gallery3d-scroll-hint span { font-family: var(--mono); font-size: 0.42rem; letter-spacing: .4em; text-transform: uppercase; color: var(--cream-30); writing-mode: vertical-rl; text-orientation: mixed; }
.gallery3d-scroll-hint__line { width: 1px; height: 60px; background: linear-gradient(to bottom, var(--gold-a40), transparent); animation: scroll-line 2.8s ease-in-out infinite; }

/* ── ABOUT ── */
#about { padding: var(--section-pad) 0; overflow: hidden; }
.about-grid { display: grid; grid-template-columns: 1fr; gap: clamp(52px,9vw,130px); align-items: center; }
@media (min-width: 960px) { .about-grid { grid-template-columns: 1fr 1fr; } }
.about-heading { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(2.2rem,7.5vw,5.5rem) !important; line-height: 1.0; color: var(--cream); margin-bottom: clamp(24px,4.5vh,44px); }
.about-body { font-family: var(--mono); font-size: clamp(0.62rem,2vw,0.72rem) !important; line-height: 2.2; color: var(--cream-55); max-width: 520px; opacity: 0; transform: translateY(18px); margin-bottom: clamp(18px,3vh,28px); transition: opacity .9s var(--ease-exp), transform .9s var(--ease-exp); }
.about-body.is-visible { opacity: 1; transform: none; }
.about-body strong { color: var(--cream-80); font-weight: 400; }
.about-image-frame { position: relative; opacity: 0; max-width: 600px; margin: 0 auto; transition: opacity 1.4s var(--ease-exp); }
.about-image-frame.is-visible { opacity: 1; }
@media (min-width: 960px) { .about-image-frame { max-width: none; } }
.about-image-frame::before { content: ''; position: absolute; inset: -14px; border: 1px solid rgba(191,160,80,0.1); z-index: 0; pointer-events: none; }
.about-image-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(2,2,2,0) 55%, rgba(2,2,2,0.92)); z-index: 1; pointer-events: none; }
.about-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; filter: brightness(0.65) saturate(0.75); }
.about-image-caption { position: absolute; bottom: clamp(14px,3vw,24px); right: clamp(14px,3vw,24px); font-family: var(--mono); font-size: clamp(0.38rem,1.3vw,0.44rem); letter-spacing: .3em; color: var(--cream-30); z-index: 2; }
.about-image-frame__corner { position: absolute; width: 14px; height: 14px; z-index: 3; }
.about-image-frame__corner--tl { top: -1px; left: -1px; border-top: 2px solid var(--gold-a40); border-left: 2px solid var(--gold-a40); }
.about-image-frame__corner--tr { top: -1px; right: -1px; border-top: 2px solid var(--gold-a40); border-right: 2px solid var(--gold-a40); }
.about-image-frame__corner--bl { bottom: -1px; left: -1px; border-bottom: 2px solid var(--gold-a40); border-left: 2px solid var(--gold-a40); }
.about-image-frame__corner--br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--gold-a40); border-right: 2px solid var(--gold-a40); }

/* ── TIMELINE ── */
#timeline { padding: var(--section-pad) 0; background: var(--surface); overflow: hidden; }
.timeline-intro { text-align: center; max-width: 680px; margin: 0 auto clamp(56px,9vh,110px); opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-exp), transform .9s var(--ease-exp); }
.timeline-intro.is-visible { opacity: 1; transform: none; }
.timeline-intro h2 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(2rem,6.5vw,4.5rem) !important; color: var(--cream-80); margin-bottom: 14px; line-height: 1.05; }
.timeline-intro p { font-family: var(--mono); font-size: clamp(0.52rem,1.7vw,0.6rem); letter-spacing: .44em; text-transform: uppercase; color: var(--cream-30); }

/* ── PORTALS ── */
#portals { padding: var(--section-pad) 0; }
.portals-head { margin-bottom: clamp(40px,7vh,80px); opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-exp), transform .9s var(--ease-exp); }
.portals-head.is-visible { opacity: 1; transform: none; }
.portals-head h2 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(2rem,6.5vw,4.5rem) !important; color: var(--cream-80); margin-bottom: 12px; }
.portals-head p { font-family: var(--mono); font-size: clamp(0.52rem,1.7vw,0.6rem); letter-spacing: .44em; text-transform: uppercase; color: var(--cream-30); }

/* ── FEATURES ── */
#features { padding: var(--section-pad) 0; background: var(--surface); overflow: hidden; }
.features-head { padding: 0 var(--pad-x); padding-left: calc(var(--pad-x) + var(--safe-l)); margin-bottom: clamp(36px,6vh,68px); opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-exp), transform .9s var(--ease-exp); }
.features-head.is-visible { opacity: 1; transform: none; }
.features-head h2 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(2rem,6.5vw,4.5rem) !important; color: var(--cream-80); margin-bottom: 12px; }
.features-head p { font-family: var(--mono); font-size: clamp(0.52rem,1.7vw,0.6rem); letter-spacing: .44em; text-transform: uppercase; color: var(--cream-30); }

/* ── ACCESS ── */
#access { padding: var(--section-pad) 0; }
.access-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(22px,4vh,48px); border-bottom: 1px solid var(--edge); padding-bottom: clamp(16px,2.8vh,28px); opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease-exp), transform .9s var(--ease-exp); }
.access-head.is-visible { opacity: 1; transform: none; }
.access-head h2 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.4rem,5vw,2.2rem) !important; color: var(--cream-80); }
.access-head p { font-family: var(--mono); font-size: clamp(0.44rem,1.6vw,0.5rem); letter-spacing: .32em; text-transform: uppercase; color: var(--cream-30); }

/* ── VALUES ── */
#values { padding: var(--section-pad) 0; background: var(--surface); overflow: hidden; }
.values-top { display: grid; grid-template-columns: 1fr; gap: clamp(40px,7vh,88px); margin-bottom: clamp(52px,9vh,110px); }
@media (min-width: 960px) { .values-top { grid-template-columns: 1fr 1fr; align-items: end; } }
.values-heading { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(2.2rem,7.5vw,5.5rem) !important; line-height: 1.0; color: var(--cream); }
.values-intro-text { font-family: var(--mono); font-size: clamp(0.62rem,2vw,0.72rem); line-height: 2.2; color: var(--cream-55); opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease-exp), transform .9s var(--ease-exp); }
.values-intro-text.is-visible { opacity: 1; transform: none; }

/* ── KONTAKT ── */
#kontakt { padding: var(--section-pad) 0; overflow: hidden; }
.kontakt-grid { display: grid; grid-template-columns: 1fr; gap: clamp(52px,9vw,120px); }
@media (min-width: 960px) { .kontakt-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.kontakt-heading { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(2rem,7vw,4.8rem) !important; line-height: 1.05; color: var(--cream); margin-bottom: clamp(22px,4vh,38px); opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-exp), transform .9s var(--ease-exp); }
.kontakt-heading.is-visible { opacity: 1; transform: none; }
.kontakt-body { font-family: var(--mono); font-size: clamp(0.62rem,2vw,0.72rem); line-height: 2.2; color: var(--cream-55); max-width: 480px; margin-bottom: clamp(32px,5.5vh,56px); opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease-exp), transform .9s var(--ease-exp); }
.kontakt-body.is-visible { opacity: 1; transform: none; }
.kontakt-links-wrap { display: flex; flex-direction: column; gap: 2px; opacity: 0; transition: opacity .9s var(--ease-exp); }
.kontakt-links-wrap.is-visible { opacity: 1; }
.kontakt-right { background: var(--surface); border: 1px solid var(--edge); padding: clamp(32px,5.5vw,60px) clamp(28px,5vw,52px); opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-exp), transform .9s var(--ease-exp); }
.kontakt-right.is-visible { opacity: 1; transform: none; }
.kontakt-form-title { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.3rem,4.5vw,2rem); color: var(--cream-80); margin-bottom: clamp(24px,4.5vh,40px); }

/* ── CLOSING ── */
#closing { padding: clamp(90px,16vh,200px) clamp(28px,12vw,220px); text-align: center; }
@media (max-width: 640px) { #closing { padding-left: calc(clamp(28px,7vw,44px) + var(--safe-l)); padding-right: calc(clamp(28px,7vw,44px) + var(--safe-r)); } }
.closing-line { display: block; width: 1px; height: clamp(52px,9vh,80px); background: linear-gradient(to bottom, transparent, rgba(191,160,80,0.45)); margin: 0 auto clamp(30px,5.5vh,52px); opacity: 0; transition: opacity 1.2s; }
.closing-line.is-visible { opacity: 1; }
.closing-quote { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.4rem,5.5vw,3.4rem) !important; line-height: 1.45; color: var(--cream-30); max-width: 800px; margin: 0 auto; opacity: 0; transform: translateY(24px); transition: opacity 1.2s var(--ease-exp), transform 1.2s var(--ease-exp); }
.closing-quote.is-visible { opacity: 1; transform: none; }
.closing-quote em { font-style: normal; color: var(--cream); }
.closing-attr { font-family: var(--mono); font-size: clamp(0.44rem,1.5vw,0.52rem); letter-spacing: .44em; text-transform: uppercase; color: rgba(191,160,80,0.3); margin-top: clamp(22px,4vh,36px); opacity: 0; display: block; transition: opacity 1s; }
.closing-attr.is-visible { opacity: 1; }