@charset "utf-8";
/* CSS Document */
/* ==========================================================================
   Hero Media
   ========================================================================== */

.tc-hero__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.tc-hero__image-wrapper {
	position: relative;
	width: 100%;
	max-width: 580px;
	aspect-ratio: 4 / 5;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   Hero Image
   ========================================================================== */

.tc-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	max-width:650px;
 	object-position: center bottom;

	/*border-radius: 32px;

	box-shadow:
		0 30px 80px rgba(15, 23, 42, 0.16),
		0 10px 30px rgba(15, 23, 42, 0.08);*/

	position: relative;
	z-index: 5;

	transition:
		transform .45s ease,
		box-shadow .45s ease;
}

.tc-hero__image::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    left:50%;
    top:45%;
    transform:translate(-50%,-50%);
    background:radial-gradient(
        circle,
        rgba(227,30,36,.08) 0%,
        rgba(227,30,36,.03) 45%,
        transparent 75%
    );
    border-radius:50%;
    z-index:-1;
}

.tc-hero__image:hover {

	transform: translateY(-8px);

	/*box-shadow:
		0 45px 100px rgba(15,23,42,.20),
		0 15px 35px rgba(15,23,42,.12);*/

}

/* ==========================================================================
   Hero Video
   ========================================================================== */

.tc-hero__video {
	width: 100%;
	height: 100%;
	object-fit: contain;

	border-radius: 32px;

	box-shadow:
		0 30px 80px rgba(15,23,42,.16);

	position: relative;
	z-index: 5;
}

/* ==========================================================================
   Decorative Shapes
   ========================================================================== */

.tc-hero__shape {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(70px);
	z-index: 1;
}

.tc-hero__shape--one {
	width: 260px;
	height: 260px;

	background:
		radial-gradient(
			circle,
			rgba(236,105,31,.28),
			transparent 70%
		);

	top: -70px;
	left: -70px;
}

.tc-hero__shape--two {
	width: 220px;
	height: 220px;

	background:
		radial-gradient(
			circle,
			rgba(0,94,96,.20),
			transparent 70%
		);

	right: -60px;
	bottom: -40px;
}

/* ==========================================================================
   Image Glow
   ========================================================================== */

.tc-hero__image-wrapper::after {

	content: "";

	position: absolute;

	left: 50%;
	bottom: -25px;

	transform: translateX(-50%);

	width: 75%;
	height: 45px;

	background: rgba(15,23,42,.08);

	filter: blur(35px);

	border-radius: 50%;

	z-index: 0;

}

/* ==========================================================================
   Image Border Accent
   ========================================================================== */

.tc-hero__image-wrapper::before {

	content: "";

	position: absolute;

	inset: -10px;

	border-radius: 40px;

	border: 1px solid rgba(255,255,255,.5);

	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,.30),
			rgba(255,255,255,0)
		);

	z-index: 2;

	pointer-events: none;

}

/* ==========================================================================
   Desktop Hover Effect
   ========================================================================== */

@media (hover:hover){

	.tc-hero__image-wrapper:hover .tc-hero__shape--one{

		transform: translate(-12px,-12px);

		transition: transform .5s ease;

	}

	.tc-hero__image-wrapper:hover .tc-hero__shape--two{

		transform: translate(12px,12px);

		transition: transform .5s ease;

	}

}

/* ==========================================================================
   Large Desktop
   ========================================================================== */

@media (min-width:1400px){

	.tc-hero__image-wrapper{

		max-width:620px;

	}

}

/* ==========================================================================
   Laptop
   ========================================================================== */

@media (max-width:1199px){

	.tc-hero__image-wrapper{

		max-width:520px;

	}

}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width:991px){

	.tc-hero__media{

		margin-inline:auto;

	}

	.tc-hero__image-wrapper{

		max-width:460px;

	}

}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width:767px){

	.tc-hero__image-wrapper{

		max-width:320px;

		border-radius:24px;

	}

	.tc-hero__image,
	.tc-hero__video{

		border-radius:24px;

	}

	.tc-hero__shape--one{

		width:150px;
		height:150px;

		top:-30px;
		left:-30px;

	}

	.tc-hero__shape--two{

		width:130px;
		height:130px;

		right:-20px;
		bottom:-20px;

	}

}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce){

	.tc-hero__image,
	.tc-hero__shape{

		transition:none;

		transform:none !important;

	}

}

/* Premium image framing */
.tc-hero__image-wrapper {
	max-width: 600px;
	filter: drop-shadow(0 28px 36px rgba(15, 23, 42, .09));
}

.tc-hero__image-wrapper::before {
	inset: 1.5% -2% -1%;
	border: 1px solid rgba(236, 105, 31, .12);
	border-radius: 48% 48% 42% 42%;
	background: radial-gradient(circle at 50% 35%, rgba(236, 105, 31, .12), transparent 58%);
	box-shadow: inset 0 0 0 16px rgba(255, 255, 255, .26), 0 22px 55px rgba(236, 105, 31, .08);
}

.tc-hero__image-wrapper::after {
	bottom: -8px;
	width: 62%;
	height: 34px;
	background: rgba(15, 23, 42, .18);
	filter: blur(28px);
}

.tc-hero__image {
	transform: translateY(4px) scale(1.015);
	filter: saturate(1.03) contrast(1.02);
}

.tc-hero__image:hover { transform: translateY(-4px) scale(1.025); }

@media (max-width: 991px) {
	.tc-hero__image-wrapper { max-width: 500px; }
}

@media (max-width: 767px) {
	.tc-hero__image-wrapper { max-width: 350px; }
	.tc-hero__image-wrapper::before { inset: 0; }
}

/* Keep the student artwork inside the decorative circular frame. */
.tc-hero__image {
	clip-path: ellipse(48% 49% at 50% 48%);
	transform: translateY(0) scale(1);
}

.tc-hero__image:hover {
	transform: translateY(-4px) scale(1.015);
}

@media (max-width: 767px) {
	.tc-hero__image {
		clip-path: ellipse(49% 49% at 50% 48%);
	}
}
/* Slightly lower the artwork so it meets the frame at the bottom. */
.tc-hero__image {
	transform: translateY(12px) scale(1);
}

.tc-hero__image:hover {
	transform: translateY(8px) scale(1.015);
}

@media (max-width: 767px) {
	.tc-hero__image {
		transform: translateY(8px) scale(1);
	}

	.tc-hero__image:hover {
		transform: translateY(5px) scale(1.01);
	}
}