/* iM Media Labs — home page. Loads after site.css. */

25% {
--hue: calc(var(--hue-start) - 100deg);
}

50% {
--hue: var(--hue-start);
}

75% {
--hue: calc(var(--hue-start) + 80deg);
}

100% {
--hue: var(--hue-start);
}

50% {
background-position: 100% 35%;
}

100% {
background-position: 25% 0%;
}

.hero-note {
    margin: 0 0 var(--space-2);
    width: 100%;
    max-width: 90ch;
}

.hero-note.with-icon {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: start;
}

.hero-visual {
    margin-top: var(--space-6);
}

/* The category line lives here now, under the video, rather than above the
   headline. Same eyebrow treatment it had before, so it still reads as a
   label; the double class beats both .eyebrow and .visual-caption. */
.visual-caption.eyebrow {
    margin: var(--space-2) 0 0;
    text-align: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
}

.hero-preview-card {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 360px;
    border-radius: 18px;
    background: rgba(255,255,255,.12);
    box-shadow: 0 12px 32px rgba(0,0,0,.25);
    overflow: hidden;
}

.ph-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; 
    object-position: center;
    background: rgba(0,0,0,.18);
}

.strip {
    padding: var(--space-1_5) 0 var(--space-4);
}

.strip-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}

.strip-item {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    border: none;
    border-radius: 16px;
    padding: var(--space-2);
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.90);
    font-size: var(--fs-md);
    box-shadow: 0 14px 36px rgba(0,0,0,.10);
}

.strip-text {
    min-width: 0;
}

.strip-text strong {
    display: block;
    margin-bottom: 4px;
}

.strip-text span {
    color: rgba(255,255,255,.84);
}

.mediahub-rows {
    display: grid;
    gap: var(--space-3);
}

.mediahub-row {
    display: grid;
grid-template-columns: 1.05fr .95fr;
    gap: var(--space-3);
    align-items: stretch;
}

/* The screenshots are 2.88:1. Left to stretch, this box takes the height of
   the text column beside it, which varies with copy length - so rows with
   longer copy letterboxed the image and showed the panel behind it. Giving
   the box the image's own ratio makes all three fill identically, whatever
   the copy does. */
.mediahub-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1640 / 569;
    align-self: center;
    border-radius: 10px;
    background: rgba(255,255,255,.12);
    box-shadow: 0 12px 32px rgba(0,0,0,.25);
    overflow: hidden;
}

.mediahub-copy {
    padding: var(--panel-pad);
}

.mediahub-copy h3 {
    margin: 0 0 10px;
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
}

.mediahub-copy p {
    margin: 0;
    color: rgba(255,255,255,.86);
    font-size: var(--fs-md);
}

.form-actions.demos-actions {
    margin-top: var(--space-5);
    justify-content: flex-start;
}

#demos .two-col {
    margin-bottom: var(--space-2);
}

.supplemental {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    color: rgba(255,255,255,.86);
    font-size: var(--fs-sm);
}

.resource-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.resource {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: none;
    border-radius: 16px;
    padding: 12px 14px;
    background: rgba(255,255,255,.08);
    box-shadow: 0 14px 36px rgba(0,0,0,.10);
}

.resource.resource-mini {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 10px 0;
}

.resource.resource-mini + .resource.resource-mini {
    border-top: 1px solid rgba(255,255,255,.10);
}

.resource-icon {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    flex: 0 0 auto;
    background: rgba(255,255,255,.14);
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.88);
}

.resource-body {
    min-width: 0;
}

.resource-title {
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
}

.resource-meta {
    margin-top: 2px;
    font-size: var(--fs-xs);
    line-height: 1.3;
    color: var(--muted2);
}

.greatness .resource-title {
    font-weight: 400;
}

.collab-visual {
    margin-bottom: var(--space-5);
}

.collab-preview-card {
    width: 100%;
    aspect-ratio: 21 / 9;
    min-height: 340px;
    border-radius: 18px;
    background: rgba(255,255,255,.12);
    box-shadow: 0 12px 32px rgba(0,0,0,.25);
    overflow: hidden;
}

.contact-panel {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,.08);
}

.contact-panel::before {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background: radial-gradient(680px 340px at 18% 0%, rgba(255,255,255,.14), transparent 62%), radial-gradient(540px 260px at 90% 18%, rgba(255,255,255,.08), transparent 60%);
    opacity: .55;
}

.contact-panel > * {
    position: relative;
    z-index: 1;
}

.contact-form {
    display: grid;
    gap: var(--space-2);
}

.form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2);
    align-items: start;
}

.field label {
    display: block;
    margin: 0 0 8px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: rgba(255,255,255,.86);
}

.req {
    opacity: .9;
}

.input, .textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: 14px;
    border: none;
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.94);
    font-size: var(--fs-md);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}

.textarea {
    resize: vertical;
    min-height: 168px;
}

.input:focus, .textarea:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.20), 0 0 0 2px rgba(255,255,255,.14);
    background: rgba(255,255,255,.12);
}

.check-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: rgba(255,255,255,.86);
    font-size: var(--fs-sm);
    line-height: 1.5;
    user-select: none;
}

.check {
    margin-top: 4px;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: rgba(255,255,255,.92);
}

@supports (-webkit-touch-callout: none) {
.check {
-webkit-appearance: none;
appearance: none;
width: 22px;
height: 22px;
margin-top: 2px;
border-radius: 7px;
border: 1px solid rgba(255,255,255,.28);
background: rgba(255,255,255,.10);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
display: grid;
place-items: center;
}
.check::after {
content: "";
width: 6px;
height: 11px;
border-right: 2px solid rgba(255,255,255,.95);
border-bottom: 2px solid rgba(255,255,255,.95);
transform: rotate(45deg) translateY(-1px);
opacity: 0;
}
.check:checked {
background: var(--cycle-solid-80);
border-color: rgba(255,255,255,.22);
box-shadow: 0 6px 16px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.12);
}
.check:checked::after {
opacity: 1;
}
.check:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 6px 16px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.12);
}
}

.check-row {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

@supports (-webkit-touch-callout: none) {
.check-row:active {
background: rgba(255,255,255,.06);
border-radius: 12px;
}
}

.form-actions {
    display: flex;
    gap: var(--space-1_5);
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
}

50% {
background-position: 100% 35%;
}

100% {
background-position: 25% 0%;
}

@media (prefers-reduced-motion: reduce) {
html {
    scroll-behavior: auto;
    animation: none !important;
}
.hero h1.hero-blur-in {
    animation: none !important;
    filter: none !important;
}
[data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
}
[data-parallax]::before {
    transform: none !important;
}
}@media (max-width: 920px) {
.hero {
    padding: 24px 0 var(--space-3);
}
.hero h1 {
    margin-bottom: 34px;
}
.hero-visual {
    margin-top: var(--space-5);
}
.hero-preview-card {
    min-height: 240px;
}
.strip-inner {
    grid-template-columns: 1fr;
}
.mediahub-row {
    grid-template-columns: 1fr;
}
.two-col {
    grid-template-columns: 1fr;
}
.split-block {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "main" "side";
}
.collab-preview-card {
    aspect-ratio: 16 / 9;
    min-height: 260px;
}
.cta-row {
    width: 100%;
}
.cta-row .btn, .form-actions .btn {
    width: 100%;
    justify-content: center;
}
.hero-preview-card {
    min-height: 120px;
    aspect-ratio: 16 / 9;
}
.collab-preview-card {
    min-height: 220px;
}
.strip-item {
    padding: 18px;
}
.panel {
    padding: 20px;
}
.mediahub-copy {
    padding: 0;
}
.mediahub-copy h3 {
    margin-bottom: 8px;
}
.form-grid {
    grid-template-columns: 1fr;
}
}

.field {
    display: grid;
    gap: 8px;
    min-width: 0; 
}

.input, .textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box; 
}

.input {
    padding: 14px 16px;
    border-radius: 14px;
    border: none;
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.94);
    font-size: var(--fs-md);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
    line-height: 1.2;
}

@media (max-width: 768px) {
.form-grid {
    grid-template-columns: 1fr;
}
}

/* Newest release, first thing in the hero, in place of the eyebrow. Compact
   and shrink-to-fit: at this position a full-width bar reads as a site-wide
   announcement banner, which is a different thing. Same translucent, rounded
   language as the cards; no accent colour, which stays reserved for buttons. */
.hero-latest {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    max-width: 100%;
    margin: 0 0 18px;
    padding: 6px 18px 6px 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: var(--text);
    text-decoration: none;
    transition: background 200ms ease;
}

.hero-latest:hover,
.hero-latest:focus-visible {
    background: rgba(255,255,255,.14);
}

.hero-latest-tag {
    flex: 0 0 auto;
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.92);
}

.hero-latest-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.4;
}

.hero-latest-arrow {
    flex: 0 0 auto;
    color: var(--muted2);
    transition: transform 200ms ease, color 200ms ease;
}

.hero-latest:hover .hero-latest-arrow,
.hero-latest:focus-visible .hero-latest-arrow {
    transform: translateX(3px);
    color: var(--text);
}

/* The title truncates here rather than wrapping, but the ellipsis is a safety
   net, not a target: see the note beside the markup in index.html. Keep the
   title to ~28 characters and it never fires above 375px.

   On a phone the badge spans the content column and holds one line. Three
   changes from the desktop pill: a full 999px radius on a full-width bar reads
   as a stretched capsule, so the corners soften; the tag drops its own pill,
   since a shape inside a shape looks clumsy once the outer one is wide, and
   becomes a label with a hairline divider; and the title takes the free space
   with min-width: 0, which is what actually permits the ellipsis -- a flex
   item's default min-width: auto refuses to shrink below its content. */
@media (max-width: 560px) {
.hero-latest {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
    gap: 11px;
    padding: 11px 14px;
    border-radius: 14px;
}
.hero-latest-tag {
    padding: 0 11px 0 0;
    border-right: 1px solid rgba(255,255,255,.22);
    border-radius: 0;
    background: none;
    letter-spacing: .12em;
    color: rgba(255,255,255,.95);
}
.hero-latest-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hero-latest-arrow {
    padding-left: 4px;
}
}

@media (prefers-reduced-motion: reduce) {
.hero-latest, .hero-latest-arrow { transition: none; }
.hero-latest:hover .hero-latest-arrow { transform: none; }
}