/* ===================================================
   SPENGLEREI WÖGINI — Coming Soon
   Aesthetic: Modern Spickzettel — crisp, elevated
   =================================================== */

:root {
  --black: #0a0a0a;
  --charcoal: #222;
  --dark: #333;
  --stone: #666;
  --warm-gray: #999;
  --rule: #ddd;
  --paper: #faf8f4;
  --paper-edge: #ebe8e2;
  --bg: #d5d2cc;
  --font-display: Georgia, serif;
  --font-logo: Georgia, "Times New Roman", serif;
  --font-body: Georgia, "Times New Roman", serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  color: var(--dark);
  background: linear-gradient(135deg, #c9c5be 0%, #ddd9d3 40%, #e8e5e0 70%, #d0cdc7 100%) fixed;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  perspective: 1200px;
  overflow-x: hidden;
}

/* ---- Card ---- */
/* ---- Card wrapper (carries the shadow) ---- */
.card-wrap {
  position: relative;
  max-width: 520px;
  width: 100%;
  transform: rotateY(-2deg) rotateX(1.5deg);
  transform-style: preserve-3d;
  animation: cardIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,0.06))
    drop-shadow(0 8px 20px rgba(0,0,0,0.08))
    drop-shadow(0 20px 50px rgba(0,0,0,0.12));
  transition: filter 0.4s ease;
}

/* Radial spotlight glow behind the card */
.card-wrap::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: radial-gradient(ellipse at center,
    rgba(255, 250, 240, 0.4) 0%,
    rgba(255, 248, 235, 0.15) 35%,
    transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.card-wrap:hover {
  filter:
    drop-shadow(0 3px 6px rgba(0,0,0,0.05))
    drop-shadow(0 10px 25px rgba(0,0,0,0.07))
    drop-shadow(0 25px 60px rgba(0,0,0,0.10));
}

/* ---- Card (clipped corner) ---- */
.card {
  position: relative;
  background: var(--paper);
  width: 100%;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%);
  animation: clipPeek 4s ease-in-out 2s infinite;
}

@keyframes clipPeek {
  0%, 100% {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%);
  }
  50% {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%);
  }
}

/* ---- Dog-ear (separate element) ---- */
.dog-ear {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 32px;
  height: 32px;
  background: linear-gradient(315deg, transparent 42%, #b5b0a8 44%, #d8d5ce 48%, #e8e5df 54%);
  z-index: 3;
  transform-origin: bottom right;
  animation: dogEarPeek 4s ease-in-out 2s infinite;
}

@keyframes dogEarPeek {
  0%, 100% {
    width: 32px;
    height: 32px;
  }
  50% {
    width: 44px;
    height: 44px;
  }
}

/* Paper texture overlay */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
  z-index: 1;
}

/* Tape strip at top */
.tape {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  width: 80px;
  height: 26px;
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(1px);
  border: 1px solid rgba(255,255,255,0.15);
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  animation: tapeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0s both;
}

@keyframes tapeIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) rotate(-1deg) translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) rotate(-1deg) translateY(0);
  }
}

@keyframes cardIn {
  0% {
    opacity: 0;
    transform: rotateY(-5deg) rotateX(4deg) translateY(30px) translateZ(0) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: rotateY(-2deg) rotateX(1.5deg) translateY(0) translateZ(0) scale(1);
  }
}



/* ---- Card content ---- */
.card-content {
  text-align: center;
  padding: 4rem 3.5rem 3.5rem;
  position: relative;
  z-index: 1;
}

/* ---- Logo monogram — Georgia ---- */
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

.logo .letter {
  font-family: var(--font-logo);
  font-size: 7rem;
  font-weight: 400;
  color: var(--black);
  line-height: 1;
  display: inline-block;
  width: 0.72em;
  text-align: center;
  animation: letterIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}

.logo .letter:last-child {
  animation-delay: 0.7s;
}

.logo .pipe {
  font-family: var(--font-logo);
  font-size: 6.5rem;
  font-weight: 300;
  color: var(--black);
  margin: 0 0.02em;
  line-height: 1;
  position: relative;
  top: -0.03em;
  animation: pipeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}

@keyframes letterIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pipeIn {
  0% {
    opacity: 0;
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* ---- Horizontal rules ---- */
.rule {
  height: 1px;
  background: var(--warm-gray);
  margin: 0 auto 2rem;
  animation: ruleGrow 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.85s both;
}

.rule.rule-sm {
  background: var(--warm-gray);
  margin: 0 auto 2rem;
  animation: ruleGrowSm 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.3s both;
}

@keyframes ruleGrow {
  0% {
    width: 0;
    opacity: 0;
  }
  100% {
    width: 40px;
    opacity: 1;
  }
}

@keyframes ruleGrowSm {
  0% {
    width: 0;
    opacity: 0;
  }
  100% {
    width: 40px;
    opacity: 1;
  }
}

/* ---- Company name ---- */
.card-content h1 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 1.2rem;
  animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both;
}

/* ---- Credentials ---- */
.credentials {
  font-size: 0.95rem;
  color: var(--stone);
  letter-spacing: 0.04em;
  line-height: 1.6;
  margin-bottom: 0.3rem;
  animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.05s both;
}

/* ---- Title Carousel ---- */
.title-carousel {
  height: 18px;
  overflow: hidden;
  margin-bottom: 1.6rem;
  animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.1s both;
}

.title-track {
  display: flex;
  flex-direction: column;
  animation: carouselScroll 10s cubic-bezier(0.45, 0, 0.55, 1) 2.5s infinite;
}

.title-track span {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--warm-gray);
  letter-spacing: 0.04em;
  height: 18px;
  line-height: 18px;
  flex-shrink: 0;
}

@keyframes carouselScroll {
  0%, 16%    { transform: translateY(0); }
  18%, 36%   { transform: translateY(-18px); }
  38%, 56%   { transform: translateY(-36px); }
  58%, 76%   { transform: translateY(-54px); }
  78%, 96%   { transform: translateY(-72px); }
  98%, 100%  { transform: translateY(0); }
}

/* ---- Slogan ---- */
.slogan {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 300;
  color: var(--stone);
  letter-spacing: 0.02em;
  margin-bottom: 2rem;
  animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.2s both;
}

/* ---- Status ---- */
.status {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--stone);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
  animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.4s both;
}

/* ---- Contact ---- */
.contact {
  animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.6s both;
}

.contact a {
  font-size: 0.9rem;
  color: var(--stone);
  text-decoration: none;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--warm-gray);
  padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s;
}

.contact a:hover {
  color: var(--black);
  border-bottom-color: var(--black);
}

/* ---- Shared fade-up animation ---- */
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Responsive ---- */
@media (max-width: 540px) {
  body {
    padding: 1.5rem 1rem;
  }

  .card-wrap {
    transform: rotateY(-1deg) rotateX(1deg);
  }

  .card-wrap::after {
    display: none;
  }

  .card-content {
    padding: 3rem 2rem 2.5rem;
  }

  .logo .letter {
    font-size: 5rem;
  }

  .logo .pipe {
    font-size: 4.5rem;
  }

  .card-content h1 {
    font-size: 1.1rem;
    letter-spacing: 0.14em;
  }
}