.concept-5 .frost-section{position:relative;isolation:isolate;overflow:hidden}
.app-scenes{position:absolute;inset:-35px;z-index:-3;opacity:0;transform:translateY(45px) scale(1.04);transition:opacity 1.1s ease,transform 1.4s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.scene{position:absolute;width:67%;height:110%;object-fit:cover;object-position:center;top:-5%;border:1px solid #ffffff30;border-radius:18px;box-shadow:0 16px 70px #0005}
.scene-0{left:-10%;transform:rotate(-7deg)}.scene-1{right:-10%;transform:rotate(7deg)}
.frost-veil{position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,#101b3066,#101b30dc 32%,#101b30ed 50%,#101b30dc 68%,#101b3066)}
.frost-sr .frost-veil{background:linear-gradient(90deg,#f5f5f780,#f5f5f7eb 32%,#f5f5f7f5 50%,#f5f5f7eb 68%,#f5f5f780)}
.frost-section.is-revealed .app-scenes{opacity:1;transform:translateY(0) scale(1)}
.concept-5 .frost-section .product-copy,.concept-5 .frost-section .product-art{position:relative;z-index:1}
.concept-5 .frost-cg .product-copy p{text-shadow:0 1px 12px #101b30}
@media(max-width:600px){.scene{width:90%;height:100%}.scene-0{left:-38%}.scene-1{right:-38%}.frost-veil{}}
@media(prefers-reduced-motion:reduce){.app-scenes{transition:none;transform:none;opacity:1}}

/* Match the FLICKCG logo hover interaction. */
.concept-5 .sr-art img{transition:transform .25s}
.concept-5 .sr-art:hover img{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){.concept-5 .sr-art img{transition:none}}

.concept-5 .photo-teaser{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:65px;max-width:1050px;padding:85px 45px 130px;text-align:left;overflow:hidden}
.concept-5 .photo-teaser .eyebrow{justify-content:flex-start}
.concept-5 .photo-teaser h2{font-size:46px}
.teaser-photo{position:relative;width:min(100%,320px);margin:0 auto;transform:rotate(5deg)}
.teaser-photo .main-photo{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 22px 42px -12px #101b3059,0 6px 14px #101b3026}
.photo-reflection{position:absolute;top:calc(100% + 12px);left:0;width:100%;height:auto;transform:scaleY(-1);opacity:.23;pointer-events:none;border-radius:10px;mask-image:linear-gradient(to top,#000 0%,transparent 24%);-webkit-mask-image:linear-gradient(to top,#000 0%,transparent 24%)}
@media(max-width:650px){.concept-5 .photo-teaser{grid-template-columns:1fr;gap:40px;padding:60px 30px 125px;text-align:center}.concept-5 .photo-teaser .eyebrow{justify-content:center}.teaser-photo{width:min(78%,290px)}}

/* Coordinated entrance: the photo arrives as the headline makes room. */
.concept-5 .photo-teaser{max-width:1252px;grid-template-columns:1.5fr 1fr;gap:55px}
.teaser-copy{transform:translateX(0);transition:transform 2.8s cubic-bezier(.22,.68,.2,1)}
.teaser-photo{display:block;transition:transform 2.8s cubic-bezier(.22,.68,.2,1),opacity 2.8s ease}
.photo-teaser.awaiting-photo .teaser-copy{transform:translateX(23%)}
.photo-teaser.awaiting-photo .teaser-photo{transform:translateX(145%) rotate(5deg);opacity:0}
@media(max-width:760px){.concept-5 .photo-teaser{grid-template-columns:1fr;gap:40px;text-align:center}.concept-5 .photo-teaser .eyebrow{justify-content:center}.photo-teaser.awaiting-photo .teaser-copy{transform:translateX(12px)}}
@media(max-width:580px){.concept-5 .photo-teaser h2{font-size:33px}}
@media(prefers-reduced-motion:reduce){.teaser-copy,.teaser-photo{transition:none!important}.photo-teaser.awaiting-photo .teaser-copy{transform:none}.photo-teaser.awaiting-photo .teaser-photo{transform:rotate(5deg);opacity:1}}

.app-scenes{filter:blur(4px);contain:paint}.teaser-photo{opacity:1;will-change:transform,opacity}.teaser-copy{will-change:transform}

/* Keep the text and portrait grouped on wide displays. */
@media(min-width:1000px){
 .concept-5 .photo-teaser{grid-template-columns:520px 320px;justify-content:center;column-gap:45px}
 .concept-5 .photo-teaser .teaser-photo{margin:0}
}