@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Cinzel:wght@400;700;900&display=swap');

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

:root {
  --black:       #050507;
  --marble-dark: #0d0d10;
  --gold:        #b8922a;
  --crimson:     #5a0a14;
  --green-hack:  #00ff41;
  --cyan-hack:   #00e5ff;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--black);
  color: var(--green-hack);
  font-family: 'Share Tech Mono', monospace;
}

body {
  background-color: var(--marble-dark);
  background-image:
    repeating-linear-gradient(118deg, transparent, transparent 60px, rgba(255,255,255,0.012) 60px, rgba(255,255,255,0.012) 61px),
    repeating-linear-gradient(42deg,  transparent, transparent 80px, rgba(255,255,255,0.008) 80px, rgba(255,255,255,0.008) 81px),
    repeating-linear-gradient(200deg, transparent, transparent 100px, rgba(255,255,255,0.006) 100px, rgba(255,255,255,0.006) 101px),
    radial-gradient(ellipse at 20% 30%, #0f0f13 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, #12111a 0%, transparent 50%),
    linear-gradient(160deg, #0c0c10 0%, #111115 40%, #0e0e12 100%);
}

/* ── SCANLINES ── */
.scanlines {
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.18) 2px, rgba(0,0,0,0.18) 4px);
  pointer-events: none;
  z-index: 10;
  animation: scanMove 8s linear infinite;
}
@keyframes scanMove {
  from { background-position: 0 0; }
  to   { background-position: 0 100px; }
}

/* ── NOISE ── */
.noise {
  position: fixed;
  inset: 0;
  opacity: 0.04;
  pointer-events: none;
  z-index: 11;
  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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: noiseFlicker 0.15s steps(1) infinite;
}
@keyframes noiseFlicker {
  0%,100% { opacity: 0.03; }
  50%     { opacity: 0.06; }
}

/* ── LAYOUT ── */
.container {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 2rem;
  gap: 0;
}

/* ── GLITCH HEADER ── */
.glitch-header {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: clamp(1.2rem, 3.5vw, 2.6rem);
  letter-spacing: 0.4em;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(184,146,42,0.45), 0 0 40px rgba(184,146,42,0.15);
  position: relative;
  margin-bottom: 1.8rem;
  animation: headerGlitch 7s infinite;
}
.glitch-header::before,
.glitch-header::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
}
.glitch-header::before {
  color: var(--cyan-hack);
  opacity: 0;
  animation: glitchTop 7s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);
}
.glitch-header::after {
  color: var(--crimson);
  opacity: 0;
  animation: glitchBot 7s infinite;
  clip-path: polygon(0 58%, 100% 58%, 100% 100%, 0 100%);
}
@keyframes headerGlitch {
  0%,90%,100% { transform: translate(0); filter: none; }
  91% { transform: translate(-3px,1px); filter: hue-rotate(90deg); }
  92% { transform: translate(3px,-1px); }
  93% { transform: translate(0); }
  95% { transform: translate(-2px,2px); filter: hue-rotate(-40deg); }
  96% { transform: translate(0); filter: none; }
}
@keyframes glitchTop {
  0%,89%,94%,100% { opacity:0; transform:translate(0); }
  90% { opacity:0.8; transform:translate(-5px,-2px); }
  91% { opacity:0.4; transform:translate(4px,0); }
  92% { opacity:0; }
}
@keyframes glitchBot {
  0%,89%,94%,100% { opacity:0; transform:translate(0); }
  90% { opacity:0.7; transform:translate(5px,2px); }
  91% { opacity:0.35; transform:translate(-3px,1px); }
  92% { opacity:0; }
}

/* ── ROSE WRAPPER ── */
.rose-wrapper {
  position: relative;
  width: 280px;
  height: 280px;
  margin-bottom: 1.8rem;
}

/* ── ROSE IMAGE ── */
.rose-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 2;
  /* Invert black→white, then tint gold/dark */
  filter: invert(1) sepia(1) saturate(0.3) brightness(0.55) hue-rotate(320deg);
  animation: roseFloat 5s ease-in-out infinite, rosePulse 3s ease-in-out infinite;
  mix-blend-mode: screen;
}

@keyframes roseFloat {
  0%,100% { transform: translateY(0px) rotate(0deg); }
  50%     { transform: translateY(-7px) rotate(0.4deg); }
}
@keyframes rosePulse {
  0%,100% { filter: invert(1) sepia(1) saturate(0.3) brightness(0.55) hue-rotate(320deg) drop-shadow(0 0 14px rgba(90,10,20,0.8)) drop-shadow(0 0 40px rgba(90,10,20,0.35)); }
  50%     { filter: invert(1) sepia(1) saturate(0.5) brightness(0.65) hue-rotate(320deg) drop-shadow(0 0 22px rgba(120,20,35,0.95)) drop-shadow(0 0 60px rgba(100,15,25,0.5)); }
}

/* ── ROSE GLITCH CLONES ── */
.rose-glitch-clone {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: var(--rose-bg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
}
#glitchClone1 {
  animation: roseGlitch1 4.5s infinite;
  mix-blend-mode: screen;
}
#glitchClone2 {
  animation: roseGlitch2 4.5s infinite 0.06s;
  mix-blend-mode: screen;
}

@keyframes roseGlitch1 {
  0%,82%,100% { opacity:0; transform:translate(0); clip-path:none; }
  83% { opacity:0.9; transform:translate(-8px,2px) scaleX(1.05); clip-path:polygon(0 15%,100% 15%,100% 45%,0 45%); filter:hue-rotate(160deg) brightness(1.8); }
  84% { opacity:0.6; transform:translate(6px,-3px); clip-path:polygon(0 55%,100% 55%,100% 80%,0 80%); filter:hue-rotate(20deg); }
  85% { opacity:0; }
  90% { opacity:0.7; transform:translate(-4px,5px); clip-path:polygon(0 5%,100% 5%,100% 30%,0 30%); filter:hue-rotate(200deg) brightness(1.5); }
  91% { opacity:0; }
}
@keyframes roseGlitch2 {
  0%,82%,100% { opacity:0; transform:translate(0); }
  83% { opacity:0.5; transform:translate(9px,1px); clip-path:polygon(0 35%,100% 35%,100% 65%,0 65%); filter:hue-rotate(-40deg) brightness(2); }
  84% { opacity:0; }
  89% { opacity:0.65; transform:translate(-6px,-4px); clip-path:polygon(0 60%,100% 60%,100% 90%,0 90%); filter:hue-rotate(80deg) brightness(1.6); }
  90% { opacity:0; }
}

/* ── COMING SOON ── */
.coming-soon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}

.terminal-line {
  font-size: 0.72rem;
  color: var(--green-hack);
  opacity: 0.75;
  letter-spacing: 0.08em;
  height: 1.2em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.cursor-blink {
  animation: cursorBlink 0.8s step-end infinite;
}
@keyframes cursorBlink {
  0%,100% { opacity:1; }
  50%     { opacity:0; }
}

.coming-soon {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: clamp(2rem, 5.5vw, 4rem);
  letter-spacing: 0.28em;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold);
  text-shadow: 0 0 20px rgba(184,146,42,0.5), 0 0 60px rgba(184,146,42,0.2);
  position: relative;
  animation: comingSoonGlitch 5.5s infinite;
}
.coming-soon::before,
.coming-soon::after {
  content: attr(data-text);
  position: absolute;
  top:0; left:0;
  -webkit-text-stroke: 1px transparent;
}
.coming-soon::before {
  color: var(--cyan-hack);
  opacity: 0;
  animation: csGlitchA 5.5s infinite;
  clip-path: polygon(0 15%,100% 15%,100% 50%,0 50%);
}
.coming-soon::after {
  color: var(--crimson);
  opacity: 0;
  animation: csGlitchB 5.5s infinite;
  clip-path: polygon(0 55%,100% 55%,100% 85%,0 85%);
}
@keyframes comingSoonGlitch {
  0%,86%,100% { transform:translate(0); filter:none; }
  87% { transform:translate(-4px,2px); filter:hue-rotate(110deg) brightness(1.3); }
  88% { transform:translate(4px,-2px); filter:none; }
  89% { transform:translate(-2px,1px); filter:hue-rotate(-50deg); }
  90% { transform:translate(0); filter:none; }
}
@keyframes csGlitchA {
  0%,86%,92%,100% { opacity:0; transform:translate(0); }
  87% { opacity:0.8; transform:translate(-5px,-3px); }
  88% { opacity:0.4; transform:translate(3px,2px); }
  89% { opacity:0; }
}
@keyframes csGlitchB {
  0%,86%,92%,100% { opacity:0; transform:translate(0); }
  87% { opacity:0.7; transform:translate(5px,3px); }
  88% { opacity:0.35; transform:translate(-3px,-1px); }
  90% { opacity:0; }
}

.subline {
  font-family: 'Share Tech Mono', monospace;
  font-size: clamp(0.5rem, 1.1vw, 0.65rem);
  letter-spacing: 0.22em;
  color: var(--crimson);
  opacity: 0.8;
  text-transform: uppercase;
  animation: sublineFlicker 4s steps(1) infinite;
}
@keyframes sublineFlicker {
  0%,85%,100% { opacity:0.8; }
  86% { opacity:0.1; }
  87% { opacity:0.9; }
  88% { opacity:0.3; }
  89% { opacity:0.8; }
}

@media (max-width: 480px) {
  .rose-wrapper { width: 200px; height: 200px; }
  .glitch-header { letter-spacing: 0.2em; }
  .coming-soon { letter-spacing: 0.15em; }
}