{"id":16,"date":"2026-02-10T19:17:48","date_gmt":"2026-02-10T18:17:48","guid":{"rendered":"https:\/\/alohamood.pl\/?page_id=16"},"modified":"2026-03-16T13:43:30","modified_gmt":"2026-03-16T12:43:30","slug":"strona-glowna","status":"publish","type":"page","link":"https:\/\/alohamood.pl\/en\/","title":{"rendered":"Homepage"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"16\" class=\"elementor elementor-16\">\n\t\t\t\t<div class=\"elementor-element elementor-element-af12c2e e-con-full aloha-views-host e-flex e-con e-parent\" data-id=\"af12c2e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-786a855 aloha-lang-source elementor-widget elementor-widget-shortcode\" data-id=\"786a855\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"trp-shortcode-switcher__wrapper\"\r\n     style=\"--bg:#ffffff00;--bg-hover:#00000000;--text:#ffffff;--text-hover:#ff7a1f;--border:none;--border-width:0px;--border-color:#14385200;--border-radius:0px;--flag-radius:2px;--flag-size:18px;--aspect-ratio:4\/3;--font-size:14px;--transition-duration:0.2s\"\r\n     role=\"group\"\r\n     data-open-mode=\"hover\">\r\n\r\n    \r\n        <!-- Opposite mode: render ONLY the in-flow (relative) element so it holds space -->\r\n        <div class=\"trp-language-switcher trp-ls-dropdown trp-shortcode-switcher trp-shortcode-anchor trp-open-on-hover trp-opposite-button\"\r\n             role=\"navigation\"\r\n             aria-label=\"Website language selector\"\r\n             data-no-translation>\r\n                <div class=\"trp-current-language-item__wrapper trp-hide-arrow\">\r\n        <a class=\"trp-language-item trp-language-item__default\" data-no-translation href=\"https:\/\/alohamood.pl\/en\/wp-json\/wp\/v2\/pages\/16#TRPLINKPROCESSED\" title=\"PL\"><span class=\"trp-language-item-name\">PL<\/span><\/a>            <\/div>\r\n            <\/div>\r\n\r\n    <\/div>\r\n<style id=\"trp-language-switcher-shortcode-custom-css\">.trp-language-switcher .trp-language-item-name { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text, #000); font-size: var(--font-size, 14px); line-height: 1; font-family: \"Plus Jakarta Sans\", -apple-system, \"Segoe UI\", sans-serif; font-weight: 500; margin-top: 3px; }<\/style><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cd16a8b elementor-widget__width-inherit aloha-view-wrap elementor-widget elementor-widget-html\" data-id=\"cd16a8b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  \/* === ALOHA WOW GRID v4 (ONE ENTITY BG = SELECTED TILE) === *\/\r\n  :root{\r\n    --bg: #070b14;\r\n    --ink: rgba(255,255,255,.92);\r\n    --muted: rgba(255,255,255,.62);\r\n    --shadow: 0 18px 60px rgba(0,0,0,.55);\r\n\r\n    --card-w: clamp(170px, 12vw, 220px);\r\n    --card-r: 22px;\r\n    --card-gap: 18px;\r\n\r\n    --glass: rgba(255,255,255,.06);\r\n    --glass-b: rgba(255,255,255,.12);\r\n\r\n    --zoom-dur: 1400ms;\r\n    --ease-premium: cubic-bezier(.22, 1, .36, 1);\r\n\r\n    --left-col: 620px;\r\n    --rail-offset: -3px; \/* mikro przesuni\u0119cie raila L\/P *\/\r\n\r\n    \/* === sta\u0142a liczba widocznych kafelk\u00f3w (okno raila) === *\/\r\n    --tiles-visible: 3.5;\r\n    --tiles-gaps: 3;\r\n\r\n    --rail-visible-w: calc(\r\n      var(--tiles-visible) * var(--card-w) +\r\n      var(--tiles-gaps) * var(--card-gap)\r\n    );\r\n  }\r\n\r\n  \/* ===== WRAPPER ===== *\/\r\n  .aloha-wow{\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 100vh;\r\n    height: calc(100vh - 140px);\r\n    max-height: 980px;\r\n    overflow: hidden;\r\n    isolation: isolate;\r\n    background: var(--bg);\r\n    box-shadow: var(--shadow);\r\n  }\r\n\r\n  \/* ===== STAGE (tu \u017cyje aktualny background jako TEN SAM kafelek) ===== *\/\r\n  .aloha-stage{\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 0;\r\n    overflow: hidden;\r\n    background: var(--bg);\r\n    transform: translateZ(0);\r\n    will-change: transform;\r\n  }\r\n\r\n  .aloha-bgcard{\r\n    position: absolute !important;\r\n    inset: 0 !important;\r\n    width: 100% !important;\r\n    height: 100% !important;\r\n    border-radius: 0 !important;\r\n    transform: none !important;\r\n    opacity: 1 !important;\r\n    filter: none !important;\r\n    box-shadow: none !important;\r\n    border: none !important;\r\n    pointer-events: none !important;\r\n    z-index: 0 !important;\r\n  }\r\n\r\n  \/* (zostawiamy jak masz teraz \u2013 \u017ceby nie zmienia\u0107 looku) *\/\r\n  .aloha-bgcard::after{ opacity: .9; }\r\n  .aloha-bgcard .aloha-card__label{ display: none; }\r\n\r\n  \/* ===== LAYOUT ===== *\/\r\n  .aloha-wow__inner{\r\n    position: relative;\r\n    z-index: 4;\r\n    height: 100%;\r\n    display: flex;\r\n    align-items: stretch;\r\n    justify-content: space-between;\r\n    gap: clamp(24px, 4vw, 56px);\r\n    padding: clamp(24px, 4vw, 52px);\r\n  }\r\n\r\n  \/* LEFT *\/\r\n  .aloha-wow__left{\r\n    flex: 0 0 var(--left-col);\r\n    max-width: var(--left-col);\r\n    min-width: var(--left-col);\r\n    height: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    color: var(--ink);\r\n  }\r\n\r\n  .aloha-wow__kicker{\r\n    font-size: 12px;\r\n    letter-spacing: .22em;\r\n    text-transform: uppercase;\r\n    color: var(--muted);\r\n    margin-bottom: 10px;\r\n  }\r\n\r\n  .aloha-wow__title{\r\n    font-size: clamp(34px, 4.2vw, 66px);\r\n    line-height: .92;\r\n    margin: 0 0 16px 0;\r\n    font-weight: 850;\r\n    letter-spacing: -0.02em;\r\n    text-shadow: 0 10px 40px rgba(0,0,0,.28);\r\n  }\r\n\r\n  .aloha-wow__desc{\r\n    margin: 0;\r\n    max-width: 46ch;\r\n    color: rgba(255,255,255,.78);\r\n    font-size: 15px;\r\n    line-height: 1.55;\r\n    text-shadow: 0 10px 40px rgba(0,0,0,.20);\r\n  }\r\n\r\n  .aloha-wow__meta{\r\n    margin-top: 18px;\r\n    display: flex;\r\n    gap: 10px;\r\n    align-items: center;\r\n    font-size: 12px;\r\n  }\r\n\r\n  .aloha-pill{\r\n    padding: 8px 10px;\r\n    border-radius: 999px;\r\n    background: rgba(255,255,255,.08);\r\n    box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset;\r\n    color: rgba(255,255,255,.85);\r\n  }\r\n\r\n  \/* ===== COPY SYNC ===== *\/\r\n  .aloha-wow__left > *{ opacity: 1; transform: none; }\r\n\r\n  .aloha-wow.is-zooming .aloha-wow__left > *{\r\n    opacity: 0;\r\n    transform: translateY(22px);\r\n  }\r\n\r\n  .aloha-wow.is-copy-in .aloha-wow__left > *{\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n    transition: opacity .55s ease, transform .85s var(--ease-premium);\r\n  }\r\n\r\n  .aloha-wow.is-copy-in .aloha-wow__kicker{ transition-delay: .00s; }\r\n  .aloha-wow.is-copy-in .aloha-wow__title { transition-delay: .06s; }\r\n  .aloha-wow.is-copy-in .aloha-wow__desc  { transition-delay: .12s; }\r\n  .aloha-wow.is-copy-in .aloha-wow__meta  { transition-delay: .16s; }\r\n\r\n  \/* ===== RIGHT: sta\u0142e okno (3.5 kafla) + anchor ===== *\/\r\n  .aloha-wow__right{\r\n    display: flex;\r\n    align-items: flex-end;\r\n    padding-bottom: 44px;\r\n    position: relative;\r\n\r\n    width: var(--rail-visible-w);\r\n    flex: 0 0 var(--rail-visible-w);\r\n\r\n    justify-content: flex-start;\r\n    overflow: visible;\r\n\r\n    padding-left: var(--rail-offset);\r\n  }\r\n\r\n  \/* RAIL *\/\r\n  .aloha-wow__rail{\r\n    display: flex;\r\n    align-items: flex-end;\r\n    gap: var(--card-gap);\r\n\r\n    position: relative;\r\n    left: 0;\r\n\r\n    width: max-content;     \/* wa\u017cne: du\u017co kafli leci w prawo poza viewport *\/\r\n    flex: 0 0 auto;\r\n\r\n    justify-content: flex-start;\r\n    margin-bottom: 44px;\r\n\r\n    transition: transform var(--zoom-dur) var(--ease-premium);\r\n  }\r\n\r\n  \/* ===== TILES ===== *\/\r\n  .aloha-card{\r\n    position: relative;\r\n    width: var(--card-w);\r\n    aspect-ratio: 9 \/ 16;\r\n    border-radius: var(--card-r);\r\n    overflow: hidden;\r\n    cursor: pointer;\r\n    flex: 0 0 auto;\r\n\r\n    background: var(--glass);\r\n    border: 1px solid var(--glass-b);\r\n\r\n    \/*box-shadow: 0 18px 60px rgba(0,0,0,.45);*\/\r\n    transform: translateY(10px) scale(.96);\r\n    opacity: .78;\r\n    filter: saturate(.98) contrast(.99);\r\n    \r\n    will-change: transform, opacity;\r\n    backface-visibility: hidden;\r\n    transform-style: preserve-3d;\r\n\r\n    transition:\r\n      transform .55s var(--ease-premium),\r\n      opacity .55s ease,\r\n      filter .55s ease,\r\n      box-shadow .55s ease,\r\n      border-color .55s ease;\r\n  }\r\n\r\n  .aloha-card video,\r\n  .aloha-card img{\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    display: block;\r\n    transform: scale(1.02);\r\n  }\r\n  \r\n  \/* kafelki renderuj\u0105 si\u0119 l\u017cej *\/\r\n    .aloha-card video{\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      filter: contrast(0.98);\r\n    }\r\n    \r\n    \/* lekki downscale przy dekodowaniu *\/\r\n    .aloha-card{\r\n      contain: layout;\r\n    }\r\n\r\n\r\n  .aloha-card::after{\r\n    content:\"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.62));\r\n    opacity: .9;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .aloha-card__label{\r\n    position: absolute;\r\n    left: 14px;\r\n    right: 14px;\r\n    bottom: 12px;\r\n    z-index: 2;\r\n\r\n    color: rgba(255,255,255,.92);\r\n    font-size: 13px;\r\n    line-height: 1.25;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    gap: 10px;\r\n    align-items: flex-end;\r\n    text-shadow: 0 10px 30px rgba(0,0,0,.35);\r\n  }\r\n\r\n  .aloha-card__tag{\r\n    font-size: 11px;\r\n    color: rgba(255,255,255,.75);\r\n  }\r\n\r\n  @media (hover:hover){\r\n    .aloha-card:hover{\r\n      transform: translateY(-4px) scale(1.01);\r\n      opacity: .92;\r\n    }\r\n  }\r\n\r\n  \/* ===== FLOATING ZOOM (TEN SAM kafel do fullscreen) ===== *\/\r\n  .aloha-card.is-floating{\r\n    position: absolute !important;\r\n    margin: 0 !important;\r\n    z-index: 3 !important;           \/* pod rail, nad stage *\/\r\n    pointer-events: none !important;\r\n\r\n    will-change: left, top, width, height, border-radius, transform, opacity;\r\n    transition:\r\n      left var(--zoom-dur) var(--ease-premium),\r\n      top var(--zoom-dur) var(--ease-premium),\r\n      width var(--zoom-dur) var(--ease-premium),\r\n      height var(--zoom-dur) var(--ease-premium),\r\n      border-radius var(--zoom-dur) var(--ease-premium),\r\n      transform var(--zoom-dur) var(--ease-premium),\r\n      opacity 420ms ease;\r\n  }\r\n\r\n  .aloha-card.is-floating.is-expanding{\r\n    transform: none !important;\r\n    opacity: 1 !important;\r\n    filter: none !important;\r\n    box-shadow: 0 26px 90px rgba(0,0,0,.45) !important;\r\n    border-color: rgba(255,255,255,.18) !important;\r\n  }\r\n\r\n  \/* (placeholder zostawiamy \u2013 nawet je\u015bli teraz nie u\u017cywasz,\r\n     bo \u0142atwo wr\u00f3ci\u0107 do wariantu z placeholderem) *\/\r\n  .aloha-card--ph{\r\n    width: var(--card-w);\r\n    aspect-ratio: 9 \/ 16;\r\n    flex: 0 0 auto;\r\n    border-radius: var(--card-r);\r\n  }\r\n    \/* ===== TABLET \/ SMALL LAPTOP ===== *\/\r\n    @media (max-width: 767px){\r\n      :root{\r\n        --left-col: 50%;        \/* opcjonalne, w kolumnie i tak ma ma\u0142e znaczenie *\/\r\n        --rail-offset: -100px;\r\n        --card-w: min(44vw, 135px);\r\n    \r\n        \/* kontrolujemy \u201cbezpieczny\u201d lewy padding i trailing *\/\r\n        --rail-safe-left: 350px;\r\n        --rail-trailing: 18px;\r\n      }\r\n    \r\n      .aloha-wow__inner{\r\n        flex-direction: column;\r\n        gap: 5px;\r\n        padding: 16px;\r\n        padding-top: 125px;\r\n        padding-bottom: 100px;\r\n        height: 100%;\r\n      }\r\n    \r\n      .aloha-wow__left{\r\n        flex: 1 1 auto;\r\n        max-width: none;\r\n        min-width: 0;\r\n        min-height: 0;\r\n        height: auto;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: flex-end;\r\n      }\r\n    \r\n      .aloha-wow__right{\r\n        width: 100%;\r\n        flex: 0 0 auto;\r\n        padding: 0;\r\n        margin-top: auto;\r\n      }\r\n    \r\n      .aloha-wow__rail{\r\n        margin-bottom: 0;\r\n        overflow-x: auto;\r\n        overflow-y: hidden;\r\n    \r\n        -webkit-overflow-scrolling: touch;\r\n        overscroll-behavior-x: contain;\r\n    \r\n        scroll-snap-type: x mandatory;\r\n        scrollbar-width: none;\r\n    \r\n        \/* to samo co mia\u0142e\u015b, tylko jawnie *\/\r\n        padding-top: 6px;\r\n        padding-bottom: 10px;\r\n        padding-left: var(--rail-safe-left);\r\n        padding-right: var(--rail-trailing);\r\n      }\r\n      .aloha-wow__rail::-webkit-scrollbar{ display:none; }\r\n    \r\n      .aloha-card{\r\n        scroll-snap-align: start;\r\n        transform: translateY(0) scale(1);\r\n        opacity: 0.92;\r\n        border-radius: 8px;\r\n        box-shadow: none;\r\n      }\r\n    }\r\n    \r\n    \/* ===== MOBILE (tu zaczyna si\u0119 \u201cprawdziwy mobile\u201d) ===== *\/\r\n    @media (max-width: 640px){\r\n      :root{\r\n        --card-w: min(40vw, 200px);\r\n        --card-gap: 12px;\r\n        --card-r: 8px;\r\n      }\r\n    \r\n      .aloha-wow{\r\n        min-height: 100vh;\r\n        height: calc(100svh - 120px);\r\n        max-height: none;\r\n      }\r\n    \r\n      .aloha-wow__inner{\r\n        gap: 0px;\r\n        padding: 14px;\r\n        padding-top: 230px;\r\n        padding-bottom: 125px;\r\n      }\r\n    \r\n      .aloha-wow__title{\r\n        font-size: clamp(28px, 7vw, 42px);\r\n        line-height: 0.98;\r\n      }\r\n    \r\n      .aloha-wow__desc{\r\n        max-width: 60ch;\r\n        font-size: 14px;\r\n      }\r\n    \r\n      .aloha-wow__right{\r\n        margin-top: auto;\r\n        overflow: visible;\r\n      }\r\n    \r\n      .aloha-wow__rail{\r\n        padding: 4px 0 4px;\r\n        padding-right: 18px;\r\n      }\r\n    \r\n      .aloha-card__label{\r\n        left: 12px; right: 12px; bottom: 10px;\r\n        font-size: 12px;\r\n      }\r\n      .aloha-card__tag{ font-size: 10px; }\r\n      .aloha-card{\r\n        box-shadow: none;\r\n      }\r\n    }\r\n    \r\n    \/* ===== SMALL PHONES ===== *\/\r\n    @media (max-width: 380px){\r\n      :root{\r\n        --card-w: min(44vw, 120px);\r\n      }\r\n    \r\n      .aloha-wow__inner{\r\n        padding: 14px;\r\n        padding-top: 170px;\r\n        padding-bottom: 125px;\r\n      }\r\n    \r\n      .aloha-wow__rail{\r\n        padding-right: 14px;\r\n      }\r\n      .aloha-card{\r\n        box-shadow: none;\r\n      }\r\n    }\r\n    \r\n    \r\n   \/* ===== TABLET (iPad 768\u20131024): desktop-look, bez kolumny ===== *\/\r\n    @media (min-width: 768px) and (max-width: 1024px){\r\n      :root{\r\n        \/* kontrolujemy \u201cbezpieczny\u201d lewy padding i trailing *\/\r\n        --rail-safe-left: 50px;\r\n        --rail-trailing: 18px;\r\n        --left-col: clamp(360px, 44vw, 560px);\r\n        --rail-offset: -8px;\r\n    \r\n        --card-w: min(44vw, 170px);\r\n        --card-gap: 14px;\r\n        --card-r: 14px;\r\n    \r\n        --tiles-visible: 3.5;\r\n        --tiles-gaps: 3;\r\n    \r\n        --rail-visible-w: calc(\r\n          var(--tiles-visible) * var(--card-w) +\r\n          var(--tiles-gaps) * var(--card-gap)\r\n        );\r\n      }\r\n    \r\n      .aloha-wow{\r\n        min-height: 100svh;\r\n        height: calc(100svh - 120px);\r\n        max-height: none;\r\n      }\r\n    \r\n      .aloha-wow__inner{\r\n        flex-direction: row;           \/* KLUCZ: nie kolumna *\/\r\n        align-items: stretch;\r\n        gap: 0px;\r\n        padding: 22px;\r\n        padding-top: 120px;            \/* pod header *\/\r\n        padding-bottom: 45px;          \/* pod footer *\/\r\n      }\r\n    \r\n      .aloha-wow__left{\r\n        flex: 0 0 var(--left-col);\r\n        max-width: var(--left-col);\r\n        min-width: var(--left-col);\r\n        height: 100%;\r\n      }\r\n    \r\n      .aloha-wow__right{\r\n        width: var(--rail-visible-w);\r\n        flex: 0 0 var(--rail-visible-w);\r\n        padding-left: var(--rail-offset);\r\n        overflow: visible;\r\n      }\r\n    \r\n      \/* na iPadzie NIE chcemy scroll-snap \u2013 ma wygl\u0105da\u0107 jak desktop *\/\r\n      .aloha-wow__rail{\r\n        overflow: visible;\r\n        scroll-snap-type: none;\r\n        padding-right: 18px; \/* \u017ceby nie wygl\u0105da\u0142o na uci\u0119te *\/\r\n        margin-bottom: 44px;\r\n      }\r\n      .aloha-card{\r\n        box-shadow: none;\r\n      }\r\n    }\r\n    \r\n    \/* ===== TABLET (iPad 768\u20131024): desktop-look, bez kolumny ===== *\/\r\n        @media (min-width: 768px) and (max-width: 1024px) and (min-height: 1020px){\r\n          :root{\r\n            \/* kontrolujemy \u201cbezpieczny\u201d lewy padding i trailing *\/\r\n            --rail-safe-left: 50px;\r\n            --rail-trailing: 18px;\r\n            --left-col: clamp(360px, 44vw, 560px);\r\n            --rail-offset: -8px;\r\n        \r\n            --card-w: min(44vw, 240px);\r\n            --card-gap: 14px;\r\n            --card-r: 14px;\r\n        \r\n            --tiles-visible: 3.5;\r\n            --tiles-gaps: 3;\r\n        \r\n            --rail-visible-w: calc(\r\n              var(--tiles-visible) * var(--card-w) +\r\n              var(--tiles-gaps) * var(--card-gap)\r\n            );\r\n          }\r\n        \r\n          .aloha-wow{\r\n            min-height: 100svh;\r\n            height: calc(100svh - 120px);\r\n            max-height: none;\r\n          }\r\n        \r\n          .aloha-wow__inner{\r\n            flex-direction: row;           \/* KLUCZ: nie kolumna *\/\r\n            align-items: stretch;\r\n            gap: 0px;\r\n            padding: 22px;\r\n            padding-top: 120px;            \/* pod header *\/\r\n            padding-bottom: 45px;          \/* pod footer *\/\r\n          }\r\n        \r\n          .aloha-wow__left{\r\n            flex: 0 0 var(--left-col);\r\n            max-width: var(--left-col);\r\n            min-width: var(--left-col);\r\n            height: 100%;\r\n            padding-bottom: 300px;\r\n          }\r\n        \r\n          .aloha-wow__right{\r\n            width: var(--rail-visible-w);\r\n            flex: 0 0 var(--rail-visible-w);\r\n            padding-left: var(--rail-offset);\r\n            overflow: visible;\r\n          }\r\n        \r\n          \/* na iPadzie NIE chcemy scroll-snap \u2013 ma wygl\u0105da\u0107 jak desktop *\/\r\n          .aloha-wow__rail{\r\n            overflow: visible;\r\n            scroll-snap-type: none;\r\n            padding-right: 18px; \/* \u017ceby nie wygl\u0105da\u0142o na uci\u0119te *\/\r\n            margin-bottom: 44px;\r\n          }\r\n          .aloha-card{\r\n            box-shadow: none;\r\n          }\r\n        }\r\n\r\n<\/style>\r\n\r\n<div id=\"alohaViewSocial\" class=\"aloha-view\">\r\n<div class=\"aloha-wow\" id=\"alohaWowSocial\">\r\n  <!-- \u2705 jedyny background \"byt\" -->\r\n  <div class=\"aloha-stage\" id=\"alohaStageSocial\"><\/div>\r\n\r\n  <div class=\"aloha-wow__inner\">\r\n    <!-- LEFT -->\r\n    <div class=\"aloha-wow__left\">\r\n      <div class=\"aloha-wow__kicker\" id=\"alohaKickerSocial\">AI-first studio kreatywne<\/div>\r\n      <h1 class=\"aloha-wow__title\" id=\"alohaTitleSocial\">Projekty, kt\u00f3re robi\u0105 r\u00f3\u017cnic\u0119.<\/h1>\r\n      <p class=\"aloha-wow__desc\" id=\"alohaDescSocial\">\r\n        Wrzutki na Social Media oraz profesjonalne spoty. Zajmiemy si\u0119 wszystkim.\r\n      <\/p>\r\n      <div class=\"aloha-wow__meta\">\r\n        <span class=\"aloha-pill\" id=\"alohaMetaBrandSocial\">DEMA<\/span>\r\n        <span class=\"aloha-pill\" id=\"alohaMetaTypeSocial\">Wszystkie bran\u017ce<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- RIGHT -->\r\n    <div class=\"aloha-wow__right\">\r\n      <div class=\"aloha-wow__rail\" id=\"alohaRailSocial\" aria-label=\"Projekty\">\r\n\r\n        <!-- 1 -->\r\n        <div class=\"aloha-card\"\r\n          data-brand=\"DEMO - CHMURY\"\r\n          data-type=\"TECH | SOCIAL\"\r\n          data-title=\"PRACA W CHMURZE \u2014 dos\u0142ownie.\"\r\n          data-desc=\"Prosty koncept wizualny pokazuj\u0105cy kreatywno\u015b\u0107 i nowoczesny vibe marki tech.\">\r\n          <video muted loop playsinline preload=\"none\">\r\n            <source src=\"https:\/\/cdn.jsdelivr.net\/gh\/alohamoodstudio\/webiste-clips\/CLOUDS-new-4K-web30.mp4\" type=\"video\/mp4\">\r\n          <\/video>\r\n          <div class=\"aloha-card__label\">\r\n            <div><strong>DEMO - CHMURY<\/strong><div class=\"aloha-card__tag\">TECH | SOCIAL<\/div><\/div>\r\n            <div class=\"aloha-card__tag\">01<\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- 2 -->\r\n        <div class=\"aloha-card\"\r\n          data-brand=\"DEMO - NOMADA\"\r\n          data-type=\"FASHION | SPOT PRO\"\r\n          data-title=\"STYL \u2014 pustynna estetyka, surowy \u015bwiat, najnowsza moda.\"\r\n          data-desc=\"Profesjonalny spot buduj\u0105cy klimat marki oraz produktu.\">\r\n          <video muted loop playsinline preload=\"none\">\r\n            <source src=\"https:\/\/cdn.jsdelivr.net\/gh\/alohamoodstudio\/webiste-clips\/NOMADA_30-new-4k-web30.mp4\" type=\"video\/mp4\">\r\n          <\/video>\r\n          <div class=\"aloha-card__label\">\r\n            <div><strong>DEMO - NOMADA<\/strong><div class=\"aloha-card__tag\">FASHION | SPOT PRO<\/div><\/div>\r\n            <div class=\"aloha-card__tag\">02<\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- 3 -->\r\n        <div class=\"aloha-card\"\r\n          data-brand=\"DEMO - NAP\u00d3J\"\r\n          data-type=\"FMCG | SOCIAL\"\r\n          data-title=\"SKALA \u2014 natychmiast zatrzymuje scroll.\"\r\n          data-desc=\"Prosty, ale efektowny koncept, buduj\u0105cy uwag\u0119 i zapami\u0119tywalno\u015b\u0107 marki.\">\r\n          <video muted loop playsinline preload=\"none\">\r\n            <source src=\"https:\/\/cdn.jsdelivr.net\/gh\/alohamoodstudio\/webiste-clips\/BLACK_CAN-new-4K-web30.mp4\" type=\"video\/mp4\">\r\n          <\/video>\r\n          <div class=\"aloha-card__label\">\r\n            <div><strong>DEMO - NAP\u00d3J<\/strong><div class=\"aloha-card__tag\">FMCG | SOCIAL<\/div><\/div>\r\n            <div class=\"aloha-card__tag\">03<\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- 4 -->\r\n        <div class=\"aloha-card\"\r\n          data-brand=\"DEMO - BOUTIQUE\"\r\n          data-type=\"FASHION | SOCIAL\"\r\n          data-title=\"SURREALIZM \u2014 gdy produktu nie da si\u0119 nie zauwa\u017cy\u0107.\"\r\n          data-desc=\"Surrealistyczna scena podkre\u015blaj\u0105ca charakter produktu.\">\r\n          <video muted loop playsinline preload=\"none\">\r\n            <source src=\"https:\/\/cdn.jsdelivr.net\/gh\/alohamoodstudio\/webiste-clips\/LEGS-new-4K-web30.mp4\" type=\"video\/mp4\">\r\n          <\/video>\r\n          <div class=\"aloha-card__label\">\r\n            <div><strong>DEMO - BOUTIQUE<\/strong><div class=\"aloha-card__tag\">FASHION | SOCIAL<\/div><\/div>\r\n            <div class=\"aloha-card__tag\">04<\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- 5 -->\r\n        <div class=\"aloha-card\"\r\n          data-brand=\"DEMO - LUMERA\"\r\n          data-type=\"BEAUTY | SPOT PRO\"\r\n          data-title=\"KONCEPCJA \u2014 minimalizm produktu w u\u017cyciu.\"\r\n          data-desc=\"Minimalistyczny spot podkre\u015blaj\u0105cy elegancj\u0119 produktu.\">\r\n          <video muted loop playsinline preload=\"none\">\r\n            <source src=\"https:\/\/cdn.jsdelivr.net\/gh\/alohamoodstudio\/webiste-clips\/LUMERA-30-new-4K-web30.mp4\" type=\"video\/mp4\">\r\n          <\/video>\r\n          <div class=\"aloha-card__label\">\r\n            <div><strong>DEMO - LUMERA<\/strong><div class=\"aloha-card__tag\">BEAUTY | SPOT PRO<\/div><\/div>\r\n            <div class=\"aloha-card__tag\">05<\/div>\r\n          <\/div>\r\n        <\/div>\r\n        \r\n        <!-- 6 -->\r\n        <div class=\"aloha-card\"\r\n          data-brand=\"DEMO - TOREBKA\"\r\n          data-type=\"FASHION | SOCIAL\"\r\n          data-title=\"ZASKOCZENIE \u2014 znajome otoczenie, elegancka transformacja.\"\r\n          data-desc=\"Social'owa wrzutka kt\u00f3ra natychmiast zatrzyma przewijanie.\">\r\n          <video muted loop playsinline preload=\"none\">\r\n            <source src=\"https:\/\/cdn.jsdelivr.net\/gh\/alohamoodstudio\/webiste-clips\/BAG-new-4K-web30.mp4\" type=\"video\/mp4\">\r\n          <\/video>\r\n          <div class=\"aloha-card__label\">\r\n            <div><strong>DEMO - TOREBKA<\/strong><div class=\"aloha-card__tag\">FASHION | SOCIAL<\/div><\/div>\r\n            <div class=\"aloha-card__tag\">10<\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  const wow   = document.getElementById('alohaWowSocial');\r\n  const rail  = document.getElementById('alohaRailSocial');\r\n  const stage = document.getElementById('alohaStageSocial');\r\n\r\n  const metaBrand = document.getElementById('alohaMetaBrandSocial');\r\n  const metaType  = document.getElementById('alohaMetaTypeSocial');\r\n  const elTitle   = document.getElementById('alohaTitleSocial');\r\n  const elDesc    = document.getElementById('alohaDescSocial');\r\n\r\n  const rootStyles = getComputedStyle(document.documentElement);\r\n  const ZOOM_DUR = parseInt(rootStyles.getPropertyValue('--zoom-dur')) || 1400;\r\n\r\n  const COPY_SWAP_AT = Math.round(ZOOM_DUR * 0.52);\r\n  const COPY_IN_AT   = Math.round(ZOOM_DUR * 0.78);\r\n\r\n  function getAdaptiveStagger(){\r\n    const count = rail.querySelectorAll('.aloha-card').length;\r\n    const base = 110;\r\n    const max = 90;\r\n    const min = 40;\r\n    let val = base - count * 6;\r\n    return Math.max(min, Math.min(max, val));\r\n  }\r\n\r\n  const FLIP_EASE =\r\n    (rootStyles.getPropertyValue('--ease-premium') || '').trim()\r\n    || 'cubic-bezier(.22, 1, .36, 1)';\r\n\r\n  let isAnimating = false;\r\n  let bgCard = null;\r\n\r\n  function cards(){\r\n    return Array.from(rail.querySelectorAll('.aloha-card'));\r\n  }\r\n\r\n  function firstCard(){\r\n    return rail.querySelector('.aloha-card');\r\n  }\r\n\r\n  function freezeTileVideo(v){\r\n    if (!v) return;\r\n\r\n    try {\r\n      v.autoplay = false;\r\n      v.removeAttribute('autoplay');\r\n      v.preload = 'metadata';\r\n      v.pause();\r\n    } catch(e){}\r\n\r\n    const paintFrame = () => {\r\n      try { v.currentTime = 0.01; } catch(e){}\r\n      try { v.pause(); } catch(e){}\r\n    };\r\n\r\n    if (v.readyState >= 2){\r\n      paintFrame();\r\n    } else {\r\n      v.addEventListener('loadeddata', paintFrame, { once: true });\r\n      v.addEventListener('canplay', paintFrame, { once: true });\r\n      try { v.load(); } catch(e){}\r\n    }\r\n  }\r\n\r\n  function freezeCardVideo(card){\r\n    if (!card) return;\r\n    const v = card.querySelector('video');\r\n    if (v) freezeTileVideo(v);\r\n  }\r\n\r\n  function freezeAllRailTiles(){\r\n    cards().forEach(card => freezeCardVideo(card));\r\n  }\r\n\r\n  function setCopyFromCard(card){\r\n      if (!card) return;\r\n      metaBrand.textContent = card.getAttribute('data-brand') || 'Projekt';\r\n      metaType.textContent  = card.getAttribute('data-type')  || 'Showcase';\r\n    \r\n      const t = card.getAttribute('data-title');\r\n      const d = card.getAttribute('data-desc');\r\n      if (t) elTitle.textContent = t;\r\n      if (d) elDesc.textContent  = d;\r\n    }\r\n\r\n  function resyncInitialCopy(){\r\n    const activeCard = bgCard || firstCard();\r\n    if (!activeCard) return;\r\n    setCopyFromCard(activeCard);\r\n  }\r\n\r\n  function makeCardBackground(card){\r\n    if (bgCard && bgCard !== card) bgCard.remove();\r\n\r\n    stage.appendChild(card);\r\n    card.classList.remove('is-floating','is-expanding');\r\n    card.classList.add('aloha-bgcard');\r\n\r\n    card.style.left = '';\r\n    card.style.top = '';\r\n    card.style.width = '';\r\n    card.style.height = '';\r\n    card.style.borderRadius = '';\r\n    card.style.transform = '';\r\n    card.style.opacity = '';\r\n\r\n    const v = card.querySelector('video');\r\n    if (v) {\r\n      try {\r\n        v.muted = true;\r\n        v.setAttribute('muted', '');\r\n        v.playsInline = true;\r\n        v.setAttribute('playsinline', '');\r\n        v.play().catch(()=>{});\r\n      } catch(e){}\r\n    }\r\n\r\n    bgCard = card;\r\n  }\r\n\r\n  function cloneAsTile(card){\r\n    const clone = card.cloneNode(true);\r\n    clone.classList.remove('aloha-bgcard');\r\n    clone.classList.add('aloha-card');\r\n    clone.style.cssText = '';\r\n\r\n    const v = clone.querySelector('video');\r\n    if (v){\r\n      freezeTileVideo(v);\r\n    }\r\n\r\n    return clone;\r\n  }\r\n\r\n  function floatCardOutOfRail(card){\r\n    const rCard = card.getBoundingClientRect();\r\n    const rWow  = wow.getBoundingClientRect();\r\n\r\n    rail.removeChild(card);\r\n    wow.appendChild(card);\r\n\r\n    card.classList.add('is-floating');\r\n    card.style.left   = (rCard.left - rWow.left) + 'px';\r\n    card.style.top    = (rCard.top  - rWow.top)  + 'px';\r\n    card.style.width  = rCard.width + 'px';\r\n    card.style.height = rCard.height + 'px';\r\n    card.style.borderRadius = getComputedStyle(card).borderRadius;\r\n\r\n    card.style.transform = 'translateY(0) scale(1)';\r\n    card.style.opacity = '1';\r\n  }\r\n\r\n  function expandFloatingCardToFullscreen(card){\r\n    const rWow = wow.getBoundingClientRect();\r\n    card.getBoundingClientRect();\r\n\r\n    card.classList.add('is-expanding');\r\n    card.style.left   = '0px';\r\n    card.style.top    = '0px';\r\n    card.style.width  = rWow.width + 'px';\r\n    card.style.height = rWow.height + 'px';\r\n    card.style.borderRadius = getComputedStyle(wow).borderRadius;\r\n  }\r\n\r\n  function recordRects(els){\r\n    const m = new Map();\r\n    els.forEach(el => m.set(el, el.getBoundingClientRect()));\r\n    return m;\r\n  }\r\n\r\n  function applyFLIP(els, beforeRects, {stagger=0} = {}){\r\n    const afterRects = recordRects(els);\r\n\r\n    els.forEach((el, i) => {\r\n      el.style.transition = 'none';\r\n      el.style.transitionDelay = '0ms';\r\n\r\n      const before = beforeRects.get(el);\r\n      const after  = afterRects.get(el);\r\n      if (!after) return;\r\n\r\n      if (!before){\r\n        el.style.opacity = '0';\r\n        el.style.transform = 'translate3d(80px,0,0)';\r\n        el.getBoundingClientRect();\r\n\r\n        requestAnimationFrame(() => {\r\n          el.style.transition =\r\n            `transform ${ZOOM_DUR}ms ${FLIP_EASE}, opacity 420ms ease`;\r\n          el.style.transitionDelay = `${Math.min(i*stagger,260)}ms`;\r\n          el.style.opacity = '';\r\n          el.style.transform = 'translate3d(0,0,0)';\r\n        });\r\n\r\n        const clearNew = () => {\r\n          el.style.transition = '';\r\n          el.style.transitionDelay = '';\r\n          el.style.transform = '';\r\n          el.style.opacity = '';\r\n          el.removeEventListener('transitionend', clearNew);\r\n        };\r\n        el.addEventListener('transitionend', clearNew, { once: true });\r\n        return;\r\n      }\r\n\r\n      const dx = before.left - after.left;\r\n      const dy = before.top  - after.top;\r\n\r\n      if (Math.abs(dx) < 0.1 && Math.abs(dy) < 0.1){\r\n        el.style.transition = '';\r\n        el.style.transitionDelay = '';\r\n        el.style.transform = '';\r\n        return;\r\n      }\r\n\r\n      el.style.transform = `translate3d(${dx}px,${dy}px,0)`;\r\n      el.getBoundingClientRect();\r\n\r\n      requestAnimationFrame(() => {\r\n        el.style.transition = `transform ${ZOOM_DUR}ms ${FLIP_EASE}`;\r\n        el.style.transitionDelay = `${Math.min(i*stagger,260)}ms`;\r\n        el.style.transform = 'translate3d(0,0,0)';\r\n      });\r\n\r\n      const clear = () => {\r\n        el.style.transition = '';\r\n        el.style.transitionDelay = '';\r\n        el.style.transform = '';\r\n        el.removeEventListener('transitionend', clear);\r\n      };\r\n      el.addEventListener('transitionend', clear, { once: true });\r\n    });\r\n  }\r\n\r\n  function preloadNextVideo(){\r\n    const next = firstCard();\r\n    if (!next) return;\r\n    const video = next.querySelector('video');\r\n    if (!video) return;\r\n    video.preload = 'metadata';\r\n    if (video.readyState < 2) video.load();\r\n  }\r\n\r\n  function runNext(){\r\n    if (isAnimating) return;\r\n    const first = firstCard();\r\n    if (!first) return;\r\n\r\n    isAnimating = true;\r\n    wow.classList.add('is-zooming');\r\n    wow.classList.remove('is-copy-in');\r\n\r\n    const beforeEls =\r\n      Array.from(rail.querySelectorAll('.aloha-card'))\r\n      .filter(el => el !== first);\r\n    const before = recordRects(beforeEls);\r\n\r\n    const incomingTile = bgCard ? cloneAsTile(bgCard) : null;\r\n\r\n    floatCardOutOfRail(first);\r\n    if (incomingTile) rail.appendChild(incomingTile);\r\n\r\n    const afterEls = Array.from(rail.querySelectorAll('.aloha-card'));\r\n    applyFLIP(afterEls, before, { stagger: getAdaptiveStagger() });\r\n\r\n    requestAnimationFrame(() => expandFloatingCardToFullscreen(first));\r\n\r\n    setTimeout(() => setCopyFromCard(first), COPY_SWAP_AT);\r\n    setTimeout(() => wow.classList.add('is-copy-in'), COPY_IN_AT);\r\n\r\n    setTimeout(() => {\r\n      makeCardBackground(first);\r\n      wow.classList.remove('is-zooming');\r\n      isAnimating = false;\r\n    \r\n      freezeAllRailTiles();\r\n      preloadNextVideo();\r\n    }, ZOOM_DUR);\r\n  }\r\n\r\n  rail.addEventListener('click', (e) => {\r\n    const clicked = e.target.closest('.aloha-card');\r\n    if (!clicked || isAnimating) return;\r\n\r\n    const isScrollable =\r\n      getComputedStyle(rail).overflowX !== 'visible';\r\n    const savedScroll = isScrollable ? rail.scrollLeft : 0;\r\n\r\n    let guard = 0;\r\n    while (rail.firstElementChild !== clicked && guard < 200){\r\n      rail.appendChild(rail.firstElementChild);\r\n      guard++;\r\n    }\r\n\r\n    if (isScrollable){\r\n      requestAnimationFrame(() => {\r\n        rail.scrollLeft = savedScroll;\r\n      });\r\n    }\r\n\r\n    runNext();\r\n  });\r\n\r\n  (function init(){\r\n    const all = cards();\r\n    if (!all.length) return;\r\n\r\n    const last = all[all.length - 1];\r\n    rail.removeChild(last);\r\n    makeCardBackground(last);\r\n\r\n    setCopyFromCard(last);\r\n    freezeAllRailTiles();\r\n    preloadNextVideo();\r\n\r\n    setTimeout(resyncInitialCopy, 250);\r\n    setTimeout(resyncInitialCopy, 700);\r\n    setTimeout(resyncInitialCopy, 1200);\r\n    window.addEventListener('load', resyncInitialCopy, { once: true });\r\n  })();\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>AI-first studio kreatywne Projekty, kt\u00f3re robi\u0105 r\u00f3\u017cnic\u0119. Wrzutki na Social Media oraz profesjonalne spoty. Zajmiemy si\u0119 wszystkim. DEMA Wszystkie bran\u017ce DEMO &#8211; CHMURYTECH | SOCIAL 01 DEMO &#8211; NOMADAFASHION | SPOT PRO 02 DEMO &#8211; NAP\u00d3JFMCG | SOCIAL 03 DEMO &#8211; BOUTIQUEFASHION | SOCIAL 04 DEMO &#8211; LUMERABEAUTY | SPOT PRO 05 DEMO &#8211; TOREBKAFASHION [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/alohamood.pl\/en\/wp-json\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alohamood.pl\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alohamood.pl\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alohamood.pl\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alohamood.pl\/en\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":679,"href":"https:\/\/alohamood.pl\/en\/wp-json\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":764,"href":"https:\/\/alohamood.pl\/en\/wp-json\/wp\/v2\/pages\/16\/revisions\/764"}],"wp:attachment":[{"href":"https:\/\/alohamood.pl\/en\/wp-json\/wp\/v2\/media?parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}