/* root variables */
:root{
  --bg: #120b07;
  --text: #cfc6bb;
  --card-radius: 16px;
  --edge-height: 32px;
  --card-border: rgba(220,180,130,0.30);
  --thickness: 6px; /* Platte */
  --metal-highlight: rgba(255,235,190,0.26);
  --side-dark: rgba(80,55,35,0.40);
}

/* basic layout */
html,body{height:100%;}
body{
  margin:0;
  min-height:100vh;
  background-color:var(--bg);
  display:grid;
  place-items:center;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* scene for 3D-perspective */
.scene{
  perspective: 1200px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4vh 2vw;
  box-sizing:border-box;
}

.card{
  width: min(70vw, 420px);
  border-radius: var(--card-radius);
  overflow: visible;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: center center;
  display: block;
  border: 1px solid var(--card-border);
  background-clip: padding-box;
  /* starting perspective tilt */
  transform: rotateX(6deg) rotateY(-8deg);
  will-change: transform;
  /* animation applied below */
  -webkit-touch-callout: none; /* disable iOS long-press menu */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ensure children also inherit non-selectable */
.card *{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 3D rotation keyframes: oscillate Y rotation while keeping slight X tilt */
@keyframes card-tilt {
  0% {
    transform: rotateX(6deg) rotateY(-38deg);
    box-shadow: 0 0 20px var(--metal-highlight), 0 12px 36px rgba(255,255,255,0.03), 0 18px 40px rgba(0,0,0,0.6);
  }
  50% {
    transform: rotateX(6deg) rotateY(38deg);
    /* a noticeably brighter highlight when the face turns to light */
    box-shadow: 0 0 40px rgba(255,245,200,0.12), 0 12px 36px rgba(255,255,255,0.05), 0 18px 48px rgba(0,0,0,0.66);
  }
  100% {
    transform: rotateX(6deg) rotateY(-38deg);
    box-shadow: 0 0 20px var(--metal-highlight), 0 12px 36px rgba(255,255,255,0.03), 0 18px 40px rgba(0,0,0,0.6);
  }
}

/* apply animation: long, smooth, infinite */
.card{
  animation: card-tilt 20s ease-in-out infinite; /* longer, calmer rotation */
}

/* animated specular stripe sliding along the side faces */
@keyframes side-specular{
  0%{ background-position: 0 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0 50%; }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce){
  .card{ animation: none; transform: rotateX(6deg) rotateY(-8deg); }
}

/* On small screens keep thickness smaller for better visuals */
@media (max-width: 520px){
  :root{ --edge-height: 44px; --thickness: 6px; }
  .card{ width: min(92vw, 360px); /* keep responsive width */ }
  .card-media img{ transform: none; }
  .card-label{ font-size:0.78rem; padding:0.2rem 0.4rem; }
}

/* media area holds the image and takes remaining space */
.card-media{
  display: block;
  width: 100%;
  box-sizing: border-box;
  /* inset the media by the thickness so the image doesn't extend beneath the metallic sides */
  padding-left: var(--thickness);
  padding-right: var(--thickness);
}
.card-media img{
  width: 100%;
  height: auto; /* ensure full image visible, no vertical cropping */
  display: block;
  transform: translateZ(12px);
}

/* card edges: top and bottom, reserved for labels */
.card-edge{
  height: var(--edge-height);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  /* align padding with the media inset so labels are flush with the visible image */
  padding-left: var(--thickness);
  padding-right: var(--thickness);
  box-sizing:border-box;
  background: linear-gradient(180deg, rgba(11,5,3,0.06), rgba(0,0,0,0.04));
  position: relative;
}
.card-edge.bottom{
  justify-content:flex-end;
}

.card-label{
  position: relative; /* inside edge */
  z-index: 3;
  color: var(--text);
  font-weight: 400;
  font-size: 0.8rem;
  padding: 0.25rem 0.0rem;
  background: rgba(11,5,3,0.5);
  border-radius: 6px;
  backdrop-filter: blur(4px) saturate(1.05);
  box-shadow: 0 6px 18px rgba(255,255,255,0.03), 0 6px 20px rgba(0,0,0,0.45);
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.card-label.top-left{
  margin-left: 4px;
}

.card-label.bottom-right{
  margin-right: 4px;
}

/* paused state: when data-paused is set on .card */
.card[data-paused="true"]{
  animation-play-state: paused;
  /* subtle visual cue: slightly brighter border and gentle scale */
  border-color: rgba(255,240,210,0.38);
}

/* ensure prefers-reduced-motion still overrides */
@media (prefers-reduced-motion: reduce){
  .card[data-paused="true"]{ transform: rotateX(6deg) rotateY(-8deg); }
}