/* ============================================================ Delaram Zendegi — intro logo motion (v100) Adapted from delaram_logo_motion_premium_v2. The overlay is position:fixed, so it never shifts page layout. It only renders when has the .dz-show-intro class, which is set by an inline script in on every direct home-page load, and never when prefers-reduced-motion is set. ============================================================ */ #delaramIntro { display: none; } html.dz-show-intro #delaramIntro { display: block; } html.dz-show-intro body { overflow: hidden; } #delaramIntro { --dz-green: #063f40; --dz-gold: #bd943c; --dz-flower-size: clamp(210px, 18vw, 340px); --dz-flower-half: calc(var(--dz-flower-size) * 0.489); --dz-title-w: clamp(360px, 34vw, 610px); --dz-subtitle-w: clamp(240px, 24vw, 410px); --dz-content-offset: clamp(-96px, -8.5vh, -54px); --dz-gap: clamp(18px, 2vh, 28px); position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; z-index: 9999; cursor: default; background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.98) 0 14%, rgba(255,249,236,.82) 32%, rgba(250,237,211,.54) 64%, rgba(255,255,255,.96) 100%), linear-gradient(180deg, #fff 0%, #fffaf0 56%, #fff 100%); transition: opacity .8s ease, visibility .8s ease; } #delaramIntro.hide { opacity: 0; visibility: hidden; pointer-events: none; } #delaramIntro::before { content: ""; position: absolute; left: 50%; top: 46%; width: min(68vw, 920px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.98) 0 15%, rgba(240,199,91,.18) 30%, rgba(230,178,55,.06) 44%, transparent 70%); filter: blur(2px); opacity: .95; z-index: -2; animation: dzHaloBreath 5.2s ease-in-out infinite; } #delaramIntro .gold-waves { position: absolute; left: 50%; bottom: -16vh; width: 120vw; min-width: 1160px; height: 32vh; transform: translateX(-50%); z-index: -1; pointer-events: none; opacity: .94; } #delaramIntro .gold-waves path { fill: none; stroke-linecap: round; stroke-dasharray: 2200; stroke-dashoffset: 2200; animation: dzDrawWave 2.3s .35s cubic-bezier(.2,.75,.2,1) forwards; } #delaramIntro .gold-waves .w1 { stroke: rgba(211,166,65,.72); stroke-width: 2.4; filter: drop-shadow(0 0 7px rgba(223,181,82,.42)); } #delaramIntro .gold-waves .w2 { stroke: rgba(249,220,139,.56); stroke-width: 1.1; animation-delay: .6s; } #delaramIntro .gold-waves .w3 { stroke: rgba(255,255,255,.78); stroke-width: 1.2; animation-delay: .9s; } #delaramIntro .flower-anchor { position: absolute; left: 50%; top: calc(50% + var(--dz-content-offset)); width: var(--dz-flower-size); aspect-ratio: 620/606; transform: translate(-50%, -50%); display: grid; place-items: center; z-index: 3; } #delaramIntro .flower-glow { position: absolute; inset: -24%; border-radius: 50%; background: radial-gradient(circle, rgba(255,232,154,.34), rgba(216,168,59,.10) 42%, transparent 70%); opacity: 0; transform: scale(.78); animation: dzEmblemGlow 1.8s .25s ease-out forwards; } #delaramIntro .flower-motion { position: relative; width: 100%; transform-origin: 50% 50%; animation: dzEmblemIn 1.35s cubic-bezier(.16,1,.28,1) both, dzEmblemFloat 3.8s 1.45s ease-in-out infinite; } #delaramIntro .flower-img { display: block; width: 100%; height: auto; transform-origin: 50% 50%; backface-visibility: hidden; filter: drop-shadow(0 13px 22px rgba(65,45,12,.15)) drop-shadow(0 1px 0 rgba(255,255,255,.7)); } #delaramIntro .text-stack { position: absolute; left: 50%; top: calc(50% + var(--dz-content-offset) + var(--dz-flower-half) + var(--dz-gap)); transform: translateX(-50%); display: grid; justify-items: center; gap: clamp(10px, 1.4vh, 16px); width: min(88vw, 680px); z-index: 4; pointer-events: none; } #delaramIntro .title-wrap { width: var(--dz-title-w); max-width: 88vw; overflow: hidden; filter: drop-shadow(0 4px 8px rgba(120,83,14,.08)); animation: dzTitleReveal 1.15s 1s cubic-bezier(.16,.95,.22,1) both; } #delaramIntro .title-img { display: block; width: 100%; height: auto; } #delaramIntro .subtitle-img { display: block; width: var(--dz-subtitle-w); max-width: 68vw; height: auto; filter: drop-shadow(0 3px 6px rgba(0,0,0,.05)); opacity: 0; animation: dzSubtitleIn .9s 1.78s ease-out forwards; } #delaramIntro .center-light { width: clamp(100px, 14vw, 180px); height: 2px; margin-top: clamp(18px, 2.6vh, 28px); border-radius: 100px; background: linear-gradient(90deg, transparent, rgba(189,148,60,.18), rgba(255,234,165,.92), rgba(189,148,60,.18), transparent); transform: scaleX(.15); opacity: 0; animation: dzCenterLine 1.05s 2.05s cubic-bezier(.18,.9,.2,1) forwards; } @keyframes dzHaloBreath { 0%,100% { opacity:.84; transform:translate(-50%,-50%) scale(.985); } 50% { opacity:1; transform:translate(-50%,-50%) scale(1.025); } } @keyframes dzDrawWave { to { stroke-dashoffset: 0; } } @keyframes dzEmblemIn { 0% { opacity:0; transform:scale(.82); filter:blur(4px); } 58% { opacity:1; transform:scale(1.03); filter:blur(0); } 100% { opacity:1; transform:scale(1); filter:blur(0); } } @keyframes dzEmblemFloat { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-4px) scale(1.004); } } @keyframes dzEmblemGlow { 0% { opacity:0; transform:scale(.65); } 45% { opacity:.92; transform:scale(1); } 100% { opacity:.76; transform:scale(1.08); } } @keyframes dzTitleReveal { 0% { opacity:0; clip-path:inset(0 50% 0 50%); transform:translateY(10px); filter:blur(4px); } 100% { opacity:1; clip-path:inset(0 0 0 0); transform:translateY(0); filter:blur(0); } } @keyframes dzSubtitleIn { from { opacity:0; transform:translateY(10px); filter:blur(4px); } to { opacity:1; transform:translateY(0); filter:blur(0); } } @keyframes dzCenterLine { to { opacity:1; transform:scaleX(1); } } @media (max-width: 700px) { #delaramIntro { --dz-flower-size: clamp(155px, 43vw, 235px); --dz-title-w: min(84vw, 420px); --dz-subtitle-w: min(62vw, 300px); --dz-gap: 14px; --dz-content-offset: clamp(-64px, -6.8vh, -36px); } #delaramIntro .gold-waves { width: 180vw; min-width: 900px; height: 35vh; bottom: -5vh; } #delaramIntro .text-stack { gap: 8px; width: 92vw; } #delaramIntro .center-light { margin-top: 16px; } } @media (max-height: 620px) { #delaramIntro { --dz-flower-size: clamp(160px, 15vw, 260px); --dz-title-w: clamp(320px, 30vw, 520px); --dz-subtitle-w: clamp(220px, 21vw, 350px); --dz-gap: 12px; --dz-content-offset: clamp(-58px, -6.2vh, -30px); } } /* Safety net: even if scripts fail, reduced-motion users never see the animation. */ @media (prefers-reduced-motion: reduce) { html.dz-show-intro #delaramIntro { display: none !important; } html.dz-show-intro body { overflow: auto; } }