@import "_reset.css";

/* —— Base —— */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:16px; line-height:1.5; color:#fff; background:#000;
  background: #000;
  transition: background 1s ease;
}

body.intro-active {
  background: #fff;
}
a,button{ color:inherit; text-decoration:none; font:inherit; }

/* —— Stage —— */
.stage{
  position:relative; width:100%; height:100dvh; overflow:hidden;
  transition:filter .35s ease; will-change:filter;
}

/* Stelle sicher, dass .stage scrollen darf */
.stage {
  overflow-x: auto;
  overflow-y: hidden;
}


.pill-anchor {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 20px);
  z-index: 99999;
}


/* Einheitliche BRAND-PILL (Home & Overlay) – Outline only */
.brand-pill{
  display: inline-block;
  padding: .15rem 0.9rem;
  border-radius:999px;
  font-weight:600;
  border: 1.5px solid currentColor;
  background: transparent;
  box-shadow:none;
  cursor:pointer;
}
.stage .brand-pill{ color:#fff; } /* Home: weiß */

/* —— Artboard —— */
.artboard{ position:absolute; inset:0; transform-origin:0 0; }
.art-fallback{
  position:absolute; left:0; top:0; width:3840px; height:2161px;
  background:linear-gradient(135deg,#222,#111);
}
.art-img{
  position:absolute; left:0; top:0; width:3840px; height:2161px;
  display:block; user-select:none; -webkit-user-drag:none; pointer-events:none;
}

/* —— Hotspots —— */
.hotspot-layer{
  position:absolute; left:0; top:0; width:3840px; height:2161px;
  list-style:none; z-index:250;
}
.hotspot{ position:absolute; top:calc(var(--y) * 1px); left:calc(var(--x) * 1px); transform:translate(-50%,-50%); }
.pin{ position:relative; width:0; height:0; border:none; background:transparent; cursor:pointer; }
.pin-core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.95);
  width:40px; height:40px; border-radius:999px; background:#fff;
  box-shadow:0 0 10px 5px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.35);
  z-index:2;
}
.pin-halo{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:100px; height:100px; border-radius:999px; border:2px solid rgba(255,255,255,.95);
  background:rgba(255,255,255,.06); box-shadow:0 0 10px 4px rgba(0,0,0,.25) inset;
  animation:haloPulse 2.2s ease-in-out infinite; z-index:1;
}

.project-content,
.gallery,
.text-block,
.dein-container {
  max-width: none;
  width: 100vw;
  overflow-wrap: break-word;
  hyphens: auto;
  margin: 0;
  padding: 0;
}

.project-layout {
  max-width: 1920px;       /* <- maximale Breite, danach bleibt’s fix */
  margin: 0 auto;          /* <- zentriert die Inhalte */
  width: 100%;             /* <- erlaubt, dass es kleiner werden kann */
  padding: 0 20px;         /* <- optional: Abstand am Rand für kleine Screens */
  box-sizing: border-box;  /* <- verhindert Überlauf */
}

@media (min-width: 1921px) {
  .project-content,
  .gallery,
  .text-block,
  .dein-container {
    max-width: none;
    padding-left: 2vw;
    padding-right: 2vw;
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

.room-image {
  max-width: 100%;
  height: 100vh;
  width: auto;
}

@media (min-width: 1920px) {
  .room-image {
    height: auto;
    max-height: 1080px;
  }
}


.pin-halo::after{
  content:""; position:absolute; left:50%; top:50%; width:170px; height:170px; border-radius:999px;
  transform: translate(-50%, -50%) scale(.65); border:7px solid rgba(255,255,255,.95);
  opacity:0; animation: ripple 2.2s ease-out infinite; box-shadow: 0 0 14px rgba(0,0,0,.25);
}
@keyframes haloPulse{ 0%{opacity:0; transform:translate(-50%,-50%) scale(.20);} 35%{opacity:.85;} 100%{opacity:0; transform:translate(-50%,-50%) scale(1);} }
@keyframes ripple{ 10%{opacity:0; transform:translate(-50%,-50%) scale(.65);} 30%{opacity:.9;} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.22);} }

/* —— Bubble —— */
.bubble{
  position:absolute; bottom:100%; left:50%; transform: translate(-50%, -12px);
  background:#fff; color:#111; font-weight:700; line-height:1; font-size:2rem;
  padding:1rem 1rem; border-radius:999px; white-space:nowrap; box-shadow:0 0 10px rgba(0,0,0,.25);
  opacity:0; pointer-events:none; transition: opacity .15s ease, transform .15s ease; z-index:3;
}

@media (max-width: 500px){
  .bubble {
    opacity: 1;
    pointer-events: auto;
    z-index: 10;
  }

  .hotspot .pin,
  .hotspot .pin-core,
  .hotspot .pin-halo {
    display: none;
  }
}

.bubble .caret{
  position:absolute; left:50%; bottom:-6px; transform: translateX(-50%) rotate(45deg);
  width:10px; height:10px; background:#fff; border-radius:2px 0 0 0; box-shadow:0 0 10px rgba(0,0,0,.1);
}
.hotspot:hover .pin-core, .hotspot:focus-within .pin-core{ opacity:0; transition: opacity .12s ease; }
.hotspot:hover .pin-halo, .hotspot:focus-within .pin-halo{ animation:none !important; opacity:0 !important; transition: opacity .12s ease; }
.hotspot:hover .pin-halo::after, .hotspot:focus-within .pin-halo::after{ animation:none !important; opacity:0 !important; transition: opacity .12s ease; }
.hotspot:hover .bubble, .hotspot:focus-within .bubble{ opacity:1; transform: translate(-50%, -6px); pointer-events:auto; }


/* =========================
   ProjectView (Overlay + Inhalt)
   ========================= */
#projectView[data-active] .project-content{ display:none; }
#projectView[data-active="metamorphose"] .project-content[data-project="metamorphose"],
#projectView[data-active="ohneangstkeinwille"] .project-content[data-project="ohneangstkeinwille"],
#projectView[data-active="kollektion"] .project-content[data-project="kollektion"],
#projectView[data-active="floralfantasies"]    .project-content[data-project="floralfantasies"],
#projectView[data-active="zamino72"] .project-content[data-project="zamino72"],
#projectView[data-active="symbolsandsigns"]    .project-content[data-project="symbolsandsigns"],
#projectView[data-active="thefacesofhelvetica"] .project-content[data-project="thefacesofhelvetica"],
#projectView[data-active="diefrauenhinterdenhits"] .project-content[data-project="diefrauenhinterdenhits"],
#projectView[data-active="about"] .project-content[data-project="about"] {
  display: block;
}

#projectView{
  position:fixed; 
  inset:0; 
  z-index:1000;
  display:block;
  background:rgba(0,0,0,.18);
  backdrop-filter: blur(6px); 
  -webkit-backdrop-filter: blur(6px);
  opacity:0; pointer-events:none; 
  transition:opacity .35s ease;
  overflow-y:auto; 
  cursor:default;
}

#projectView.is-open,
#projectView[aria-hidden="false"]{ opacity:1; pointer-events:auto; }

.project-hero[src=""]{ opacity: 0; }

/* Hero */
.hero-wrap{ position:relative; width:100vw; height:100vh; }
.project-hero{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; user-select:none; -webkit-user-drag:none; pointer-events:none;
}
#projectView .brand-pill{
  position:absolute; top:calc(env(safe-area-inset-top, 0px) + 20px);
  left:50%; transform:translateX(-50%);
}
#projectView[data-pill="light"] .brand-pill{ color:#fff; }
#projectView[data-pill="dark"]  .brand-pill{ color:#000; }

/* Wenn Overlay offen: Hintergrund blur + Hotspots aus */
body.is-project-open .stage{ filter: blur(8px) brightness(.85) saturate(.95); }
body.is-project-open .pin-halo, body.is-project-open .pin-halo::after{ animation:none !important; opacity:0 !important; }
body.is-project-open .hotspot-layer{ pointer-events:none; }
body.is-project-open{ overflow:hidden; }