/* ========================================================= ARS GLOBAL ENERGY SYSTEM V7 ========================================================= GLOBAL / ISOLATED / NON-DESTRUCTIVE ENERGY ENGINE FEATURES --------------------------------------------------------- 01. Global ARS animated background energy 02. Golden atmospheric glow system 03. Energy beams and radiation 04. ARS identity background animation 05. Floating particles 06. Universal card elevation 07. Golden energy beneath cards 08. Card hover interaction 09. Card focus / selected interaction 10. Text and image 1.5x focus scaling 11. Mobile optimization 12. Reduced motion support IMPORTANT --------------------------------------------------------- This file does NOT control: html body page scrolling page overflow page background .ars-group-page This system is designed as an isolated visual layer. ========================================================= */ /* ========================================================= 01. ARS GLOBAL ENERGY ROOT ========================================================= */ .ars-global-energy{ position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; pointer-events:none; z-index:0; isolation:isolate; overflow:hidden; contain:layout style paint; transform:translateZ(0); backface-visibility:hidden; -webkit-backface-visibility:hidden; } /* ========================================================= 01.1. ENERGY ROOT CHILD SAFETY ========================================================= */ .ars-global-energy > *{ pointer-events:none; position:absolute; box-sizing:border-box; } /* ========================================================= 02. MAIN GOLDEN ENERGY GLOW ========================================================= */ /* ========================================================= 02.1. MAIN GLOW ========================================================= */ .ars-energy-glow{ pointer-events:none; will-change: transform, opacity; transform: translate3d(0,0,0); backface-visibility:hidden; } /* ========================================================= 02.2. CENTRAL GOLDEN GLOW ========================================================= */ .ars-glow-main{ top:8%; left:50%; width:min(70vw,900px); height:min(70vw,900px); max-width:900px; max-height:900px; transform: translate3d(-50%,0,0); border-radius:50%; background: radial-gradient( circle at center, rgba(255,226,150,.16) 0%, rgba(239,190,80,.10) 24%, rgba(210,145,30,.045) 48%, transparent 72% ); filter: blur(24px); opacity:.80; animation: arsV7MainGlow 12s ease-in-out infinite alternate; } /* ========================================================= 02.3. LEFT GOLDEN GLOW ========================================================= */ .ars-glow-left{ top:32%; left:-18%; width:min(55vw,700px); height:min(55vw,700px); border-radius:50%; background: radial-gradient( circle at center, rgba(220,164,48,.10), rgba(197,130,20,.035) 45%, transparent 72% ); filter: blur(28px); opacity:.65; animation: arsV7SideGlowLeft 16s ease-in-out infinite alternate; } /* ========================================================= 02.4. RIGHT GOLDEN GLOW ========================================================= */ .ars-glow-right{ right:-18%; bottom:10%; width:min(60vw,760px); height:min(60vw,760px); border-radius:50%; background: radial-gradient( circle at center, rgba(255,215,120,.09), rgba(211,146,30,.035) 48%, transparent 74% ); filter: blur(30px); opacity:.60; animation: arsV7SideGlowRight 19s ease-in-out infinite alternate; } /* ========================================================= 03. ENERGY BEAMS ========================================================= */ /* ========================================================= 03.1. BASE BEAM ========================================================= */ .ars-energy-beam{ left:-10%; width:120%; height:2px; border-radius:50%; transform-origin:center; will-change: transform, opacity; backface-visibility:hidden; } /* ========================================================= 03.2. FIRST ENERGY BEAM ========================================================= */ .ars-beam-one{ top:26%; transform: rotate(-9deg) translate3d(0,0,0); background: linear-gradient( 90deg, transparent 0%, rgba(255,210,110,.02) 18%, rgba(255,226,155,.18) 40%, rgba(255,235,180,.30) 50%, rgba(255,226,155,.18) 60%, rgba(255,210,110,.02) 82%, transparent 100% ); filter: blur(6px); opacity:.45; animation: arsV7BeamOne 11s ease-in-out infinite alternate; } /* ========================================================= 03.3. SECOND ENERGY BEAM ========================================================= */ .ars-beam-two{ bottom:28%; transform: rotate(8deg) translate3d(0,0,0); background: linear-gradient( 90deg, transparent 0%, rgba(214,150,35,.015) 20%, rgba(255,210,105,.12) 42%, rgba(255,225,150,.22) 50%, rgba(255,210,105,.12) 58%, rgba(214,150,35,.015) 80%, transparent 100% ); filter: blur(7px); opacity:.35; animation: arsV7BeamTwo 15s ease-in-out infinite alternate; } /* ========================================================= 04. ENERGY RING ========================================================= */ .ars-energy-ring{ top:50%; left:50%; width:min(72vw,1000px); height:min(72vw,1000px); max-width:1000px; max-height:1000px; transform: translate3d(-50%,-50%,0); border-radius:50%; border: 1px solid rgba(255,220,135,.055); box-shadow: 0 0 45px rgba(235,180,65,.025), inset 0 0 70px rgba(255,220,135,.02); opacity:.45; will-change: transform, opacity; animation: arsV7EnergyRing 14s ease-in-out infinite alternate; } /* ========================================================= 05. GLOBAL PARTICLE FIELD ========================================================= */ .ars-energy-particles{ inset:0; width:100%; height:100%; background-image: radial-gradient( circle, rgba(255,226,150,.45) 0 1px, transparent 1.8px ), radial-gradient( circle, rgba(221,166,55,.32) 0 1px, transparent 1.8px ); background-size: 130px 150px, 190px 210px; background-position: 0 0, 55px 75px; opacity:.28; will-change: background-position, opacity; animation: arsV7Particles 26s linear infinite; } /* ========================================================= 06. ARS BACKGROUND IDENTITY ========================================================= */ .ars-energy-identity{ inset:0; width:100%; height:100%; overflow:hidden; opacity:.70; } /* ========================================================= 06.1. ARS IDENTITY TEXT ========================================================= */ .ars-energy-identity span{ position:absolute; display:block; margin:0; padding:0; font-family: Arial, Helvetica, sans-serif; font-size: clamp( 8rem, 18vw, 20rem ); font-weight:900; line-height:1; letter-spacing:.25em; white-space:nowrap; user-select:none; color: rgba( 225, 171, 65, .035 ); text-shadow: 0 0 25px rgba(255,220,135,.025), 0 0 60px rgba(220,150,30,.02); will-change: transform, opacity; animation: arsV7Identity 20s ease-in-out infinite alternate; } /* ========================================================= 06.2. IDENTITY POSITION ONE ========================================================= */ .ars-energy-identity span:nth-child(1){ top:6%; left:-8%; transform: rotate(-7deg); animation-delay: -3s; } /* ========================================================= 06.3. IDENTITY POSITION TWO ========================================================= */ .ars-energy-identity span:nth-child(2){ top:45%; right:-12%; transform: rotate(7deg); animation-delay: -9s; } /* ========================================================= 06.4. IDENTITY POSITION THREE ========================================================= */ .ars-energy-identity span:nth-child(3){ bottom:5%; left:24%; transform: rotate(-4deg); animation-delay: -15s; } /* ========================================================= 07. UNIVERSAL ARS CARD SYSTEM ========================================================= */ /* CARD FAMILIES SUPPORTED --------------------------------------------------------- .ars-glass .mission-card .value-card .vision-card .dna-card .leader-card .partner-card .standard-card .timeline-card .gallery-card .future-card .stat-card .country-card .eco .org-card */ /* ========================================================= 07.1. UNIVERSAL CARD BASE ========================================================= */ .ars-glass, .mission-card, .value-card, .vision-card, .dna-card, .leader-card, .partner-card, .standard-card, .timeline-card, .gallery-card, .future-card, .stat-card, .country-card, .eco, .org-card{ position:relative; isolation:isolate; transform-origin: center center; transition: transform .65s cubic-bezier(.16,1,.3,1), box-shadow .65s cubic-bezier(.16,1,.3,1), border-color .50s ease, filter .50s ease; } /* ========================================================= 07.2. CARD GOLDEN ENERGY UNDERLAY ========================================================= */ .ars-glass::after, .mission-card::after, .value-card::after, .vision-card::after, .dna-card::after, .leader-card::after, .partner-card::after, .standard-card::after, .timeline-card::after, .gallery-card::after, .future-card::after, .stat-card::after, .country-card::after, .eco::after, .org-card::after{ content:""; position:absolute; left:5%; right:5%; bottom:-26px; height:48px; border-radius:50%; background: radial-gradient( ellipse at center, rgba(255,228,155,.78), rgba(255,199,70,.42) 30%, rgba(211,141,25,.16) 55%, transparent 78% ); filter: blur(13px); opacity:0; transform: translate3d(0,0,0) scaleX(.42) scaleY(.60); transition: opacity .55s ease, transform .65s cubic-bezier(.16,1,.3,1); pointer-events:none; z-index:-1; } /* ========================================================= 08. UNIVERSAL CARD HOVER ========================================================= */ .ars-glass:hover, .mission-card:hover, .value-card:hover, .vision-card:hover, .dna-card:hover, .leader-card:hover, .partner-card:hover, .standard-card:hover, .timeline-card:hover, .gallery-card:hover, .future-card:hover, .stat-card:hover, .country-card:hover, .eco:hover, .org-card:hover{ transform: translate3d(0,-55px,0) scale(1.08); border-color: rgba( 255, 220, 135, .72 ); box-shadow: 0 42px 85px rgba(0,0,0,.48), 0 0 42px rgba(235,177,60,.38), 0 24px 65px rgba(198,132,27,.28); filter: brightness(1.08) saturate(1.08); z-index:20; } /* ========================================================= 08.1. CARD ENERGY ACTIVATION ========================================================= */ .ars-glass:hover::after, .mission-card:hover::after, .value-card:hover::after, .vision-card:hover::after, .dna-card:hover::after, .leader-card:hover::after, .partner-card:hover::after, .standard-card:hover::after, .timeline-card:hover::after, .gallery-card:hover::after, .future-card:hover::after, .stat-card:hover::after, .country-card:hover::after, .eco:hover::after, .org-card:hover::after{ opacity:1; transform: translate3d(0,0,0) scaleX(2.0) scaleY(1); } /* ========================================================= 09. CARD CONTENT HOVER SCALE ========================================================= */ /* IMPORTANT --------------------------------------------------------- Content is scaled independently from the card. This prevents the entire card from becoming excessively large while still creating the ARS premium interaction. */ .ars-glass:hover h1, .ars-glass:hover h2, .ars-glass:hover h3, .ars-glass:hover h4, .mission-card:hover h1, .mission-card:hover h2, .mission-card:hover h3, .mission-card:hover h4, .value-card:hover h1, .value-card:hover h2, .value-card:hover h3, .value-card:hover h4, .vision-card:hover h1, .vision-card:hover h2, .vision-card:hover h3, .vision-card:hover h4, .dna-card:hover h1, .dna-card:hover h2, .dna-card:hover h3, .dna-card:hover h4, .leader-card:hover h1, .leader-card:hover h2, .leader-card:hover h3, .leader-card:hover h4, .partner-card:hover h1, .partner-card:hover h2, .partner-card:hover h3, .partner-card:hover h4, .standard-card:hover h1, .standard-card:hover h2, .standard-card:hover h3, .standard-card:hover h4, .timeline-card:hover h1, .timeline-card:hover h2, .timeline-card:hover h3, .timeline-card:hover h4, .gallery-card:hover h1, .gallery-card:hover h2, .gallery-card:hover h3, .gallery-card:hover h4, .future-card:hover h1, .future-card:hover h2, .future-card:hover h3, .future-card:hover h4, .stat-card:hover h1, .stat-card:hover h2, .stat-card:hover h3, .stat-card:hover h4, .country-card:hover h1, .country-card:hover h2, .country-card:hover h3, .country-card:hover h4, .eco:hover h1, .eco:hover h2, .eco:hover h3, .eco:hover h4, .org-card:hover h1, .org-card:hover h2, .org-card:hover h3, .org-card:hover h4{ transform: scale(1.20); transform-origin: center; text-shadow: 0 0 14px rgba(255,220,135,.38), 0 0 30px rgba(225,163,47,.16); } /* ========================================================= 09.1. CARD PARAGRAPH HOVER ========================================================= */ .ars-glass:hover p, .mission-card:hover p, .value-card:hover p, .vision-card:hover p, .dna-card:hover p, .leader-card:hover p, .partner-card:hover p, .standard-card:hover p, .timeline-card:hover p, .gallery-card:hover p, .future-card:hover p, .stat-card:hover p, .country-card:hover p, .eco:hover p, .org-card:hover p{ transform: scale(1.12); transform-origin: center; text-shadow: 0 0 10px rgba(255,220,135,.24); } /* ========================================================= 09.2. CARD LABEL / SPAN HOVER ========================================================= */ .ars-glass:hover > span, .mission-card:hover > span, .value-card:hover > span, .vision-card:hover > span, .dna-card:hover > span, .leader-card:hover > span, .partner-card:hover > span, .standard-card:hover > span, .timeline-card:hover > span, .gallery-card:hover > span, .future-card:hover > span, .stat-card:hover > span, .country-card:hover > span, .eco:hover > span, .org-card:hover > span{ transform: scale(1.15); transform-origin: center; } /* ========================================================= 10. SPECIAL CARD ELEVATION ========================================================= */ .country-card:hover, .eco:hover, .org-card:hover{ transform: translate3d(0,-68px,0) scale(1.10); box-shadow: 0 52px 100px rgba(0,0,0,.52), 0 0 55px rgba(239,181,65,.46), 0 28px 75px rgba(205,138,25,.30); } /* ========================================================= 11. FOCUS / SELECTED CARD STATE ========================================================= */ /* Works for: - keyboard focus - accessible links - interactive cards - cards containing focused elements */ .ars-glass:focus-visible, .ars-glass:focus-within, .mission-card:focus-visible, .mission-card:focus-within, .value-card:focus-visible, .value-card:focus-within, .vision-card:focus-visible, .vision-card:focus-within, .dna-card:focus-visible, .dna-card:focus-within, .leader-card:focus-visible, .leader-card:focus-within, .partner-card:focus-visible, .partner-card:focus-within, .standard-card:focus-visible, .standard-card:focus-within, .timeline-card:focus-visible, .timeline-card:focus-within, .gallery-card:focus-visible, .gallery-card:focus-within, .future-card:focus-visible, .future-card:focus-within, .stat-card:focus-visible, .stat-card:focus-within, .country-card:focus-visible, .country-card:focus-within, .eco:focus-visible, .eco:focus-within, .org-card:focus-visible, .org-card:focus-within{ transform: translate3d(0,-105px,0) scale(1.28); border-color: rgba( 255, 229, 160, .92 ); box-shadow: 0 65px 125px rgba(0,0,0,.60), 0 0 65px rgba(255,195,65,.58), 0 0 125px rgba(213,142,25,.35); filter: brightness(1.12) saturate(1.12); z-index:100; } /* ========================================================= 11.1. FOCUS GOLDEN ENERGY ========================================================= */ .ars-glass:focus-visible::after, .ars-glass:focus-within::after, .mission-card:focus-visible::after, .mission-card:focus-within::after, .value-card:focus-visible::after, .value-card:focus-within::after, .vision-card:focus-visible::after, .vision-card:focus-within::after, .dna-card:focus-visible::after, .dna-card:focus-within::after, .leader-card:focus-visible::after, .leader-card:focus-within::after, .partner-card:focus-visible::after, .partner-card:focus-within::after, .standard-card:focus-visible::after, .standard-card:focus-within::after, .timeline-card:focus-visible::after, .timeline-card:focus-within::after, .gallery-card:focus-visible::after, .gallery-card:focus-within::after, .future-card:focus-visible::after, .future-card:focus-within::after, .stat-card:focus-visible::after, .stat-card:focus-within::after, .country-card:focus-visible::after, .country-card:focus-within::after, .eco:focus-visible::after, .eco:focus-within::after, .org-card:focus-visible::after, .org-card:focus-within::after{ opacity:1; transform: translate3d(0,0,0) scaleX(2.65) scaleY(1.15); } /* ========================================================= 11.2. FOCUS CONTENT 1.5X ========================================================= */ /* HEADINGS */ .ars-glass:focus-visible h1, .ars-glass:focus-visible h2, .ars-glass:focus-visible h3, .ars-glass:focus-visible h4, .ars-glass:focus-within h1, .ars-glass:focus-within h2, .ars-glass:focus-within h3, .ars-glass:focus-within h4, .mission-card:focus-visible h1, .mission-card:focus-visible h2, .mission-card:focus-visible h3, .mission-card:focus-visible h4, .mission-card:focus-within h1, .mission-card:focus-within h2, .mission-card:focus-within h3, .mission-card:focus-within h4, .value-card:focus-visible h1, .value-card:focus-visible h2, .value-card:focus-visible h3, .value-card:focus-visible h4, .value-card:focus-within h1, .value-card:focus-within h2, .value-card:focus-within h3, .value-card:focus-within h4, .vision-card:focus-visible h1, .vision-card:focus-visible h2, .vision-card:focus-visible h3, .vision-card:focus-visible h4, .vision-card:focus-within h1, .vision-card:focus-within h2, .vision-card:focus-within h3, .vision-card:focus-within h4, .dna-card:focus-visible h1, .dna-card:focus-visible h2, .dna-card:focus-visible h3, .dna-card:focus-visible h4, .dna-card:focus-within h1, .dna-card:focus-within h2, .dna-card:focus-within h3, .dna-card:focus-within h4, .leader-card:focus-visible h1, .leader-card:focus-visible h2, .leader-card:focus-visible h3, .leader-card:focus-visible h4, .leader-card:focus-within h1, .leader-card:focus-within h2, .leader-card:focus-within h3, .leader-card:focus-within h4, .partner-card:focus-visible h1, .partner-card:focus-visible h2, .partner-card:focus-visible h3, .partner-card:focus-visible h4, .partner-card:focus-within h1, .partner-card:focus-within h2, .partner-card:focus-within h3, .partner-card:focus-within h4, .standard-card:focus-visible h1, .standard-card:focus-visible h2, .standard-card:focus-visible h3, .standard-card:focus-visible h4, .standard-card:focus-within h1, .standard-card:focus-within h2, .standard-card:focus-within h3, .standard-card:focus-within h4, .timeline-card:focus-visible h1, .timeline-card:focus-visible h2, .timeline-card:focus-visible h3, .timeline-card:focus-visible h4, .timeline-card:focus-within h1, .timeline-card:focus-within h2, .timeline-card:focus-within h3, .timeline-card:focus-within h4, .gallery-card:focus-visible h1, .gallery-card:focus-visible h2, .gallery-card:focus-visible h3, .gallery-card:focus-visible h4, .gallery-card:focus-within h1, .gallery-card:focus-within h2, .gallery-card:focus-within h3, .gallery-card:focus-within h4, .future-card:focus-visible h1, .future-card:focus-visible h2, .future-card:focus-visible h3, .future-card:focus-visible h4, .future-card:focus-within h1, .future-card:focus-within h2, .future-card:focus-within h3, .future-card:focus-within h4, .stat-card:focus-visible h1, .stat-card:focus-visible h2, .stat-card:focus-visible h3, .stat-card:focus-visible h4, .stat-card:focus-within h1, .stat-card:focus-within h2, .stat-card:focus-within h3, .stat-card:focus-within h4, .country-card:focus-visible h1, .country-card:focus-visible h2, .country-card:focus-visible h3, .country-card:focus-visible h4, .country-card:focus-within h1, .country-card:focus-within h2, .country-card:focus-within h3, .country-card:focus-within h4, .eco:focus-visible h1, .eco:focus-visible h2, .eco:focus-visible h3, .eco:focus-visible h4, .eco:focus-within h1, .eco:focus-within h2, .eco:focus-within h3, .eco:focus-within h4, .org-card:focus-visible h1, .org-card:focus-visible h2, .org-card:focus-visible h3, .org-card:focus-visible h4, .org-card:focus-within h1, .org-card:focus-within h2, .org-card:focus-within h3, .org-card:focus-within h4{ transform: scale(1.5); transform-origin: center; } /* ========================================================= 11.3. FOCUS PARAGRAPHS ========================================================= */ .ars-glass:focus-visible p, .ars-glass:focus-within p, .mission-card:focus-visible p, .mission-card:focus-within p, .value-card:focus-visible p, .value-card:focus-within p, .vision-card:focus-visible p, .vision-card:focus-within p, .dna-card:focus-visible p, .dna-card:focus-within p, .leader-card:focus-visible p, .leader-card:focus-within p, .partner-card:focus-visible p, .partner-card:focus-within p, .standard-card:focus-visible p, .standard-card:focus-within p, .timeline-card:focus-visible p, .timeline-card:focus-within p, .gallery-card:focus-visible p, .gallery-card:focus-within p, .future-card:focus-visible p, .future-card:focus-within p, .stat-card:focus-visible p, .stat-card:focus-within p, .country-card:focus-visible p, .country-card:focus-within p, .eco:focus-visible p, .eco:focus-within p, .org-card:focus-visible p, .org-card:focus-within p{ transform: scale(1.5); transform-origin: center; } /* ========================================================= 11.4. FOCUS IMAGES 1.5X ========================================================= */ .ars-glass:focus-visible img, .ars-glass:focus-within img, .mission-card:focus-visible img, .mission-card:focus-within img, .value-card:focus-visible img, .value-card:focus-within img, .vision-card:focus-visible img, .vision-card:focus-within img, .dna-card:focus-visible img, .dna-card:focus-within img, .leader-card:focus-visible img, .leader-card:focus-within img, .partner-card:focus-visible img, .partner-card:focus-within img, .standard-card:focus-visible img, .standard-card:focus-within img, .timeline-card:focus-visible img, .timeline-card:focus-within img, .gallery-card:focus-visible img, .gallery-card:focus-within img, .future-card:focus-visible img, .future-card:focus-within img, .stat-card:focus-visible img, .stat-card:focus-within img, .country-card:focus-visible img, .country-card:focus-within img, .eco:focus-visible img, .eco:focus-within img, .org-card:focus-visible img, .org-card:focus-within img{ transform: scale(1.5); transform-origin: center; } /* ========================================================= 11.5. FOCUS OUTLINE ========================================================= */ a.ars-glass:focus-visible, a.mission-card:focus-visible, a.value-card:focus-visible, a.vision-card:focus-visible, a.dna-card:focus-visible, a.leader-card:focus-visible, a.partner-card:focus-visible, a.standard-card:focus-visible, a.timeline-card:focus-visible, a.gallery-card:focus-visible, a.future-card:focus-visible, a.stat-card:focus-visible, a.country-card:focus-visible, a.eco:focus-visible, a.org-card:focus-visible{ outline: 2px solid rgba(255,220,135,.85); outline-offset: 8px; } /* ========================================================= 12. ANIMATIONS ========================================================= */ /* ========================================================= 12.1. MAIN GLOW ========================================================= */ @keyframes arsV7MainGlow{ 0%{ transform: translate3d(-50%,0,0) scale(.92); opacity:.48; } 50%{ transform: translate3d(-50%,2%,0) scale(1.02); opacity:.72; } 100%{ transform: translate3d(-50%,4%,0) scale(1.08); opacity:.88; } } /* ========================================================= 12.2. LEFT GLOW ========================================================= */ @keyframes arsV7SideGlowLeft{ 0%{ transform: translate3d(-3%,0,0) scale(.94); opacity:.38; } 100%{ transform: translate3d(5%,4%,0) scale(1.08); opacity:.70; } } /* ========================================================= 12.3. RIGHT GLOW ========================================================= */ @keyframes arsV7SideGlowRight{ 0%{ transform: translate3d(3%,2%,0) scale(.94); opacity:.34; } 100%{ transform: translate3d(-5%,-4%,0) scale(1.08); opacity:.66; } } /* ========================================================= 12.4. BEAM ONE ========================================================= */ @keyframes arsV7BeamOne{ 0%{ transform: translate3d(-5%,0,0) rotate(-9deg); opacity:.12; } 100%{ transform: translate3d(5%,0,0) rotate(-9deg); opacity:.60; } } /* ========================================================= 12.5. BEAM TWO ========================================================= */ @keyframes arsV7BeamTwo{ 0%{ transform: translate3d(5%,0,0) rotate(8deg); opacity:.10; } 100%{ transform: translate3d(-5%,0,0) rotate(8deg); opacity:.48; } } /* ========================================================= 12.6. ENERGY RING ========================================================= */ @keyframes arsV7EnergyRing{ 0%{ transform: translate3d(-50%,-50%,0) scale(.94); opacity:.18; } 100%{ transform: translate3d(-50%,-50%,0) scale(1.04); opacity:.52; } } /* ========================================================= 12.7. PARTICLES ========================================================= */ @keyframes arsV7Particles{ 0%{ background-position: 0 0, 55px 75px; opacity:.16; } 50%{ background-position: 65px 95px, -35px 125px; opacity:.36; } 100%{ background-position: 130px 190px, -70px 250px; opacity:.16; } } /* ========================================================= 12.8. ARS IDENTITY ========================================================= */ @keyframes arsV7Identity{ 0%{ opacity:.012; transform: translate3d(0,2%,0) rotate(-6deg) scale(.97); } 50%{ opacity:.052; transform: translate3d(2%,-2%,0) rotate(-2deg) scale(1.02); } 100%{ opacity:.014; transform: translate3d(-2%,3%,0) rotate(-7deg) scale(.98); } } /* ========================================================= 13. MOBILE OPTIMIZATION ========================================================= */ @media(max-width:768px){ .ars-global-energy{ opacity:.78; } .ars-glow-main{ width:90vw; height:90vw; filter: blur(20px); } .ars-glow-left, .ars-glow-right{ width:70vw; height:70vw; filter: blur(22px); } .ars-energy-ring{ width:90vw; height:90vw; } .ars-energy-identity span{ font-size: clamp( 5rem, 24vw, 10rem ); } .ars-glass:hover, .mission-card:hover, .value-card:hover, .vision-card:hover, .dna-card:hover, .leader-card:hover, .partner-card:hover, .standard-card:hover, .timeline-card:hover, .gallery-card:hover, .future-card:hover, .stat-card:hover, .country-card:hover, .eco:hover, .org-card:hover{ transform: translate3d(0,-30px,0) scale(1.04); } .ars-glass:focus-visible, .ars-glass:focus-within, .mission-card:focus-visible, .mission-card:focus-within, .value-card:focus-visible, .value-card:focus-within, .vision-card:focus-visible, .vision-card:focus-within, .dna-card:focus-visible, .dna-card:focus-within, .leader-card:focus-visible, .leader-card:focus-within, .partner-card:focus-visible, .partner-card:focus-within, .standard-card:focus-visible, .standard-card:focus-within, .timeline-card:focus-visible, .timeline-card:focus-within, .gallery-card:focus-visible, .gallery-card:focus-within, .future-card:focus-visible, .future-card:focus-within, .stat-card:focus-visible, .stat-card:focus-within, .country-card:focus-visible, .country-card:focus-within, .eco:focus-visible, .eco:focus-within, .org-card:focus-visible, .org-card:focus-within{ transform: translate3d(0,-58px,0) scale(1.12); } .ars-glass:focus-visible h1, .ars-glass:focus-visible h2, .ars-glass:focus-visible h3, .ars-glass:focus-visible h4, .ars-glass:focus-within h1, .ars-glass:focus-within h2, .ars-glass:focus-within h3, .ars-glass:focus-within h4, .mission-card:focus-visible h1, .mission-card:focus-visible h2, .mission-card:focus-visible h3, .mission-card:focus-visible h4, .mission-card:focus-within h1, .mission-card:focus-within h2, .mission-card:focus-within h3, .mission-card:focus-within h4, .value-card:focus-visible h1, .value-card:focus-visible h2, .value-card:focus-visible h3, .value-card:focus-visible h4, .value-card:focus-within h1, .value-card:focus-within h2, .value-card:focus-within h3, .value-card:focus-within h4, .vision-card:focus-visible h1, .vision-card:focus-visible h2, .vision-card:focus-visible h3, .vision-card:focus-visible h4, .vision-card:focus-within h1, .vision-card:focus-within h2, .vision-card:focus-within h3, .vision-card:focus-within h4, .dna-card:focus-visible h1, .dna-card:focus-visible h2, .dna-card:focus-visible h3, .dna-card:focus-visible h4, .dna-card:focus-within h1, .dna-card:focus-within h2, .dna-card:focus-within h3, .dna-card:focus-within h4, .leader-card:focus-visible h1, .leader-card:focus-visible h2, .leader-card:focus-visible h3, .leader-card:focus-visible h4, .leader-card:focus-within h1, .leader-card:focus-within h2, .leader-card:focus-within h3, .leader-card:focus-within h4, .partner-card:focus-visible h1, .partner-card:focus-visible h2, .partner-card:focus-visible h3, .partner-card:focus-visible h4, .partner-card:focus-within h1, .partner-card:focus-within h2, .partner-card:focus-within h3, .partner-card:focus-within h4, .standard-card:focus-visible h1, .standard-card:focus-visible h2, .standard-card:focus-visible h3, .standard-card:focus-visible h4, .standard-card:focus-within h1, .standard-card:focus-within h2, .standard-card:focus-within h3, .standard-card:focus-within h4, .timeline-card:focus-visible h1, .timeline-card:focus-visible h2, .timeline-card:focus-visible h3, .timeline-card:focus-visible h4, .timeline-card:focus-within h1, .timeline-card:focus-within h2, .timeline-card:focus-within h3, .timeline-card:focus-within h4, .gallery-card:focus-visible h1, .gallery-card:focus-visible h2, .gallery-card:focus-visible h3, .gallery-card:focus-visible h4, .gallery-card:focus-within h1, .gallery-card:focus-within h2, .gallery-card:focus-within h3, .gallery-card:focus-within h4, .future-card:focus-visible h1, .future-card:focus-visible h2, .future-card:focus-visible h3, .future-card:focus-visible h4, .future-card:focus-within h1, .future-card:focus-within h2, .future-card:focus-within h3, .future-card:focus-within h4, .stat-card:focus-visible h1, .stat-card:focus-visible h2, .stat-card:focus-visible h3, .stat-card:focus-visible h4, .stat-card:focus-within h1, .stat-card:focus-within h2, .stat-card:focus-within h3, .stat-card:focus-within h4, .country-card:focus-visible h1, .country-card:focus-visible h2, .country-card:focus-visible h3, .country-card:focus-visible h4, .country-card:focus-within h1, .country-card:focus-within h2, .country-card:focus-within h3, .country-card:focus-within h4, .eco:focus-visible h1, .eco:focus-visible h2, .eco:focus-visible h3, .eco:focus-visible h4, .eco:focus-within h1, .eco:focus-within h2, .eco:focus-within h3, .eco:focus-within h4, .org-card:focus-visible h1, .org-card:focus-visible h2, .org-card:focus-visible h3, .org-card:focus-visible h4, .org-card:focus-within h1, .org-card:focus-within h2, .org-card:focus-within h3, .org-card:focus-within h4{ transform: scale(1.25); } .ars-glass:focus-visible p, .ars-glass:focus-within p, .mission-card:focus-visible p, .mission-card:focus-within p, .value-card:focus-visible p, .value-card:focus-within p, .vision-card:focus-visible p, .vision-card:focus-within p, .dna-card:focus-visible p, .dna-card:focus-within p, .leader-card:focus-visible p, .leader-card:focus-within p, .partner-card:focus-visible p, .partner-card:focus-within p, .standard-card:focus-visible p, .standard-card:focus-within p, .timeline-card:focus-visible p, .timeline-card:focus-within p, .gallery-card:focus-visible p, .gallery-card:focus-within p, .future-card:focus-visible p, .future-card:focus-within p, .stat-card:focus-visible p, .stat-card:focus-within p, .country-card:focus-visible p, .country-card:focus-within p, .eco:focus-visible p, .eco:focus-within p, .org-card:focus-visible p, .org-card:focus-within p{ transform: scale(1.20); } .ars-glass:focus-visible img, .ars-glass:focus-within img, .mission-card:focus-visible img, .mission-card:focus-within img, .value-card:focus-visible img, .value-card:focus-within img, .vision-card:focus-visible img, .vision-card:focus-within img, .dna-card:focus-visible img, .dna-card:focus-within img, .leader-card:focus-visible img, .leader-card:focus-within img, .partner-card:focus-visible img, .partner-card:focus-within img, .standard-card:focus-visible img, .standard-card:focus-within img, .timeline-card:focus-visible img, .timeline-card:focus-within img, .gallery-card:focus-visible img, .gallery-card:focus-within img, .future-card:focus-visible img, .future-card:focus-within img, .stat-card:focus-visible img, .stat-card:focus-within img, .country-card:focus-visible img, .country-card:focus-within img, .eco:focus-visible img, .eco:focus-within img, .org-card:focus-visible img, .org-card:focus-within img{ transform: scale(1.25); } } /* ========================================================= 14. REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ .ars-energy-glow, .ars-energy-beam, .ars-energy-ring, .ars-energy-particles, .ars-energy-identity span{ animation-duration: .01ms; animation-iteration-count: 1; } .ars-glass, .mission-card, .value-card, .vision-card, .dna-card, .leader-card, .partner-card, .standard-card, .timeline-card, .gallery-card, .future-card, .stat-card, .country-card, .eco, .org-card{ transition-duration: .01ms; } } /* ========================================================= ARS V7 — UNIVERSAL CARD CINEMATIC MOTION SYSTEM FINAL HYBRID EDITION مستقل از JavaScript بدون وابستگی به کلاس‌های اختصاصی صفحات مبنا: ARS V7 Universal Card Motion ترکیب‌شده با ARS Cinematic Interaction ========================================================= */ /* ========================================================= 01. CARD MOTION FOUNDATION ========================================================= */ .ars-glass{ position:relative; isolation:isolate; transform-origin:center center; transition: transform 1.8s cubic-bezier(.16,1,.3,1), box-shadow 1.8s cubic-bezier(.16,1,.3,1), border-color 1.2s ease, filter 1.2s ease; } /* ========================================================= 02. SLOW CINEMATIC CARD ELEVATION کارت بسیار آرام بالا می‌آید و بزرگ می‌شود ========================================================= */ .ars-glass:hover{ transform: translateY(-58px) scale(1.085); border-color: rgba(255,225,150,.82); box-shadow: 0 45px 100px rgba(0,0,0,.50), 0 0 55px rgba(235,177,60,.40), 0 20px 75px rgba(198,132,27,.30), 0 0 120px rgba(220,160,45,.12); filter: brightness(1.10) saturate(1.12); z-index:20; } /* ========================================================= 03. GOLDEN ENERGY UNDER CARD انرژی طلایی زیر کارت ========================================================= */ .ars-glass::after{ content:""; position:absolute; left:-10%; right:-10%; bottom:-30px; height:60px; border-radius:50%; background: radial-gradient( ellipse at center, rgba(255,235,165,.95), rgba(255,210,95,.68) 25%, rgba(235,170,45,.38) 48%, rgba(210,140,25,.16) 65%, transparent 82% ); filter: blur(16px); opacity:0; transform: scaleX(.35) scaleY(.50); transition: opacity 1.3s ease, transform 1.8s cubic-bezier(.16,1,.3,1); pointer-events:none; z-index:-1; } /* ========================================================= 04. ENERGY ACTIVATION ========================================================= */ .ars-glass:hover::after{ opacity:1; transform: scaleX(2.0) scaleY(1.08); } /* ========================================================= 05. ARS CINEMATIC IDENTITY — REFINED LUXURY EDITION ========================================================= */ .ars-glass::before{ content:"ARS"; position:absolute; left:50%; top:50%; width:100%; height:100%; display:flex; align-items:center; justify-content:center; z-index:-2; pointer-events:none; white-space:nowrap; font-family: "Arial Black", "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: clamp( 12rem, 36vw, 36rem ); font-weight:900; letter-spacing: .30em; color: rgba( 255, 218, 120, .48 ); text-shadow: 0 0 30px rgba(255,225,145,.42), 0 0 70px rgba(255,205,90,.34), 0 0 140px rgba(235,170,45,.24), 0 0 220px rgba(210,140,25,.14); opacity:0; transform: translate(-50%,-50%) scale(.22) rotate(-18deg); filter: blur(8px); } /* ========================================================= 06. ARS CINEMATIC REVEAL فعال شدن با همان Hover سیستم V7 ========================================================= */ .ars-glass:hover::before{ opacity:1; animation: arsCardGoldenIdentity 4.8s cubic-bezier(.16,1,.3,1) forwards; } /* ========================================================= 07. ARS GOLDEN CINEMATIC IDENTITY REFINED LUXURY EDITION ========================================================= */ @keyframes arsCardGoldenIdentity{ 0%{ opacity:0; transform: translate(-50%,-50%) scale(.22) rotate(-18deg); filter: blur(11px); text-shadow: 0 0 15px rgba(255,225,145,0); } 12%{ opacity:.42; transform: translate(-50%,-50%) scale(.48) rotate(-8deg); filter: blur(6px); text-shadow: 0 0 35px rgba(255,225,145,.45), 0 0 80px rgba(235,170,45,.30); } 30%{ opacity:.62; transform: translate(-50%,-50%) scale(.82) rotate(4deg); filter: blur(3px); text-shadow: 0 0 45px rgba(255,235,165,.58), 0 0 100px rgba(255,205,90,.42), 0 0 170px rgba(225,155,35,.28); } 48%{ opacity:.56; transform: translate(-50%,-50%) scale(1.12) rotate(-3deg); filter: blur(3px); text-shadow: 0 0 55px rgba(255,240,185,.62), 0 0 120px rgba(255,215,110,.50), 0 0 210px rgba(235,170,45,.34), 0 0 300px rgba(210,140,25,.20); } 68%{ opacity:.30; transform: translate(-50%,-50%) scale(1.65) rotate(8deg); filter: blur(6px); text-shadow: 0 0 75px rgba(255,225,145,.42), 0 0 160px rgba(255,205,90,.30), 0 0 260px rgba(220,150,30,.20); } 86%{ opacity:.10; transform: translate(-50%,-50%) scale(2.15) rotate(18deg); filter: blur(11px); text-shadow: 0 0 120px rgba(255,220,120,.20), 0 0 240px rgba(220,150,30,.10); } 100%{ opacity:0; transform: translate(-50%,-50%) scale(2.75) rotate(28deg); filter: blur(18px); text-shadow: 0 0 200px rgba(255,220,120,0); } } /* ----------------------------------------- GOLDEN ARRIVAL ورود اصلی ARS ----------------------------------------- */ 30%{ opacity:.95; transform: translate(-50%,-50%) scale(.82) rotate(4deg); filter: blur(1px); text-shadow: 0 0 35px rgba(255,235,165,.90), 0 0 80px rgba(255,205,90,.75), 0 0 150px rgba(225,155,35,.55); } /* ----------------------------------------- CINEMATIC PEAK بزرگ‌ترین و درخشان‌ترین لحظه ----------------------------------------- */ 48%{ opacity:.88; transform: translate(-50%,-50%) scale(1.12) rotate(-3deg); filter: blur(1px); text-shadow: 0 0 45px rgba(255,240,185,.95), 0 0 100px rgba(255,215,110,.88), 0 0 180px rgba(235,170,45,.68), 0 0 280px rgba(210,140,25,.38); } /* ----------------------------------------- GOLDEN EXPANSION ARS شروع به پخش شدن می‌کند ----------------------------------------- */ 68%{ opacity:.48; transform: translate(-50%,-50%) scale(1.65) rotate(8deg); filter: blur(3px); text-shadow: 0 0 60px rgba(255,225,145,.72), 0 0 140px rgba(255,205,90,.58), 0 0 240px rgba(220,150,30,.38); } /* ----------------------------------------- FINAL DISAPPEARANCE محو شدن بزرگ و سینمایی ----------------------------------------- */ 86%{ opacity:.18; transform: translate(-50%,-50%) scale(2.15) rotate(18deg); filter: blur(7px); text-shadow: 0 0 100px rgba(255,220,120,.35), 0 0 220px rgba(220,150,30,.20); } 100%{ opacity:0; transform: translate(-50%,-50%) scale(2.75) rotate(28deg); filter: blur(14px); text-shadow: 0 0 180px rgba(255,220,120,0); } } /* ========================================================= 08. CARD CONTENT CINEMATIC SCALE ========================================================= */ .ars-glass h1, .ars-glass h2, .ars-glass h3, .ars-glass h4, .ars-glass p, .ars-glass span, .ars-glass img{ transition: transform 1.6s cubic-bezier(.16,1,.3,1), filter 1.2s ease; } /* ========================================================= 09. CONTENT REVEAL ========================================================= */ .ars-glass:hover h1, .ars-glass:hover h2, .ars-glass:hover h3, .ars-glass:hover h4, .ars-glass:hover p, .ars-glass:hover span{ transform: scale(1.10); } /* ========================================================= 10. IMAGE MOTION ========================================================= */ .ars-glass:hover img{ transform: scale(1.08); filter: brightness(1.10) saturate(1.12); } /* ========================================================= 11. CARD ENERGY BREATH تنفس آرام انرژی ========================================================= */ .ars-glass:hover{ animation: arsCardEnergyBreath 4.8s ease-in-out infinite alternate; } /* ========================================================= 12. ENERGY BREATH ANIMATION ========================================================= */ @keyframes arsCardEnergyBreath{ 0%{ box-shadow: 0 42px 90px rgba(0,0,0,.46), 0 0 38px rgba(235,177,60,.28), 0 0 75px rgba(210,140,25,.12); } 100%{ box-shadow: 0 55px 115px rgba(0,0,0,.54), 0 0 70px rgba(255,195,70,.46), 0 0 130px rgba(220,150,30,.20); } } /* ========================================================= 13. MOBILE ========================================================= */ @media(max-width:768px){ .ars-glass:hover{ transform: translateY(-32px) scale(1.045); } .ars-glass:hover h1, .ars-glass:hover h2, .ars-glass:hover h3, .ars-glass:hover h4, .ars-glass:hover p, .ars-glass:hover span{ transform: scale(1.06); } .ars-glass:hover img{ transform: scale(1.04); } } /* ========================================================= 14. REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ .ars-glass, .ars-glass *, .ars-glass::before, .ars-glass::after{ animation:none !important; transition:none !important; } } /* ========================================================= END — ARS V7 FINAL HYBRID CARD CINEMATIC SYSTEM ========================================================= */