/* Health & Care Turkey: theme styles.
   Layout lives in the inline styles of the templates; this file holds shared rules,
   hover states, phone layout, the logo animation and the motion. */

body{margin:0;background:#FFFFFF}
*{box-sizing:border-box}
a{color:#134E43}a:hover{color:#0B2F28}
:focus-visible{outline:3px solid #134E43;outline-offset:3px}
.b-navlinks{display:flex}
.b-menubtn{display:none}
.b-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"fl fl ho in" "tr tm ho pc" "cta cta cta cta"}
.g-fl{grid-area:fl}.g-ho{grid-area:ho}.g-in{grid-area:in}.g-tr{grid-area:tr}.g-tm{grid-area:tm}.g-pc{grid-area:pc}.g-cta{grid-area:cta}
@media (max-width: 1100px){.b-navlinks{display:none}.b-menubtn{display:inline-flex}}
@media (max-width: 1000px){.b-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"fl fl" "ho in" "ho tr" "tm pc" "cta cta"}}
@media (max-width: 620px){.b-bento{grid-template-columns:minmax(0,1fr);grid-template-areas:"fl" "ho" "in" "tr" "tm" "pc" "cta"}}
@media (max-width: 640px){.b-hide-sm{display:none}}
.b-nl:hover{background:#E6F4EC !important}
.b-primary:hover{background:#0B3A31 !important}
.b-sun:hover{background:#FFC72E !important}
.b-glass:hover{background:rgba(255,255,255,0.16) !important}
.b-outline:hover{background:#F2F9F5 !important}
.b-mi:hover{background:#EAF6F0 !important}
.b-opt:hover{border-color:#134E43 !important}
.b-flink:hover{color:#FFFFFF !important}
.b-fab:hover{background:#0B3A31 !important}
input:focus,select:focus,textarea:focus{border-color:#134E43 !important;outline:none;box-shadow:0 0 0 3px rgba(19,78,67,0.18)}
@keyframes bUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.b-in{animation:bUp .8s cubic-bezier(.2,.7,.2,1) both}
.b-c1{animation:bUp .7s .35s cubic-bezier(.2,.7,.2,1) both}
.b-c2{animation:bUp .7s .55s cubic-bezier(.2,.7,.2,1) both}
.hl-arc{animation:hlArc 1.5s .3s cubic-bezier(.5,0,.25,1) both}
.hl-orb{transform-origin:54px 66px;animation:hlOrb 1.5s .3s cubic-bezier(.5,0,.25,1) both}
.hl-dot{transform-origin:88px 32px;animation:hlPop .5s 1.75s ease-out both}
.hl:hover .hl-arc{animation:hlArc2 1.5s 0s cubic-bezier(.5,0,.25,1) both}
.hl:hover .hl-orb{animation:hlOrb2 1.5s 0s cubic-bezier(.5,0,.25,1) both}
.hl:hover .hl-dot{animation:hlPop2 .5s 1.45s ease-out both}
@keyframes hlArc{0%{stroke-dashoffset:153}100%{stroke-dashoffset:0}}
@keyframes hlArc2{0%{stroke-dashoffset:153}100%{stroke-dashoffset:0}}
@keyframes hlOrb{0%{transform:rotate(-180deg);opacity:0}10%{opacity:1}100%{transform:rotate(0deg);opacity:1}}
@keyframes hlOrb2{0%{transform:rotate(-180deg);opacity:0}10%{opacity:1}100%{transform:rotate(0deg);opacity:1}}
@keyframes hlPop{0%{transform:scale(1)}45%{transform:scale(1.4)}100%{transform:scale(1)}}
@keyframes hlPop2{0%{transform:scale(1)}45%{transform:scale(1.4)}100%{transform:scale(1)}}
.b-pill:hover{background:#E6F4EC !important}
.b-faq:hover{background:#F6FAF8 !important}

/* Phone: homepage */
@media (max-width: 640px){
.hct-home .b-hide-sm{display:none !important}
.hct-home main > section[style*="120px"]{padding-top:72px !important}
.hct-home .b-hero{padding:28px 20px 20px !important;gap:28px !important}
.hct-home .b-hero .b-in{gap:20px !important}
.hct-home #top h1{font-size:40px !important}
.hct-home #top p{font-size:17px !important}
.hct-home #top .b-sun{flex:1 1 100%;min-height:52px !important;font-size:16px !important}
.hct-home #top .b-glass{display:none !important}
.hct-home #top ul{padding-top:16px !important;gap:8px 20px !important}
.hct-home .b-hero-img{flex-basis:100% !important;min-height:300px !important}
.hct-home .b-hero-img .b-c1{display:none !important}
.hct-home .b-hero-img .b-c2{right:14px !important;bottom:14px !important;max-width:200px !important;padding:14px 16px !important}
.hct-home .b-hero-img .b-c2 strong{font-size:28px !important}
.hct-home .b-tabs{width:100%;flex-wrap:nowrap !important;overflow-x:auto;scrollbar-width:none}
.hct-home .b-tab{flex:1 0 auto;min-height:44px !important;padding:0 14px !important}
.hct-home .b-contact{gap:12px !important;padding:10px 12px 10px 10px !important}
.hct-home .b-contact > span:first-child{width:40px !important;height:40px !important;border-radius:14px !important}
.hct-home .b-contact strong{font-size:clamp(12px,3.5vw,18px) !important}
.hct-home .b-foot-wrap{padding:44px 22px 24px !important}
.hct-home .b-foot{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:32px 16px !important}
.hct-home .b-foot-brand{grid-column:1 / -1}
.hct-home .b-foot nav{gap:8px !important}
.hct-home .b-foot nav a{font-size:14px !important}
.hct-home .b-foot .b-foot-co{grid-column:1 / -1;flex-direction:row !important;flex-wrap:wrap;column-gap:20px !important}
.hct-home .b-quote-panel{padding:28px 14px 14px !important;gap:28px !important}
.hct-home .b-quote-card{padding:22px 16px !important}
.hct-home .b-opt-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important}
.hct-home .b-opt{min-height:52px !important;padding:8px 10px 8px 12px !important;font-size:14px !important;line-height:1.25}
.hct-home .b-foot-co h3{flex-basis:100%}
.hct-home .b-foot-bar{margin-top:32px !important}
.hct-home .b-fab{width:56px;padding:0 !important;justify-content:center;gap:0 !important;font-size:0 !important}
}

/* Phone: treatment pages */
@media (max-width: 640px){
.hct-inner .b-hide-sm{display:none !important}
.hct-inner main > section[style*="120px"]{padding-top:72px !important}
.hct-inner #overview{padding-top:40px !important}
.hct-inner #top > div{padding:28px 20px 20px !important;gap:28px !important}
.hct-inner #top .b-in{gap:20px !important}
.hct-inner #top h1{font-size:40px !important}
.hct-inner #top .b-in > p{font-size:17px !important}
.hct-inner #top .b-sun{flex:1 1 100%;min-height:52px !important;font-size:16px !important}
.hct-inner #top .b-glass{display:none !important}
.hct-inner #top dl{margin-top:0 !important;gap:8px !important}
.hct-inner #top dl > div{padding:12px 14px !important;border-radius:16px !important}
.hct-inner #top dd{font-size:19px !important}
.hct-inner #top > div > div:last-child{flex-basis:100% !important;min-height:280px !important}
.hct-inner #top .b-c1{display:none !important}
.hct-inner .hct-subnav{top:86px !important;padding-top:10px !important}
.hct-inner .hct-subnav > div{flex-wrap:nowrap !important;overflow-x:auto;scrollbar-width:none}
.hct-inner .hct-subnav > div::-webkit-scrollbar{display:none}
.hct-inner .hct-subnav a{flex:0 0 auto;min-height:38px !important;padding:0 14px !important;font-size:13px !important;white-space:nowrap}
.hct-inner #overview > div:first-child{min-height:280px !important}
.hct-inner #recovery ol{gap:0 !important;margin-top:32px !important}
.hct-inner #recovery ol > li{display:grid !important;grid-template-columns:16px minmax(0,1fr);column-gap:16px;row-gap:2px !important;padding-bottom:20px}
.hct-inner #recovery ol > li > span[aria-hidden="true"]{grid-row:1 / span 2;flex-direction:column !important;align-self:stretch;gap:6px !important;margin-bottom:-20px}
.hct-inner #recovery ol > li > span[aria-hidden="true"] > span:nth-child(2){flex:1 1 auto !important;width:3px !important;height:auto !important;animation:none !important}
.hct-inner #results > div + div{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px !important;margin:28px -20px 0 !important;padding:0 20px 4px;scrollbar-width:none}
.hct-inner #results figure{flex:0 0 82%;scroll-snap-align:center}
.hct-inner #quote > div > div:first-child{padding:28px 20px 4px !important}
.hct-inner #quote > div > div:last-child{padding:12px !important}
.hct-inner #quote div:has(> img){display:none !important}
.hct-inner footer{padding-top:72px !important}
.hct-inner footer > div{padding:44px 22px 24px !important}
.hct-inner footer > div > div:first-child{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:32px 16px !important}
.hct-inner footer > div > div:first-child > div:first-child{grid-column:1 / -1}
.hct-inner footer nav{gap:8px !important}
.hct-inner footer nav a{font-size:14px !important}
.hct-inner footer .b-foot-co{grid-column:1 / -1;flex-direction:row !important;flex-wrap:wrap;column-gap:20px !important}
.hct-inner footer .b-foot-co h3{flex-basis:100%}
.hct-inner footer > div > div:last-child{margin-top:32px !important}
.hct-inner .b-fab{width:56px;padding:0 !important;justify-content:center;gap:0 !important;font-size:0 !important}
}

@media (max-width: 480px){header .b-primary{display:none !important}}

/* Theme helpers */
[hidden]{display:none !important}
@media (max-width: 640px){.b-hide-sm{display:none !important}}
.hct-root{--fd:'Geist',system-ui,sans-serif;--fb:'Geist',system-ui,sans-serif;font-family:'Geist',system-ui,sans-serif;color:#0F2420;background:#FFFFFF;font-size:17px;line-height:1.6;min-width:0}
main section[id]{scroll-margin-top:160px}
.skip-link{position:absolute;left:16px;top:-80px;z-index:100;padding:12px 20px;border-radius:999px;background:#134E43;color:#FFFFFF !important;font:600 15px/1.2 'Geist',system-ui,sans-serif;text-decoration:none}
.skip-link:focus{top:16px}
.form-error{margin:0;padding:12px 16px;border-radius:14px;background:#FFE6DB;color:#5A2A16;font-size:15px;line-height:1.5}
.form-error a{color:#5A2A16;font-weight:600}
button:disabled{opacity:.7;cursor:progress !important}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
@media (min-width: 783px){body.admin-bar header{top:44px !important}}
.screen-reader-text{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Blog posts, legal pages and other regular pages */
.hct-wrap{max-width:1600px;margin:0 auto;padding:0 20px}
.hct-band{margin-top:16px;border-radius:36px;background:#0F4A3F;color:#FFFFFF;padding:clamp(32px,5vw,72px) clamp(22px,4vw,64px);display:flex;flex-direction:column;gap:14px}
.hct-band h1{margin:0;font-weight:600;font-size:clamp(36px,5vw,72px);line-height:1;letter-spacing:-0.045em;text-wrap:balance;max-width:18em}
.hct-band p{margin:0;color:#CFE6DB;font-size:16px}
.hct-band a{color:#CFE6DB;text-underline-offset:3px}
.hct-prose{max-width:760px;margin:56px auto 0;font-size:18px;line-height:1.7;color:#24332F}
.hct-prose > :first-child{margin-top:0}
.hct-prose h2{margin:1.6em 0 .5em;font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-0.035em;color:#0F2420}
.hct-prose h3{margin:1.4em 0 .4em;font-size:24px;line-height:1.2;letter-spacing:-0.02em;color:#0F2420}
.hct-prose p,.hct-prose ul,.hct-prose ol{margin:0 0 1.1em}
.hct-prose img{max-width:100%;height:auto;border-radius:20px}
.hct-prose figure{margin:1.6em 0}
.hct-prose a{color:#134E43;text-underline-offset:3px}
.hct-prose blockquote{margin:1.6em 0;padding:18px 24px;border-radius:20px;background:#E6F4EC;color:#2F4A41}
.hct-prose table{width:100%;border-collapse:collapse;font-size:16px}
.hct-prose th,.hct-prose td{padding:10px 12px;border-bottom:1px solid #DCE5E0;text-align:left}
.hct-cover{margin:40px auto 0;max-width:1100px;border-radius:32px;overflow:hidden}
.hct-cover img{display:block;width:100%;height:auto}
.hct-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:20px;margin-top:40px}
.hct-card{display:flex;flex-direction:column;border-radius:28px;background:#F2F7F4;overflow:hidden;text-decoration:none;color:#0F2420 !important;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.hct-card:hover{transform:translateY(-4px);box-shadow:0 26px 44px -30px rgba(15,36,32,.5)}
.hct-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.hct-card > div{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px}
.hct-card h2{margin:0;font-size:22px;line-height:1.2;letter-spacing:-0.02em}
.hct-card p{margin:0;color:#4C5E58;font-size:15px;line-height:1.55}
.hct-card time{font-size:13px;font-weight:600;color:#3F6B5E}
.hct-pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:48px}
.hct-pagination a,.hct-pagination span{min-width:44px;min-height:44px;padding:0 16px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #CFDCD5;color:#0F2420;text-decoration:none;font-weight:600}
.hct-pagination .current{background:#134E43;border-color:#134E43;color:#FFFFFF}
.hct-empty{margin:56px auto 0;max-width:760px;font-size:18px;color:#3A4D47}
.hct-cta{max-width:760px;margin:56px auto 0;padding:28px;border-radius:28px;background:#CDEFDD;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between}
.hct-cta strong{font-size:22px;letter-spacing:-0.02em;line-height:1.2}
@media (max-width: 640px){.hct-prose{margin-top:36px;font-size:17px}.hct-band{padding:28px 20px}}

/* Long Dutch and German compound words: keep the hero title inside its column. */
.hct-root h1, .hct-root h2, .hct-root h3 { overflow-wrap: break-word; }
@media (min-width: 900px) {
	html:lang(de) .hct-inner main h1 { font-size: clamp(44px, 5.1vw, 74px) !important; }
	html:lang(nl) .hct-inner main h1 { font-size: clamp(44px, 5.5vw, 80px) !important; }
}
.hct-root p, .hct-root li, .hct-root a, .hct-root dd, .hct-root figcaption, .hct-root label { overflow-wrap: break-word; }

/* Header: tighter links on mid-size screens; German labels are longer, so German keeps the menu button a little longer. */
@media (min-width: 1101px) and (max-width: 1320px) {
	.hct-root .b-navlinks .b-nl { padding-left: 11px !important; padding-right: 11px !important; }
}
@media (max-width: 1240px) {
	html:lang(de) .hct-root .b-navlinks { display: none; }
	html:lang(de) .hct-root .b-menubtn { display: inline-flex; }
}
@media (max-width: 1150px) {
	html:lang(nl) .hct-root .b-navlinks { display: none; }
	html:lang(nl) .hct-root .b-menubtn { display: inline-flex; }
}

/* Very small phones: let long button labels wrap instead of being cut off. */
@media (max-width: 360px) {
	.hct-root .b-primary, .hct-root .b-sun { white-space: normal !important; text-align: center; }
}


/* Motion keyframes. Reveals use the individual translate, scale and rotate
   properties so they never fight inline transforms or hover transforms. */
@keyframes bUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes tRise{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}
@keyframes tHead{from{opacity:0;translate:0 32px;filter:blur(10px)}to{opacity:1;translate:0 0;filter:blur(0px)}}
@keyframes tImg{from{clip-path:inset(12% 9% 12% 9% round 28px);scale:1.2}to{clip-path:inset(0% 0% 0% 0% round 0px);scale:1}}
@keyframes tPop{0%{opacity:0;scale:.2;rotate:-30deg}65%{opacity:1;scale:1.15;rotate:6deg}100%{opacity:1;scale:1;rotate:0deg}}
@keyframes tLine{from{scale:0 1}to{scale:1 1}}
@keyframes tWiggle{0%,100%{rotate:0deg;scale:1}20%{rotate:-12deg;scale:1.12}45%{rotate:9deg;scale:1.12}70%{rotate:-5deg;scale:1.05}}
@keyframes tWipe{from{clip-path:inset(100% -10% 0% -10%);translate:0 .25em}to{clip-path:inset(-20% -10% -25% -10%);translate:0 0}}
@keyframes tDown{from{opacity:0;translate:0 -18px}to{opacity:1;translate:0 0}}
@keyframes tDrop{from{opacity:0;translate:0 -10px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes tPanel{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes tFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes tPulse{0%{box-shadow:0 0 0 0 rgba(19,78,67,.45)}75%,100%{box-shadow:0 0 0 18px rgba(19,78,67,0)}}

@media (prefers-reduced-motion: no-preference){
  /* Page load */
  header{animation:tDown .7s cubic-bezier(.2,.7,.2,1) both}
  header [id$="-mega"],header [data-js="menu"]{transform-origin:50% 0;animation:tDrop .26s cubic-bezier(.2,.7,.2,1) both}
  .b-in{animation:bUp .8s cubic-bezier(.2,.7,.2,1) both}
  div.b-c1{animation:bUp .7s .35s cubic-bezier(.2,.7,.2,1) both,tFloat 7s 1.4s ease-in-out infinite}
  div.b-c2{animation:bUp .7s .55s cubic-bezier(.2,.7,.2,1) both,tFloat 8s 2s ease-in-out infinite}
  main h1{animation:tWipe 1.1s .2s cubic-bezier(.2,.7,.2,1) both}
  #top img{animation:tImg 1.5s .1s cubic-bezier(.2,.7,.2,1) both}
  #top dl > div,#top ul > li{animation:bUp .6s cubic-bezier(.2,.7,.2,1) both}
  #top dl > div:nth-child(1),#top ul > li:nth-child(1){animation-delay:.5s}
  #top dl > div:nth-child(2),#top ul > li:nth-child(2){animation-delay:.58s}
  #top dl > div:nth-child(3),#top ul > li:nth-child(3){animation-delay:.66s}
  #top dl > div:nth-child(4),#top ul > li:nth-child(4){animation-delay:.74s}

  /* Buttons: lift, light sweep, press */
  .b-primary,.b-sun,.b-glass,.b-outline{position:relative;isolation:isolate;overflow:hidden;transition:background-color .2s ease,translate .3s cubic-bezier(.2,.7,.2,1),scale .15s ease,box-shadow .3s ease !important}
  .b-primary::after,.b-sun::after,.b-glass::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 70%);translate:-120% 0;transition:translate .8s cubic-bezier(.2,.7,.2,1)}
  .b-primary:hover::after,.b-sun:hover::after,.b-glass:hover::after{translate:120% 0}
  .b-primary:hover,.b-sun:hover,.b-glass:hover,.b-outline:hover{translate:0 -2px}
  .b-primary:hover{box-shadow:0 16px 30px -14px rgba(19,78,67,.7)}
  .b-sun:hover{box-shadow:0 16px 32px -12px rgba(255,199,46,.8)}
  .b-primary:active,.b-sun:active,.b-glass:active,.b-outline:active{translate:0 0;scale:.97}
  .b-glass svg,.b-outline svg{transition:rotate .35s cubic-bezier(.2,.7,.2,1),scale .35s cubic-bezier(.2,.7,.2,1)}
  .b-glass:hover svg,.b-outline:hover svg{rotate:-12deg;scale:1.12}
  .b-fab{transition:background-color .2s ease,translate .3s cubic-bezier(.2,.7,.2,1) !important}
  .b-fab:hover{translate:0 -3px}
  .b-fab::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;animation:tPulse 2.8s 2.5s ease-out infinite}
  .b-mi,.b-flink{transition:background-color .18s ease,color .18s ease,translate .2s ease !important}
  .b-mi:hover,.b-flink:hover{translate:3px 0}
  .b-tlink svg{transition:translate .25s ease}
  .b-tlink:hover svg{translate:4px 0}

  /* Images and cards on hover */
  main img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
  main div:hover > img{transform:scale(1.045)}
  main section:not(#top) article,.b-bento > div,#included li{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
  main section:not(#top) article:hover,.b-bento > div:hover,#included li:hover{transform:translateY(-4px);box-shadow:0 26px 44px -30px rgba(15,36,32,.5)}
  main section:not(#top) li:hover > span[aria-hidden="true"]:has(> svg),main section:not(#top) .b-bento > div:hover > span[aria-hidden="true"]{animation:tWiggle .6s ease both}

  /* Things that appear on click */
  #faq p{animation:tPanel .35s ease both}
  [role="tabpanel"]{animation:tPanel .5s cubic-bezier(.2,.7,.2,1) both}
  [role="status"]{animation:bUp .5s cubic-bezier(.2,.7,.2,1) both}

  /* Scroll reveals: linked to the scroll position, finished before the element is fully in view */
  @supports (animation-timeline: view()){
    main section:not(#top) h2{animation:tHead linear both;animation-timeline:view();animation-range:entry 0% entry calc(100% + 140px)}
    main section:not(#top) div:has(> h2) > p{animation:tRise linear both;animation-timeline:view();animation-range:entry 0% entry calc(100% + 120px)}
    main section:not(#top) img{animation:tImg linear both;animation-timeline:view();animation-range:entry 0% entry 75%}
    main section:not(#top) :is(article,figure,dl > div,.b-bento > div,li:not(article li,form li)){animation:tRise linear both;animation-timeline:view();animation-range:entry 0% entry calc(100% + 40px)}
    main section:not(#top) :is(article,figure,.b-bento > div,li):nth-child(2){animation-range:entry 15% entry calc(100% + 70px)}
    main section:not(#top) :is(article,figure,.b-bento > div,li):nth-child(3){animation-range:entry 30% entry calc(100% + 100px)}
    main section:not(#top) :is(article,figure,.b-bento > div,li):nth-child(4){animation-range:entry 45% entry calc(100% + 130px)}
    main section:not(#top) :is(article,figure,.b-bento > div,li):nth-child(5){animation-range:entry 60% entry calc(100% + 160px)}
    main section:not(#top) :is(article,figure,.b-bento > div,li):nth-child(n+6){animation-range:entry 75% entry calc(100% + 190px)}
    main section:not(#top) span[aria-hidden="true"]:has(> svg){animation:tPop linear both;animation-timeline:view();animation-range:entry 40% entry calc(100% + 120px)}
    main section:not(#top) li > svg:first-child{animation:tPop linear both;animation-timeline:view();animation-range:entry 40% entry calc(100% + 120px)}
    main section:not(#top) ol > li > span[aria-hidden="true"] > span:first-child{animation:tPop linear both;animation-timeline:view();animation-range:entry 50% entry calc(100% + 140px)}
    main section:not(#top) ol > li > span[aria-hidden="true"] > span:nth-child(2){transform-origin:0 50%;animation:tLine linear both;animation-timeline:view();animation-range:entry 60% entry calc(100% + 200px)}
  }
}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition:none !important;animation:none !important}}