/* =========================================================================
   Case — Fantasma
   Cyberpunk t-shirt brand. RGB-split headlines. CRT scanlines.
   Palette: #0B0014 · #FF2E63 · #00F0FF · #FFD23F
   Type: VT323 + Major Mono Display
   ========================================================================= */

.case--fantasma {
	background: #0B0014;
	color: #F0E9FF;
	font-family: 'VT323', monospace;
	font-size: 19px;
}

.ft-eyebrow {
	font-family: 'Major Mono Display', monospace;
	font-size: .82rem; letter-spacing: .1em;
	text-transform: uppercase; color: #00F0FF;
	margin: 0 0 1.2em;
	display: inline-block;
}

.ft-h2 {
	font-family: 'VT323', monospace;
	font-weight: 400;
	font-size: clamp(2rem, 4.6vw, 3.4rem);
	line-height: 1.05;
	text-transform: uppercase;
	margin: 0 0 .6em;
	color: #F0E9FF;
}

/* ---------- Hero ---------- */
.ft-hero {
	position: relative;
	padding: clamp(80px, 12vw, 160px) 0 clamp(80px, 12vw, 150px);
	overflow: hidden;
	background:
		radial-gradient(60% 50% at 50% 50%, rgba(255,46,99,.10), transparent 70%),
		#0B0014;
}
.ft-scanlines {
	position: absolute; inset: 0;
	background: repeating-linear-gradient(
		180deg,
		rgba(0,0,0,0) 0 2px,
		rgba(0,240,255,.05) 2px 3px
	);
	pointer-events: none;
	mix-blend-mode: screen;
	z-index: 1;
}
.ft-noise {
	position: absolute; inset: 0;
	background-image:
		radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
	background-size: 3px 3px;
	pointer-events: none;
	mix-blend-mode: overlay;
	z-index: 1;
}
.ft-hero__inner { position: relative; z-index: 2; max-width: 900px; }

.ft-boot {
	display: flex; flex-direction: column; gap: 4px;
	margin-bottom: 40px;
	font-family: 'Major Mono Display', monospace;
	font-size: .78rem;
	color: #00F0FF;
	letter-spacing: .08em;
}
.ft-boot__line {
	opacity: 0;
	animation: ft-boot-in 1.4s steps(40) forwards;
}
.ft-boot__line:nth-child(1) { animation-delay: .1s; }
.ft-boot__line:nth-child(2) { animation-delay: .9s; }
.ft-boot__line:nth-child(3) { animation-delay: 1.7s; }
@keyframes ft-boot-in {
	0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
	1%   { opacity: 1; }
	100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
	.ft-boot__line { opacity: 1; animation: none; }
}

.ft-title {
	margin: 0 0 30px;
	line-height: 1;
}
.ft-glitch {
	position: relative;
	display: inline-block;
	font-family: 'Major Mono Display', monospace;
	font-weight: 400;
	font-size: clamp(3.4rem, 11vw, 7.5rem);
	color: #F0E9FF;
	letter-spacing: .04em;
	text-shadow:
		0 0 14px rgba(240,233,255,.5);
	animation: ft-glitch-base 5s infinite;
}
.ft-glitch::before,
.ft-glitch::after {
	content: attr(data-text);
	position: absolute; inset: 0;
	pointer-events: none;
	mix-blend-mode: screen;
}
.ft-glitch::before {
	color: #FF2E63;
	transform: translate(-3px, 0);
	animation: ft-glitch-1 3s infinite linear alternate-reverse;
}
.ft-glitch::after {
	color: #00F0FF;
	transform: translate(3px, 0);
	animation: ft-glitch-2 2.5s infinite linear alternate-reverse;
}
@keyframes ft-glitch-base {
	0%, 96%, 100% { opacity: 1; }
	97% { opacity: .82; transform: translate(2px, 0); }
	98% { opacity: 1; transform: translate(-2px, 0); }
}
@keyframes ft-glitch-1 {
	0%, 100% { clip-path: inset(0 0 80% 0); transform: translate(-3px, 0); }
	20%      { clip-path: inset(30% 0 50% 0); transform: translate(-4px, 0); }
	40%      { clip-path: inset(60% 0 20% 0); transform: translate(-2px, 0); }
	60%      { clip-path: inset(10% 0 70% 0); transform: translate(-5px, 0); }
	80%      { clip-path: inset(50% 0 30% 0); transform: translate(-3px, 0); }
}
@keyframes ft-glitch-2 {
	0%, 100% { clip-path: inset(70% 0 10% 0); transform: translate(3px, 0); }
	25%      { clip-path: inset(20% 0 60% 0); transform: translate(4px, 0); }
	50%      { clip-path: inset(45% 0 35% 0); transform: translate(2px, 0); }
	75%      { clip-path: inset(5% 0 80% 0); transform: translate(5px, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.ft-glitch,
	.ft-glitch::before,
	.ft-glitch::after { animation: none; transform: none; }
}

.ft-tagline {
	max-width: 58ch;
	font-family: 'VT323', monospace;
	font-size: 1.25rem;
	color: #BFB3D8;
	line-height: 1.4;
	margin: 0 0 32px;
}
.ft-tagline em { color: #FF2E63; font-style: normal; }

.ft-tags {
	display: flex; flex-wrap: wrap; gap: 16px;
	font-family: 'Major Mono Display', monospace;
	font-size: .78rem; color: #FFD23F;
	letter-spacing: .08em;
}
.ft-tags span {
	padding: 6px 12px;
	border: 1px solid rgba(255,210,63,.3);
}

/* ---------- Sections ---------- */
.ft-section {
	padding: clamp(70px, 10vw, 130px) 0;
	border-top: 1px solid rgba(0,240,255,.1);
	position: relative;
}
.ft-section--dark { background: #060010; }
.ft-section--meta { background: #110024; }
.ft-section::before {
	content: ''; position: absolute; inset: 0;
	background: repeating-linear-gradient(
		180deg,
		rgba(0,0,0,0) 0 2px,
		rgba(0,240,255,.03) 2px 3px
	);
	pointer-events: none;
}
.ft-section > * { position: relative; z-index: 1; }

.ft-split {
	display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; align-items: start;
}
@media (max-width: 880px) { .ft-split { grid-template-columns: 1fr; gap: 24px; } }
.ft-split p {
	font-family: 'VT323', monospace;
	font-size: 1.18rem;
	color: #BFB3D8; line-height: 1.45;
	margin: 0 0 1em; max-width: 60ch;
}
.ft-split p:last-child { margin-bottom: 0; }
.ft-split em { color: #00F0FF; font-style: normal; }

/* ---------- Drops grid ---------- */
.ft-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
	margin-top: 40px;
}
@media (max-width: 880px) { .ft-grid { grid-template-columns: 1fr; } }
.ft-drop {
	background: #060010;
	border: 1px solid rgba(0,240,255,.15);
	padding: 28px;
	transition: border-color .3s, transform .3s var(--ac-ease-out);
	position: relative;
	overflow: hidden;
}
.ft-drop:hover {
	border-color: #FF2E63;
	transform: translate(-1px, -3px);
}
.ft-drop:hover::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
	background: linear-gradient(90deg, #FF2E63, #00F0FF);
}
.ft-drop__num {
	font-family: 'Major Mono Display', monospace;
	font-size: .78rem; color: #FFD23F;
	margin-bottom: 16px; letter-spacing: .08em;
}
.ft-drop__name {
	position: relative;
	font-family: 'Major Mono Display', monospace;
	font-size: 1.4rem; color: #F0E9FF;
	letter-spacing: .06em;
	margin-bottom: 12px;
}
.ft-drop:hover .ft-drop__name::before,
.ft-drop:hover .ft-drop__name::after {
	content: attr(data-text);
	position: absolute; inset: 0;
	pointer-events: none;
	mix-blend-mode: screen;
}
.ft-drop:hover .ft-drop__name::before {
	color: #FF2E63; transform: translateX(-2px);
}
.ft-drop:hover .ft-drop__name::after {
	color: #00F0FF; transform: translateX(2px);
}
.ft-drop__desc {
	font-family: 'VT323', monospace;
	font-size: 1.05rem;
	color: #8A82A8; line-height: 1.4;
}

/* ---------- Meta ---------- */
.ft-meta {
	display: grid; grid-template-columns: max-content 1fr;
	gap: 18px 32px; margin: 30px 0 0;
	font-family: 'VT323', monospace;
}
@media (max-width: 600px) { .ft-meta { grid-template-columns: 1fr; gap: 4px 0; } }
.ft-meta dt {
	font-family: 'Major Mono Display', monospace;
	font-size: .82rem; letter-spacing: .08em;
	text-transform: uppercase; color: #FFD23F;
	padding-top: 2px;
}
.ft-meta dd {
	margin: 0;
	font-size: 1.25rem;
	color: #F0E9FF;
}
@media (max-width: 600px) {
	.ft-meta dd { padding-bottom: 14px; border-bottom: 1px dashed rgba(0,240,255,.15); margin-bottom: 10px; }
}