/* 03.5 — azonnal olvasható tartalom, késleltetés nélküli beúszások. */
:root{--reveal-duration:620ms;--reveal-distance:34px;--motion-ease:cubic-bezier(.16,1,.3,1)}
main{overflow-x:clip}
@supports not (overflow:clip){main{overflow-x:hidden}}
.brand{flex:0 1 185px;width:185px;max-width:185px;min-width:0;height:auto;aspect-ratio:3;overflow:hidden}
.brand img{position:absolute;width:120%;max-width:none;height:auto;left:-10%;top:50%;transform:translateY(-50%)}
.nav-cta,.menu-toggle{flex-shrink:0}
.reading-progress{position:absolute;bottom:-1px;left:0;right:0;height:3px;overflow:hidden;pointer-events:none}
.reading-progress>span{display:block;width:100%;height:100%;background:var(--raspberry);transform:scaleX(0);transform-origin:left}
.desktop-nav a[aria-current=location]{color:var(--raspberry)}
.desktop-nav a[aria-current=location]::after{transform:scaleX(1)}
.headline-line{display:block;overflow:visible;padding-block:.09em;margin-block:-.09em}
.headline-line>span{display:block;transform-origin:left bottom}
.hero h1 em{position:relative;display:inline-block;isolation:isolate}
.hero h1 em::after{content:'';position:absolute;left:0;right:-.04em;bottom:.035em;height:.085em;background:#b83f5b26;z-index:-1;transform-origin:left}
.hero-copy.motion-start h1 em::after{animation:title-underline 650ms 420ms var(--motion-ease) both}
@keyframes title-underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-visual{--reveal-x:54px;--reveal-y:16px}
.hero-visual.is-visible{transform:none}
.portrait-edge{transform-origin:top left}
.hero-visual.is-visible .portrait-edge{animation:portrait-frame 850ms 120ms var(--motion-ease) both}
.hero-visual.is-visible .portrait>img{animation:portrait-settle 1100ms var(--motion-ease) both}
.hero-visual.is-visible .portrait-tag{animation:tag-arrive 420ms var(--motion-ease) both}
.hero-visual.is-visible figcaption{animation:caption-arrive 420ms var(--motion-ease) both}
@keyframes portrait-frame{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes portrait-settle{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes tag-arrive{from{transform:translateX(-12px)}to{transform:none}}
@keyframes caption-arrive{from{transform:translateY(12px)}to{transform:none}}
.service-item{position:relative}
.service-item>summary{position:relative}
.service-item>summary::before{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--raspberry);transform:scaleX(0);transform-origin:left;transition:transform 320ms var(--motion-ease)}
.service-item.is-expanded>summary::before{transform:scaleX(1)}
.service-item.is-visible .service-symbol .icon{animation:draw-icon 800ms 100ms var(--motion-ease) both}
.service-item.is-visible .service-number{animation:number-arrive 320ms var(--motion-ease) both}
@keyframes draw-icon{from{stroke-dasharray:90;stroke-dashoffset:90;opacity:.35}to{stroke-dasharray:90;stroke-dashoffset:0;opacity:1}}
@keyframes number-arrive{from{transform:translateY(10px)}to{transform:none}}
.check-list li.is-visible .icon,.about-copy.is-visible .check-list .icon{animation:check-arrive 450ms 100ms var(--motion-ease) both}
@keyframes check-arrive{from{transform:scale(.3) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
.process{position:relative}
.process>li{position:relative}
.process>li>span{position:relative;z-index:1;display:grid;place-items:center;flex:none;width:30px;height:30px;padding:0;border:1px solid #8b6b73;border-radius:50%;background:var(--ink);font-size:10px}
.process>li:not(:last-child)::after{content:'';position:absolute;left:14px;top:34px;width:1px;height:calc(100% - 11px);background:#8b6b73;transform-origin:top}
.process>li.is-visible::after{animation:process-line 600ms 160ms var(--motion-ease) both}
@keyframes process-line{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.minute-count{font-variant-numeric:tabular-nums;display:inline-block;min-width:1.25em}
.button{position:relative;isolation:isolate;overflow:hidden;transition:background 180ms,transform 180ms var(--motion-ease),box-shadow 180ms}
.button::after{content:'';position:absolute;top:-20%;bottom:-20%;left:-70%;width:40%;background:linear-gradient(90deg,transparent,#ffffff42,transparent);transform:skewX(-20deg);pointer-events:none}
.button.motion-cue::after{animation:button-sweep 750ms 120ms ease-out both}
.button.motion-cue .icon{animation:arrow-nudge 650ms 150ms var(--motion-ease) both}
@keyframes button-sweep{from{transform:translateX(0) skewX(-20deg)}to{transform:translateX(500%) skewX(-20deg)}}
@keyframes arrow-nudge{0%{transform:translateX(0)}35%{transform:translateX(6px)}70%{transform:translateX(-2px)}100%{transform:none}}
@media(hover:hover) and (pointer:fine){
  .button:hover{transform:translateY(-3px);box-shadow:0 9px 22px #99314929}
  .button:hover .icon,.text-link:hover .icon{transform:translateX(5px)}
  .button:not(.motion-cue):hover::after{animation:button-sweep 600ms ease-out both}
  .service-item>summary:hover::before{transform:scaleX(1)}
  .service-item>summary:hover .service-symbol{transform:translateY(-3px) rotate(-4deg);background:#f2dce3}
  .service-name{transition:transform 220ms var(--motion-ease),color 180ms}
  .service-item>summary:hover .service-name{transform:translateX(5px)}
}
.button:active{transform:scale(.97);box-shadow:none}
@media(max-width:850px){.brand{flex-basis:170px;max-width:170px}}
@media(max-width:640px){
  :root{--reveal-duration:500ms;--reveal-distance:26px}
  .brand{flex-basis:148px;max-width:148px}
  .hero-visual{--reveal-x:0px;--reveal-y:35px}
  .process>li{gap:16px}
  .hero h1{font-size:clamp(34px,9.7vw,52px)}
}
@media(max-width:360px){.brand{flex-basis:134px;max-width:134px}.hero h1{font-size:32px}}
html[data-motion=reduced] .reveal-pending,html[data-motion=reduced] .hero-visual.reveal-pending{opacity:1;transform:none}
html[data-motion=reduced] .service-item>summary:hover .service-name{transform:none}
@media(prefers-reduced-motion:reduce){.reveal-pending,.hero-visual.reveal-pending{opacity:1;transform:none}.service-item>summary:hover .service-name{transform:none}}
@media print{.reading-progress{display:none}.headline-line{overflow:visible}.reveal-pending,.hero-visual.reveal-pending{opacity:1;transform:none}}

/* Content stays in its normal position until the first visible frame.
   Animate only movement, with no hidden state, fade or stagger delay. */
.reveal-item{--enter-x:0px;--enter-y:12px;--side-distance:32px;--reveal-duration:420ms}
.reveal-item[data-enter=left]{--enter-x:calc(-1 * var(--side-distance));--enter-y:0px}
.reveal-item[data-enter=right]{--enter-x:var(--side-distance);--enter-y:0px}
.reveal-item.motion-enter{animation:content-arrive var(--reveal-duration) var(--motion-ease)}
@keyframes content-arrive{from{transform:translate3d(var(--enter-x),var(--enter-y),0)}to{transform:none}}
@media(max-width:640px){.reveal-item{--side-distance:16px;--enter-y:8px;--reveal-duration:320ms}}
html[data-motion=reduced] .reveal-item{animation:none;opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal-item{animation:none;opacity:1;transform:none}}
@media print{.reveal-item{animation:none!important;opacity:1!important;transform:none!important}}