/* V5.0 – slider, otomatik yorum akışı ve scroll tabanlı Forty & Fayf hikâyesi */
.homepage-v50 {
  --story-progress: 0;
  --story-about: 1;
  --story-characters: 0;
  --story-meet: 0;
  --story-heart: 0;
  --story-finish: 0;
  --story-left-x: -52vw;
  --story-right-x: 52vw;
  --story-character-y: 22px;
  --story-left-rotate: -10deg;
  --story-right-rotate: 10deg;
  --story-character-scale: .86;
  --story-heart-scale: .55;
  --story-about-y: 0px;
  --story-heading-opacity: 0;
  --story-caption-opacity: 1;
  --story-complete-y: 35px;
  --story-complete-scale: .92;
  --story-aura-scale: .82;
  --story-progress-height: 0%;
}

/* Slider artık sadece opaklık değiştirmiyor; katmanlar yönlü ve gözle görülür biçimde geçiyor. */
.homepage-v50 .home49-hero-slide {
  transform: translate3d(4.5%,0,0) scale(1.018);
  filter: saturate(.9);
  transition: opacity .72s cubic-bezier(.2,.75,.25,1), transform .82s cubic-bezier(.2,.75,.25,1), visibility .72s ease, filter .72s ease;
  will-change: opacity, transform;
}
.homepage-v50 .home49-hero-slide.is-active {
  transform: translate3d(0,0,0) scale(1);
  filter: saturate(1);
}
.homepage-v50 .home49-hero-slide.is-leaving {
  transform: translate3d(-3.5%,0,0) scale(.992);
}
.homepage-v50 .home49-hero-slide.is-active .home49-hero-copy > * {
  animation: home50HeroEnter .72s both cubic-bezier(.2,.75,.25,1);
}
.homepage-v50 .home49-hero-slide.is-active .home49-hero-copy > *:nth-child(2) { animation-delay:.06s; }
.homepage-v50 .home49-hero-slide.is-active .home49-hero-copy > *:nth-child(3) { animation-delay:.12s; }
.homepage-v50 .home49-hero-slide.is-active .home49-hero-copy > *:nth-child(4) { animation-delay:.18s; }
.homepage-v50 .home49-hero-slide.is-active .home49-hero-copy > *:nth-child(5) { animation-delay:.24s; }
.homepage-v50 .home49-hero-slide.is-active .home49-hero-visual {
  animation: home50HeroVisual .85s both cubic-bezier(.2,.75,.25,1);
}
@keyframes home50HeroEnter { from { opacity:0; transform:translate3d(-28px,14px,0); } to { opacity:1; transform:none; } }
@keyframes home50HeroVisual { from { opacity:0; transform:translate3d(42px,10px,0) scale(.97); } to { opacity:1; transform:none; } }

/* Scroll hikâyesi */
.home50-story {
  position: relative;
  background: var(--story-bg);
  isolation: isolate;
}
.home50-story-scroll {
  position:relative;
  height:305svh;
  min-height:1900px;
}
.home50-character-anchor {
  position: absolute;
  top: 45%;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.home50-story-sticky {
  position: sticky;
  top: 86px;
  height: calc(100svh - 86px);
  min-height: 640px;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 20%, color-mix(in srgb,var(--primary) 14%,transparent), transparent 24%),
    radial-gradient(circle at 90% 18%, color-mix(in srgb,var(--secondary) 14%,transparent), transparent 22%),
    linear-gradient(145deg,color-mix(in srgb,var(--story-bg) 95%,white),var(--story-bg));
}
.home50-story-background { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.home50-story-background::before {
  content:""; position:absolute; inset:0; opacity:.045;
  background-image:var(--site-pattern); background-size:500px auto;
  mask-image:linear-gradient(to bottom,#000,transparent 95%);
}
.home50-story-background i { position:absolute; border-radius:42% 58% 56% 44%; filter:blur(.2px); opacity:.34; animation:home50Blob 8s ease-in-out infinite; }
.home50-story-background .is-blue { width:170px;height:170px;left:-60px;top:12%;background:#35b1ee; }
.home50-story-background .is-pink { width:125px;height:125px;right:4%;top:14%;background:#ff4c9d;animation-delay:-2s; }
.home50-story-background .is-yellow { width:90px;height:90px;left:14%;bottom:10%;background:#ffd52e;animation-delay:-4s; }
.home50-story-background .is-green { width:145px;height:145px;right:-55px;bottom:12%;background:#c8ff00;animation-delay:-6s; }
.home50-story-stage { position:relative; height:100%; }
.home50-about-scene,
.home50-character-scene { position:absolute; inset:0; }
.home50-about-scene {
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(480px,1.18fr); gap:60px; align-items:center;
  opacity:var(--story-about); transform:translate3d(0,var(--story-about-y),0);
  pointer-events:auto; will-change:opacity,transform;
}
.home50-story.is-about-gone .home50-about-scene { pointer-events:none; }
.home50-about-copy { max-width:535px; position:relative; z-index:2; }
.home50-about-copy .section-kicker { display:inline-flex; margin-bottom:13px; color:var(--about-title); font-size:11px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.home50-about-copy h2 { margin:0; color:var(--about-title); font-family:var(--heading-font); font-size:clamp(48px,5vw,74px); line-height:1; letter-spacing:-.055em; }
.home50-about-copy > p { max-width:560px; margin:24px 0 0; color:var(--about-text); font-size:16px; line-height:1.9; }
.home50-about-meta { display:flex; flex-wrap:wrap; gap:10px; margin:25px 0; }
.home50-about-meta span { min-height:44px; padding:0 13px; display:inline-flex; align-items:center; gap:9px; border:1px solid rgba(29,83,128,.09); border-radius:14px; color:#456078; background:rgba(255,255,255,.72); box-shadow:0 10px 25px rgba(31,75,118,.06); }
.home50-about-meta svg { width:18px; color:var(--primary); }
.home50-about-meta span:last-child svg { color:var(--secondary); }
.home50-about-meta b { font-size:10px; }
.home50-about-copy .about-button { background:var(--about-button); color:#fff; box-shadow:0 15px 34px color-mix(in srgb,var(--about-button) 25%,transparent); }
.home50-about-visual { position:relative; min-height:510px; }
.home50-about-image-wrap { position:absolute; inset:4% 0 3% 2%; overflow:hidden; border:9px solid rgba(255,255,255,.92); border-radius:44% 56% 49% 51% / 40% 42% 58% 60%; background:#fff; box-shadow:0 34px 90px rgba(33,78,119,.18); transform:rotate(1.5deg); }
.home50-about-image-wrap img { width:100%; height:100%; object-fit:contain; object-position:center; }
.home50-about-image-wrap::after { content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,255,255,.16),transparent 48%); }
.home50-about-orbit { position:absolute; border:2px dashed color-mix(in srgb,var(--secondary) 45%,transparent); border-radius:50%; animation:home50Orbit 13s linear infinite; }
.home50-about-orbit.is-one { width:160px;height:160px;right:-24px;top:-5px; }
.home50-about-orbit.is-two { width:92px;height:92px;left:-14px;bottom:16px;border-color:color-mix(in srgb,var(--primary) 45%,transparent);animation-direction:reverse; }
.home50-about-badge { position:absolute; left:-18px; bottom:45px; z-index:3; min-height:57px; padding:0 17px; display:flex; align-items:center; gap:10px; border-radius:18px; color:var(--secondary); background:#fff; box-shadow:0 18px 45px rgba(31,75,118,.13); transform:rotate(-4deg); }
.home50-about-badge svg { width:24px; fill:color-mix(in srgb,var(--secondary) 14%,transparent); }
.home50-about-badge b { color:#20385c; font-size:11px; }

.home50-character-scene {
  opacity:var(--story-characters); pointer-events:none; will-change:opacity;
}
.home50-character-heading { position:absolute; top:5%; left:50%; width:min(700px,90%); transform:translateX(-50%); text-align:center; opacity:var(--story-heading-opacity); }
.home50-character-heading > span { color:var(--secondary); font-size:10px; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
.home50-character-heading h2 { margin:6px 0 8px; color:#10264d; font-family:var(--heading-font); font-size:clamp(40px,4.5vw,66px); line-height:1; letter-spacing:-.05em; }
.home50-character-heading p { margin:0 auto; max-width:520px; color:#718096; font-size:12px; }
.home50-story-character { position:absolute; z-index:4; bottom:4%; left:50%; width:min(360px,30vw); margin:0; transform-origin:bottom center; will-change:transform; }
.home50-story-character.is-forty { transform:translate3d(calc(-100% - 12px + var(--story-left-x)),var(--story-character-y),0) rotate(var(--story-left-rotate)) scale(var(--story-character-scale)); }
.home50-story-character.is-fayf { transform:translate3d(calc(12px + var(--story-right-x)),var(--story-character-y),0) rotate(var(--story-right-rotate)) scale(var(--story-character-scale)); }
.home50-story-character-image { position:relative; height:min(57svh,510px); min-height:350px; display:flex; align-items:flex-end; justify-content:center; }
.home50-story-character-image img { position:relative; z-index:2; width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 28px 26px rgba(24,55,91,.2)); }
.home50-character-aura { position:absolute; left:50%; bottom:5%; width:78%; aspect-ratio:1; border-radius:50%; transform:translateX(-50%) scale(var(--story-aura-scale)); background:radial-gradient(circle,color-mix(in srgb,currentColor 24%,transparent),transparent 67%); filter:blur(8px); opacity:.9; }
.home50-story-character.is-forty .home50-character-aura { color:var(--forty-color); }
.home50-story-character.is-fayf .home50-character-aura { color:var(--fayf-color); }
.home50-story-character figcaption { position:absolute; z-index:5; bottom:6%; width:190px; padding:13px 15px; display:grid; gap:2px; border:1px solid rgba(255,255,255,.85); border-radius:18px; background:rgba(255,255,255,.88); backdrop-filter:blur(15px); box-shadow:0 18px 45px rgba(24,55,91,.13); opacity:var(--story-caption-opacity); transition:opacity .2s ease; }
.home50-story-character.is-forty figcaption { left:-10px; }
.home50-story-character.is-fayf figcaption { right:-10px; text-align:right; }
.home50-story-character figcaption strong { font-family:var(--heading-font); font-size:22px; line-height:1; }
.home50-story-character.is-forty figcaption strong { color:var(--forty-color); }
.home50-story-character.is-fayf figcaption strong { color:var(--fayf-color); }
.home50-story-character figcaption small { color:#77879a; font-size:8px; line-height:1.45; }
.home50-heart-scene { position:absolute; z-index:3; left:50%; top:48%; width:250px; height:220px; transform:translate(-50%,-50%) scale(var(--story-heart-scale)); opacity:var(--story-heart); filter:drop-shadow(0 16px 25px rgba(244,0,132,.18)); }
.home50-heart-line { width:100%; height:100%; overflow:visible; }
.home50-heart-line path { stroke:var(--secondary); stroke-width:9; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }
.home50-heart-core { position:absolute; left:50%; top:50%; width:72px; height:72px; border-radius:50%; display:grid; place-items:center; transform:translate(-50%,-50%) scale(var(--story-heart)); color:#fff; background:linear-gradient(135deg,var(--secondary),#ff6ea9); box-shadow:0 18px 38px rgba(244,0,132,.26); }
.home50-heart-core svg { width:36px; fill:rgba(255,255,255,.22); }
.home50-heart-scene i { position:absolute; width:12px;height:12px;border-radius:4px;background:var(--accent); opacity:var(--story-heart); animation:home50Spark 1.8s ease-in-out infinite; }
.home50-heart-scene .is-one { left:6%;top:22%;background:#35b1ee; }
.home50-heart-scene .is-two { right:2%;top:29%;background:#c8ff00;animation-delay:-.45s; }
.home50-heart-scene .is-three { left:15%;bottom:7%;background:#ff7b22;animation-delay:-.9s; }
.home50-heart-scene .is-four { right:13%;bottom:2%;background:#f40084;animation-delay:-1.35s; }
.home50-story-complete { position:absolute; z-index:8; left:50%; bottom:5%; min-width:310px; padding:15px 20px; display:grid; grid-template-columns:1fr auto; column-gap:14px; align-items:center; border:1px solid rgba(255,255,255,.92); border-radius:20px; color:#fff; background:linear-gradient(135deg,#10264d,#164e80); box-shadow:0 22px 55px rgba(16,38,77,.25); transform:translate(-50%,var(--story-complete-y)) scale(var(--story-complete-scale)); opacity:var(--story-finish); }
.home50-story-complete strong,.home50-story-complete span { grid-column:1; }
.home50-story-complete strong { font-size:11px; }
.home50-story-complete span { color:rgba(255,255,255,.7);font-size:8.5px; }
.home50-story-complete svg { grid-column:2;grid-row:1/3;width:22px;animation:home50Down 1.5s ease-in-out infinite; }
.home50-story-progress { position:absolute; z-index:12; right:0; top:50%; width:4px; height:180px; border-radius:99px; background:rgba(16,38,77,.08); transform:translateY(-50%); overflow:hidden; }
.home50-story-progress span { display:block; width:100%; height:var(--story-progress-height); border-radius:inherit; background:linear-gradient(to bottom,var(--primary),var(--secondary),var(--accent)); }
.home50-story.is-heart-complete .home50-heart-core { animation:home50HeartBeat .9s ease-in-out infinite; }

/* Üç yorumun tamamı görünür; sonsuz akış JS ile yavaşça sağa doğru ilerler. */
.homepage-v50 .home49-review-track {
  grid-auto-columns:calc((100% - 28px)/3);
  scroll-snap-type:none;
  overscroll-behavior-inline:contain;
  cursor:grab;
}
.homepage-v50 .home49-review-track:active { cursor:grabbing; }
.homepage-v50 .home49-review-card { min-height:250px; }
.homepage-v50 .home49-review-card > p { display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; overflow:hidden; }

/* İletişim tipografisi */
.homepage-v50 .contact-detail-list { display:grid; gap:9px; margin-top:23px; }
.homepage-v50 .contact-detail-list li { min-height:59px; padding:9px 12px!important; display:grid!important; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:11px!important; border:1px solid rgba(255,255,255,.75); background:rgba(255,255,255,.68)!important; box-shadow:0 10px 25px rgba(72,70,42,.055); backdrop-filter:blur(10px); transition:transform .22s ease,background .22s ease; }
.homepage-v50 .contact-detail-list li:hover { transform:translateX(4px); background:#fff!important; }
.homepage-v50 .contact-detail-list .contact-icon { width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--primary),#31b4e3); }
.homepage-v50 .contact-detail-list li[data-contact-kind="email"] .contact-icon { background:linear-gradient(135deg,var(--secondary),#ff78ae); }
.homepage-v50 .contact-detail-list li[data-contact-kind="address"] .contact-icon { background:linear-gradient(135deg,#ff9a26,#ffc342); }
.homepage-v50 .contact-detail-list li[data-contact-kind="hours"] .contact-icon { background:linear-gradient(135deg,#7d55e7,#a47cf7); }
.homepage-v50 .contact-detail-list .contact-icon svg { width:19px; }
.homepage-v50 .contact-detail-copy { min-width:0; display:grid; gap:1px; color:inherit; }
.homepage-v50 .contact-detail-copy small { color:#8a96a5; font-family:var(--body-font); font-size:8px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.homepage-v50 .contact-detail-copy strong { color:#17385d; font-family:var(--body-font); font-size:12px; font-weight:750; line-height:1.45; letter-spacing:-.025em; overflow-wrap:anywhere; }
.homepage-v50 .contact-detail-list li[data-contact-kind="phone"] .contact-detail-copy strong { font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:.02em; }

/* Mevcut açılır hakkımızda içeriğinin sticky hikâyeden sonra düzgün açılması */
.home50-story > .about-expand-panel { position:relative; z-index:20; background:#fff; }
.home50-story > .about-modal { z-index:1500; }

@keyframes home50Blob { 0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-18px,0) rotate(9deg)} }
@keyframes home50Orbit { to { transform:rotate(360deg); } }
@keyframes home50Spark { 0%,100%{transform:translateY(0) rotate(0);opacity:.35}50%{transform:translateY(-13px) rotate(25deg);opacity:1} }
@keyframes home50HeartBeat { 0%,100%{translate:-50% -50%;scale:1}50%{translate:-50% -50%;scale:1.09} }
@keyframes home50Down { 0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)} }

@media (max-width:1180px) {
  .home50-about-scene { grid-template-columns:.9fr 1.1fr; gap:35px; }
  .home50-story-character { width:min(340px,32vw); }
}

@media (max-width:920px) {
  .home50-story-scroll { height:285svh; min-height:1750px; }
  .home50-story-sticky { top:72px; height:calc(100svh - 72px); min-height:570px; }
  .home50-about-scene { grid-template-columns:1fr; gap:18px; align-content:center; }
  .home50-about-copy { max-width:670px; margin-inline:auto; text-align:center; }
  .home50-about-copy > p { margin-inline:auto; }
  .home50-about-meta { justify-content:center; }
  .home50-about-visual { min-height:330px; order:-1; }
  .home50-about-image-wrap { inset:0 10%; }
  .home50-about-badge { left:9%; bottom:25px; }
  .home50-story-character { width:min(330px,42vw); bottom:4%; }
  .home50-story-character-image { height:min(48svh,430px); min-height:300px; }
  .home50-character-heading { top:5%; }
  .home50-heart-scene { top:47%; width:210px; height:190px; }
}

@media (max-width:640px) {
  .home50-story-scroll { height:250svh; min-height:1450px; }
  .home50-story-sticky { top:66px; height:calc(100svh - 66px); min-height:530px; }
  .home50-story-stage { width:100%!important; }
  .home50-about-scene { padding:18px 14px 24px; gap:13px; }
  .home50-about-visual { min-height:235px; }
  .home50-about-image-wrap { inset:0 3%; border-width:5px; }
  .home50-about-orbit.is-one { width:100px;height:100px;right:-4px; }
  .home50-about-orbit.is-two { width:65px;height:65px;left:0; }
  .home50-about-badge { left:4%; bottom:8px; min-height:44px; padding-inline:12px; }
  .home50-about-badge svg { width:18px; }
  .home50-about-badge b { font-size:8.5px; }
  .home50-about-copy h2 { font-size:35px; }
  .home50-about-copy > p { margin-top:13px; font-size:11px; line-height:1.7; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
  .home50-about-meta { margin:13px 0; gap:6px; }
  .home50-about-meta span { min-height:36px; padding-inline:9px; }
  .home50-about-meta b { font-size:8px; }
  .home50-about-copy .about-button { min-height:42px; }
  .home50-character-heading { top:4%; width:92%; }
  .home50-character-heading h2 { font-size:34px; }
  .home50-character-heading p { font-size:9px; }
  .home50-story-character { width:min(245px,55vw); bottom:8%; }
  .home50-story-character-image { height:min(43svh,330px); min-height:245px; }
  .home50-story-character.is-forty { transform:translate3d(calc(-100% - 2px + var(--story-left-x)),var(--story-character-y),0) rotate(var(--story-left-rotate)) scale(var(--story-character-scale)); }
  .home50-story-character.is-fayf { transform:translate3d(calc(2px + var(--story-right-x)),var(--story-character-y),0) rotate(var(--story-right-rotate)) scale(var(--story-character-scale)); }
  .home50-story-character figcaption { display:none; }
  .home50-heart-scene { top:49%; width:155px; height:145px; }
  .home50-heart-line path { stroke-width:8; }
  .home50-heart-core { width:52px;height:52px; }
  .home50-heart-core svg { width:27px; }
  .home50-story-complete { bottom:4%; min-width:min(310px,88vw); padding:12px 14px; }
  .home50-story-complete strong { font-size:9px; }
  .home50-story-complete span { font-size:7.5px; }
  .home50-story-progress { right:5px; height:125px; }
  .homepage-v50 .home49-review-track { grid-auto-columns:82%; gap:11px; }
  .homepage-v50 .home49-review-card { min-height:215px; }
  .homepage-v50 .contact-detail-copy strong { font-size:10.5px; }
  .homepage-v50 .contact-detail-list li[data-contact-kind="phone"] .contact-detail-copy strong { font-size:13px; }
}

@media (prefers-reduced-motion:reduce) {
  .home50-story { padding:70px 0; }
  .home50-story-scroll { height:auto; min-height:0; }
  .home50-story-sticky { position:relative; top:auto; height:auto; min-height:0; overflow:visible; }
  .home50-story-stage { display:grid; gap:55px; height:auto; }
  .home50-about-scene,.home50-character-scene { position:relative; inset:auto; opacity:1; transform:none; }
  .home50-character-scene { min-height:620px; }
  .home50-story-character.is-forty { transform:translate3d(calc(-100% - 12px),0,0); }
  .home50-story-character.is-fayf { transform:translate3d(12px,0,0); }
  .home50-heart-scene { opacity:1; transform:translate(-50%,-50%) scale(1); }
  .home50-heart-line path { stroke-dashoffset:0!important; }
  .home50-story-complete,.home50-story-progress { display:none; }
  .homepage-v50 .home49-hero-slide,.homepage-v50 .home49-hero-copy>* { animation:none!important; transition:none!important; }
}

.home50-story.is-static-story {
  padding:70px 0;
  --story-about:1;
  --story-characters:1;
  --story-heading-opacity:1;
  --story-left-x:0vw;
  --story-right-x:0vw;
  --story-character-y:0px;
  --story-left-rotate:0deg;
  --story-right-rotate:0deg;
  --story-character-scale:1;
  --story-heart:1;
  --story-heart-scale:1;
  --story-caption-opacity:0;
  --story-aura-scale:.98;
}
.home50-story.is-static-story .home50-story-scroll { height:auto; min-height:0; }
.home50-story.is-static-story .home50-story-sticky { position:relative; top:auto; height:auto; min-height:0; overflow:visible; }
.home50-story.is-static-story .home50-story-stage { display:grid; gap:55px; height:auto; }
.home50-story.is-static-story .home50-about-scene,
.home50-story.is-static-story .home50-character-scene { position:relative; inset:auto; opacity:1; transform:none; }
.home50-story.is-static-story .home50-character-scene { min-height:620px; }
.home50-story.is-static-story .home50-story-complete,
.home50-story.is-static-story .home50-story-progress { display:none; }


/* V5.11 — sticky kalp sahnesini karakter kartlarına baloncuklarla bağlayan akıcı geçiş */
.home511-story-card-connector{
  position:relative;
  z-index:18;
  width:min(760px,calc(100% - 32px));
  height:190px;
  margin:-108px auto -82px;
  display:grid;
  place-items:end center;
  opacity:clamp(0,var(--story-finish),1);
  transform:translate3d(0,calc((1 - var(--story-finish))*42px),0) scale(calc(.94 + var(--story-finish)*.06));
  transform-origin:center top;
  pointer-events:none;
  filter:drop-shadow(0 28px 44px rgba(27,61,96,.13));
}
.home511-connector-trail{
  position:absolute;
  left:50%;
  top:-58px;
  width:150px;
  height:128px;
  transform:translateX(-50%);
}
.home511-connector-trail i,
.home511-connector-tail i{
  position:absolute;
  display:block;
  border:2px solid rgba(255,255,255,.88);
  border-radius:50%;
  background:linear-gradient(145deg,rgba(255,255,255,.94),color-mix(in srgb,var(--primary) 30%,transparent));
  box-shadow:0 9px 20px rgba(31,82,122,.11),inset 0 0 0 4px rgba(255,255,255,.25);
}
.home511-connector-trail .is-bubble-one{width:20px;height:20px;left:65px;top:0;background:color-mix(in srgb,var(--secondary) 42%,white)}
.home511-connector-trail .is-bubble-two{width:13px;height:13px;left:42px;top:30px;background:color-mix(in srgb,var(--accent) 48%,white)}
.home511-connector-trail .is-bubble-three{width:28px;height:28px;left:75px;top:42px;background:color-mix(in srgb,var(--primary) 35%,white)}
.home511-connector-trail .is-bubble-four{width:11px;height:11px;left:105px;top:78px;background:color-mix(in srgb,var(--secondary) 40%,white)}
.home511-connector-trail .is-bubble-five{width:18px;height:18px;left:55px;top:92px;background:color-mix(in srgb,#c8ff00 50%,white)}
.home511-connector-message{
  position:relative;
  width:min(650px,100%);
  min-height:112px;
  padding:20px 62px 20px 25px;
  display:grid;
  grid-template-columns:60px minmax(0,1fr);
  align-items:center;
  gap:17px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:34px;
  color:#213c5c;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(249,253,255,.9));
  box-shadow:0 24px 65px rgba(32,72,108,.14),inset 0 1px 0 #fff;
  backdrop-filter:blur(18px);
}
.home511-connector-message:before{
  content:"";
  position:absolute;
  left:50%;
  top:-17px;
  width:36px;
  height:36px;
  border-radius:8px 18px 8px 18px;
  background:rgba(255,255,255,.96);
  transform:translateX(-50%) rotate(45deg);
  box-shadow:-5px -5px 12px rgba(32,72,108,.025);
}
.home511-connector-message:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-15px;
  width:30px;
  height:30px;
  border-radius:7px 15px 7px 15px;
  background:#fbfdff;
  transform:translateX(-50%) rotate(45deg);
}
.home511-connector-icon{
  position:relative;
  z-index:2;
  width:60px;
  height:60px;
  display:grid;
  place-items:center;
  border-radius:21px;
  color:#fff;
  background:linear-gradient(145deg,var(--secondary),#ff6fa8);
  box-shadow:0 15px 30px color-mix(in srgb,var(--secondary) 25%,transparent);
}
.home511-connector-icon svg{width:28px;height:28px;fill:rgba(255,255,255,.22)}
.home511-connector-copy{position:relative;z-index:2;min-width:0;display:grid;gap:4px}
.home511-connector-copy small{color:var(--secondary);font:850 9px/1 var(--body-font);letter-spacing:.13em;text-transform:uppercase}
.home511-connector-copy strong{color:#173659;font:900 clamp(20px,2vw,28px)/1.08 var(--kids-heading-font);letter-spacing:-.035em}
.home511-connector-copy p{max-width:470px;margin:0;color:#738398;font:650 11px/1.55 var(--body-font)}
.home511-connector-down{
  position:absolute;
  z-index:3;
  right:21px;
  top:50%;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(145deg,var(--primary),#42c4eb);
  transform:translateY(-50%);
  box-shadow:0 11px 22px color-mix(in srgb,var(--primary) 22%,transparent);
}
.home511-connector-down svg{width:17px;height:17px}
.home511-connector-tail{
  position:absolute;
  left:50%;
  bottom:-45px;
  width:80px;
  height:62px;
  transform:translateX(-50%);
}
.home511-connector-tail i:nth-child(1){width:19px;height:19px;left:30px;top:0;background:color-mix(in srgb,var(--primary) 35%,white)}
.home511-connector-tail i:nth-child(2){width:12px;height:12px;left:51px;top:25px;background:color-mix(in srgb,var(--secondary) 34%,white)}
.home511-connector-tail i:nth-child(3){width:25px;height:25px;left:18px;top:35px;background:color-mix(in srgb,var(--accent) 38%,white)}
.home50-story.is-story-complete .home511-connector-trail i{animation:home511BubbleLink 2.9s ease-in-out infinite}
.home50-story.is-story-complete .home511-connector-trail i:nth-child(2){animation-delay:-.5s}
.home50-story.is-story-complete .home511-connector-trail i:nth-child(3){animation-delay:-1s}
.home50-story.is-story-complete .home511-connector-trail i:nth-child(4){animation-delay:-1.5s}
.home50-story.is-story-complete .home511-connector-trail i:nth-child(5){animation-delay:-2s}
.home50-story.is-story-complete .home511-connector-icon{animation:home511ConnectorHeart 1.9s ease-in-out infinite}
.home50-story.is-story-complete .home511-connector-down svg{animation:home50Down 1.5s ease-in-out infinite}
.home511-character-cards-connected{
  position:relative;
  z-index:7;
  margin-top:-72px;
  padding-top:172px;
  border-radius:72px 72px 0 0;
  box-shadow:0 -28px 75px rgba(28,65,99,.08);
}
.home511-character-cards-connected:where(.home51-character-cards):before{top:145px}
.home511-character-cards-connected .home51-character-cards-heading{position:relative}
.home511-character-cards-connected .home51-character-cards-heading:before{
  content:"";
  position:absolute;
  left:50%;
  top:-62px;
  width:118px;
  height:5px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));
  transform:translateX(-50%);
  box-shadow:0 7px 18px rgba(42,134,190,.16);
}
html[data-theme='night'] .home511-connector-message{
  border-color:rgba(166,207,235,.13);
  color:#eef8ff;
  background:linear-gradient(135deg,rgba(17,42,67,.97),rgba(12,31,51,.94));
  box-shadow:0 25px 65px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme='night'] .home511-connector-message:before{background:#112a43}
html[data-theme='night'] .home511-connector-message:after{background:#0e2339}
html[data-theme='night'] .home511-connector-copy strong{color:#f0f9ff}
html[data-theme='night'] .home511-connector-copy p{color:#a9bbcf}
html[data-theme='night'] .home511-character-cards-connected{box-shadow:0 -28px 75px rgba(0,0,0,.16)}
@keyframes home511BubbleLink{0%,100%{translate:0 0;scale:1}50%{translate:0 -8px;scale:1.09}}
@keyframes home511ConnectorHeart{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.08) rotate(2deg)}}
@media(max-width:720px){
  .home511-story-card-connector{width:calc(100% - 24px);height:170px;margin:-94px auto -72px}
  .home511-connector-trail{top:-45px;transform:translateX(-50%) scale(.86)}
  .home511-connector-message{min-height:105px;padding:17px 47px 17px 17px;grid-template-columns:48px minmax(0,1fr);gap:12px;border-radius:27px}
  .home511-connector-icon{width:48px;height:48px;border-radius:17px}
  .home511-connector-icon svg{width:23px;height:23px}
  .home511-connector-copy strong{font-size:19px}
  .home511-connector-copy p{font-size:9px;line-height:1.5}
  .home511-connector-down{right:13px;width:29px;height:29px}
  .home511-connector-tail{bottom:-37px;transform:translateX(-50%) scale(.84)}
  .home511-character-cards-connected{margin-top:-64px;padding-top:145px;border-radius:42px 42px 0 0}
  .home511-character-cards-connected .home51-character-cards-heading:before{top:-45px;width:86px}
}
@media(prefers-reduced-motion:reduce){
  .home511-story-card-connector{opacity:1;transform:none}
  .home511-connector-trail i,.home511-connector-icon,.home511-connector-down svg{animation:none!important}
}
