/*
	taptostyle.css
	Self-animating process diagram for the Tap to Style section.
	Two layers: what the user does (light) / what happens behind the scenes (dark).
	All motion is driven by classes toggled from the inline script in photolotus.html.
*/

/* #ttsProcess lives inside the #tts grid — without this the grid item
	stretches to the board's 1080px min-width and the inner scroller never clips */
#ttsProcess {
	min-width: 0;
	max-width: 100%;
}

.ttsd {
	min-width: 0;
	--pink: #FF1A8A;
	--pink-soft: rgba(255, 26, 138, 0.16);
	--ink: #0A0A0A;
	--line: rgba(10, 10, 10, 0.14);
	--bts-bg: #F5F6F7;
	--spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--swift: cubic-bezier(0.22, 0.9, 0.3, 1);
	--cols: 84px 150px 1.25fr 1.2fr 200px;
	--colgap: 26px;
	font-family: "Source Sans 3", sans-serif;
	font-optical-sizing: auto;
	width: 100%;
	margin: 0 auto;
	padding: 0 32px;
}

.ttsd-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding-bottom: 8px;
}

.ttsd-board {
	min-width: 1080px;
}

.ttsd-hint {
	display: none;
	color: var(--pink);
	font-style: italic;
	font-size: 12px;
	margin-bottom: 12px;
}

@media (max-width: 900px) {
	.ttsd { padding: 0 20px; }
	.ttsd-hint { display: block; }
}

/* ===========================
	SHARED GRID (both layers + divider)
	=========================== */
.ttsd-grid {
	display: grid;
	grid-template-columns: var(--cols);
	column-gap: var(--colgap);
	padding-left: 24px;
	padding-right: 24px;
}

.ttsd-layer--user {
	align-items: end;
	padding-top: 16px;
	background: var(--bts-bg);
}

.ttsd-cell {
	position: relative;
}

.ttsd-caption {
	font-size: 14px;
	line-height: 1.35;
	color: var(--ink);
	margin-top: 14px;
	text-wrap: pretty;
	text-align: center;
}

/* uniform caption strip: every visual block in the user layer ends on the
	same horizontal line, every caption starts on the same line below it */
.ttsd-layer--user .ttsd-caption {
	height: 57px;
}

/* ===========================
	RAILS (layer labels)
	=========================== */
.ttsd-rail {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ink);
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-self: end;
	padding-bottom: 24px;
}

.ttsd-rail__icon {
	width: 18px;
	height: 19px;
	background: rgba(10, 10, 10, 0.75);
	-webkit-mask: url("images/p/tts-ic-user.svg") no-repeat center / contain;
	mask: url("images/p/tts-ic-user.svg") no-repeat center / contain;
}

.ttsd-layer--bts .ttsd-rail {
	align-self: start;
}

/* ===========================
	ARROWS (dots between columns)
	=========================== */
.ttsd-arrow {
	position: absolute;
	right: -22px;
	bottom: 158px;
	font-size: 16px;
	line-height: 1;
	color: rgba(10, 10, 10, 0.25);
	transition: color 0.25s ease;
}

.ttsd-arrow.on {
	color: var(--pink);
}

.ttsd-layer--bts .ttsd-arrow {
	bottom: auto;
	top: 146px;
}

/* ===========================
	PHOTO CARDS (upload / cleaned)
	=========================== */
.ttsd-shot {
	background: none;
	border: 1px solid var(--line);
	padding: 0;
	margin: 0;
}

.ttsd-shot img {
	width: 100%;
	display: block;
}

.ttsd-upload__shot {
	opacity: 0;
	transform: scale(0.6) translateY(10px);
	transition: transform 0.28s var(--spring), opacity 0.18s ease;
}

.ttsd-upload__shot.on {
	opacity: 1;
	transform: none;
	animation: ttsdTapring 0.7s 0.1s ease-out 1;
}

@keyframes ttsdTapring {
	0% { box-shadow: 0 0 0 0 rgba(255, 26, 138, 0.45); }
	100% { box-shadow: 0 0 0 20px rgba(255, 26, 138, 0); }
}

.ttsd-cleaned .ttsd-shot {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 0.5s var(--swift);
}

.ttsd-cleaned .ttsd-shot.on {
	clip-path: inset(0 0 0 0);
}

/* ===========================
	COVER FLOW (style picker)
	=========================== */
.ttsd-flow {
	position: relative;
	height: 126px;
	width: 100%;
	perspective: 700px;
}

.ttsd-card {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 86px;
	height: 86px;
	margin: -43px 0 0 -43px;
	border-radius: 12px;
	overflow: hidden;
	background: #e7e4de;
	transition: transform 0.3s var(--swift), opacity 0.3s ease, box-shadow 0.3s ease;
	will-change: transform;
	box-shadow: 0 6px 16px rgba(20, 14, 4, 0.14);
}

.ttsd-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ttsd-card.sel {
	box-shadow: 0 0 0 2.5px var(--pink), 0 6px 16px rgba(20, 14, 4, 0.14);
}

.ttsd-stylename {
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	min-height: 1.3em;
	margin-top: 6px;
	color: var(--ink);
	transition: opacity 0.2s ease;
}

.ttsd-stylename.dim { opacity: 0; }

.ttsd-styles .ttsd-caption { text-align: center; }

/* ===========================
	CUSTOMIZATION CHIPS + PANELS
	=========================== */
/* 0-gap grid with collapsed 1px borders — chips and the panels that open
	below them read as one minimal unit */
.ttsd-chips {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}

.ttsd-chip {
	background: #fff;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	height: 46px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	position: relative;
	transition: box-shadow 0.25s ease;
}

.ttsd-chip span {
	font-size: 8.5px;
	letter-spacing: 0.3px;
	color: rgba(10, 10, 10, 0.5);
	line-height: 1;
}

.ttsd-chip .cic {
	width: 15px;
	height: 15px;
	background: #4a463f;
	-webkit-mask: var(--m) no-repeat center / contain;
	mask: var(--m) no-repeat center / contain;
	transition: background 0.25s ease;
}

.ttsd-chip .cthumb {
	width: 15px;
	height: 15px;
	border-radius: 5px;
	background: url("images/p/tts-bd-concrete.jpg") center / cover;
}

.ttsd-dots3 {
	position: relative;
	width: 16px;
	height: 15px;
}

.ttsd-dots3 i {
	position: absolute;
	width: 9px;
	height: 9px;
	border-radius: 50%;
}

.ttsd-dots3 i:nth-child(1) { left: 3.5px; top: 0; background: #b8a23d; }
.ttsd-dots3 i:nth-child(2) { left: 0; bottom: 0; background: #3d7a4f; }
.ttsd-dots3 i:nth-child(3) { right: 0; bottom: 0; background: #2f5d8a; }

.ttsd-chip.active {
	box-shadow: inset 0 0 0 1.5px var(--pink);
	z-index: 1;
}

.ttsd-chip.active .cic { background: var(--pink); }
.ttsd-chip.active span { color: var(--pink); font-weight: 600; }

.ttsd-panels {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	min-height: 246px;
}

.ttsd-panel {
	background: #fff;
	border: 1px solid var(--line);
	margin-top: -1px;
	padding: 10px 12px 11px;
	transform-origin: var(--ox, 50%) -28px;
	transform: scale(0.25);
	opacity: 0;
	transition: transform 0.3s var(--spring), opacity 0.16s ease;
}

.ttsd-panel.on {
	transform: scale(1);
	opacity: 1;
}

.ttsd-panel h5 {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 10.5px;
	font-weight: 600;
	color: #1c1a16;
	margin: 0;
}

.ttsd-panel h5 .pic {
	width: 12px;
	height: 12px;
	background: #1c1a16;
	-webkit-mask: var(--m) no-repeat center / contain;
	mask: var(--m) no-repeat center / contain;
}

.ttsd-panel h5 .val {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 9.5px;
	font-weight: 600;
	color: rgba(10, 10, 10, 0.4);
	transition: color 0.25s ease;
}

.ttsd-panel h5 .val.sel { color: var(--pink); }

/* model avatars */
.ttsd-avs {
	display: flex;
	gap: 9px;
	justify-content: center;
	margin-top: 9px;
}

.ttsd-av {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: #efece6;
	transition: transform 0.25s var(--spring), box-shadow 0.25s ease;
}

.ttsd-av img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ttsd-av.sel {
	transform: scale(1.14);
	box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--pink);
}

.ttsd-radios {
	display: flex;
	gap: 6px;
	justify-content: center;
	margin-top: 11px;
}

.ttsd-radio {
	font-size: 9px;
	padding: 4px 10px;
	border: 1px solid var(--line);
	color: rgba(10, 10, 10, 0.55);
	transition: all 0.22s var(--spring);
}

.ttsd-radio.sel {
	background: #15130f;
	border-color: #15130f;
	color: #fff;
}

/* backdrop thumbs */
.ttsd-bds {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 9px;
}

.ttsd-bd {
	width: 44px;
	height: 44px;
	overflow: hidden;
	transition: transform 0.25s var(--spring), box-shadow 0.25s ease;
}

.ttsd-bd img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ttsd-bd.sel {
	transform: scale(1.1);
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pink);
}

/* color swatches */
.ttsd-sws {
	display: flex;
	gap: 9px;
	justify-content: center;
	margin-top: 10px;
}

.ttsd-sw {
	position: relative;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.1);
	transition: transform 0.25s var(--spring), box-shadow 0.25s ease;
}

.ttsd-sw::after {
	content: "✓";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	opacity: 0;
	transform: scale(0.3);
	transition: all 0.22s var(--spring);
}

.ttsd-sw.sel {
	transform: scale(1.12);
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pink);
}

.ttsd-sw.sel::after {
	opacity: 1;
	transform: scale(1);
}

/* option pills (camera angle, size) */
.ttsd-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: 9px;
}

.ttsd-opt {
	font-size: 9.5px;
	padding: 4.5px 10px;
	background: #f2f3f4;
	color: rgba(10, 10, 10, 0.6);
	transition: all 0.22s var(--spring);
	display: flex;
	align-items: center;
	gap: 5px;
}

.ttsd-opt i {
	display: block;
	border: 1.2px solid currentColor;
	opacity: 0.7;
}

.ttsd-opt.sel {
	background: var(--pink);
	color: #fff;
	transform: scale(1.06);
}

/* ===========================
	RESULT FRAME
	=========================== */
.ttsd-result__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	background: var(--bts-bg);
	border: 1px solid var(--line);
}

.ttsd-result__ph {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 28px;
	height: 32px;
	margin: -16px 0 0 -14px;
	background: rgba(10, 10, 10, 0.16);
	-webkit-mask: url("images/p/tts-ic-sparkles.svg") no-repeat center / contain;
	mask: url("images/p/tts-ic-sparkles.svg") no-repeat center / contain;
	animation: ttsdPhPulse 2.2s ease-in-out infinite;
}

@keyframes ttsdPhPulse {
	0%, 100% { opacity: 0.45; transform: scale(0.94); }
	50% { opacity: 1; transform: scale(1.06); }
}

.ttsd-result__frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.08);
	filter: blur(16px) saturate(1.15);
}

.ttsd-result__frame.reveal {
	animation: ttsdRevealRing 1s ease-out 1;
}

.ttsd-result__frame.reveal img {
	opacity: 1;
	transform: scale(1);
	filter: blur(0) saturate(1);
	transition: opacity 0.45s ease, filter 0.8s var(--swift), transform 1.1s var(--swift);
}

@keyframes ttsdRevealRing {
	0% { outline: 3px solid rgba(255, 26, 138, 0.7); outline-offset: 2px; }
	100% { outline: 3px solid rgba(255, 26, 138, 0); outline-offset: 14px; }
}

.ttsd-result__sheen {
	position: absolute;
	inset: -20%;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.7) 50%, transparent 65%);
	transform: translateX(-130%);
	pointer-events: none;
}

.ttsd-result__frame.reveal .ttsd-result__sheen {
	animation: ttsdSheen 0.9s 0.3s var(--swift) 1 forwards;
}

@keyframes ttsdSheen {
	to { transform: translateX(130%); }
}

/* ===========================
	DIVIDER + BEAMS
	=========================== */
.ttsd-divider {
	height: 42px;
	align-items: stretch;
}

.ttsd-beam {
	position: relative;
	width: 2px;
	margin: 0 auto;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--pink), rgba(255, 26, 138, 0.2));
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.25s var(--swift);
}

.ttsd-beam.on { transform: scaleY(1); }

.ttsd-beam::after {
	content: "";
	position: absolute;
	left: -3px;
	top: 0;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 6px solid var(--pink);
	opacity: 0;
}

.ttsd-beam.on::after { animation: ttsdBeamDot 0.7s ease-in infinite; }

@keyframes ttsdBeamDot {
	0% { top: -4%; opacity: 0; }
	25% { opacity: 1; }
	100% { top: 96%; opacity: 0; }
}

.ttsd-beam--up {
	transform-origin: bottom;
	background: linear-gradient(0deg, var(--pink), rgba(255, 26, 138, 0.2));
}

.ttsd-beam--up::after {
	border-top: none;
	border-bottom: 6px solid var(--pink);
}

.ttsd-beam--up.on::after { animation: ttsdBeamDotUp 0.7s ease-in infinite; }

@keyframes ttsdBeamDotUp {
	0% { top: 96%; opacity: 0; }
	25% { opacity: 1; }
	100% { top: -4%; opacity: 0; }
}

/* ===========================
	BEHIND THE SCENES (dark band)
	=========================== */
.ttsd-layer--bts {
	background: var(--bts-bg);
	padding-top: 22px;
	padding-bottom: 22px;
	align-items: start;
}

/* in the bts layer the step label sits ABOVE its block, on one shared line */
.ttsd-layer--bts .ttsd-caption {
	margin: 0 0 8px;
	height: 24px;
	display: flex;
	align-items: center;
}

/* ===========================
	PROMPT PANEL
	=========================== */
.ttsd-prompt {
	grid-column: 3 / 5;
	align-self: stretch;
	display: flex;
	flex-direction: column;
}

.ttsd-prompt__head {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 24px;
	margin-bottom: 8px;
}

.ttsd-prompt__label {
	font-size: 14px;
	line-height: 1.35;
	color: var(--ink);
	white-space: nowrap;
}

.ttsd-prompt__box {
	flex: 1;
	background: #fff;
	border: 1px solid var(--line);
	padding: 11px 14px 12px;
	min-height: 212px;
	overflow: hidden;
}

.ttsd-prompt__style {
	font-size: 9.5px;
	font-weight: 600;
	padding: 2.5px 9px;
	background: var(--pink-soft);
	color: var(--pink);
	white-space: nowrap;
	opacity: 0;
	transform: translateY(4px);
	transition: all 0.25s var(--spring);
}

.ttsd-prompt__style.on {
	opacity: 1;
	transform: none;
}

.ttsd-tray {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 5px;
}

.ttsd-tray__label {
	font-size: 8.5px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(10, 10, 10, 0.4);
	margin-right: 2px;
}

.ttsd-tch {
	width: 24px;
	height: 24px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.18);
	transform: scale(0);
	transition: transform 0.3s var(--spring);
	background: #e9e6df;
}

.ttsd-tch.on { transform: scale(1); }

.ttsd-tch img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ttsd-tch--colors {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.ttsd-tch--colors i { display: block; }

.ttsd-prompt__body {
	font-size: 10px;
	line-height: 1.5;
	color: rgba(10, 10, 10, 0.75);
	columns: 2;
	column-gap: 20px;
	text-wrap: pretty;
}

.ttsd-s {
	opacity: 0;
	transition: opacity 0.35s ease;
	transition-delay: var(--d, 0s);
}

.ttsd-prompt__body.on .ttsd-s { opacity: 1; }

mark.adh {
	background-image: linear-gradient(120deg, rgba(255, 26, 138, 0.32), rgba(255, 122, 184, 0.32));
	background-size: 0% 100%;
	background-repeat: no-repeat;
	background-color: transparent;
	color: inherit;
	padding: 0 1px;
	transition: background-size 0.5s var(--swift);
}

mark.adh.lit {
	background-size: 100% 100%;
}

/* prompt additions (from customizations) */
.ttsd-add {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin-top: 9px;
	padding: 7px 9px 8px 10px;
	border-left: 2px solid var(--pink);
	background: rgba(255, 26, 138, 0.07);
	opacity: 0;
	transform: translateY(-9px) scale(0.96);
	transition: transform 0.3s var(--spring), opacity 0.2s ease;
}

.ttsd-add.on {
	opacity: 1;
	transform: none;
}

.ttsd-add b {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--pink);
	margin-bottom: 3px;
}

.ttsd-add b .aic {
	width: 10px;
	height: 10px;
	background: var(--pink);
	-webkit-mask: var(--m) no-repeat center / contain;
	mask: var(--m) no-repeat center / contain;
}

.ttsd-add b img {
	width: 12px;
	height: 12px;
	object-fit: cover;
	display: block;
}

.ttsd-add p {
	font-size: 9.5px;
	line-height: 1.45;
	color: rgba(10, 10, 10, 0.75);
	margin: 0;
}

/* ===========================
	PIPELINE NODES (guardrails + model)
	=========================== */
.ttsd-pipe {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 10px;
	padding-top: 32px;
}

.ttsd-node {
	flex: 1;
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--line);
	padding: 11px 12px;
	opacity: 0.45;
	transition: opacity 0.25s ease, transform 0.25s var(--spring);
}

.ttsd-node.on {
	opacity: 1;
	transform: scale(1.03);
}

.ttsd-node__head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 10.5px;
	font-weight: 600;
	color: #14120e;
	margin-bottom: 4px;
}

.ttsd-node p {
	position: relative;
	font-size: 9px;
	line-height: 1.4;
	color: rgba(10, 10, 10, 0.6);
	margin: 0;
}

.ttsd-node--guard::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(45deg, rgba(255, 26, 138, 0.12) 0 6px, transparent 6px 12px);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ttsd-node--guard.on::before {
	opacity: 1;
	animation: ttsdStripes 1.1s linear infinite;
}

@keyframes ttsdStripes {
	to { background-position: 17px 0; }
}

.ttsd-node__check {
	margin-left: auto;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--pink);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: scale(0);
	transition: transform 0.3s var(--spring) 0.45s;
}

.ttsd-node.on .ttsd-node__check { transform: scale(1); }

.ttsd-node__spark {
	width: 15px;
	height: 17px;
	background: var(--pink);
	-webkit-mask: url("images/p/tts-ic-sparkles.svg") no-repeat center / contain;
	mask: url("images/p/tts-ic-sparkles.svg") no-repeat center / contain;
}

.ttsd-node--model.on .ttsd-node__spark {
	animation: ttsdSpark 1.1s ease-in-out infinite;
}

@keyframes ttsdSpark {
	0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255, 26, 138, 0.4)); }
	50% { transform: scale(1.22); filter: drop-shadow(0 0 8px rgba(255, 26, 138, 0.85)); }
}

/* ===========================
	STATUS ROW
	=========================== */
.ttsd-status {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 20px;
}

.ttsd-dots {
	display: flex;
	gap: 6px;
}

.ttsd-dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: rgba(10, 10, 10, 0.15);
	transition: all 0.3s var(--spring);
}

.ttsd-dot.cur {
	width: 20px;
	background: var(--pink);
}

/* quick fade used between runs */
.ttsd-swap {
	transition: opacity 0.24s ease;
}

.ttsd-swap.dim { opacity: 0; }

/* ===========================
	REDUCED MOTION
	=========================== */
@media (prefers-reduced-motion: reduce) {
	.ttsd *,
	.ttsd *::before,
	.ttsd *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}