@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Handjet:wght,ELSH@100..900,2&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Gveret+Levin&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Tiny5&display=swap");

@font-face{
	font-family: "AsyAgasyKtav";
	src: url("../fonts/asyagasy_ktav21.eot");
	src: url("../fonts/asyagasy_ktav21.eot?#iefix") format("embedded-opentype"),
		 url("../fonts/asyagasy_ktav21.woff2") format("woff2"),
		 url("../fonts/asyagasy_ktav21.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--color1: #0389ff;
	--color2: #033a54;
	--color3: #ff007a;
	--color4: #fdc100;
	--color5: #3fd97e;
	--color6: #00c4ff;
	--color7: #ff7f00;

	--color_base: #ffffff;
	--color_base2: #f7fafe;

	--color1_soft: color-mix(in srgb, var(--color1) 74%, var(--color_base));
	--color1_softer: color-mix(in srgb, var(--color1) 16%, var(--color_base));
	--color1_deep: color-mix(in srgb, var(--color1) 74%, var(--color2));

	--color2_soft: color-mix(in srgb, var(--color2) 68%, var(--color_base));
	--color2_softer: color-mix(in srgb, var(--color2) 12%, var(--color_base));
	--color2_deep: color-mix(in srgb, var(--color2) 62%, #000000);

	--color3_soft: color-mix(in srgb, var(--color3) 70%, var(--color_base));
	--color3_softer: color-mix(in srgb, var(--color3) 14%, var(--color_base));
	--color3_deep: color-mix(in srgb, var(--color3) 74%, var(--color2));

	--color4_soft: color-mix(in srgb, var(--color4) 62%, var(--color_base));
	--color4_deep: color-mix(in srgb, var(--color4) 58%, var(--color2));

	--color5_deep: color-mix(in srgb, var(--color5) 68%, var(--color2));
	--color6_softer: color-mix(in srgb, var(--color6) 22%, var(--color_base));

	--color7_soft: color-mix(in srgb, var(--color7) 74%, var(--color_base));
	--color7_softer: color-mix(in srgb, var(--color7) 16%, var(--color_base));
	--color7_deep: color-mix(in srgb, var(--color7) 74%, var(--color3));

	--color_text: var(--color2);
	--color_text_muted: color-mix(in srgb, var(--color2) 64%, var(--color_base));
	--color_text_soft: color-mix(in srgb, var(--color2) 44%, var(--color_base));
	--color_text_invert: var(--color_base);
	--color_accent_soft: var(--color1_softer);

	--color_line: color-mix(in srgb, var(--color2) 12%, transparent);
	--color_line_strong: color-mix(in srgb, var(--color2) 30%, transparent);
	--color_line_invert: color-mix(in srgb, var(--color6) 42%, transparent);

	--color_surface: var(--color_base);
	--color_surface_alt: var(--color_base2);
	--color_glass: rgba(255,255,255,0.57);
	--color_glass_strong: color-mix(in srgb, var(--color_base) 90%, transparent);
	--color_header: color-mix(in srgb, var(--color_base2) 84%, transparent);
	--color_overlay: color-mix(in srgb, var(--color2) 72%, transparent);
	--color_badge: color-mix(in srgb, var(--color_base) 82%, transparent);

	--color_focus: var(--color3);
	--color_shadow_seed: var(--color2);

	--color_code_bg: var(--color2_deep);
	--color_code_text: var(--color6_softer);
	--color_terminal_bg: color-mix(in srgb, var(--color2_deep) 92%, #000000);
	--color_terminal_text: var(--color5);
	--color_terminal_dim: color-mix(in srgb, var(--color5) 55%, var(--color2));

	--color_footer_text: color-mix(in srgb, var(--color_base) 86%, var(--color6));
	--color_footer_heading: var(--color6);

/* 	--sky_hero_start: #faf4ec;
	--sky_hero_end: #edcfe6; */
	
	--sky_hero_start: #e1eefe;
	--sky_hero_end: #fddfef;
	
	--sky_posts_end: #ffe6bf;
	--sky_dusk_start: #ffe6bf;
	
	--sky_dusk_end: #a95fb0;
	
	--sky_night_start: #033a54;
	--sky_night_end: #000c11;

	--tone_main: var(--color1);
	--tone_deep: var(--color1_deep);
	--tone_soft: var(--color1_softer);
	--tone_ink: var(--color_base);

	/* ---------------------------------------------------------------
	   טיפוגרפיה
	   --------------------------------------------------------------- */
	--font_main: "Rubik", arial, "Arial Hebrew", "Segoe UI", system-ui, sans-serif;
	--font_pixel: "Tiny5", "Courier New", monospace;
	--font_pixel_he: "Handjet", sans-serif;
	--font_hand: "AsyAgasyKtav", "Gveret Levin", "Segoe Script", cursive;
	--font_hand2: "Gveret Levin";
	--font_hand_eng: "Gveret Levin";
	--font_code: ui-monospace, "Cascadia Code", "Courier New", monospace;

	--text_base: 16px;
	
	--font_size_-10: calc( (var(--text_base) / 1.5) );
	--font_size_-9: calc( (var(--text_base) / 1.45) );
	--font_size_-8: calc( (var(--text_base) / 1.4) );
	--font_size_-7: calc( (var(--text_base) / 1.35) );
	--font_size_-6: calc( (var(--text_base) / 1.3) );
	--font_size_-5: calc( (var(--text_base) / 1.25) );
	--font_size_-4: calc( (var(--text_base) / 1.2) );
	--font_size_-3: calc( (var(--text_base) / 1.15) );
	--font_size_-2: calc( (var(--text_base) / 1.1) );
	--font_size_-1: calc( (var(--text_base) / 1.05) );
	
	--font_size_0: var(--text_base);
	--font_size: var(--text_base);
	--font_size_1: var(--text_base);
	
	--font_size_2: calc( (var(--text_base) * 1.05) );
	--font_size_3: calc( (var(--text_base) * 1.1) );
	--font_size_4: calc( (var(--text_base) * 1.15) );
	--font_size_5: calc( (var(--text_base) * 1.2) );
	--font_size_6: calc( (var(--text_base) * 1.25) );
	--font_size_7: calc( (var(--text_base) * 1.3) );
	--font_size_8: calc( (var(--text_base) * 1.35) );
	--font_size_9: calc( (var(--text_base) * 1.4) );
	--font_size_10: calc( (var(--text_base) * 1.45) );
	--font_size_11: calc( (var(--text_base) * 1.50) );
	--font_size_12: calc( (var(--text_base) * 1.55) );
	--font_size_13: calc( (var(--text_base) * 1.60) );
	--font_size_14: calc( (var(--text_base) * 1.65) );
	--font_size_15: calc( (var(--text_base) * 1.70) );
	--font_size_16: calc( (var(--text_base) * 1.75) );
	
	--text_base_larger: calc( (var(--text_base) * 1.05) );
	--text_base_md: calc( (var(--text_base) * 1.1) );
	--text_md: calc( (var(--text_base) * 1.1) );
	--text_md_larger: calc( (var(--text_base) * 1.15) );
	--text_lg: calc( (var(--text_base) * 1.20) );
	--text_xl: calc( (var(--text_base) * 1.25) );
	--text_1xl: calc( (var(--text_base) * 1.30) );
	--text_2xl: calc( (var(--text_base) * 1.35) );
	--text_3xl: calc( (var(--text_base) * 1.40) );
	--text_4xl: calc( (var(--text_base) * 1.45) );
	--text_5xl: calc( (var(--text_base) * 1.5) );
	
	--text_base_smaller: calc( (var(--text_base) / 1.05) );
	--text_sm: calc( (var(--text_base) / 1.1) );
	--text_xs: calc( (var(--text_base) / 1.15) );
	--text_micro: calc( (var(--text_base) / 1.20) );
	--text_arcade: --text_4xl;
	
	/* --text_micro: 0.420rem; */
	/* --text_xs: 0.570rem; */
	/* --text_sm: 0.630rem; */
	/* --text_base_larger: 0.84rem; */
	/* --text_md: 0.91rem; */
	/* --text_md_larger: 1rem; */
	/* --text_lg: clamp(1rem, 1.72vw, 1.15rem); */
	/* --text_xl: clamp(1.3rem, 2vw, 1.5rem); */
	/* --text_2xl: clamp(1.42rem, 2.6vw, 2.8rem); */
	/* --text_3xl: clamp(1.57rem, 2.8vw, 3.6rem); */
	/* --text_4xl: clamp(1.63rem, 3vw, 4.2rem); */
	/* --text_5xl: clamp(1.72rem, 4.2vw, 5.7rem); */
	/* --text_6xl: clamp(1.91rem, 5.7vw, 6.3rem); */
	/* --text_7xl: clamp(2.57rem, 7.2vw, 7.2rem); */
	/* --text_arcade: clamp(2rem, 6.3vw, 4.5rem); */
	--title_text_shadow:  2px 2px var(--color2_deep);
	
	--text_hand_xs: clamp(0.72rem, 1.5vw, 1.3rem);
	--text_hand_sm: clamp(1rem, 2.2vw, 1.35rem);
	--text_hand: clamp(1.25rem, 2.8vw, 1.75rem);

	--line_height_base: 1.63;
	
	--line_height-7: calc( var(--line_height_base) / 2.05 );
	--line_height-6: calc( var(--line_height_base) / 1.90 );
	--line_height-5: calc( var(--line_height_base) / 1.75 );
	--line_height-4: calc( var(--line_height_base) / 1.60 );
	--line_height-3: calc( var(--line_height_base) / 1.45 );
	--line_height-2: calc( var(--line_height_base) / 1.30 );
	--line_height-1: calc( var(--line_height_base) / 1.15 );
	
	
	--line_height: var(--line_height_base);
	--line_height0: var(--line_height_base);
	--line_height1: var(--line_height_base);
	
	--line_height2: calc( var(--line_height_base) * 1.15 );
	--line_height3: calc( var(--line_height_base) * 1.30 );
	--line_height4: calc( var(--line_height_base) * 1.45 );
	--line_height5: calc( var(--line_height_base) * 1.60 );
	--line_height6: calc( var(--line_height_base) * 1.75 );
	--line_height7: calc( var(--line_height_base) * 1.90 );
	--line_height8: calc( var(--line_height_base) * 2.05 );

	
	--line_height_extra_tight: 0.72;
	--line_height_tight: 1;
	
	--line_height_loose: 1.72;
	--line_height_extra_loose: 1.91;
	
	
	
	
	--line_height_tightest: 0.75;
	--line_height_extra_extra_tight: 0.85;
	--line_height_extra_tight: 1;
	--line_height_tighter: 1.15;
	--line_height_tight: 1.25;
	
	--line_height_base: 1.5;
	
	--line_height_loose: 1.65;
	--line_height_looser: 1.75;
	--line_height_extra_loose: 2;
	--line_height_extra_extra_loose: 2.15;
	--line_height_loosest: 2.25;

	

	--letter_spacing_extra_tight: -0.72px;
	--letter_spacing_tight: -0.09px;
	--letter_spacing_normal: 0px;
	--letter_spacing_loose: 0.42px;
	--letter_spacing_extra_loose: 0.57px;
	
	--tracking_pixel: 0.14em;
	--tracking_arcade: 0.16em;
	
	--weight_thin: 100;
	--weight_regular: 400;
	--weight_medium: 500;
	--weight_bold: 700;

	--space_1: 0.26rem;
	--space_2: 0.28rem;
	--space_3: 0.36rem;
	--space_4: 0.42rem;
	--space_5: 0.57rem;
	--space_6: 0.63rem;
	--space_7: 0.72rem;
	--space_8: 0.91rem;
	--space_9: 1rem;
	--space_10: 1.5rem;
	--space_11: 2rem;
	--space_12: 2.6rem;
	--space_13: 2.8rem;
	--space_14: 3.6rem;
	--space_15: 4.2rem;
	--space_16: 5.7rem;
	--space_17: 6.3rem;
	
	--section_space: clamp(4.2rem, 7.2vw, 6.3rem);
	--gap_grid: clamp(1.3rem, 2.8vw, 2.6rem);
	--hero_gap_grid: 0.72vw;
	--hero_character_margin_inline_start: -42px;

	--desktop_max: 1100px;
	--desktop_hero_max: 1050px;
	--reading_max: 46rem;
	--card_min: 18.75rem;
	--header_height: 5.75rem;
	--page_gutter: clamp(1rem, 3vw, 1.875rem);

	--size_icon_menu: 32px;
	--size_icon_menu_smaller: 28px;
	--size_icon_menu_smallest: 21px;
	
	--size_icon_round: 2.8rem;
	--size_icon_square: 3.75rem;
	--size_icon_glyph: 1.5rem;
	--size_coin: 1.375rem;
	--size_coin_lg: 1.75rem;
	--size_avatar: 3rem;
	--size_status_dot: 0.5rem;
	--size_skill_pixel: 0.75rem;
	--size_bar: 0.9rem;
	--size_bar_track: 0.55rem;
	--size_post_image: 9.1rem;
	--size_character: 28.125rem;
	--size_runner: 1.75rem;
	--size_reading_bar: 2.5rem;
	--size_logo_w: 300px;
	--size_logo_h: 70px;
	
	--size_footer_logo_w: 42%;
	--size_footer_logo_h: 70px;
	
	
	--size_terminal: 46rem;
	--size_terminal_body: clamp(12rem, 40dvh, 20rem);

	--shift_character_min: 3px;
	--shift_character_max: 5px;
	
	--shift_hover: 2%;
	--width_border: 1px;
	--width_pixel: 1px;
	--width_focus: 3px;
	--width_rule: 2px;

	--bio_step1_indent: clamp(-0.63rem, -0.1vw, -0.72rem);
	--bio_step1_margin_start: clamp(-18rem, -7.2vw, -6.3rem);
	--bio_step1_span_indent: clamp(0.63rem, 0.1vw, 0.28rem);
	--bio_step1_span_margin_start: clamp(0.63rem, 0.1vw, 0.28rem);
	
	--bio_step2_indent: clamp(-0.63rem, -0.1vw, -0.72rem);
	--bio_step2_margin_start: clamp(-3.6rem, -4.2vw, -4.2rem);
	--bio_step2_span_indent: clamp(0.63rem, 0.1vw, 0.28rem);
	--bio_step2_span_margin_start: clamp(0.63rem, 0.1vw, 0.28rem);
	
	--bio_step3_indent: clamp(-0.63rem, -0.1vw, -0.72rem);
	--bio_step3_margin_start: clamp(-0.63rem, -0.1vw, -0.72rem);
	--bio_step3_span_indent: clamp(0.63rem, 0.1vw, 0.28rem);
	--bio_step3_span_margin_start: clamp(0.63rem, 0.1vw, 0.28rem);

	--bio_step4_indent: clamp(-0.63rem, -0.1vw, -0.72rem);
	--bio_step4_margin_start: clamp(0.36rem, 1vw, 0.72rem);
	--bio_step4_margin_block_start: clamp(0.42rem, 2vw, 0.72rem);
	--bio_step4_span_indent: clamp(0.63rem, 0.1vw, 0.28rem);
	--bio_step4_span_margin_start: clamp(0.63rem, 0.1vw, 0.28rem);	
	
	--hero_bio_padding: 0 13px;
	--hero_character_padding: 0 13px;
	--hero_intro_padding: 0;

	--radius_button: 0.875rem;
	--radius_card: 1rem;
	--radius_panel: 1.5rem;
	--radius_icon: 1.125rem;
	--radius_pill: 999px;
	--radius_pixel: 0.25rem;

	--shadow_card: 4px 4px 0px var(--color_line);
	--shadow_card_hover: 4px 4px var(--color_line_strong);
	
	--shadow_panel: 0 1.5rem 3rem color-mix(in srgb, var(--color_shadow_seed) 18%, transparent);
	
	--shadow_button: 4px 4px var(--color2);
	--shadow_button_hover: 2px 2px var(--color2_deep);
	
	--shadow_header: 0 0.125rem 1rem color-mix(in srgb, var(--color_shadow_seed) 8%, transparent);
	--shadow_terminal: 0 2rem 4rem color-mix(in srgb, #000000 55%, transparent);
	--blur_glass: 10px;
	--blur_header: 14px;

	--dur_fastest: 0.03s;
	--dur_faster: 0.06s;
	--dur_fast: 0.12s;
	--dur_base: 0.25s;
	--dur_slow: 0.5s;
	--dur_slower: 1s;
	--dur_slowest: 2s;
	--ease: linear;

	--tilt_glass: -0.3deg;
	--tilt_story: 0.42deg;
	--tilt_rpg: 0.72deg;
	--tilt_breathing: -0.91deg;
	--tilt_breathing2: 1deg;
	--tilt_breathing3: -0.42deg;
	
	--tilt_none: 0deg;
	
	--breathing_translateX: 0;
	--breathing_translateY: 7.2%;
	
	--breathing_translateX2: -1%;
	--breathing_translateY2: -19.1%;
	
	--breathing_translateX3: 1.3%;
	--breathing_translateY3: -4.2%;	

	--zoom_in_out_max_scale: 1.03;
	--zoom_in_out_min_scale: 1;
	
	--zoom_in_out_2_max_scale: 1.1;
	--zoom_in_out_2_min_scale: 1;
	
	--zoom_in_out_3_max_scale: 1.05;
	--zoom_in_out_3_min_scale: 0.91;
	
	--zoom_in_out_4_max_scale: 1.3;
	--zoom_in_out_4_min_scale: 1;	
	
	--letter_spacing_animation_min: var(--letter_spacing_loose);
	--letter_spacing_animation_max: 4.2%;
	
	--word_spacing_animation_min: 0;
	--word_spacing_animation_max: 4.2%;	

	--z_background: -10;
	--z_content: 10;
	--z_header: 60;
	--z_reading: 70;
	--z_toast: 80;
	--z_terminal: 90;
}

body,html{
	font-size: var(--font_size);
	font-weight: var(--weight_thin);
}

.theme2 {
	--tone_main: var(--color3_soft);
	--tone_deep: var(--color3);
	--tone_soft: var(--color3_softer);
	--tone_softer: var(--color3_softer);
	--tone_ink: var(--color_base);
}

.theme2_soft {
	--tone_main: var(--color3_soft);
	--tone_deep: var(--color3);
	--tone_soft: var(--color3_softer);
	--tone_softer: var(--color3_softer);
	--tone_ink: var(--color_base);
}

.theme3 {
	--tone_main: var(--color2);
	--tone_deep: var(--color2_deep);
	--tone_soft: var(--color2_softer);
	--tone_ink: var(--color_base);
}

.theme4 {
	--tone_main: var(--color2_deep);
	--tone_deep: var(--color2_deep);
	--tone_soft: var(--color2_softer);
	--tone_ink: var(--color_base);
}

.theme5 {
	--tone_main: var(--color5);
	--tone_deep: var(--color5_deep);
	--tone_soft: color-mix(in srgb, var(--color5) 18%, var(--color_base));
	--tone_ink: var(--color2);
}

.theme6 {
	--tone_main: var(--color4);
	--tone_deep: var(--color4_deep);
	--tone_soft: var(--color4_soft);
	--tone_ink: var(--color2);
}


.theme7 {
	--tone_main: var(--color7);
	--tone_deep: var(--color7_deep);
	--tone_soft: var(--color7_soft);
	--tone_ink: var(--color2);
}

.burger_menu{	
	min-width: 40px;
	text-indent: -999vw;
	aspect-ratio: 1 / 1;
	position: relative;
}

.burger_menu::after{
	display: inline-block;
	font-family: "FontAwesome";
	font-size: calc( var(--size_icon_menu) * 0.63);
	content: "\f0c9";
	color: inherit;
	text-indent: 0;
	position: absolute;
	right: 0;
	top: 0;	

	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;	
}

.surprise::after{
	content: "\f074";
	display: inline-block;
	font-family: "FontAwesome";	
	color: inherit;
	text-indent: 0;
}

i{
	font-style: unset;
}

.round_icon.whatsapp{
	color: var(--color_base);
	text-indent: -999vw;
	overflow: hidden;
	text-decoration: none;
}

.round_icon.whatsapp::after{
	content: "\f232";
	display: inline-block;
	font-size: var(--size_icon_menu_smaller);
	font-family: "FontAwesome";	
	color: inherit;
	text-indent: 0;
}

.glass_panel.effect1{
	rotate: 1.42deg;
	--translateXFrom: -9%;
	--translateYFrom: 0%;
	translate: var(--translateXFrom) var(--translateYFrom);
}

.glass_panel.effect1 .content{
	rotate: -1.1deg;
	--translateXFrom: 2.8%;
	--translateYFrom: 5.7%;
	translate: var(--translateXFrom) var(--translateYFrom);
}

.glass_panel.effect2{
	rotate: 1.3deg;
	--translateXFrom: -4%;
	--translateYFrom: 0%;	
	translate: var(--translateXFrom) var(--translateYFrom);
}

.glass_panel.effect2 .content{
	rotate: -1deg;
	translate: 4.2% 1%;	
}

.glass_panel.effect3{
	--translateXFrom: 0%;
	--translateYFrom: 0%;
	
	rotate: -0.13deg;
	translate: -9.1% 0;
}

.glass_panel.effect3 .content{
	rotate: 0.063deg;
	translate: 5.7% -6.3%;	
}

.pixel_art_box{
	box-shadow: 0 -4px #fff, 0 -8px #000, 4px 0 #fff, 4px -4px #000, 8px 0 #000, 0 4px #fff, 0 8px #000, -4px 0 #fff, -4px 4px #000, -8px 0 #000, -4px -4px #000, 4px 4px #000 !important;	
	border-radius: 0;
}

.rpg_panel.effect1{
	--translateXFrom: 1.3%;
	--translateYFrom: -10%;
	
	rotate: -0.91deg;
}