Heading into Smallville Season 8, Clark faced new adversaries and deepened his relationship with Lois, while the series adapted to major cast changes and a fresh creative direction. In Season 9, Clark embraced his destiny further, confronting Zod's threat and solidifying his role as Metropolis's protector amidst evolving alliances.








:host {
--media-font-family: Roboto, helvetica neue, segoe ui, arial, sans-serif;
--media-control-background: transparent;
--media-control-hover-background: transparent;
--media-tooltip-display: none;

display: block;
width: 100%;
height: 100%;
}

media-controller {
--base: 20px;
--media-range-track-height: calc(0.125 * var(--base));
--media-control-height: calc(2 * var(--base));

-webkit-font-smoothing: antialiased;
border-radius: 16px;
overflow: hidden;
background: var(--media-secondary-color, #17507B);
font-size: calc(0.75 * var(--base));
font-family: Roboto, Arial, sans-serif;
}

media-controller[breakpointmd] {
--base: 20px;
min-height: 84px;
}

.info,
media-control-bar {
transition: opacity 0.3s ease-in-out;
}

media-controller:has(media-time-range[dragging]) :is(.info, media-control-bar) {
opacity: 0.4;
}

.media-button {
--media-control-hover-background: rgba(255, 255, 255, 0.12);
border-radius: 8px;
position: relative;
padding: 0;
}

.media-button svg {
fill: none;
stroke: var(--media-primary-color, #fff);
stroke-width: 1;
stroke-linecap: round;
stroke-linejoin: round;
}

.bg-shape1,
.bg-shape2 {
position: absolute;
width: 50%;
height: 100%;
max-height: 132px;
position: absolute;
top: 50%;
transform: translateY(-50%);
filter: blur(80px);
mix-blend-mode: plus-lighter;
opacity: 0.24;
}

.bg-shape2 {
right: 0;
}














.controls {
position: relative;
z-index: 1;
box-sizing: border-box;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 16px 16px 6px;
}

[breakpointmd] .controls {
min-height: 84px;
display: grid;
align-items: center;
grid-template-columns: repeat(3, 1fr);
padding: 16px;
}

.info {
display: grid;
align-items: end;
margin-bottom: 16px;
}

.info div {
grid-area: 1 / 1;
}

[breakpointmd] .info {
display: flex;
align-items: center;
margin-bottom: 0;
}

.info-text {
position: relative;
padding: 16px;
}

.info h1,
.info h2 {
font-family: var(--media-font-family);
line-height: 1.2;
margin: 0;
font-weight: 400;
color: var(--media-primary-color, #fff);
}

.title {
font-size: 14px;
}

.byline {
font-size: 14px;
opacity: 0.6;
}

.info-poster {
position: relative;
width: 100%;
aspect-ratio: 1;
border-radius: 6px;
overflow: hidden;
box-shadow:
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
}

[breakpointmd] .info-poster {
width: 52px;
}

slot[name='poster']::slotted(*) {
object-fit: cover;
aspect-ratio: 1;
}

.poster-gradient {
--gradient-steps: hsl(0 0% 0% / 0) 0%, hsl(0 0% 0% / 0.013) 8.1%, hsl(0 0% 0% / 0.049) 15.5%,
hsl(0 0% 0% / 0.104) 22.5%, hsl(0 0% 0% / 0.175) 29%, hsl(0 0% 0% / 0.259) 35.3%,
hsl(0 0% 0% / 0.352) 41.2%, hsl(0 0% 0% / 0.45) 47.1%, hsl(0 0% 0% / 0.55) 52.9%,
hsl(0 0% 0% / 0.648) 58.8%, hsl(0 0% 0% / 0.741) 64.7%, hsl(0 0% 0% / 0.825) 71%,
hsl(0 0% 0% / 0.896) 77.5%, hsl(0 0% 0% / 0.951) 84.5%, hsl(0 0% 0% / 0.987) 91.9%,
hsl(0 0% 0%) 100%;

position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(to bottom, var(--gradient-steps));
}

[breakpointmd] .poster-gradient {
display: none;
}









{{mediatitle}}


{{mediabyline}}






media-control-bar {
margin: auto;
}
















@keyframes bounce-scale-play {
0% {
transform: scale(0.75, 0.75);
}
50% {
transform: scale(115%, 115%);
}
100% {
transform: scale(1, 1);
}
}

media-play-button #icon-play {
opacity: 0;
transform-box: view-box;
transform-origin: center center;
transform: scale(0.5, 0.5);
transition: all 0.5s;
}

media-play-button[mediapaused] #icon-play {
opacity: 1;
transform: scale(1, 1);
animation: 0.35s bounce-scale-play ease-in-out;
}

@keyframes bounce-pause-left {
0% {
font-size: 10px;
}
50% {
font-size: 3px;
}
100% {
font-size: 4px;
}
}

@keyframes bounce-pause-right {
0% {
font-size: 10px;
transform: translateX(-8px);
}
50% {
font-size: 3px;
transform: translateX(1px);
}
100% {
font-size: 4px;
transform: translateX(0);
}
}

media-play-button #pause-left,
media-play-button #pause-right {
/* Using font-size to animate height because using scale was resulting in unexpected positioning */
font-size: 4px;
opacity: 1;
transform: translateX(0);
transform-box: view-box;
}

media-play-button:not([mediapaused]) #pause-left {
animation: 0.3s bounce-pause-left ease-out;
}

media-play-button:not([mediapaused]) #pause-right {
animation: 0.3s bounce-pause-right ease-out;
}

media-play-button[mediapaused] #pause-left,
media-play-button[mediapaused] #pause-right {
opacity: 0;
font-size: 10px;
}

media-play-button[mediapaused] #pause-right {
transform-origin: right center;
transform: translateX(-8px);
}
























media-mute-button {
position: relative;
z-index: 1;
}

media-mute-button .muted-path {
transition: clip-path 0.2s ease-out;
}

media-mute-button #muted-path-2 {
transition-delay: 0.2s;
}

media-mute-button .muted-path {
clip-path: inset(0);
}

media-mute-button:not([mediavolumelevel='off']) #muted-path-1 {
clip-path: inset(0 0 100% 0);
}

media-mute-button:not([mediavolumelevel='off']) #muted-path-2 {
clip-path: inset(0 0 100% 0);
}

media-mute-button .muted-path {
opacity: 0;
}

media-mute-button[mediavolumelevel='off'] .muted-path {
opacity: 1;
}

media-mute-button .vol-path {
opacity: 1;
transition: opacity 0.4s;
}

media-mute-button[mediavolumelevel='off'] .vol-path {
opacity: 0;
}

media-mute-button[mediavolumelevel='low'] #vol-high-path,
media-mute-button[mediavolumelevel='medium'] #vol-high-path {
opacity: 0;
}

















.times {
display: flex;
gap: 3px;
font-size: calc(0.7 * var(--base));
}

.time-display {
padding: 0;
line-height: 1;
}

[breakpointmd] .times {
display: block;
}

[breakpointmd] .time-display {
display: block;
text-align: right;
line-height: 1.2;
}

[breakpointmd] media-duration-display {
opacity: 0.6;
}

.small-time-range {
width: 100%;
height: calc(2 * var(--base));
border-radius: calc(0.25 * var(--base));

--media-range-track-backdrop-filter: invert(10%) blur(5px) brightness(110%);
--media-range-track-background: rgba(255, 255, 255, 0.2);
--media-range-track-pointer-background: rgba(255, 255, 255, 0.5);
--media-range-track-border-radius: calc(0.25 * var(--base));

--media-time-range-buffered-color: rgba(255, 255, 255, 0.4);
--media-range-bar-color: rgb(255, 255, 255);

--media-range-thumb-background: #fff;
--media-range-thumb-transition: opacity 0.1s linear;
--media-range-thumb-height: 12px;
--media-range-thumb-width: 12px;
--media-range-thumb-border-radius: 12px;
}

[breakpointmd] .small-time-range {
display: none;
}












.big-time-range {
--media-range-track-height: 4px;
--media-range-track-background: rgba(255, 255, 255, 0.25);
--media-range-track-pointer-background: rgba(255, 255, 255, 0.5);
--media-time-range-buffered-color: rgba(255, 255, 255, 0.3);
--media-range-track-box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.07);
--media-range-padding-left: 0;
--media-range-padding-right: 0;
--media-preview-time-background: var(--_secondary-color);
--media-preview-box-margin: 0 0 3px;
--media-range-thumb-transform: translateY(-3px);
--media-range-thumb-height: 12px;
--media-range-thumb-width: 6px;
--media-range-thumb-border-radius: 2px;

display: none;
position: absolute;
left: 15px;
width: calc(100% - 30px);
height: 10px;
bottom: -3px;
}

[breakpointmd] .big-time-range {
display: block;
}

media-preview-time-display {
font-size: calc(0.65 * var(--base));
line-height: 1;
}











Download: MP3

Ver todos los episodios