/* remotefilename=/web/css/TwistClock.css
 *
 *	Copyright © 2025 by FKE Internet.  All rights reserved.
 *
 *	$Id: /web/css/TwistClock.css,v $
 */
/**
*	CSS rulesets for the "Twist Clock" package
*
*	TODO:
		add list entries here
*
*	Author:			ChatGPT, Fred Koschara
*	Creation Date:	October twenty-first, 2025
*	Last Modified:	October 22, 2025 @ 12:35 pm
*
*	Revision History:
*	   Date		  by		Description
*	2025/10/22	wfredk	adapt for framework integration
*		|		  |				|
*	2025/10/21	wfredk	adapt for framework integration
*	2025/10/21	wfredk	add file frame components
*	2025/10/21	ChatGPT	write core code
*/

:root
{	/* base sizes (native) */
	--tcBaseCW:40px;			/* colon width */
	--tcBaseDH:150px;			/* digit height (and colon height) */
	--tcBaseDW:100px;			/* digit width */
	--tcBaseGap:8px;			/* spacing between digits */
	--tcBasePad:16px;			/* clock padding around digits */
	--tcPersp:600px;			/* perspective viewpoint distance */

	--tcScale:1.00;				/* scale knob: 1 = 100%, 0.5 = 50%, etc. */

	--tcCW:calc(var(--tcBaseCW)*var(--tcScale));	/* derived sizes (scaled) */
	--tcDH:calc(var(--tcBaseDH)*var(--tcScale));
	--tcDW:calc(var(--tcBaseDW)*var(--tcScale));
	--tcGap:calc(var(--tcBaseGap)*var(--tcScale));
	--tcPad:calc(var(--tcBasePad)*var(--tcScale));

	--tcBorderW:calc(2px*var(--tcScale));	/* scale border + outer rings */
	--tcRing1:calc(3px*var(--tcScale));	/* first spread */
	--tcRing2:calc(6px*var(--tcScale));	/* second spread */

	/* use this code to override the above for unscaled borders + outer rings
	--tcBorderW:2px;			// adjust values for the desired effect
	--tcRing1:3px;
	--tcRing2:6px; */
}

.twistClockWrapper				/* wrapper positions clock on the screen */
{	display:flex;
	justify-content:center;		/* horizontal center */
	align-items:flex-start;		/* top align; use center to vertical-center */
}

.twistClock						/* width fit to clock display's content */
{	align-items:center;
	background-color:black;
	border: var(--tcBorderW) solid gold;
	box-shadow: 0 0 0 var(--tcRing1) lightblue, 0 0 0 var(--tcRing2) green;
	box-sizing:border-box;
	display:inline-flex;		/* <-- inline-flex keeps width=content size */
	gap:var(--tcGap);
	justify-content:center;
	padding:var(--tcPad);
	perspective:var(--tcPersp);
}

.twistClock .tcDigit
{	height:var(--tcDH);
	position:relative;
	transform-style:preserve-3d;
	transition:none;
	width:var(--tcDW);
}

.twistClock .tcFace
{	backface-visibility:hidden;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
	border:0;
	height:100%;
	left:0;
	position:absolute;
	top:0;
	width:100%;
}

.twistClock .tcColon
{	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
	height:var(--tcDH);
	user-select:none;
	width:var(--tcCW);
}

/* accessibility:cut duration to near-instant if user prefers reduced motion */
@media (prefers-reduced-motion:reduce)
{	.twistClock .tcDigit
	{	transition:none;
	}
}

/* EOF: TwistClock.css */