/* Main container - full black background */
.verse-container {
	min-height: 100dvh;
	width: 100%;
	background-color: #0a0a0a;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 7vh 7vw;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}

/* Subtle left border/frame */
.verse-container::before {
	content: '';
	position: absolute;
	left: 3vw;
	top: 15%;
	height: 70%;
	width: 2px;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		rgba(255, 255, 255, 0.15) 20%,
		rgba(255, 255, 255, 0.25) 50%,
		rgba(255, 255, 255, 0.15) 80%,
		transparent 100%
  	);
  	animation: fadeInLine 4s ease-out forwards;
  	opacity: 0;
}

@keyframes fadeInLine {
  	0% {
		opacity: 0;
		height: 0%;
		top: 50%;
  	}
  	100% {
		opacity: 1;
		height: 70%;
		top: 15%;
  	}
}

.ambient-glow {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    object-fit: cover;
    z-index: 0;
    mix-blend-mode: difference;
    filter: brightness(0.21) grayscale(.5);
}

/* Breathing animation for the glow */
@keyframes breathe {
  	0%, 100% {
    	opacity: 0.5;
    	transform: scale(1);
  	}
  	50% {
	    opacity: 1;
	    transform: scale(1.05);
  	}
}

/* Content wrapper */
.verse-content {
  	text-align: right;
  	max-width: 80vw;
}

/* Fade in and stronger pulse animation for verse text */
@keyframes fadeInPulse {
  	0% {
    	opacity: 0;
    	transform: translateY(15px);
  	}
  	50% {
    	opacity: 0.55;
    	transform: translateY(0);
  	}
  	100% {
    	opacity: 0.55;
    	transform: translateY(0);
  	}
}

@keyframes strongPulse {
  	0%, 100% {
    	opacity: 0.4;
  	}
  	50% {
	    opacity: 0.7;
  	}
}

/* Main verse text - DIN Next Slab Pro */
.verse-text {
	font-family: 'DIN Next Slab', serif;
	font-size: clamp(1.2rem, 3.5vw, 3rem);
	font-size: clamp(1.5rem, 6.5vw, 3rem);
	font-weight: 500;
	font-style: italic;
	color: rgba(255, 255, 255, 0.55);
	letter-spacing: 0.02em;
	text-wrap: balance;
	line-height: 1.215;
	margin: 0 0 0.4em 0;
	animation: fadeInPulse 3s ease-out forwards, strongPulse 4s ease-in-out 3s infinite;
	opacity: 0;
}

/* Verse reference - DIN Next LT Pro */
.verse-reference {
	font-family: 'DIN Next LT Pro', -apple-system, sans-serif;
	font-size: clamp(0.7rem, 1.2vw, 1rem);
	font-size: clamp(0.8rem, 3.2vw, 1rem);
	font-weight: 500;
	color: rgba(255, 255, 255, 0.35);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin: 0;
	animation: fadeIn 3s ease-out 0.5s forwards;
	opacity: 0;
}

/* Fade in animation for reference */
@keyframes fadeIn {
  	0% {
    	opacity: 0;
    	transform: translateY(10px);
  	}
  	100% {
    	opacity: 1;
    	transform: translateY(0);
  	}
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .verse-container {
        padding: 8vw;
        padding-bottom: max(8vw, env(safe-area-inset-bottom) + 5vw);
        align-items: flex-end;
    }
}

@media (max-width: 480px) {
	.verse-container {
        padding: 7vw;
        padding-bottom: max(7vw, env(safe-area-inset-bottom) + 4vw);
    }

    .verse-reference {
        opacity: 0;
        animation: fadeIn 3s ease-out 0.5s forwards;
    }
}