/* ==========================================================================
   meravish · ההירו של Promtfolio, בתוך הקייס של בניית meravish (18.10.2026)
   מירב: "להטמיע בתוך הסיפור של מירביש את ההירו האמיתי של פרומטפוליו כסקשן פול פריים".
   שחזור סטטי של ההירו של promtfolio.com, כי האתר לא נטען בתוך iframe. המקור, לקריאה בלבד:
   recast-app, origin/master: app/page.tsx, components/folio/FolioSection.tsx (FolioHero),
   HeroFilm.tsx ו-HeroFilm.module.css, StarField.tsx, URLInput.tsx, ו-components/folio/folio.css.
   הערכים מועתקים כמו שהם. כל כלל עטוף ב-.pfh, כדי שלא ייגע בשום דבר אחר בעמוד,
   ובספציפיות שגוברת על הכללים הגלובליים של style.css (כמו הפונט של span בעברית).

   החריג לרקע הכהה מפורש: ההירו של promtfolio.com הוא אחד משלושת העיצובים שמירב בחרה
   ("אל תיגע בהירו באתר, זה לא עיצוב גנרי"), והיא ביקשה את ההירו האמיתי.
   ========================================================================== */

/* Mona Sans, הפונט של Promtfolio, מאותו קובץ שהאתר שלו מגיש (לטינית, רוחב 100 עד 106) */
@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 100% 106%;
  font-display: swap;
  src: url('/fonts/mona-sans-latin-wdth100-106.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* מה שעומד במקום עד שהפונט מגיע: Arial מכויל לרוחב ולשורה של Mona Sans, כמו במקור */
@font-face {
  font-family: 'Mona Sans Fallback';
  src: local('Arial');
  ascent-override: 105.76%;
  descent-override: 31.05%;
  line-gap-override: 0%;
  size-adjust: 103.06%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.pfh {
  --fo-pink: #ff1f7a;
  --fo-cta: #de2953;
  --fo-cta-hover: #d2174a;
  --fo-dark: #0d0020;
  --fo-ink: #3a2a3d;
  --fo-muted: #6b6b6b;
  --fo-pad-x: clamp(20px, 5vw, 40px);
  /* Mona Sans נכנס רק כשהסקשן מתקרב למסך (is-near), כדי שלא יתחרה בטעינה של ראש העמוד */
  --fo-font: 'Mona Sans Fallback', 'Heebo', 'Helvetica Neue', Arial, sans-serif;
  --fo-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --fo-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --px: 0;
  --py: 0;

  position: relative;
  min-height: max(100svh, 680px);
  background: var(--fo-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 152px var(--fo-pad-x) 80px;
  color: #fff;
  font-family: var(--fo-font);
  line-height: 1.6;
  font-size: 16px;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  box-sizing: border-box;
}
.pfh *, .pfh *::before, .pfh *::after { box-sizing: border-box; }
.pfh.is-near { --fo-font: 'Mona Sans', 'Mona Sans Fallback', 'Heebo', 'Helvetica Neue', Arial, sans-serif; }
.pfh.pfh p, .pfh.pfh span, .pfh.pfh a, .pfh.pfh button, .pfh.pfh input, .pfh.pfh label { font-family: var(--fo-font); }

/* הערפילית */
.pfh::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 72% 42%, rgba(255, 31, 122, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 40% 55% at 12% 68%, rgba(100, 30, 210, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 30% 40% at 55% 88%, rgba(200, 60, 255, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse 25% 30% at 85% 15%, rgba(255, 31, 122, 0.09) 0%, transparent 50%),
    radial-gradient(ellipse 50% 35% at 35% 20%, rgba(80, 20, 180, 0.12) 0%, transparent 55%);
  pointer-events: none;
  animation: pfh-orb-shift 14s ease-in-out infinite alternate;
}
@keyframes pfh-orb-shift {
  0% { opacity: 1; transform: scale(1) translate(0, 0); }
  100% { opacity: 0.88; transform: scale(1.05) translate(-10px, 6px); }
}

/* הכוכבים: 220 נוצצים ועשרה שמאירים, נוצרים ב-JS כמו ב-StarField.tsx */
.pfh-star-field, .pfh-feature-stars { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.pfh-star { position: absolute; border-radius: 50%; background: #fff; animation: pfh-twinkle ease-in-out infinite; }
@keyframes pfh-twinkle {
  0%, 100% { opacity: var(--op); transform: scale(1); }
  50% { opacity: calc(var(--op) * 0.25); transform: scale(0.6); }
}
.pfh-fstar { position: absolute; border-radius: 50%; background: #fff; animation: pfh-fstar-pulse ease-in-out infinite; }
@keyframes pfh-fstar-pulse {
  0%, 100% { box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.6); opacity: 0.9; }
  50% { box-shadow: 0 0 10px 3px rgba(255, 31, 122, 0.4); opacity: 0.5; }
}
.pfh-planet {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(200, 70, 255, 0.22) 0%, rgba(120, 30, 200, 0.14) 35%, rgba(60, 10, 120, 0.08) 60%, transparent 75%);
  filter: blur(48px);
  bottom: -160px;
  left: -80px;
  pointer-events: none;
  z-index: 0;
  animation: pfh-planet-drift 20s ease-in-out infinite alternate;
}
.pfh-planet::after {
  content: "";
  position: absolute;
  width: 650px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid rgba(200, 80, 255, 0.1);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
  filter: blur(2px);
}
@keyframes pfh-planet-drift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(20px, -15px) scale(1.04); }
}

/* שתי עמודות: הטקסט והשדה, והגלקסיה של הסרט והכרטיסים */
.pfh-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 48px;
  align-items: center;
}

/* הכותרת: Mona Sans ברוחב 106 ובמשקל 600, השורה השנייה בוורוד */
.pfh .pfh-title {
  font-family: var(--fo-font);
  font-stretch: 106%;
  font-weight: 600;
  font-size: clamp(31px, 4.8vw, 74px);
  line-height: 0.95;
  color: #fff;
  letter-spacing: clamp(-0.01em, calc((71.99px - 1em) * 100), 0em);
  max-width: 760px;
  margin: 0 0 32px;
  text-wrap: balance;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
}
.pfh .pfh-title span { font-family: inherit; font-stretch: inherit; font-weight: inherit; }
.pfh .pfh-title .pfh-accent { color: var(--fo-pink); }
.pfh .pfh-line { display: block; overflow: hidden; padding: 0.06em 0.05em 0.16em; margin: -0.06em -0.05em -0.16em; }
.pfh .pfh-line > span { display: block; transform: translateY(108%); transition: transform 0.75s var(--fo-ease-expo); }
.pfh .pfh-line:nth-child(2) > span { transition-delay: 0.09s; }
.pfh.is-shown .pfh-line > span { transform: translateY(0); }

.pfh .pfh-sub {
  font-size: clamp(16px, 2vw, 20px);
  color: rgba(255, 255, 255, 0.6);
  max-width: 520px;
  line-height: 1.6;
  margin: 0 0 48px;
  text-wrap: pretty;
}

/* הכניסה: מופיע פעם אחת כשהסקשן מגיע למסך, כמו .reveal במקור */
.pfh .pfh-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pfh .pfh-reveal.d1 { transition-delay: 0.1s; }
.pfh .pfh-reveal.d2 { transition-delay: 0.2s; }
.pfh.is-shown .pfh-reveal { opacity: 1; transform: none; }
.pfh .pfh-title.pfh-reveal { transform: none; }

/* השדה: קישור ו-Start, כמו URLInput בגרסת folio */
.pfh .pfh-form { width: 100%; max-width: 520px; margin: 28px 0 0; }
.pfh .pfh-url {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 18px;
  box-shadow: 0 18px 50px -24px rgba(255, 31, 122, 0.35);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pfh .pfh-url:focus-within {
  border-color: var(--fo-pink);
  box-shadow: 0 0 0 3px rgba(255, 31, 122, 0.12), 0 18px 50px -24px rgba(255, 31, 122, 0.45);
}
.pfh .pfh-url input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 15px 16px;
  font: inherit;
  font-family: var(--fo-font);
  font-size: 16px;
  color: var(--fo-ink);
  direction: ltr;
  text-align: left;
}
.pfh .pfh-url input:focus { outline: none; }
.pfh .pfh-url input::placeholder { color: var(--fo-muted); opacity: 1; }
.pfh .pfh-url button {
  min-width: 124px;
  align-self: stretch;
  border: 0;
  border-radius: 12px;
  padding: 15px 28px;
  line-height: inherit;
  font-family: var(--fo-font);
  font-stretch: 106%;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--fo-cta);
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s, transform 0.2s;
}
.pfh .pfh-url button:hover:not(:disabled) { background: var(--fo-cta-hover); transform: translateY(-1px); }
.pfh .pfh-url button:disabled { opacity: 0.5; cursor: default; transform: none; }
.pfh .pfh-url button:focus-visible { outline: 2px solid var(--fo-pink); outline-offset: 3px; }
.pfh .pfh-error { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: #ff8fb3; }
.pfh .pfh-error[hidden] { display: none; }
.pfh .pfh-legal { margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: #a6a6a6; text-wrap: pretty; }

/* הגלקסיה: טבעת המסלול, שלושה כרטיסי דפדפן מאוירים, והנגן במרכז */
.pfh-visual {
  position: relative;
  top: -36px;
  height: 500px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pfh-plx-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
  --d: -7px;
  transform: translate3d(calc(var(--px) * var(--d)), calc(var(--py) * var(--d)), 0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pfh-plx {
  position: absolute;
  pointer-events: none;
  transform: translate3d(calc(var(--px) * var(--d, 8px)), calc(var(--py) * var(--d, 8px)), 0);
}
.pfh-plx-1 { --d: 6px; z-index: 3; inset: 0; display: flex; align-items: center; justify-content: center; }
.pfh-plx-2 { --d: 14px; z-index: 2; right: -6%; top: -2%; }
.pfh-plx-3 { --d: 11px; z-index: 2; left: -2%; bottom: 2%; }
.pfh-plx-4 { --d: 18px; z-index: 1; left: -4%; top: 4%; }
.pfh-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  border: 1px solid rgba(255, 31, 122, 0.08);
  border-radius: 50%;
  animation: pfh-ring-spin 30s linear infinite;
}
.pfh-ring::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: var(--fo-pink);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 31, 122, 0.8);
}
@keyframes pfh-ring-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.pfh-card {
  position: relative;
  border-radius: 14px;
  overflow: visible;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  background: #1a0a2e;
  border: 1px solid rgba(255, 255, 255, 0.07);
  pointer-events: auto;
}
.pfh-card-2 { width: 160px; height: 110px; animation: pfh-card-float-2 10s ease-in-out infinite; background: linear-gradient(135deg, #16032c 0%, #200840 100%); }
.pfh-card-3 { width: 150px; height: 100px; animation: pfh-card-float-3 11s ease-in-out infinite; background: linear-gradient(135deg, #1a0630 0%, #240a42 100%); }
.pfh-card-4 { width: 110px; height: 75px; animation: pfh-card-float-4 9s ease-in-out infinite; opacity: 0.6; }
@keyframes pfh-card-float-2 { 0%, 100% { transform: rotate(6deg) translateY(0); } 50% { transform: rotate(8deg) translateY(-10px); } }
@keyframes pfh-card-float-3 { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-8px); } }
@keyframes pfh-card-float-4 { 0%, 100% { transform: rotate(3deg) translateY(0); } 50% { transform: rotate(1deg) translateY(-12px); } }
.pfh-card-bar { height: 3px; background: linear-gradient(90deg, var(--fo-pink), rgba(255, 31, 122, 0.3)); border-radius: 14px 14px 0 0; }
.pfh-card-body { padding: 14px 16px; }
.pfh-card-thumb {
  width: 100%;
  height: 70px;
  background: linear-gradient(135deg, rgba(255, 31, 122, 0.15), rgba(120, 40, 220, 0.15));
  border-radius: 6px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.pfh-card-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 31, 122, 0.08) 0%, transparent 60%); }
.pfh-card-line { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); margin-bottom: 6px; }
.pfh-card-line.short { width: 60%; }
.pfh-card-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fo-pink);
  box-shadow: 0 0 10px rgba(255, 31, 122, 0.6);
  animation: pfh-pulse-dot 2s ease-in-out infinite;
}
@keyframes pfh-pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.3); } }
.pfh .pfh-live {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--fo-pink);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  z-index: 10;
}

/* הנגן: הפוסטר, וכפתור שמנגן רק בלחיצה, עם קול וכתוביות */
.pfh-player {
  pointer-events: auto;
  width: 100%;
  max-width: 560px;
  border-radius: 14px;
  overflow: hidden;
  background: #1a0a2e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.pfh-bar { height: 3px; background: linear-gradient(90deg, var(--fo-pink), rgba(255, 31, 122, 0.3)); }
.pfh-screen { position: relative; aspect-ratio: 16 / 9; background: var(--fo-dark); }
.pfh-screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pfh .pfh-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end;
  padding: 0 clamp(10px, 3%, 20px) clamp(10px, 4%, 22px);
  border: 0;
  background: transparent;
  cursor: pointer;
}
.pfh .pfh-play[hidden] { display: none; }
.pfh-play-dot {
  display: grid;
  place-items: center;
  width: clamp(44px, 12%, 68px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--fo-ink);
  box-shadow: 0 10px 30px rgba(13, 0, 32, 0.4);
  transition: transform 0.35s var(--fo-ease-out);
}
.pfh .pfh-play:hover .pfh-play-dot, .pfh .pfh-play:focus-visible .pfh-play-dot { transform: scale(1.06); }
.pfh .pfh-play:focus-visible { outline: 3px solid var(--fo-pink); outline-offset: -3px; }
.pfh .pfh-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* מחוץ למסך הכל עומד: האנימציות רצות רק כשהסקשן נראה */
.pfh:not(.is-on)::before,
.pfh:not(.is-on) .pfh-star,
.pfh:not(.is-on) .pfh-fstar,
.pfh:not(.is-on) .pfh-planet,
.pfh:not(.is-on) .pfh-ring,
.pfh:not(.is-on) .pfh-card,
.pfh:not(.is-on) .pfh-card-dot { animation-play-state: paused; }

/* טאבלט: הסרט מעל הכותרת והשדה, כמו במקור */
@media (max-width: 860px) {
  .pfh-inner { grid-template-columns: 1fr; gap: 36px; }
  .pfh-visual { order: -1; top: 0; height: auto; max-width: 560px; margin: 0 auto; padding: 34px 18px 44px; min-width: 0; }
  .pfh-text { order: 1; text-align: center; min-width: 0; }
  .pfh .pfh-title, .pfh .pfh-sub, .pfh .pfh-form { margin-left: auto; margin-right: auto; }
  .pfh-plx-1 { position: relative; inset: auto; width: 100%; }
  .pfh-player { min-width: 0; }
  .pfh-ring { width: 420px; height: 420px; margin: -210px 0 0 -210px; }
  .pfh-plx-2, .pfh-plx-3, .pfh-plx-4 { zoom: 0.6; }
  .pfh-plx-4 { left: 2%; top: 0; }
  .pfh-plx-2 { right: 2%; top: -4%; }
  .pfh-plx-3 { left: 4%; bottom: 0; }
  .pfh .pfh-legal { text-wrap: balance; }
}
/* טלפון צר: כפתור קטן יותר, כדי שה-placeholder ייכנס כולו */
@media (max-width: 480px) {
  .pfh .pfh-url button { min-width: 96px; padding: 14px 18px; }
}
/* טלפון: בלי טבעת, ובלי כניסה מונפשת */
@media (max-width: 600px) {
  .pfh { min-height: auto; padding: 76px 20px 40px; }
  .pfh-plx-ring { display: none; }
  .pfh .pfh-title { font-size: clamp(1.75rem, 8vw, 2.4rem); line-height: 1.02; margin-bottom: 14px; }
  .pfh .pfh-sub { font-size: 0.95rem; margin-bottom: 20px; line-height: 1.5; }
}
@media (max-width: 767px) {
  .pfh .pfh-reveal, .pfh .pfh-line > span { opacity: 1; transform: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pfh .pfh-reveal, .pfh .pfh-line > span { opacity: 1; transform: none; transition: none; }
  .pfh::before, .pfh *, .pfh *::before, .pfh *::after { animation: none !important; }
  .pfh-plx, .pfh-plx-ring { transform: none !important; }
  .pfh-play-dot { transition: none; }
}